:root { color-scheme:light; --night:#111f36; --night-deep:#0c1729; --cream:#f6f4ef; --ink:#14253e; --muted:#5d6f82; --gold:#e8b96b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:'DM Sans',system-ui,sans-serif; }
a { color:inherit; }
:where(a,button):focus-visible { outline:3px solid #f6c875; outline-offset:4px; }
.shell { width:min(1180px,calc(100% - 56px)); margin-inline:auto; }
.skip-link { position:absolute; left:12px; top:-80px; z-index:10; background:#fff; color:#172d4c; padding:12px; border-radius:8px; }
.skip-link:focus { top:12px; }
.landing-top { overflow:hidden; color:#f9fafb; background:radial-gradient(ellipse 55% 65% at 84% 43%,rgba(35,79,122,.56),transparent 74%),radial-gradient(ellipse 30% 40% at 7% 4%,rgba(37,80,114,.26),transparent 75%),linear-gradient(148deg,#101d31 5%,#111f36 60%,#0b1929); }
.site-header { min-height:92px; display:flex; align-items:center; justify-content:space-between; gap:24px; position:relative; z-index:2; border-bottom:1px solid rgba(230,239,255,.12); }
.brand { font:600 26px/1 'Fraunces',Georgia,serif; text-decoration:none; letter-spacing:-.045em; white-space:nowrap; }
.brand span { color:#a8caff; }
.brand-mark { margin-left:8px; font:400 15px 'DM Sans',sans-serif; color:var(--gold) !important; vertical-align:top; }
.header-actions { display:flex; align-items:center; gap:24px; }
.member-only { display:none !important; }
.is-signed-in .member-only { display:inline-flex !important; }
.is-signed-in .guest-only { display:none !important; }
.header-login,.hero-secondary { color:#e7eef9; text-decoration:none; font-weight:700; font-size:14px; }
.header-login:hover,.hero-secondary:hover { color:#fff; text-decoration:underline; text-underline-offset:5px; }
.button { min-height:50px; display:inline-flex; align-items:center; justify-content:center; gap:16px; border-radius:11px; padding:12px 22px; text-decoration:none; font-size:14px; font-weight:800; text-align:center; transition:transform .18s ease,background .18s ease,box-shadow .18s ease; }
.button:hover { transform:translateY(-2px); }
.button-light { background:#fff; color:#112743; }
.button-light:hover { background:#eaf2ff; }
.button-gold { color:#17243a; background:linear-gradient(120deg,#f6cd84,#e5ae56); box-shadow:0 12px 28px rgba(232,185,107,.2); }
.button-gold:hover { background:#f9d494; box-shadow:0 16px 32px rgba(232,185,107,.26); }
.hero { min-height:657px; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); align-items:center; gap:clamp(34px,5vw,90px); padding-block:84px 98px; }
.hero-copy { position:relative; z-index:1; }
.eyebrow,.section-kicker { display:flex; align-items:center; gap:9px; margin:0 0 22px; color:var(--gold); font-size:11px; font-weight:800; letter-spacing:.19em; }
.eyebrow-dot { width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(232,185,107,.14); }
.hero h1 { margin:0; font:600 clamp(45px,5vw,76px)/1.12 'Fraunces',Georgia,serif; letter-spacing:-.045em; max-width:660px; }
.hero h1 em { color:#eac17d; font-weight:600; font-style:normal; }
.hero-lead { max-width:540px; margin:25px 0 30px; font-size:clamp(16px,1.6vw,18px); line-height:1.72; color:#c6d5e8; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:17px 24px; }
.hero-note { display:flex; gap:8px; align-items:center; margin:28px 0 0; color:#b6c6dc; font-size:13px; }
.hero-note span { color:var(--gold); }
.hero-visual { position:relative; isolation:isolate; padding:49px 24px 37px; border:1px solid rgba(193,216,248,.18); border-radius:28px; background:linear-gradient(142deg,rgba(255,255,255,.105),rgba(255,255,255,.035)); box-shadow:0 22px 70px rgba(5,14,29,.2); }
.visual-glow { position:absolute; inset:auto -85px -125px auto; width:260px; height:260px; border-radius:50%; background:rgba(82,153,221,.15); filter:blur(45px); z-index:-1; }
.example-badge { position:absolute; top:-17px; left:24px; padding:10px 14px; border:1px solid rgba(238,212,163,.6); border-radius:999px; background:#263853; color:#ffe4af; font-size:10px; font-weight:800; letter-spacing:.14em; white-space:nowrap; }
.example-badge span { margin-left:6px; }
.journey-card { display:grid; grid-template-columns:42px minmax(0,1fr); gap:14px; align-items:start; padding:19px; border-radius:17px; background:#f8fbff; color:var(--ink); box-shadow:0 10px 30px rgba(2,12,32,.13); }
.journey-card strong,.journey-card .card-kicker,.journey-card .card-detail { display:block; }
.journey-card strong { font-size:16px; letter-spacing:-.015em; line-height:1.4; }
.card-kicker { color:#627592; font-size:10px; font-weight:800; letter-spacing:.12em; margin:0 0 7px; }
.card-detail { color:#65778f; font-size:12px; margin-top:5px; line-height:1.5; }
.step-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:11px; font-size:24px; font-weight:700; }
.goal-icon { color:#2158b6; background:#e5efff; }
.time-icon { color:#94651d; background:#fff2d9; }
.reflection-icon { color:#18795c; background:#ddf7e8; }
.time-card { margin-left:24px; }
.reflection-card { margin-left:48px; }
.journey-connector { height:22px; margin-left:39px; border-left:2px dashed rgba(197,216,244,.5); }
.journey-connector span { display:block; }
.visual-footer { margin:22px 0 0 2px; color:#d4e4f6; font-size:12px; font-weight:700; }
.visual-footer-mark { margin-right:7px; color:var(--gold); }
.how { padding-block:90px 100px; }
.how .section-kicker,.future-section .section-kicker { color:#ad7832; margin-bottom:15px; }
.how h2,.future-section h2 { margin:0; max-width:720px; font:600 clamp(32px,3.7vw,49px)/1.18 'Fraunces',Georgia,serif; letter-spacing:-.035em; }
.section-intro { margin:17px 0 33px; color:var(--muted); font-size:16px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.feature-card { min-height:225px; position:relative; padding:27px; border:1px solid #dbe3e9; border-radius:18px; background:#fff; box-shadow:0 12px 34px rgba(16,34,58,.045); }
.feature-num { position:absolute; right:27px; top:27px; color:#97a8b9; font-size:11px; font-weight:800; }
.feature-icon { width:48px; height:48px; display:grid; place-items:center; margin-bottom:22px; background:#eaf1fc; border-radius:13px; color:#2358b1; font-size:26px; }
.feature-card:nth-child(2) .feature-icon { background:#fff2dc; color:#92621c; }
.feature-card:nth-child(3) .feature-icon { background:#dff5e9; color:#167153; }
.feature-card h3 { margin:0 0 8px; font:600 21px 'Fraunces',Georgia,serif; }
.feature-card p { margin:0; color:var(--muted); font-size:14px; line-height:1.65; }
.learn-teaser { padding-block:10px 95px; display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:50px; }
.learn-teaser .section-kicker { color:#ad7832; }
.learn-teaser h2 { font:600 clamp(32px,4vw,51px)/1.14 'Fraunces',Georgia,serif;letter-spacing:-.035em;margin:0; }
.learn-teaser p:not(.section-kicker) { color:var(--muted);font-size:16px;line-height:1.75;margin:20px 0 26px; }
.teaser-card { display:flex;flex-direction:column;gap:18px;padding:36px;border-radius:22px;background:#162b47;color:#f8fafc;text-decoration:none;box-shadow:0 20px 45px #14284627; }
.teaser-card span { color:#e9bc74;font-size:11px;font-weight:800;letter-spacing:.14em; }
.teaser-card strong { font:600 clamp(26px,3vw,38px)/1.2 'Fraunces',Georgia,serif; }
.teaser-card small { color:#c8d7e8;font-size:14px;line-height:1.6; }.teaser-card b { color:#f1cb8c;font-size:14px; }
.future-section { padding-block:75px; background:#e9eff6; }
.future-inner { display:grid; grid-template-columns:1fr .8fr; align-items:center; gap:60px; }
.future-inner p:not(.section-kicker) { color:#465b73; font-size:16px; line-height:1.75; margin:0 0 20px; }
.text-link { color:#184ba0; font-weight:800; text-decoration:none; }
.text-link:hover { text-decoration:underline; text-underline-offset:4px; }
.site-footer { min-height:112px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.footer-brand { font-size:20px; }
.footer-brand span { color:#2c61be; }
.site-footer p,.site-footer > a:last-child { color:#536b80; font-size:13px; }
@media(max-width:900px) {
    .learn-teaser { gap:26px; }
    .hero { grid-template-columns:1fr; gap:60px; padding-block:69px 80px; }
    .hero h1 { max-width:750px; }
    .hero-visual { max-width:610px; width:100%; margin-inline:auto; }
    .future-inner { gap:28px; }
}
@media(max-width:640px) {
    .learn-teaser { grid-template-columns:1fr;gap:30px;padding-bottom:70px; }.teaser-card{padding:25px;}
    .header-actions .header-login:first-child { display:none; }
    .shell { width:min(100% - 36px,520px); }
    .site-header { min-height:74px; gap:8px; }
    .brand { font-size:21px; }
    .brand-mark { font-size:12px; margin-left:4px; }
    .header-actions { gap:9px; }
    .header-login { font-size:13px; }
    .header-signup { min-height:42px; padding:9px 12px; font-size:12px; gap:6px; }
    .hero { gap:47px; padding-block:58px 69px; min-height:auto; }
    .hero h1 { font-size:clamp(40px,10.5vw,61px); line-height:1.13; }
    .hero-lead { margin:19px 0 26px; font-size:16px; }
    .hero-actions { display:grid; gap:19px; justify-items:start; }
    .hero-actions .button { min-width:204px; }
    .hero-note { margin-top:24px; }
    .hero-visual { padding:40px 13px 24px; border-radius:20px; }
    .journey-card { grid-template-columns:36px minmax(0,1fr); gap:10px; padding:14px; }
    .journey-card strong { font-size:14px; }
    .step-icon { width:36px; height:36px; font-size:20px; }
    .card-kicker { font-size:9px; }
    .time-card { margin-left:12px; }
    .reflection-card { margin-left:24px; }
    .journey-connector { margin-left:32px; }
    .visual-footer { font-size:11px; }
    .how { padding-block:68px 78px; }
    .feature-grid { grid-template-columns:1fr; gap:12px; }
    .feature-card { min-height:0; padding:22px; }
    .feature-icon { margin-bottom:15px; }
    .future-section { padding-block:58px; }
    .future-inner { grid-template-columns:1fr; gap:23px; }
    .site-footer { min-height:145px; flex-wrap:wrap; padding-block:26px; justify-content:flex-start; gap:8px 20px; }
    .site-footer p { flex-basis:100%; order:3; margin:0; }
    .site-footer > a:last-child { margin-left:auto; }
}
@media(max-width:355px) { .shell { width:calc(100% - 24px); } .brand { font-size:18px; } .header-actions { gap:6px; } .header-signup { padding-inline:9px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }