:root {
    --zo-green-950: #09291f;
    --zo-green-900: #12372a;
    --zo-green-700: #28624c;
    --zo-green-100: #e8f0e9;
    --zo-sun: #f4b942;
    --zo-sun-light: #ffdf94;
    --zo-cream: #f8f5ec;
    --zo-ink: #15231d;
    --zo-muted: #607069;
    --zo-white: #fffefa;
    --bs-body-font-family: "Dosis", sans-serif;
    --bs-body-color: var(--zo-ink);
    --bs-body-bg: var(--zo-cream);
    color-scheme: light;
    font-optical-sizing: auto;
    font-style: normal;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    font-size: 1.08rem;
}

a {
    text-underline-offset: 0.2em;
}

.skip-link {
    position: fixed;
    z-index: 1100;
    margin: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    color: var(--zo-green-950);
    background: white;
}

.navbar {
    padding-block: 1rem;
    background: rgb(9 41 31 / 88%);
    backdrop-filter: blur(16px);
    transition: padding 180ms ease, box-shadow 180ms ease;
}

.navbar.navbar--scrolled {
    padding-block: 0.65rem;
    box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 12%);
}

.navbar-brand,
.footer-brand {
    color: inherit;
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
}

.navbar-brand,
.navbar-brand:hover,
.navbar-brand:focus {
    color: white;
}

.brand-mark {
    display: inline-grid;
    width: 2.55rem;
    height: 2.55rem;
    place-items: center;
    border-radius: 50%;
    color: var(--zo-green-950);
    background: var(--zo-sun);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.navbar .nav-link {
    color: rgb(255 255 255 / 78%);
    font-weight: 600;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: white;
}

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: white;
    background:
        linear-gradient(120deg, rgb(9 41 31 / 98%), rgb(18 55 42 / 92%)),
        var(--zo-green-950);
}

.hero::after {
    position: absolute;
    z-index: -1;
    right: -8rem;
    bottom: -16rem;
    width: min(42rem, 70vw);
    height: min(42rem, 70vw);
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: 50%;
    box-shadow:
        0 0 0 5rem rgb(255 255 255 / 3%),
        0 0 0 10rem rgb(255 255 255 / 2%);
    content: "";
}

.hero-orb {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(2px);
}

.hero-orb--one {
    top: 16%;
    right: 12%;
    width: 18rem;
    height: 18rem;
    background: radial-gradient(circle at 35% 35%, var(--zo-sun-light), var(--zo-sun));
    opacity: 0.95;
}

.hero-orb--two {
    top: 32%;
    right: 27%;
    width: 4rem;
    height: 4rem;
    border: 1px solid rgb(255 255 255 / 50%);
}

