/* Diagram-style Phase 1 theme (space / dark / glass / premium SaaS).
   Design-only: keep copy, links, and auth/nav behavior intact. */

body.diagram-phase1 {
    /* Override page-local CSS variables (each page defines its own :root). */
    --ink: #f2f4f8;
    --chalk: #05060c;
    --slate: rgba(226, 232, 240, 0.78);
    --mist: rgba(226, 232, 240, 0.14);
    --concrete: rgba(226, 232, 240, 0.55);
    --accent: #d94432;
    --accent-light: #e8604f;
    --accent-pale: rgba(217, 68, 50, 0.18);

    background: var(--chalk);
    color: var(--ink);
    position: relative;
    /* Allow hero solar orbits to extend past the viewport edge (see .hero > .diagram-solar). */
    overflow-x: visible;
}

/* Stronger than moonshop-deep-space so orbits aren’t clipped at the viewport. */
body.moonshop-deep-space.diagram-phase1 {
    overflow-x: visible;
}

/* Deep-space starfield: see /css/moonshop-space.css (body.moonshop-deep-space). */

/* Hero solar system (CSS-only orbit animation; JS handles reveal/parallax) */
.diagram-solar {
    position: absolute;
    inset: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
    transform: translate3d(0, calc(var(--diagramParallaxY, 0) * -0.05px), 0) scale(var(--diagramSolarScale, 1));
    transform-origin: center;
}

body.diagram-phase1 .hero,
body.diagram-phase1 .page-hero,
body.diagram-phase1 .pricing-hero {
    position: relative;
}

/* In-flow hero column (solar is absolute); reveal blur/transform stays off the section so orbits aren’t clipped. */
body.diagram-phase1 .hero-reveal {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
}

body.diagram-phase1 .hero > *,
body.diagram-phase1 .page-hero > *,
body.diagram-phase1 .pricing-hero > * {
    position: relative;
    z-index: 1;
}

/* Keep background layers behind content. */
body.diagram-phase1 .page-hero > .diagram-solar,
body.diagram-phase1 .pricing-hero > .diagram-solar {
    position: absolute;
    z-index: 2;
}

/* Landing hero: break solar out past the content column; extra width so outer rings clear the viewport (sun ~68%). */
body.diagram-phase1 .hero > .diagram-solar {
    position: absolute;
    z-index: 2;
    inset: auto;
    top: 0;
    bottom: 0;
    left: 50%;
    width: calc(100vw + 260px);
    margin-left: calc(-50vw - 130px);
    overflow: visible;
}

/* Sun (center) */
.diagram-solar .sun {
    position: absolute;
    left: var(--solarX, 50%);
    top: var(--solarY, 50%);
    width: var(--sunSize, 54px);
    height: var(--sunSize, 54px);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 48%),
        radial-gradient(circle at 55% 60%, rgba(255, 214, 96, 1), rgba(217, 68, 50, 0.18) 60%),
        radial-gradient(circle at 50% 50%, rgba(255, 214, 96, 0.22), rgba(0, 0, 0, 0) 70%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.10),
        0 0 90px rgba(217, 68, 50, 0.22),
        0 0 160px rgba(217, 68, 50, 0.10),
        0 0 220px rgba(255, 214, 96, 0.08);
    filter: saturate(1.1);
    opacity: 0.98;
    z-index: 3;
    mix-blend-mode: screen;
    animation: diagramSunPulse 2.8s ease-in-out infinite;
}

@keyframes diagramSunPulse {
    0% { transform: translate(-50%, -50%) scale(1); filter: brightness(1.02) saturate(1.1); }
    50% { transform: translate(-50%, -50%) scale(1.02); filter: brightness(1.10) saturate(1.2); }
    100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1.02) saturate(1.1); }
}

/* Orbit rings (visual-only) */
.diagram-solar .orbit-ring {
    position: absolute;
    left: var(--solarX, 50%);
    top: var(--solarY, 50%);
    width: calc(var(--radius, 100px) * 2);
    height: calc(var(--radius, 100px) * 2);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(226, 232, 240, 0.10);
    opacity: 0.9;
    box-shadow: 0 0 18px rgba(217, 68, 50, 0.06);
}

/* Planets */
.diagram-solar .planet {
    position: absolute;
    left: var(--solarX, 50%);
    top: var(--solarY, 50%);
    width: var(--size, 10px);
    height: var(--size, 10px);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.10),
        0 0 38px var(--planetGlow, rgba(217, 68, 50, 0.18));
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 56%),
        radial-gradient(circle at 60% 60%, var(--planetColor, rgba(217, 68, 50, 0.95)), rgba(0, 0, 0, 0.15) 70%);
    will-change: transform;
    animation-name: diagramPlanetOrbit;
    animation-duration: var(--duration, 30s);
    animation-delay: var(--delay, 0s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    opacity: 0.92;
    z-index: 2;
    mix-blend-mode: screen;
}

