:root { color-scheme:light; --paper:var(--mood-paper); --ink:var(--mood-ink); --muted:var(--mood-muted); --line:var(--gv-line); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.65; }
h1,h2,h3,p { margin-top:0; }
h1,h2,.brand-line { font-family:Georgia,"Times New Roman",serif; font-weight:400; letter-spacing:-.035em; line-height:1.12; }
h1 { font-size:clamp(2.7rem,5.4vw,4.6rem); margin-bottom:26px; }
h2 { font-size:clamp(2rem,3.8vw,3.25rem); margin-bottom:20px; }
h3 { font-size:1.15rem; line-height:1.3; }
p { margin-bottom:18px; }
a { color:inherit; }
.wrap { max-width:1160px; margin:auto; padding-left:clamp(22px,5vw,48px); padding-right:clamp(22px,5vw,48px); }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:24px; padding-bottom:24px; }
.creator { text-decoration:none; font-family:Georgia,serif; font-size:1.2rem; line-height:1.2; }
.creator span { display:block; font-family:system-ui,sans-serif; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; margin-top:7px; color:var(--muted); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:22px; padding:15px 24px; border-radius:99px; background:var(--mood-violet); color:white; text-decoration:none; font-weight:600; line-height:1.35; transition:background .15s; }
.button:hover { background:var(--mood-violet-hover); }
.button-small { padding:11px 18px; font-size:.85rem; gap:12px; }
.text-link { text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:3px; font-weight:550; }
.text-link:hover { color:var(--mood-violet); border-color:var(--mood-violet); }
.hero { display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:clamp(32px,5vw,70px); padding-top:66px; padding-bottom:90px; }
.eyebrow { text-transform:uppercase; font-size:.71rem; letter-spacing:.17em; font-weight:650; margin-bottom:18px; color:var(--mood-violet); }
.lead { font-size:1.06rem; max-width:49ch; color:var(--muted); }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px; margin-top:30px; }
.availability { font-size:.79rem; color:var(--muted); margin-top:18px; }
.hero-art { background:linear-gradient(150deg, var(--mood-aqua) 52%, var(--mood-sunshine-light)); border:1px solid var(--mood-aqua-line); border-radius:160px 160px 28px 28px; min-height:455px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 20px; text-align:center; }
.logo { width:250px; max-width:85%; height:auto; }
.brand-line { font-size:1.9rem; margin-bottom:26px; }
.brand-line em { color:var(--mood-violet); }
.emotion-chips { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; max-width:290px; }
.emotion-chips span { background:var(--paper); border:1px solid var(--mood-aqua-line); border-radius:99px; padding:5px 13px; font-size:.77rem; }
.art-note { font-size:.73rem; color:var(--muted); margin:22px 0 0; }
.section { padding-top:78px; padding-bottom:78px; }
.section-heading { max-width:660px; margin-bottom:40px; }
.section-heading>p:not(.eyebrow),.reflection-copy>p:not(.eyebrow),.creator-section>div>p:not(.eyebrow) { color:var(--muted); }
.how { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:38px; list-style:none; padding:0; margin:0; }
.step-number { color:var(--mood-violet); font-family:Georgia,serif; font-size:1.4rem; display:block; margin-bottom:18px; }
.steps p { font-size:.92rem; color:var(--muted); margin-bottom:0; }
.reflection { display:grid; grid-template-columns:1fr 1fr; gap:75px; align-items:center; }
.sample-card { background:var(--gv-surface); padding:32px; border-radius:22px; border:1px solid var(--mood-lilac-line); box-shadow:0 16px 40px #20394212; transform:rotate(1deg); }
.sample-card h3 { font-family:Georgia,serif; font-size:2rem; font-weight:400; margin-bottom:8px; }
.example-label { text-transform:uppercase; letter-spacing:.13em; color:var(--muted); font-size:.65rem; margin-bottom:20px; }
.card-caption { color:var(--muted); font-size:.85rem; padding-bottom:15px; }
.sample-card>div { border-top:1px solid var(--mood-lilac-line); padding-top:16px; }
.sample-card h4 { font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; margin:0 0 8px; color:var(--mood-violet); }
.sample-card>div p { font-size:.95rem; }
.sample-card>div:last-child p { margin-bottom:0; }
.features { background:var(--mood-lilac); }
.feature-rows { border-top:1px solid var(--mood-lilac-line); }
.feature-rows article { display:grid; grid-template-columns:1fr 1.8fr; gap:40px; padding:26px 0; border-bottom:1px solid var(--mood-lilac-line); }
.feature-rows h3,.feature-rows p { margin:0; }
.feature-rows p { color:var(--muted); }
.preview-note { font-size:.81rem; margin-top:25px; margin-bottom:0; color:var(--muted); max-width:75ch; }
.creator-section { display:grid; grid-template-columns:1fr 1fr; gap:75px; border-bottom:1px solid var(--line); }
.faq { max-width:880px; }
.faq details { border-bottom:1px solid var(--line); padding:20px 0; }
.faq summary { cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; font-size:1.3rem; font-weight:400; }
.faq details[open] summary::after { content:'−'; }
.faq details p { color:var(--muted); margin:16px 0 0; font-size:.93rem; }
.faq a { overflow-wrap:anywhere; }
.closing { background:var(--mood-aqua); color:var(--ink); border-block:1px solid var(--mood-aqua-line); text-align:center; }
.closing .eyebrow { color:var(--mood-violet); }
.closing .button { background:var(--mood-sunshine); color:var(--ink); border:1px solid var(--mood-sunshine-line); margin:10px 0 22px; }
.closing .button:hover { background:var(--mood-sunshine-light); }
.closing p:last-child { font-size:.83rem; color:var(--muted); margin-bottom:0; }
.footer { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-top:28px; padding-bottom:28px; color:var(--muted); font-size:.8rem; }
.footer a { text-decoration:none; }
.footer a:hover { text-decoration:underline; }
.skip-link { position:absolute; left:16px; top:-100px; padding:10px; background:var(--ink); color:white; z-index:5; }
.skip-link:focus { top:12px; }
:focus-visible { outline:3px solid var(--mood-violet); outline-offset:5px; }
@media(max-width:760px) { .hero,.reflection,.creator-section { grid-template-columns:1fr; gap:36px; } .hero { padding-top:40px; padding-bottom:50px; } .hero-art { max-width:450px; width:100%; justify-self:center; min-height:400px; } .section { padding-top:52px; padding-bottom:52px; } .steps { grid-template-columns:1fr; gap:28px; } .steps li { border-top:1px solid var(--line); padding-top:20px; } .step-number { float:left; margin-right:20px; min-width:30px; } .steps li h3,.steps li p { margin-left:50px; } .feature-rows article { grid-template-columns:1fr; gap:10px; } .sample-card { transform:none; } .footer { justify-content:center; text-align:center; } }
@media(max-width:400px) { .creator { font-size:1rem; } .creator span { font-size:.57rem; } .button-small { font-size:.76rem; padding:10px 12px; gap:8px; } .actions { align-items:flex-start; flex-direction:column; } .sample-card { padding:24px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }