:root { --ink:#23352c; --ink-soft:#405348; --paper:#f5f1e8; --bone:#fffcf6; --muted:#6d7065; --line:#d9d2c4; --clay:#90513e; --terracotta:#bd7658; --sage:#9ca88b; --lichen:#b3bf88; --sage-soft:#e3e8dc; --clay-soft:#f0e3d7; --serif:"Instrument Serif", Georgia, serif; --sans:"DM Sans", Arial, sans-serif; --mono:"DM Mono", monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--paper); }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 98% 3%, rgba(156,168,139,.28), transparent 26%), radial-gradient(circle at -5% 88%, rgba(189,118,88,.14), transparent 29%), var(--paper); font-family:var(--sans); }
a, button { font:inherit; }
a { color:inherit; }
button { cursor:pointer; }
.site-header { position:sticky; z-index:5; top:0; display:flex; min-height:78px; align-items:center; justify-content:space-between; gap:25px; padding:0 5vw; border-bottom:1px solid rgba(35,53,44,.12); background:rgba(245,241,232,.86); backdrop-filter:blur(16px); }
.brand { display:flex; align-items:center; gap:8px; color:var(--ink); font-size:23px; font-weight:700; letter-spacing:-.07em; text-decoration:none; }
.brand span { display:grid; width:27px; height:27px; place-items:center; border-radius:8px; color:var(--paper); background:var(--ink); font-size:15px; }
nav { display:flex; gap:27px; align-items:center; }
nav a { padding:7px 0; border-bottom:1px solid transparent; color:#4f594f; font-size:12px; font-weight:700; text-decoration:none; }
nav a:hover { border-color:var(--clay); color:var(--clay); }
.header-cta { display:inline-flex; align-items:center; gap:8px; padding:10px 13px; border:1px solid #c9bead; border-radius:22px; background:var(--bone); color:var(--ink); font-size:11px; font-weight:700; text-decoration:none; }
.header-cta span { color:var(--clay); font-size:15px; }
.hero { position:relative; display:grid; min-height:calc(100vh - 78px); grid-template-columns:1.05fr .95fr; gap:45px; align-items:center; overflow:hidden; padding:clamp(55px,8vw,116px) 5vw clamp(70px,9vw,130px); }
.hero-copy { position:relative; z-index:1; max-width:650px; }
.eyebrow { margin:0 0 18px; color:#80624d; font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.11em; }
.eyebrow span { display:inline-block; width:6px; height:6px; margin:0 8px 1px 0; border-radius:50%; background:var(--terracotta); }
h1, h2, h3, p { margin-top:0; }
h1, h2 { font-family:var(--serif); font-weight:400; letter-spacing:-.065em; line-height:.93; }
h1 { margin-bottom:26px; font-size:clamp(64px,7.2vw,112px); }
h2 { margin-bottom:20px; font-size:clamp(48px,5.2vw,82px); }
h1 em, h2 em { color:var(--clay); font-style:italic; }
.hero-lede { max-width:545px; color:#555d54; font-size:17px; line-height:1.65; }
.store-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.store-button { display:flex; min-width:172px; align-items:center; gap:10px; padding:11px 14px; border:1px solid #c9bead; border-radius:8px; color:var(--ink); background:var(--bone); text-align:left; transition:transform .18s, border-color .18s, background .18s; }
.store-button:hover { border-color:var(--clay); background:var(--clay-soft); transform:translateY(-2px); }
.store-mark { display:grid; width:28px; height:28px; place-items:center; border-radius:7px; color:var(--bone); background:var(--ink); font-size:14px; }
.store-button small { display:block; color:var(--muted); font-family:var(--mono); font-size:7px; letter-spacing:.1em; }
.store-button strong { display:block; margin-top:2px; font-size:12px; }
.store-status { min-height:20px; margin:12px 0 0; color:var(--muted); font-size:10px; }
.hero-notes { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.hero-notes span { padding:6px 8px; border:1px solid var(--line); border-radius:20px; color:#616758; background:rgba(255,252,246,.5); font-family:var(--mono); font-size:8px; }
.hero-art { position:relative; min-height:550px; }
.hero-image-wrap { position:absolute; top:0; right:3%; width:min(92%,500px); height:100%; overflow:hidden; border-radius:42% 42% 38% 38% / 30% 30% 43% 43%; background:var(--sage-soft); box-shadow:0 28px 64px rgba(45,59,47,.18); }
.hero-image-wrap::after { position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(35,53,44,.14)); content:""; }
.hero-image-wrap img { width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-orbit { position:absolute; z-index:-1; border:1px solid rgba(144,81,62,.35); border-radius:50%; }
.orbit-one { width:480px; height:480px; top:6%; right:-16%; }
.orbit-two { width:270px; height:270px; bottom:-7%; left:2%; border-color:rgba(156,168,139,.75); }
.floating-card { position:absolute; z-index:1; width:210px; margin:0; padding:16px; border:1px solid rgba(35,53,44,.12); border-radius:11px; background:rgba(255,252,246,.9); box-shadow:0 14px 36px rgba(40,50,40,.14); backdrop-filter:blur(8px); }
.floating-card span { display:block; margin-bottom:22px; color:var(--clay); font-family:var(--mono); font-size:8px; letter-spacing:.08em; }
.floating-card strong { display:block; font-family:var(--serif); font-size:23px; font-weight:400; letter-spacing:-.045em; line-height:.95; }
.floating-card p { margin:12px 0 0; color:var(--muted); font-size:9px; }
.match-card { bottom:8%; left:-4%; transform:rotate(-5deg); }
.prompt-card { top:17%; right:-4%; transform:rotate(5deg); }
.belief { display:grid; grid-template-columns:1.07fr .75fr; gap:70px; align-items:end; padding:clamp(85px,11vw,155px) 12vw; background:var(--ink); color:var(--bone); }
.belief .eyebrow { color:var(--lichen); }
.belief .eyebrow span { background:var(--terracotta); }
.belief h2 { margin:0; }
.belief h2 em { color:var(--lichen); }
.belief > p { max-width:430px; margin:0 0 7px; color:#d6daca; font-size:16px; line-height:1.6; }
.layers { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; border-bottom:1px solid var(--line); background:var(--line); }
.layers article { min-height:285px; padding:36px 5vw; background:var(--paper); }
.layers span { color:var(--clay); font-family:var(--mono); font-size:10px; }
.layers h3 { max-width:240px; margin:55px 0 11px; font-family:var(--serif); font-size:31px; font-weight:400; letter-spacing:-.045em; line-height:1; }
.layers p { max-width:310px; margin:0; color:#5d6359; font-size:13px; line-height:1.55; }
.how { display:grid; grid-template-columns:.75fr 1.25fr; gap:70px; padding:clamp(85px,11vw,155px) 12vw; background:var(--bone); }
.how-heading h2 { margin:0; }
.how-steps { display:grid; gap:0; }
.how-steps article { display:grid; grid-template-columns:70px 1fr; gap:16px; padding:23px 0; border-top:1px solid var(--line); }
.how-steps article:last-child { border-bottom:1px solid var(--line); }
.step-number { color:var(--clay); font-family:var(--mono); font-size:10px; }
.how-steps h3 { margin:0 0 6px; font-size:15px; letter-spacing:-.025em; }
.how-steps p { max-width:480px; margin:0; color:#62685e; font-size:13px; line-height:1.55; }
.attachment { display:grid; grid-template-columns:1.05fr .72fr; gap:70px; align-items:center; padding:clamp(85px,11vw,155px) 12vw; background:var(--sage-soft); }
.attachment h2 { max-width:600px; margin-bottom:21px; }
.attachment-copy > p:not(.eyebrow) { max-width:565px; color:#566050; font-size:15px; line-height:1.62; }
.attachment ul { display:grid; gap:10px; margin:25px 0 0; padding:0; list-style:none; }
.attachment li { position:relative; padding-left:18px; color:#4e5c4d; font-size:12px; }
.attachment li::before { position:absolute; left:0; color:var(--clay); content:"✦"; }
.attachment-note { padding:31px; border:1px solid #c9d1bd; border-radius:13px; background:rgba(255,252,246,.57); }
.attachment-note > span { display:block; margin-bottom:32px; color:var(--clay); font-size:21px; }
.attachment-note h3 { margin:0 0 11px; font-family:var(--serif); font-size:34px; font-weight:400; letter-spacing:-.045em; line-height:.98; }
.attachment-note p { margin:0; color:#586052; font-size:12px; line-height:1.55; }
.connection-lenses { padding:clamp(90px,11vw,155px) 12vw; background:radial-gradient(circle at 8% 8%, rgba(189,118,88,.15), transparent 25%), radial-gradient(circle at 91% 78%, rgba(179,191,136,.2), transparent 27%), var(--bone); }
.connection-lenses-heading { display:grid; grid-template-columns:1.05fr .75fr; gap:70px; align-items:end; }
.connection-lenses-heading h2 { margin:0; }
.connection-lenses-heading > p:not(.eyebrow) { max-width:480px; margin:0; color:#596256; font-size:15px; line-height:1.65; }
.connection-lens-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin-top:48px; }
.connection-lens { display:flex; min-height:390px; flex-direction:column; padding:29px 27px 25px; border:1px solid rgba(35,53,44,.14); border-radius:15px; background:rgba(245,241,232,.72); box-shadow:0 12px 30px rgba(52,65,52,.05); }
.connection-lens-care { background:rgba(240,227,215,.78); }
.connection-lens-personality { background:rgba(227,232,220,.78); }
.connection-lens-label { display:flex; align-items:center; gap:10px; margin:0 0 35px; color:#796450; font-family:var(--mono); font-size:8px; letter-spacing:.1em; }
.connection-lens-label span { display:grid; width:22px; height:22px; place-items:center; border:1px solid rgba(144,81,62,.45); border-radius:50%; color:var(--clay); font-size:8px; letter-spacing:0; }
.connection-lens h3 { max-width:250px; margin:0 0 14px; font-family:var(--serif); font-size:35px; font-weight:400; letter-spacing:-.052em; line-height:.96; }
.connection-lens > p:not(.connection-lens-label):not(.connection-lens-relationship) { margin:0; color:#5b6358; font-size:12px; line-height:1.6; }
.connection-lens-relationship { margin:auto 0 0; padding-top:18px; border-top:1px solid rgba(35,53,44,.14); color:#5c6659; font-size:11px; line-height:1.48; }
.connection-lens-relationship span { display:block; margin-bottom:6px; color:var(--clay); font-family:var(--mono); font-size:8px; letter-spacing:.09em; }
.membership { padding:clamp(90px,11vw,155px) 12vw; background:radial-gradient(circle at 9% 15%, rgba(179,191,136,.22), transparent 26%), radial-gradient(circle at 92% 94%, rgba(189,118,88,.14), transparent 29%), var(--paper); }
.membership-heading { display:grid; grid-template-columns:1.05fr .75fr; gap:70px; align-items:end; }
.membership-heading h2 { margin:0; }
.membership-intro { display:grid; grid-template-columns:1.05fr .75fr; gap:70px; margin-top:27px; }
.membership-intro > p { max-width:575px; margin:0; color:#566050; font-size:15px; line-height:1.65; }
.membership-intro .membership-intro-note { align-self:end; max-width:345px; padding-left:17px; border-left:2px solid var(--terracotta); color:#676d61; font-size:12px; }
.membership-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin-top:48px; }
.membership-card { display:flex; min-height:400px; flex-direction:column; padding:29px 27px 25px; border:1px solid rgba(35,53,44,.15); border-radius:15px; background:rgba(255,252,246,.72); box-shadow:0 12px 30px rgba(52,65,52,.06); }
.membership-card-plus { border-color:rgba(35,53,44,.28); background:var(--ink); box-shadow:0 17px 36px rgba(35,53,44,.18); }
.membership-card-spotlight { background:rgba(240,227,215,.72); }
.membership-label { margin:0 0 34px; color:var(--clay); font-family:var(--mono); font-size:8px; letter-spacing:.11em; }
.membership-card h3 { margin:0 0 13px; font-family:var(--serif); font-size:35px; font-weight:400; letter-spacing:-.052em; line-height:.96; }
.membership-card > p:not(.membership-label):not(.membership-status) { margin:0; color:#5b6358; font-size:12px; line-height:1.58; }
.membership-card ul { display:grid; gap:10px; margin:25px 0; padding:0; list-style:none; }
.membership-card li { position:relative; padding-left:16px; color:#536052; font-size:11px; line-height:1.4; }
.membership-card li::before { position:absolute; top:0; left:0; color:var(--terracotta); content:"✦"; }
.membership-card .membership-status { margin:auto 0 0; padding-top:16px; border-top:1px solid rgba(35,53,44,.13); color:#72776c; font-family:var(--mono); font-size:8px; letter-spacing:.04em; }
.membership-card-plus .membership-label { color:var(--lichen); }
.membership-card-plus h3 { color:var(--bone); }
.membership-card-plus > p:not(.membership-label):not(.membership-status), .membership-card-plus li { color:#d4dacb; }
.membership-card-plus li::before { color:var(--lichen); }
.membership-card-plus .membership-status { border-color:rgba(255,252,246,.16); color:#bfc7b4; }
.membership-footer { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-top:22px; padding-top:22px; border-top:1px solid rgba(35,53,44,.16); }
.membership-footer > p { max-width:570px; margin:0; color:#707467; font-size:11px; line-height:1.55; }
.membership-cta { display:inline-flex; flex:none; align-items:center; gap:11px; padding:12px 15px; border:1px solid var(--ink); border-radius:9px; color:var(--bone); background:var(--ink); font-size:11px; font-weight:700; text-decoration:none; transition:transform .18s, background .18s; }
.membership-cta span { color:var(--lichen); font-size:17px; }
.membership-cta:hover { background:#344c3e; transform:translateY(-2px); }
.hero-access-link { display:inline-flex; align-items:center; gap:8px; margin-top:14px; color:var(--clay); font-size:12px; font-weight:700; text-decoration:none; }
.hero-access-link span { font-size:16px; transition:transform .18s ease; }
.hero-access-link:hover span { transform:translateY(3px); }
.early-access { display:grid; grid-template-columns:.86fr 1.14fr; gap:clamp(45px,7vw,110px); align-items:center; padding:clamp(90px,11vw,155px) 12vw; background:linear-gradient(135deg, #eee7da 0%, #e6eadf 100%); }
.early-access-copy > p:not(.eyebrow) { max-width:510px; color:#566050; font-size:15px; line-height:1.65; }
.early-access-copy h2 { margin-bottom:22px; }
.distance-approach { max-width:525px; margin-top:38px; padding:24px 25px 20px; border:1px solid rgba(64,83,72,.18); border-radius:15px; background:rgba(255,252,246,.55); }
.distance-kicker { margin:0 0 14px; color:var(--clay); font-family:var(--mono); font-size:8px; letter-spacing:.1em; }
.distance-approach h3 { margin:0 0 8px; font-family:var(--serif); font-size:29px; font-weight:400; letter-spacing:-.045em; line-height:1; }
.distance-approach > p:not(.distance-kicker) { margin:0; color:#596457; font-size:12px; line-height:1.55; }
.distance-approach ol { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:9px 18px; margin:22px 0 0; padding:0; list-style:none; }
.distance-approach li { display:flex; align-items:center; gap:7px; color:#4e5c4d; font-size:10px; font-weight:700; }
.distance-approach li span { color:var(--terracotta); font-family:var(--mono); font-size:8px; }
.enrollment-panel { padding:clamp(24px,3.2vw,42px); border:1px solid rgba(35,53,44,.13); border-radius:18px; background:rgba(255,252,246,.88); box-shadow:0 22px 50px rgba(52,65,52,.12); }
.enrollment-panel-heading { display:flex; align-items:center; gap:13px; margin-bottom:27px; padding-bottom:21px; border-bottom:1px solid var(--line); }
.enrollment-panel-heading > span { display:grid; width:33px; height:33px; place-items:center; border-radius:10px; color:var(--paper); background:var(--ink); font-size:14px; }
.enrollment-panel-heading p { margin:0 0 4px; color:var(--clay); font-family:var(--mono); font-size:8px; letter-spacing:.12em; }
.enrollment-panel-heading h3 { margin:0; font-family:var(--serif); font-size:30px; font-weight:400; letter-spacing:-.05em; line-height:.9; }
.early-access-form { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:15px; }
.form-field { display:grid; gap:7px; }
.form-field-wide { grid-column:1 / -1; }
.form-field label { color:#50604f; font-size:10px; font-weight:700; }
.form-field label span { color:#7b8176; font-weight:500; }
.form-field input, .form-field select { width:100%; min-height:47px; padding:0 13px; border:1px solid #d6cfbf; border-radius:8px; outline:none; color:var(--ink); background:rgba(255,255,255,.52); font-family:var(--sans); font-size:13px; transition:border-color .18s, box-shadow .18s, background .18s; }
.form-field input::placeholder { color:#91948a; }
.form-field select { cursor:pointer; appearance:auto; }
.form-field input:focus, .form-field select:focus { border-color:var(--clay); background:var(--bone); box-shadow:0 0 0 3px rgba(144,81,62,.12); }
.form-field input:invalid:not(:placeholder-shown), .form-field select:invalid:not(:placeholder-shown) { border-color:#b75e4a; }
.enrollment-submit { grid-column:1 / -1; display:flex; align-items:center; justify-content:center; gap:10px; min-height:50px; margin-top:5px; border:1px solid var(--ink); border-radius:8px; color:var(--bone); background:var(--ink); font-size:12px; font-weight:700; transition:transform .18s, background .18s; }
.enrollment-submit:hover { background:#344c3e; transform:translateY(-2px); }
.enrollment-submit span { color:var(--lichen); font-size:17px; }
.form-privacy, .form-status { grid-column:1 / -1; margin:0; font-size:10px; line-height:1.5; }
.form-privacy { color:#72786e; }
.form-status { min-height:15px; color:#60685d; }
.form-status.is-success { color:#496541; font-weight:700; }
.form-status.is-error { color:#a34f3d; font-weight:700; }
.consent-check { grid-column:1 / -1; display:flex; align-items:flex-start; gap:10px; color:var(--ink); font-size:14px; line-height:1.5; cursor:pointer; }
.consent-check input { flex:none; width:18px; height:18px; margin:2px 0 0; accent-color:var(--ink); }
.consent-check em { color:#626d60; font-style:normal; }
.signup-trap { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.form-privacy, .form-status { font-size:14px; }
.form-field label { font-size:14px; }
.form-field input, .form-field select { font-size:16px; }
.enrollment-submit { font-size:16px; cursor:pointer; }
.enrollment-submit:disabled { opacity:.65; cursor:wait; transform:none; }
.form-privacy a { color:var(--clay); }
.closing { padding:clamp(90px,12vw,170px) 8vw; color:var(--bone); background:radial-gradient(circle at 80% 30%, rgba(179,191,136,.14), transparent 30%), var(--ink); text-align:center; }
.closing .eyebrow { color:var(--lichen); }
.closing h2 { margin-bottom:22px; }
.closing h2 em { color:var(--lichen); }
.closing > p:not(.eyebrow) { max-width:510px; margin:0 auto; color:#d6daca; font-size:15px; line-height:1.6; }
.closing .store-actions { justify-content:center; }
.dark-store { border-color:rgba(255,252,246,.2); color:var(--bone); background:rgba(255,252,246,.07); }
.dark-store:hover { border-color:var(--lichen); background:rgba(179,191,136,.14); }
.dark-store .store-mark { color:var(--ink); background:var(--lichen); }
.dark-store small { color:#cbd1be; }
footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 5vw; color:#667060; background:#e8e2d6; }
footer .brand { font-size:18px; } footer .brand span { width:23px; height:23px; font-size:12px; }
footer p, footer > span { margin:0; font-size:10px; }
@media (max-width:900px) { .hero, .belief, .how, .attachment, .early-access, .membership-heading, .membership-intro, .connection-lenses-heading { grid-template-columns:1fr; gap:45px; } .hero { padding-top:70px; } .hero-art { width:min(100%,640px); min-height:600px; margin:auto; } .belief, .how, .attachment, .early-access, .membership, .connection-lenses { padding-right:8vw; padding-left:8vw; } .belief > p { max-width:550px; } .layers article { padding-right:6vw; padding-left:6vw; } .connection-lens-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } .connection-lens-personality { grid-column:1 / -1; min-height:auto; } .membership-intro { margin-top:23px; } .membership-intro .membership-intro-note { max-width:500px; } .membership-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } .membership-card-spotlight { grid-column:1 / -1; min-height:auto; } .early-access-copy { max-width:650px; } .enrollment-panel { max-width:650px; width:100%; } }
@media (max-width:640px) { .site-header { min-height:65px; padding:0 19px; } nav { display:none; } .header-cta { padding:8px 10px; font-size:10px; } .brand { font-size:21px; } .hero { min-height:auto; padding:55px 19px 75px; } h1 { font-size:58px; } h2 { font-size:50px; } .hero-lede { font-size:15px; } .store-button { flex:1; min-width:0; } .hero-art { min-height:475px; margin-top:5px; } .hero-image-wrap { right:5%; width:89%; } .floating-card { width:175px; padding:13px; } .floating-card span { margin-bottom:16px; font-size:7px; } .floating-card strong { font-size:19px; } .match-card { bottom:1%; left:-1%; } .prompt-card { top:10%; right:-1%; } .belief, .how, .attachment, .early-access, .membership, .connection-lenses { gap:32px; padding:75px 23px; } .layers { grid-template-columns:1fr; } .layers article { min-height:auto; padding:30px 23px; } .layers h3 { margin-top:31px; } .how-steps article { grid-template-columns:48px 1fr; } .attachment-note { padding:24px; } .connection-lenses-heading { gap:0; } .connection-lenses-heading > p:not(.eyebrow) { margin-top:22px; } .connection-lens-grid { grid-template-columns:1fr; gap:12px; margin-top:34px; } .connection-lens, .connection-lens-personality { min-height:auto; padding:25px 22px 22px; } .connection-lens h3 { font-size:33px; } .connection-lens-label { margin-bottom:27px; } .connection-lens-relationship { margin-top:24px; } .membership-heading, .membership-intro { gap:0; } .membership-intro { margin-top:22px; } .membership-intro .membership-intro-note { margin-top:19px; } .membership-grid { grid-template-columns:1fr; gap:12px; margin-top:34px; } .membership-card, .membership-card-spotlight { min-height:auto; padding:25px 22px 22px; } .membership-card h3 { font-size:33px; } .membership-card ul { margin:22px 0; } .membership-footer { align-items:flex-start; flex-direction:column; gap:15px; margin-top:17px; padding-top:18px; } .membership-cta { width:100%; justify-content:center; } .distance-approach { margin-top:30px; padding:21px; } .distance-approach ol { grid-template-columns:1fr; gap:8px; } .enrollment-panel { padding:22px; border-radius:14px; } .early-access-form { grid-template-columns:1fr; } .form-field, .form-field-wide { grid-column:1 / -1; } .closing { padding:82px 23px; text-align:left; } .closing .store-actions { justify-content:flex-start; } footer { align-items:flex-start; flex-direction:column; padding:22px 19px; } }