@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root { --ink: #0d1117; --ink-soft: #151b25; --paper: #f3eee4; --muted: #bdb5a7; --gold: #c9a84c; --gold-light: #e3c978; --line: rgba(201, 168, 76, .32); }
* { box-sizing: border-box; }
body { margin: 0; color: var(--paper); background: radial-gradient(ellipse at 50% -20%, #1d273c 0%, transparent 55%), var(--ink); font-family: 'DM Sans', Arial, sans-serif; min-height: 100vh; }
body::before { content: ''; inset: 0; position: fixed; pointer-events: none; opacity: .46; background-image: radial-gradient(circle at 10% 16%, #fff 0 1px, transparent 1.3px), radial-gradient(circle at 78% 20%, #fff 0 1px, transparent 1.3px), radial-gradient(circle at 32% 69%, #fff 0 1px, transparent 1.3px), radial-gradient(circle at 91% 74%, #fff 0 1px, transparent 1.3px); background-size: 230px 260px, 380px 350px, 290px 300px, 410px 390px; }
.site-shell { position: relative; overflow-x: hidden; }
h1, h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; letter-spacing: -.035em; margin: 0; }
h1 { font-size: clamp(2.7rem, 7vw, 5.8rem); line-height: 1.03; } h2 { font-size: clamp(2rem, 4vw, 3.15rem); line-height: 1.08; }
h1 em { color: var(--gold-light); } p { line-height: 1.65; }
.eyebrow { color: var(--gold-light); font-size: .69rem; font-weight: 600; letter-spacing: .19em; margin: 0 0 .85rem; text-transform: uppercase; }
.brand { color: var(--gold-light); font-family: 'Playfair Display', Georgia, serif; font-size: 1.2rem; letter-spacing: .07em; text-decoration: none; text-transform: uppercase; } .brand sup { font: .55rem 'DM Sans'; }
.welcome { align-items: center; display: flex; flex-direction: column; justify-content: center; margin: auto; max-width: 850px; min-height: 100vh; padding: 4rem 1.5rem; text-align: center; }
.constellation { color: var(--gold); font-size: 1rem; letter-spacing: .35em; margin: 0 0 1.5rem; }.lede { color: var(--gold-light); font: italic 1.35rem 'Playfair Display', Georgia, serif; margin: 1.5rem 0 .5rem; }.intro-copy { color: #d7d0c5; font-size: 1.05rem; max-width: 610px; }
.button { align-items: center; border: 1px solid var(--gold); color: var(--paper); cursor: pointer; display: inline-flex; font-size: .78rem; font-weight: 600; gap: 1rem; justify-content: center; letter-spacing: .13em; padding: 1.05rem 1.45rem; text-decoration: none; text-transform: uppercase; transition: background .2s ease, color .2s ease, transform .2s ease; }.button:hover { background: var(--gold); color: var(--ink); transform: translateY(-2px); }.button-primary { background: rgba(201, 168, 76, .09); margin-top: 1.4rem; }.button-quiet { background: transparent; border-color: transparent; color: var(--muted); }.button-quiet:hover { background: transparent; color: var(--paper); transform: none; }.button:disabled { cursor: not-allowed; opacity: .35; transform: none; }
.research-note { border-top: 1px solid var(--line); margin-top: 4rem; max-width: 650px; padding-top: 1.5rem; }.research-note p:last-child, .privacy-line { color: var(--muted); font-size: .77rem; }.privacy-line { margin: 1.4rem 0 0; }
.time-estimate { color: var(--muted); font-size: .78rem; letter-spacing: .04em; margin: 1.7rem 0 -1rem; }
.assessment-wrap, .results-wrap { margin: auto; max-width: 790px; min-height: 100vh; padding: 2rem 1.5rem 4rem; }.assessment-header { align-items: center; display: flex; justify-content: space-between; }.question-count { color: var(--muted); font-size: .78rem; margin: 0; }.progress-track { background: rgba(255,255,255,.08); height: 2px; margin: 2rem 0 clamp(2.5rem, 8vh, 6rem); }.progress-bar { background: var(--gold); height: 100%; transition: width .45s ease; width: 0; }
.question-card { animation: appear .35s ease both; min-height: 340px; }.question-kicker { color: var(--gold-light); font: italic 1rem 'Playfair Display', Georgia, serif; margin: 0 0 .75rem; }.question-card h1 { font-size: clamp(2.2rem, 5vw, 4.15rem); max-width: 730px; }.question-help { color: var(--muted); margin: 1.2rem 0 1.8rem; max-width: 610px; }.choice-list { display: grid; gap: .7rem; }.choice { background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.13); color: var(--paper); cursor: pointer; font: 400 1rem 'DM Sans'; padding: 1rem 1.15rem; text-align: left; transition: all .2s ease; }.choice:hover, .choice.selected { border-color: var(--gold); background: rgba(201,168,76,.1); }.reflection-input { background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.2); color: var(--paper); font: 400 1.03rem 'DM Sans'; min-height: 150px; padding: 1rem; resize: vertical; width: 100%; }.reflection-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,.12); outline: none; }.assessment-actions { display: flex; justify-content: space-between; margin-top: 1rem; }
.choice-context, .multi-text-fields { margin-top: 1.2rem; }.choice-context label, .multi-text-fields label { color: var(--muted); display: block; font-size: .84rem; margin: 0 0 .45rem; }.choice-context .reflection-input { min-height: 92px; }.multi-text-fields { display: grid; gap: 1.25rem; }.multi-text-fields .reflection-input { min-height: 118px; }
.loading-state { align-items: center; display: flex; flex-direction: column; justify-content: center; min-height: 82vh; text-align: center; }.loading-state h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); }.loading-state p:last-child { color: var(--muted); max-width: 450px; }.orb { animation: drift 2.8s ease-in-out infinite; border: 1px solid var(--gold); border-radius: 50%; box-shadow: 0 0 40px rgba(201,168,76,.25), inset 0 0 30px rgba(201,168,76,.15); height: 64px; margin-bottom: 2rem; position: relative; width: 64px; }.orb::after { border: 1px solid rgba(201,168,76,.3); border-radius: 50%; content: ''; inset: -14px; position: absolute; }
.results-content { animation: appear .65s ease both; padding: 4rem 0; }.results-content > h1 { color: var(--gold-light); margin-bottom: .7rem; }.result-subtitle { color: var(--muted); font: italic 1.18rem 'Playfair Display', Georgia, serif; margin-top: 0; }.world-reveal, .purpose-section { background: linear-gradient(135deg, rgba(201,168,76,.12), rgba(255,255,255,.025)); border: 1px solid var(--line); margin: 3rem 0; padding: clamp(1.5rem, 4vw, 3rem); }.world-reveal h2 { color: var(--gold-light); margin-bottom: 1rem; }.world-reveal p, .purpose-report { font-size: 1.07rem; margin-bottom: 0; }.values-section { margin: 3.5rem 0; }.values-list { display: grid; gap: 1rem; margin-top: 1.5rem; }.value-card { border-bottom: 1px solid rgba(255,255,255,.13); padding: 1.25rem 0 1.45rem; }.value-card-top { align-items: baseline; display: flex; justify-content: space-between; }.value-card h3 { color: var(--gold-light); font: 500 1.55rem 'Playfair Display', Georgia, serif; margin: 0; }.value-score { color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }.value-card p { color: #d9d3c9; margin: .65rem 0 0; }.research-context { border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; margin-top: 3rem; padding-top: 1.1rem; }.journey-link { margin-top: 1.3rem; }.error-state { padding-top: 24vh; text-align: center; }.error-state p:not(.eyebrow) { color: var(--muted); }.is-hidden { display: none; }
.alignment-section { border-top: 1px solid var(--line); margin-top: 3.5rem; padding-top: 3.5rem; }
.companion-section { border-top: 1px solid var(--line); margin-top: 3.5rem; padding-top: 3.5rem; }.companion-section h2 { font: 400 clamp(1.85rem, 4vw, 2.75rem) 'Playfair Display', Georgia, serif; line-height: 1.12; margin: .55rem 0 1.2rem; }.companion-section h2 em { color: var(--gold); }.companion-intro { color: #d9d3c9; font-size: 1.07rem; line-height: 1.75; max-width: 46rem; }.companion-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 1.8rem 0; }.companion-card, .first-move { background: rgba(255,255,255,.025); border: 1px solid var(--line); padding: 1.35rem; }.companion-card p:last-child, .first-move p:last-child { color: var(--muted); line-height: 1.65; margin-bottom: 0; }.companion-section h3 { color: var(--gold-light); font: 500 1.45rem 'Playfair Display', Georgia, serif; margin: 2rem 0 .9rem; }.companion-ways { display: grid; gap: .75rem; list-style: none; margin: 0; padding: 0; }.companion-ways li { border-left: 2px solid var(--gold); color: #d9d3c9; line-height: 1.6; padding-left: 1rem; }.first-move { margin-top: 2rem; }.companion-disclosure { color: var(--muted); font-size: .82rem; line-height: 1.55; margin: 1.2rem 0 0; }
.alignment-section h2 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.75rem, 4vw, 2.6rem); font-weight: 400; line-height: 1.12; margin: .55rem 0 1.2rem; }.alignment-section h2 em { color: var(--gold); }.alignment-section p:not(.eyebrow) { color: var(--muted); line-height: 1.75; max-width: 44rem; }.research-citation { color: var(--muted) !important; font-size: .86rem; margin-top: 1.25rem; }.email-results-button { margin: 1rem 0 0; }
.modal { align-items: center; background: rgba(4, 6, 9, .78); display: flex; inset: 0; justify-content: center; padding: 1.25rem; position: fixed; z-index: 20; }.modal-panel { background: #141a22; border: 1px solid var(--line); box-shadow: 0 24px 80px rgba(0, 0, 0, .45); max-width: 32rem; padding: 2.2rem; position: relative; width: 100%; }.modal-panel h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 2rem; font-weight: 400; margin: .6rem 0; }.modal-panel > p:not(.eyebrow) { color: var(--muted); line-height: 1.65; }.modal-close { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 1.8rem; line-height: 1; padding: .25rem; position: absolute; right: .9rem; top: .8rem; }
.modal.is-hidden { display: none; }
#email-form { display: grid; gap: .7rem; margin-top: 1.5rem; } #email-form label { color: var(--paper); font-size: .9rem; } #email-form input { background: #0d1117; border: 1px solid var(--line); color: var(--paper); font: inherit; padding: .85rem 1rem; } #email-form input:focus { border-color: var(--gold); outline: 1px solid var(--gold); } #email-form .button { justify-self: start; margin-top: .45rem; } #email-form .button:disabled { cursor: wait; opacity: .65; }.email-status { font-size: .92rem; margin: .25rem 0 0; min-height: 1.4rem; }.email-status.is-success { color: #b8d99a; }.email-status.is-error { color: #f1a3a3; }
@keyframes appear { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes drift { 50% { transform: translateY(-9px) scale(1.04); } }
@media (max-width: 560px) { .welcome { justify-content: flex-start; padding-top: 6rem; }.assessment-wrap, .results-wrap { padding-left: 1.1rem; padding-right: 1.1rem; }.question-card { min-height: 390px; }.assessment-actions .button { padding-left: .8rem; padding-right: .8rem; }.research-note { margin-top: 3rem; }.companion-grid { grid-template-columns: 1fr; } }