/* Saturn ring accent for faster visual recognition. */
.diagram-solar .planet-saturn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--size, 16px) * 2.2);
    height: calc(var(--size, 16px) * 0.78);
    transform: translate(-50%, -50%) rotate(-18deg);
    border-radius: 50%;
    border: 1.4px solid rgba(244, 228, 174, 0.88);
    box-shadow: 0 0 10px rgba(244, 228, 174, 0.22);
    pointer-events: none;
}

@keyframes diagramPlanetOrbit {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) translateX(var(--radius, 100px));
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg) translateX(var(--radius, 100px));
    }
}

@media (max-width: 520px) {
    body.diagram-phase1 .diagram-solar { --diagramSolarScale: 0.62; }
}

/* Reveal animations (smooth fade-in on scroll) */
[data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(6px);
    transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.8,.2,1), filter 700ms ease;
    /* Until visible, ignore pointer events so semi-transparent/blurred UI does not steal clicks. */
    pointer-events: none;
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    body.diagram-phase1 .diagram-solar .planet,
    body.diagram-phase1 .diagram-solar .sun {
        animation: none !important;
    }
    body.diagram-phase1 [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}

/* Hover polish for glass cards and buttons */
body.diagram-phase1 a,
body.diagram-phase1 button {
    -webkit-tap-highlight-color: transparent;
}

body.diagram-phase1 .problem-item,
body.diagram-phase1 .step,
body.diagram-phase1 .agent-card,
body.diagram-phase1 .benefit-card,
body.diagram-phase1 .trust-item,
body.diagram-phase1 .tier-card,
body.diagram-phase1 .faq-item,
body.diagram-phase1 .design-partners,
body.diagram-phase1 .outputs-note,
body.diagram-phase1 .problem-inner,
body.diagram-phase1 .audience-inner,
body.diagram-phase1 .benefits-inner,
body.diagram-phase1 .trust-inner,
body.diagram-phase1 .proof-inner {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(226, 232, 240, 0.12);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* Prevent text from sitting flush against the glass border on wrappers. */
    padding: 1.75rem;
}

body.diagram-phase1 .trust-inner {
    border-radius: 16px;
}

/* Full-bleed glass section rails (viewport width); text column stays centered via padding. */
body.diagram-phase1 .problem,
body.diagram-phase1 .audience,
body.diagram-phase1 .benefits,
body.diagram-phase1 .proof {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0;
    margin-right: 0;
    position: relative;
    z-index: 4; /* keep glass panels above the hero solar orbit overlay */
}

/* Problem section is the first hero follow-up; give it a subtle opaque base
   (less see-through than the original, but not overly frosted). */
body.diagram-phase1 .problem {
    background: rgba(5, 6, 12, 0.90) !important;
}

body.diagram-phase1 .problem-inner,
body.diagram-phase1 .audience-inner,
body.diagram-phase1 .benefits-inner,
body.diagram-phase1 .proof-inner {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
    position: relative;
    z-index: 5;
    left: auto;
    transform: none;
}

body.diagram-phase1 .problem-inner {
    padding-left: max(1.5rem, calc((100vw - 900px) / 2));
    padding-right: max(1.5rem, calc((100vw - 900px) / 2));
    /* Remove glass background; rely on the parent section for the panel fill. */
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: transparent !important;
    border: none !important;
    box-sizing: border-box;
}

body.diagram-phase1 .audience-inner,
body.diagram-phase1 .benefits-inner {
    padding-left: max(1.5rem, calc((100vw - 1000px) / 2));
    padding-right: max(1.5rem, calc((100vw - 1000px) / 2));
}

body.diagram-phase1 .proof-inner {
    padding-left: max(1.5rem, calc((100vw - 900px) / 2));
    padding-right: max(1.5rem, calc((100vw - 900px) / 2));
}

body.diagram-phase1 .agent-card:hover,
body.diagram-phase1 .tier-card:hover,
body.diagram-phase1 .step:hover,
body.diagram-phase1 .problem-item:hover,
body.diagram-phase1 .benefit-card:hover,
body.diagram-phase1 .trust-item:hover {
    border-color: rgba(217, 68, 50, 0.30);
    box-shadow: 0 12px 55px rgba(0, 0, 0, 0.35), 0 0 40px rgba(217, 68, 50, 0.12);
}