.eyebrow,
.section-kicker {
    color: var(--zo-sun);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.hero h1 {
    max-width: 10ch;
    font-size: clamp(4rem, 9vw, 7.7rem);
    letter-spacing: -0.055em;
    line-height: 0.88;
}

.hero h1 span {
    color: var(--zo-sun);
}

.hero-lead {
    max-width: 36rem;
    color: rgb(255 255 255 / 76%);
    font-size: clamp(1.2rem, 2.2vw, 1.55rem);
    line-height: 1.55;
}

.btn {
    border-radius: 999px;
    font-weight: 700;
}

.btn-sun {
    border-color: var(--zo-sun);
    color: var(--zo-green-950);
    background: var(--zo-sun);
}

.btn-sun:hover,
.btn-sun:focus {
    border-color: var(--zo-sun-light);
    color: var(--zo-green-950);
    background: var(--zo-sun-light);
    transform: translateY(-2px);
}

.scroll-cue {
    position: absolute;
    bottom: 2rem;
    left: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgb(255 255 255 / 68%);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
}

.scroll-cue:hover {
    color: white;
}

.section-padding {
    padding-block: clamp(5rem, 9vw, 8rem);
}

.section-title {
    max-width: 14ch;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
}

.section-intro {
    color: var(--zo-muted);
    font-size: 1.2rem;
    line-height: 1.65;
}

.principles {
    background: var(--zo-white);
}

.principle-card {
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 4vw, 3rem);
    border: 1px solid #dfe7e0;
    border-radius: 1.5rem;
    background: var(--zo-green-100);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.principle-card:hover {
    transform: translateY(-0.4rem);
    box-shadow: 0 1.5rem 3rem rgb(18 55 42 / 12%);
}

.principle-card--sun {
    border-color: var(--zo-sun);
    background: var(--zo-sun);
}

.principle-number {
    display: block;
    margin-bottom: 3.5rem;
    color: var(--zo-green-700);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.principle-card h3 {
    font-size: 2rem;
    font-weight: 700;
}

.principle-card p {
    margin-bottom: 0;
    color: #41544c;
    line-height: 1.65;
}

.section-title--wide {
    max-width: 20ch;
}

.section-title--light {
    color: white;
}

.choice-section {
    background: var(--zo-white);
}

.choice-card {
    padding: clamp(2rem, 4vw, 3rem);
    border: 1px solid #dfe7e0;
    border-radius: 1.5rem;
    background: var(--zo-green-100);
    box-shadow: 0 1.5rem 3rem rgb(18 55 42 / 8%);
}

.choice-card--sun {
    border-color: var(--zo-sun);
    background: var(--zo-sun);
}

.choice-icon {
    display: inline-grid;
    min-width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 2.5rem;
    padding-inline: 0.75rem;
    place-items: center;
    border-radius: 999px;
    color: white;
    background: var(--zo-green-900);
    font-size: 1rem;
    font-weight: 800;
}

.choice-label {
    margin-bottom: 0.35rem;
    color: var(--zo-green-700);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.choice-card h3 {
    margin-bottom: 1.25rem;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
}

.choice-card > p:last-child {
    margin-bottom: 0;
    color: #41544c;
    line-height: 1.65;
}

.simple-statement {
    margin-top: 3.5rem;
    color: var(--zo-green-900);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
}

.problem-section,
.why-section {
    position: relative;
    overflow: hidden;
    color: white;
    background: var(--zo-green-950);
}

.problem-section::after,
.why-section::after {
    position: absolute;
    right: -10rem;
    bottom: -14rem;
    width: 32rem;
    height: 32rem;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 50%;
    box-shadow: 0 0 0 5rem rgb(255 255 255 / 2%);
    content: "";
}

.problem-section .container,
.why-section .container {
    position: relative;
    z-index: 1;
}

.story-copy {
    max-width: 38rem;
    color: rgb(255 255 255 / 70%);
    font-size: 1.2rem;
    line-height: 1.7;
}

.question-stack {
    display: grid;
    gap: 1rem;
}

.question-card {
    padding: 1.75rem 2rem;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 1.25rem;
}

.question-card span {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.question-card p {
    margin: 0;
    font-size: clamp(1.35rem, 2.5vw, 1.8rem);
    font-weight: 700;
    line-height: 1.3;
}

.question-card--muted {
    color: rgb(255 255 255 / 62%);
    background: rgb(255 255 255 / 4%);
}

.question-card--accent {
    border-color: var(--zo-sun);
    color: var(--zo-green-950);
    background: var(--zo-sun);
    transform: translateX(1.5rem);
}

.content-panel {
    padding: clamp(2rem, 5vw, 3.5rem);
    border-left: 0.35rem solid var(--zo-sun);
    border-radius: 0 1.25rem 1.25rem 0;
    background: var(--zo-green-100);
    font-size: 1.15rem;
    line-height: 1.7;
}

.emphasis-line {
    color: var(--zo-green-900);
    font-size: 1.35rem;
    font-weight: 800;
}

.social-section {
    background:
        linear-gradient(rgb(255 254 250 / 92%), rgb(255 254 250 / 92%)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Ctext x='8' y='43' fill='%2312372a' fill-opacity='.06' font-family='Arial,sans-serif' font-size='35' font-weight='700' letter-spacing='3'%3EZO%3C/text%3E%3Ctext x='88' y='128' fill='%2312372a' fill-opacity='.06' font-family='Arial,sans-serif' font-size='35' font-weight='700' letter-spacing='3'%3EZO%3C/text%3E%3C/svg%3E");
}

.budget-card {
    padding: clamp(2rem, 5vw, 3.5rem);
    border-radius: 1.5rem;
    color: white;
    background: var(--zo-green-900);
    box-shadow: 1rem 1rem 0 var(--zo-sun);
}

.budget-card__label {
    display: block;
    margin-bottom: 1.5rem;
    color: var(--zo-sun);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.budget-card li {
    padding-block: 0.75rem;
    border-bottom: 1px solid rgb(255 255 255 / 14%);
    font-size: 1.35rem;
    font-weight: 700;
}

.budget-card li:last-child {
    border-bottom: 0;
}

.steps-section {
    background: var(--zo-cream);
}

.step-card {
    padding: 2rem;
    border: 1px solid #dfe4de;
    border-radius: 1.25rem;
    background: var(--zo-white);
}

.step-card > span {
    display: inline-grid;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 2.5rem;
    place-items: center;
    border-radius: 50%;
    color: var(--zo-green-950);
    background: var(--zo-sun);
    font-weight: 800;
}

.step-card h3 {
    font-size: 1.65rem;
    font-weight: 700;
}

.step-card p {
    margin-bottom: 0;
    color: var(--zo-muted);
}

.outcome-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.outcome-line span {
    padding: 0.55rem 1rem;
    border: 1px solid rgb(18 55 42 / 15%);
    border-radius: 999px;
    color: var(--zo-green-900);
    background: var(--zo-green-100);
    font-size: 0.9rem;
    font-weight: 700;
}

.values-section {
    background: var(--zo-white);
}

.value-card {
    padding: 1.75rem 1.5rem;
    border-top: 0.3rem solid var(--zo-sun);
    border-radius: 0 0 1rem 1rem;
    background: var(--zo-green-100);
}

.value-card strong {
    display: block;
    margin-bottom: 1rem;
    color: var(--zo-green-900);
    font-size: 1.35rem;
}

.value-card p {
    margin: 0;
    color: #4a5d54;
    line-height: 1.55;
}

.reason-list li {
    position: relative;
    padding: 0.8rem 0 0.8rem 2rem;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
    color: rgb(255 255 255 / 78%);
    font-size: 1.1rem;
}

.reason-list li::before {
    position: absolute;
    left: 0;
    color: var(--zo-sun);
    content: "→";
    font-weight: 800;
}

.closing-statement {
    color: white;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 700;
    line-height: 1.15;
}

.closing-statement span {
    color: var(--zo-sun);
}

.final-cta {
    color: white;
    background: var(--zo-green-900);
}

.final-cta h2 {
    max-width: 18ch;
    margin: 1rem auto;
    font-size: clamp(2.75rem, 6vw, 5.5rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 0.95;
}

.final-cta > .container > p:not(.simple-statement) {
    color: rgb(255 255 255 / 72%);
    font-size: 1.25rem;
}

.final-cta .simple-statement {
    color: var(--zo-sun);
}

.manifest-section {
    background-color: var(--zo-cream);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Ctext x='8' y='43' fill='%2312372a' fill-opacity='.06' font-family='Arial,sans-serif' font-size='35' font-weight='700' letter-spacing='3'%3EZO%3C/text%3E%3Ctext x='88' y='128' fill='%2312372a' fill-opacity='.06' font-family='Arial,sans-serif' font-size='35' font-weight='700' letter-spacing='3'%3EZO%3C/text%3E%3C/svg%3E");
}

.manifest-sidebar {
    top: 7rem;
    padding: 1.75rem;
    border: 1px solid rgb(18 55 42 / 12%);
    border-radius: 1.25rem;
    background: rgb(255 254 250 / 88%);
    box-shadow: 0 1rem 3rem rgb(18 55 42 / 8%);
    backdrop-filter: blur(12px);
}

.sync-date,
.document-meta,
.toc-label {
    color: var(--zo-muted);
    font-size: 0.85rem;
}

.toc-label {
    margin-bottom: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.toc li + li {
    margin-top: 0.25rem;
}

.toc a {
    display: block;
    padding: 0.35rem 0.6rem;
    border-left: 2px solid transparent;
    color: #52635b;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

.toc a:hover,
.toc a.active {
    border-left-color: var(--zo-sun);
    color: var(--zo-green-900);
    background: rgb(244 185 66 / 10%);
}

.toc a.toc-subitem {
    padding-left: 1.25rem;
    font-size: 0.82rem;
}

.document-shell {
    overflow: hidden;
    border: 1px solid rgb(18 55 42 / 10%);
    border-radius: 1.5rem;
    background: var(--zo-white);
    box-shadow: 0 1.5rem 4rem rgb(18 55 42 / 10%);
}

.document-header {
    padding: 1.25rem clamp(1.5rem, 5vw, 4rem);
    border-bottom: 1px solid #e6e5de;
    background: #f5f1e5;
}

.document-content,
.document-empty {
    padding: clamp(2rem, 6vw, 5rem);
}

.document-content {
    color: #2e3b35;
    font-size: 1.08rem;
    line-height: 1.75;
}

.document-content > :first-child {
    margin-top: 0;
}

.document-content h1,
.document-content h2,
.document-content h3,
.document-content h4 {
    color: var(--zo-green-950);
    font-weight: 700;
    letter-spacing: -0.025em;
    scroll-margin-top: 6rem;
}

.document-content h1 {
    margin: 4rem 0 1.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e6e2;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
}

.document-content h1:first-of-type {
    margin-top: 1.5rem;
    padding-top: 0;
    border-top: 0;
}

.document-content h2 {
    margin: 2.5rem 0 1rem;
    font-size: 1.65rem;
}

.document-content h3,
.document-content h4 {
    margin: 2rem 0 0.75rem;
    font-size: 1.3rem;
}

.document-content :is(p, ul, ol, blockquote, table) {
    margin-bottom: 1.4rem;
}

.document-content :is(ul, ol) {
    padding-left: 1.4rem;
}

.document-content li {
    padding-left: 0.35rem;
}

.document-content li + li {
    margin-top: 0.45rem;
}

.document-content a {
    color: #9a6300;
    font-weight: 650;
}

.document-content blockquote {
    position: relative;
    padding: 1.75rem 2rem 1.75rem 4.25rem;
    border-left: 0.35rem solid var(--zo-sun);
    border-radius: 0 1rem 1rem 0;
    color: var(--zo-green-900);
    background: #fff8e4;
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    font-weight: 600;
    line-height: 1.55;
}

.document-content blockquote::before {
    position: absolute;
    top: 0.75rem;
    left: 1.25rem;
    color: var(--zo-sun);
    content: "“";
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
}

.document-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    border-radius: 0.75rem;
}

.document-content :is(th, td) {
    min-width: 10rem;
    padding: 0.85rem 1rem;
    border: 1px solid #d9dfda;
    text-align: left;
    vertical-align: top;
}

.document-content table tr:first-child > :is(th, td) {
    color: var(--zo-sun);
    font-weight: 700;
    vertical-align: bottom;
}

.document-content th {
    color: white;
    background: var(--zo-green-900);
}

.document-content tr:nth-child(even) td {
    background: #f5f7f4;
}

.site-footer {
    padding-block: 2.5rem;
    color: rgb(255 255 255 / 72%);
    background: var(--zo-green-950);
}

.footer-brand {
    color: white;
}

.site-footer p {
    font-size: 0.95rem;
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        margin-top: 0.75rem;
        padding: 1rem;
        border: 1px solid rgb(255 255 255 / 12%);
        border-radius: 1rem;
        background: var(--zo-green-950);
    }

    .hero-orb--one {
        top: auto;
        right: -6rem;
        bottom: 8%;
        width: 14rem;
        height: 14rem;
        opacity: 0.55;
    }

    .manifest-sidebar {
        position: static;
    }

    .question-card--accent {
        transform: none;
    }
}

@media (max-width: 575.98px) {
    .hero h1 {
        font-size: clamp(3.5rem, 19vw, 5rem);
    }

    .hero .btn {
        width: 100%;
    }

    .scroll-cue {
        display: none;
    }

    .document-header,
    .document-content,
    .document-empty {
        padding-inline: 1.25rem;
    }

    .budget-card {
        box-shadow: 0.5rem 0.5rem 0 var(--zo-sun);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}