:root {
    --ink: #263330;
    --muted: #66736e;
    --line: #dce4dd;
    --cream: #f8f7f2;
    --paper: #fffefa;
    --mint: #dceee3;
    --green: #245c4c;
    --green-dark: #183f34;
    --peach: #f4d7c5;
    --serif: "Fraunces", Georgia, serif;
    --sans: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html:has(.home-shell) { scroll-snap-type: y mandatory; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }

.shell { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
.home-shell { padding: 0; }
.home-panel { min-height: 100svh; padding-top: 26px; scroll-snap-align: start; }
.site-nav, .test-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { font-size: 1.05rem; font-weight: 700; letter-spacing: -.03em; display: inline-flex; align-items: center; gap: 8px; }
.brand-mark { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: var(--paper); background: var(--green); font-size: .82rem; }
.nav-note { font-size: .82rem; color: var(--muted); }
.eyebrow { margin: 0 0 13px; color: var(--green); font-weight: 700; font-size: .72rem; letter-spacing: .11em; text-transform: uppercase; }

.home-feature-layout { margin-top: 25px; }.home-feature-stage { --hero-card-height: clamp(590px, 72svh, 680px); position: relative; z-index: 0; height: var(--hero-card-height); display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, .8fr); align-items: stretch; gap: 22px; }.home-feature-stage::before { content: ""; position: absolute; z-index: -1; inset: 0 auto 0 50%; width: 100vw; transform: translateX(-50%); background: var(--mint); }.hero-clip { min-width: 0; height: 100%; overflow: hidden; }.hero { height: 100%; min-height: 0; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 34px; padding: 48px 7%; margin: 0; background: transparent; overflow: hidden; }
.hero h1, .question-layout h1, .result-card h1 { font-family: var(--serif); letter-spacing: -.055em; line-height: .98; }
.hero h1 { max-width: 620px; margin: 0; font-size: clamp(3rem, 6vw, 5.1rem); }
.hero h1 em { color: var(--green); font-style: italic; }
.lead { max-width: 460px; color: #51635c; font-size: 1.08rem; line-height: 1.65; margin: 25px 0; }
.text-link { display: inline-flex; gap: 9px; color: var(--green); border-bottom: 1px solid currentColor; padding-bottom: 4px; font-weight: 700; }
.hero-orbit { position: relative; width: min(290px, 100%); aspect-ratio: 1; justify-self: center; }
.orbit-ring { position: absolute; inset: 5%; border: 1px solid rgba(36, 92, 76, .26); border-radius: 50%; }
.orbit-ring-two { inset: 18%; border-style: dashed; animation: spin 22s linear infinite; }
.orbit-core { position: absolute; inset: 31%; display: grid; align-content: center; text-align: center; border-radius: 50%; color: var(--paper); background: var(--green); font-family: var(--serif); font-size: 2.4rem; line-height: .8; box-shadow: 0 16px 30px rgba(36, 92, 76, .19); }
.orbit-core span { font-family: var(--sans); font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.spark { position: absolute; color: var(--green); font-size: 1.4rem; }.spark-one { top: 1%; right: 12%; }.spark-two { bottom: 2%; left: 8%; font-size: .9rem; }
.home-tests-cta { display: grid; place-items: center; min-width: 0; }.tests-circle-link { width: clamp(180px, 17vw, 230px); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; color: var(--paper); background: var(--green-dark); text-align: center; font-size: clamp(.9rem, 1.3vw, 1.05rem); line-height: 1.05; text-transform: uppercase; letter-spacing: .08em; box-shadow: 0 18px 36px rgba(24, 63, 52, .18); transition: transform .2s ease, background .2s ease; }.tests-circle-link strong { margin-top: 3px; font: 700 clamp(1.8rem, 3vw, 2.8rem)/1 var(--serif); letter-spacing: -.04em; text-transform: none; }.tests-circle-arrow { margin-top: 18px; font-size: 1.45rem; line-height: 1; }.tests-circle-link:hover { background: var(--green); transform: translateY(-5px); }.tests-circle-link:focus-visible { outline: 3px solid var(--paper); outline-offset: 5px; }

.tests-section { min-height: 100svh; padding: clamp(48px, 9vh, 88px) 0 48px; scroll-margin-top: 0; scroll-snap-align: start; }.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 23px; }.section-heading h2 { margin: 0; font-family: var(--serif); font-size: 2.55rem; letter-spacing: -.05em; }.test-count { color: var(--muted); font-size: .88rem; }
.test-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); gap: 18px; }.test-card { min-height: 300px; padding: 28px; border: 1px solid var(--line); border-radius: 21px; background: var(--paper); display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }.test-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(28, 54, 43, .09); }.card-topline { display: flex; align-items: center; gap: 10px; color: var(--green); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }.card-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; background: var(--peach); font-size: 1rem; }.test-card h3 { font-family: var(--serif); font-size: 2rem; line-height: 1.02; letter-spacing: -.045em; margin: 30px 0 12px; }.test-card p { margin: 0; color: var(--muted); line-height: 1.55; }.card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 26px; color: var(--muted); font-size: .8rem; }.round-link { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 50%; color: var(--paper); background: var(--green); font-size: 1.3rem; transition: background .2s ease; }.round-link:hover { background: var(--green-dark); }
.disclaimer { max-width: 640px; margin: 24px auto 0; color: #849089; text-align: center; font-size: .73rem; line-height: 1.5; }

.test-body { min-height: 100vh; background: #eef4ef; }.test-shell { min-height: 100vh; width: min(920px, calc(100% - 48px)); margin: 0 auto; padding: 28px 0 55px; }.test-header { padding-bottom: 26px; border-bottom: 1px solid rgba(36, 92, 76, .15); }.test-header p { margin: 0; color: var(--muted); font-size: .85rem; }.question-layout { width: min(760px, 100%); padding: 28px 0 25px; margin: 0 auto; }.question-meta { display: flex; align-items: center; gap: 17px; color: var(--muted); font-size: .79rem; font-weight: 700; }.progress-track { flex: 1; height: 5px; border-radius: 100px; overflow: hidden; background: #d6e3d9; }.progress-value { height: 100%; background: var(--green); border-radius: inherit; transition: width .3s ease; }.question-prompt { margin: 47px 0 12px; color: var(--green); font-size: .82rem; font-weight: 700; }.question-layout h1 { margin: 0; font-size: clamp(2.25rem, 5vw, 3.75rem); }.answer-form { margin-top: 46px; }.answer-navigation { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: center; gap: 17px; }fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 11px; }.answer-option { min-height: 57px; display: flex; align-items: center; gap: 14px; padding: 10px 17px; border: 1px solid #d5dfd8; border-radius: 13px; background: rgba(255,255,255,.58); cursor: pointer; font-weight: 600; transition: border-color .18s ease, background .18s ease, transform .18s ease; }.answer-option:hover { transform: translateX(4px); border-color: #89a998; background: var(--paper); }.answer-option input { position: absolute; opacity: 0; }.custom-radio { width: 19px; height: 19px; flex: 0 0 auto; border: 1.5px solid #9cab9f; border-radius: 50%; }.answer-option input:checked + .custom-radio { border: 5px solid var(--green); }.answer-option:has(input:checked) { border-color: var(--green); background: var(--paper); }.answer-option:has(input:focus-visible) { outline: 3px solid rgba(36,92,76,.25); outline-offset: 2px; }.answer-nav { width: 52px; height: 52px; display: grid; place-items: center; padding: 0; border: 1px solid var(--green); border-radius: 50%; color: var(--green); background: var(--paper); font: 700 1.35rem/1 var(--sans); cursor: pointer; transition: transform .18s ease, color .18s ease, background .18s ease; }.answer-nav-next > span:first-child { display: none; }.answer-nav:hover { color: var(--paper); background: var(--green); transform: scale(1.06); }.answer-nav:focus-visible { outline: 3px solid rgba(36,92,76,.25); outline-offset: 3px; }.answer-nav-disabled { border-color: #ccd8cf; color: #9baaa0; background: transparent; }.answer-nav-disabled:hover { color: #9baaa0; background: transparent; transform: none; }.answer-nav-next { color: var(--paper); background: var(--green); }.answer-nav-next:hover { background: var(--green-dark); }
.button { min-height: 51px; padding: 0 20px; border: 0; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; gap: 13px; font: 700 .9rem var(--sans); cursor: pointer; transition: transform .18s ease, background .18s ease; }.button:hover { transform: translateY(-2px); }.button-primary { margin-top: 27px; color: var(--paper); background: var(--green); }.button-primary:hover { background: var(--green-dark); }.button-secondary { color: var(--green); background: transparent; border: 1px solid #bed0c4; }

.result-body { min-height: 100vh; background: #f5ede5; }.result-shell { width: min(1040px, calc(100% - 48px)); min-height: 100vh; margin: 0 auto; padding: 26px 0 36px; }.result-card { max-width: 860px; margin: clamp(60px, 12vh, 120px) auto 0; padding: clamp(32px, 7vw, 65px); text-align: center; border: 1px solid rgba(129, 83, 58, .15); border-radius: 27px; background: rgba(255,254,250,.72); box-shadow: 0 16px 45px rgba(94, 62, 44, .08); }.score-badge { width: 119px; height: 119px; display: grid; place-content: center; margin: 24px auto 16px; color: var(--green); border-radius: 50%; background: var(--mint); font-family: var(--serif); }.score-badge span { font-size: 2.8rem; line-height: .85; letter-spacing: -.07em; }.score-badge small { margin-top: 3px; font: 700 .61rem var(--sans); letter-spacing: .08em; }.result-label { margin: 0; color: var(--muted); font-size: .78rem; }.result-card h1 { margin: 17px 0 14px; font-size: clamp(2.6rem, 6vw, 4.3rem); }.result-description { max-width: 540px; margin: 0 auto; font-size: 1.11rem; line-height: 1.55; }.result-detail { max-width: 540px; margin: 14px auto 0; color: var(--muted); line-height: 1.5; }.score-line { height: 6px; max-width: 360px; margin: 31px auto 0; overflow: hidden; border-radius: 99px; background: #e6ddd5; }.score-line span { display: block; height: 100%; border-radius: inherit; background: var(--green); }.result-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 11px; margin-top: 36px; }.result-actions .button { margin: 0; }
.intro-body { min-height: 100vh; background: #f3f6f1; }.intro-shell { width: min(920px, calc(100% - 48px)); min-height: 100vh; margin: 0 auto; padding: 26px 0 40px; }.back-link { color: var(--muted); font-size: .84rem; font-weight: 600; }.intro-card { max-width: 650px; margin: clamp(55px, 11vh, 110px) auto 0; padding: clamp(32px, 7vw, 64px); border: 1px solid var(--line); border-radius: 27px; background: var(--paper); box-shadow: 0 16px 45px rgba(28,54,43,.07); }.intro-card h1 { margin: 0; font: 700 clamp(2.7rem, 6vw, 4.35rem)/.98 var(--serif); letter-spacing: -.055em; }.intro-description { max-width: 500px; margin: 22px 0; color: var(--muted); font-size: 1.08rem; line-height: 1.6; }.intro-facts { display: flex; flex-wrap: wrap; gap: 9px; margin: 25px 0; }.intro-facts span { padding: 7px 10px; border-radius: 99px; color: var(--green); background: var(--mint); font-size: .75rem; font-weight: 700; }.notice-box { display: flex; gap: 12px; align-items: flex-start; padding: 17px; border-radius: 14px; background: #f7eee8; }.notice-box > span { width: 20px; height: 20px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #a87457; border-radius: 50%; color: #805237; font: 700 .72rem Georgia, serif; }.notice-box p { display: grid; gap: 4px; margin: 0; color: #624c3e; font-size: .85rem; line-height: 1.45; }.notice-box strong { font-size: .81rem; }.intro-card form .button { width: 100%; margin-top: 26px; }
.result-symbol { width: 92px; height: 92px; display: grid; place-items: center; margin: 22px auto 18px; border-radius: 50%; color: var(--green); background: var(--mint); font-size: 2rem; }.area-results { margin: 38px auto 0; padding-top: 34px; border-top: 1px solid #e4ddd5; text-align: left; }.area-results-heading { max-width: 600px; margin: 0 auto 24px; text-align: center; }.area-results-heading .eyebrow { margin: 0 0 8px; }.area-results-heading h2 { margin: 0; font: 700 clamp(1.9rem, 4vw, 2.7rem)/1.08 var(--serif); letter-spacing: -.035em; }.area-results-heading > p:last-child { margin: 12px auto 0; color: var(--muted); line-height: 1.5; }.area-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }.area-result-card { padding: 22px; border: 1px solid rgba(36,92,76,.14); border-radius: 17px; background: rgba(255,255,255,.55); }.area-result-card h3 { min-height: 2.7em; margin: 0 0 18px; color: var(--ink); font: 700 1.17rem/1.35 var(--serif); }.area-presence-label { display: flex; justify-content: space-between; margin-bottom: 7px; color: var(--green); font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }.area-presence-track { height: 8px; overflow: hidden; border-radius: 99px; background: #dce6de; }.area-presence-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #88b9a0, var(--green)); transition: width .45s ease; }.area-result-card > p { margin: 17px 0 0; color: #57655e; font-size: .95rem; line-height: 1.58; }
.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; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (min-width: 901px) and (max-height: 800px) { .home-panel { padding-top: 14px; }.home-feature-layout { margin-top: 14px; }.home-feature-stage { --hero-card-height: clamp(430px, calc(100svh - 165px), 560px); gap: 18px; }.hero { gap: 20px; padding: 24px 5%; }.hero h1 { font-size: clamp(2.7rem, 4vw, 3.5rem); }.hero-orbit { width: min(190px, 100%); }.lead { margin: 12px 0; font-size: .9rem; line-height: 1.45; }.text-link { font-size: .9rem; }.tests-circle-link { width: clamp(150px, 15vw, 185px); }.tests-circle-arrow { margin-top: 12px; } }
@media (max-width: 900px) { .home-feature-stage { height: auto; grid-template-columns: 1fr; gap: 0; }.hero-clip { height: auto; overflow: visible; }.hero { height: auto; min-height: 0; padding-inline: 9%; }.home-tests-cta { padding: 0 0 48px; }.tests-circle-link { width: 170px; } }
@media (max-width: 680px) { .shell, .test-shell, .result-shell { width: min(100% - 32px, 1120px); }.home-panel { padding-top: 26px; }.hero { grid-template-columns: 1fr; gap: 40px; padding: 52px 28px 34px; margin-bottom: 0; }.hero-orbit { width: 210px; }.home-tests-cta { padding-bottom: 38px; }.tests-circle-link { width: 150px; }.nav-note, .test-header p { display: none; }.tests-section { padding-top: 52px; }.question-layout { padding-top: 24px; }.question-layout h1 { font-size: 2.4rem; }.answer-form { margin-top: 36px; }.answer-navigation { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 10px; }.answer-nav { width: 44px; height: 44px; font-size: 1.15rem; }.answer-nav-next > span:first-child { display: none; }.section-heading h2 { font-size: 2.25rem; }.result-card { padding-inline: 22px; }.area-result-grid { grid-template-columns: 1fr; }.area-result-card h3 { min-height: 0; } }