/* Navigation reskin (kept scoped to Phase 1 only) */
body.diagram-phase1 nav {
    background: rgba(5, 6, 12, 0.62) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.10) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    /* Match pricing.html: same horizontal inset and bar height on every Phase 1 page */
    padding: 0 2rem !important;
    height: 60px !important;
    box-sizing: border-box !important;
}

body.diagram-phase1 .nav-links {
    gap: 0.35rem 0.5rem !important;
}

body.diagram-phase1 .nav-link {
    font-size: 0.88rem !important;
    padding: 0.4rem 0.75rem !important;
    border-radius: 6px !important;
    color: rgba(226, 232, 240, 0.75) !important;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

body.diagram-phase1 .nav-link:hover {
    color: var(--accent) !important;
}

body.diagram-phase1 .nav-link.active {
    color: var(--accent) !important;
    font-weight: 600 !important;
}

body.diagram-phase1 .nav-cta {
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
    font-size: 0.88rem !important;
    margin-left: 0.5rem !important;
}

@media (max-width: 768px) {
    /* Keep pricing-aligned nav; do not shrink inset/height per home/about local breakpoints */
    body.diagram-phase1 nav {
        padding: 0 2rem !important;
        height: 60px !important;
    }
}

body.diagram-phase1 .nav-cta:hover {
    background: var(--accent-light) !important;
}

body.diagram-phase1 .nav-upgrade-btn {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    padding: 0.35rem 0.85rem !important;
    border: none !important;
    border-radius: 6px !important;
    background: var(--accent) !important;
    color: #fff !important;
    cursor: pointer;
    margin-left: 0.35rem;
}

body.diagram-phase1 .nav-upgrade-btn:hover {
    background: var(--accent-light) !important;
}

body.diagram-phase1 .nav-user {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(226, 232, 240, 0.14);
    color: rgba(226, 232, 240, 0.85);
}

body.diagram-phase1 button.nav-logout {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(226, 232, 240, 0.78);
    border-color: rgba(226, 232, 240, 0.16);
}

body.diagram-phase1 button.nav-logout:hover {
    background: rgba(255, 255, 255, 0.07);
}

body.diagram-phase1 .nav-agent {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(226, 232, 240, 0.14) !important;
    color: rgba(226, 232, 240, 0.88) !important;
}

body.diagram-phase1 .nav-agent:hover {
    background: rgba(255, 255, 255, 0.07) !important;
}

body.diagram-phase1 .nav-agent.nav-agent-soon {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(226, 232, 240, 0.10) !important;
    color: rgba(226, 232, 240, 0.55) !important;
}

/* Buttons (non-inline styling target) */
.btn-primary-diagram {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.85rem 2rem;
    background: var(--accent);
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    transition: transform 160ms ease, background 160ms ease, box-shadow 220ms ease;
    box-shadow: 0 10px 30px rgba(217, 68, 50, 0.22);
}

.btn-primary-diagram:hover {
    background: var(--accent-light);
    transform: translateY(-1px);
    box-shadow: 0 18px 48px rgba(217, 68, 50, 0.26);
}

/* Also restyle existing .btn-primary used on About page */
body.diagram-phase1 .btn-primary {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.85rem 2rem;
    background: var(--accent);
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    transition: transform 160ms ease, background 160ms ease, box-shadow 220ms ease;
    box-shadow: 0 10px 30px rgba(217, 68, 50, 0.22);
}

body.diagram-phase1 .btn-primary:hover {
    background: var(--accent-light);
    transform: translateY(-1px);
    box-shadow: 0 18px 48px rgba(217, 68, 50, 0.26);
}

/* Pricing + FAQ */
body.diagram-phase1 .billing-toggle,
body.diagram-phase1 .card-cta,
body.diagram-phase1 .card-tier-name,
body.diagram-phase1 .faq-section h2,
body.diagram-phase1 .comparison-section h2 {
    color: var(--ink);
}

body.diagram-phase1 .pricing-hero .label,
body.diagram-phase1 .section-label,
body.diagram-phase1 .diff-label,
body.diagram-phase1 .agents-label,
body.diagram-phase1 .how-label,
body.diagram-phase1 .trust .section-label,
body.diagram-phase1 .proof .section-label {
    color: var(--accent) !important;
}

body.diagram-phase1 .tier-card {
    background: rgba(255, 255, 255, 0.035) !important;
}

body.diagram-phase1 .tier-card.recommended .recommended-badge {
    background: var(--accent) !important;
    color: #fff !important;
}

body.diagram-phase1 .card-cta {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(226, 232, 240, 0.16) !important;
    color: var(--ink) !important;
}

body.diagram-phase1 .tier-card.recommended .card-cta {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

/* Downgrade / cancel on Pro card: beat .recommended .card-cta accent */
body.diagram-phase1 .tier-card.recommended .card-cta.tier-lower-btn {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(226, 232, 240, 0.22) !important;
    color: rgba(226, 232, 240, 0.68) !important;
}
body.diagram-phase1 .tier-card.recommended .card-cta.tier-lower-btn:hover:not(:disabled) {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}
body.diagram-phase1 .tier-card.recommended .card-cta.tier-downgrade-scheduled {
    background: rgba(217, 68, 50, 0.12) !important;
    border-color: rgba(217, 68, 50, 0.42) !important;
    color: rgba(255, 200, 190, 0.95) !important;
}

/* Primary upsell = immediate next tier only (set by pricing page JS) */
body.diagram-phase1 .tier-card .card-cta.tier-upgrade-primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}
body.diagram-phase1 .tier-card .card-cta.tier-upgrade-primary:hover:not(:disabled) {
    background: var(--accent-light) !important;
    border-color: var(--accent-light) !important;
    color: #fff !important;
}

body.diagram-phase1 .billing-toggle {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(226, 232, 240, 0.14) !important;
}

body.diagram-phase1 .toggle-track {
    background: rgba(226, 232, 240, 0.18) !important;
}

/* Annual on: accent track (override generic .toggle-track rule above) */
body.diagram-phase1 .toggle-switch input:checked + .toggle-track {
    background: var(--accent) !important;
}

body.diagram-phase1 .save-badge {
    background: rgba(46, 204, 113, 0.14) !important;
    color: rgba(210, 248, 230, 0.95) !important;
    border: 1px solid rgba(46, 204, 113, 0.35);
}

body.diagram-phase1 .pricing-hero p,
body.diagram-phase1 .hero-sub,
body.diagram-phase1 .solution-intro,
body.diagram-phase1 .problem-text,
body.diagram-phase1 .trust-intro,
body.diagram-phase1 .proof p,
body.diagram-phase1 .cta-section p {
    color: rgba(226, 232, 240, 0.74);
}

body.diagram-phase1 .comparison-table {
    color: rgba(226, 232, 240, 0.86);
}

body.diagram-phase1 .comparison-table th {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom-color: rgba(226, 232, 240, 0.12) !important;
}

body.diagram-phase1 .comparison-table td {
    border-bottom-color: rgba(226, 232, 240, 0.10) !important;
    color: rgba(226, 232, 240, 0.78) !important;
}

body.diagram-phase1 .comparison-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

/* Pricing recommended column (Pro) should stay dark like the rest. */
body.diagram-phase1 .comparison-table th.col-recommended {
    background: rgba(217, 68, 50, 0.16) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    border-bottom-color: rgba(217, 68, 50, 0.28) !important;
}

body.diagram-phase1 .comparison-table td.col-recommended {
    background: rgba(217, 68, 50, 0.10) !important;
    color: rgba(255, 255, 255, 0.90) !important;
    border-bottom-color: rgba(217, 68, 50, 0.18) !important;
}

body.diagram-phase1 .comparison-table tbody tr:hover td.col-recommended {
    background: rgba(217, 68, 50, 0.20) !important;
}

body.diagram-phase1 .comparison-table th.col-recommended small {
    color: rgba(255, 255, 255, 0.78) !important;
}

/* Section divider rows (ANALYSIS / EXPORTS / DATA & ACCESS) in dark mode */
body.diagram-phase1 .comparison-table tr.tg-section td {
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(241, 244, 248, 0.92) !important;
    border-bottom-color: rgba(226, 232, 240, 0.16) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

body.diagram-phase1 .comparison-table tr.tg-section td:first-child {
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(241, 244, 248, 0.92) !important;
}

body.diagram-phase1 .faq-item {
    border-bottom-color: rgba(226, 232, 240, 0.14);
}

/* Footer */
body.diagram-phase1 footer {
    border-top-color: rgba(226, 232, 240, 0.12) !important;
    color: rgba(226, 232, 240, 0.58) !important;
}

/* Section wrapper backgrounds (these pages use var(--ink) for light-theme blocks). */
body.diagram-phase1 .problem,
body.diagram-phase1 .audience,
body.diagram-phase1 .proof,
body.diagram-phase1 .close-section {
    background: rgba(255, 255, 255, 0.03) !important;
    color: rgba(226, 232, 240, 0.86) !important;
}

body.diagram-phase1 .agents,
body.diagram-phase1 .benefits {
    background: rgba(217, 68, 50, 0.07) !important;
}

/* Final override for the first landing glass block so it matches the intended "panel"
   look and reaches the full viewport width reliably (wins against earlier !important rules). */
body.diagram-phase1 .problem {
    background: rgba(5, 6, 12, 0.90) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    z-index: 4;
}