:root { color-scheme: light; --ink:#21372f; --muted:#52675d; --cream:#fff8e8; --paper:#f7edcf; --gold:#d69a36; --berry:#a64f5f; --leaf:#5f8e50; --sky:#a9dbe0; --line:#d9cba5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:var(--cream); color:var(--ink); font:1rem/1.65 system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:inherit; text-underline-offset:.2em; }
a:focus-visible { outline:.2rem solid var(--berry); outline-offset:.25rem; border-radius:.2rem; }
.skip-link { position:absolute; left:1rem; top:-5rem; z-index:20; padding:.7rem 1rem; background:white; }
.skip-link:focus { top:1rem; }
.site-header { min-height:4.5rem; padding:1rem clamp(1.25rem,5vw,5rem); display:flex; align-items:center; justify-content:space-between; gap:2rem; border-bottom:1px solid var(--line); background:rgba(255,248,232,.96); }
.wordmark { display:flex; gap:.65rem; align-items:center; font:700 1.3rem Georgia,serif; text-decoration:none; letter-spacing:.02em; }
.hearth-mark { color:var(--gold); font-size:1.5rem; transform:rotate(45deg); }
nav { display:flex; flex-wrap:wrap; gap:1.25rem; }
nav a { color:var(--muted); font-weight:650; text-decoration:none; }
nav a:hover { color:var(--berry); }
main { overflow:hidden; }
.hero { min-height:42rem; display:grid; grid-template-columns:minmax(0,1fr) minmax(22rem,1fr); align-items:center; gap:clamp(2rem,6vw,7rem); padding:clamp(4rem,9vw,8rem) clamp(1.25rem,7vw,7rem); }
.hero>* { min-width:0; }
.eyebrow { margin:0 0 .7rem; color:var(--berry); font-size:.78rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
h1,h2,h3 { font-family:Georgia,serif; line-height:1.12; }
h1 { margin:.2rem 0 1.5rem; font-size:clamp(2.8rem,6vw,5.8rem); letter-spacing:-.035em; }
h2 { margin:.25rem 0 1.4rem; font-size:clamp(2rem,4vw,3.5rem); }
h3 { margin:.3rem 0 .5rem; font-size:1.35rem; }
.lede { max-width:44rem; color:var(--muted); font-size:clamp(1.1rem,2vw,1.3rem); }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:1rem; margin-top:2rem; }
.button { display:inline-block; padding:.8rem 1.15rem; border:2px solid var(--ink); border-radius:.8rem; background:var(--ink); color:white; font-weight:800; text-decoration:none; box-shadow:.22rem .25rem 0 var(--gold); }
.button:hover { transform:translateY(-1px); }
.status-pill { padding:.55rem .8rem; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:white; font-weight:700; }
.storybook { position:relative; min-height:28rem; overflow:hidden; border:1px solid #86bdc2; border-radius:48% 48% 1.4rem 1.4rem / 26% 26% 1.4rem 1.4rem; background:var(--sky); box-shadow:0 1.4rem 0 var(--paper); }
.sun { position:absolute; width:5rem; height:5rem; top:3rem; right:4rem; border-radius:50%; background:#f6c85f; }
.hill { position:absolute; left:-12%; width:125%; border-radius:50% 50% 0 0; }
.hill-back { height:15rem; bottom:5rem; background:#78aa65; transform:rotate(-4deg); }
.hill-front { height:10rem; bottom:0; background:#557f48; transform:rotate(3deg); }
.cottage { position:absolute; bottom:5.2rem; width:7rem; height:6rem; background:#f4d99b; border:.35rem solid #6c442f; border-radius:.4rem; z-index:3; }
.cottage::before { content:""; position:absolute; left:-1rem; top:-3.7rem; width:8.3rem; height:5rem; background:#b65345; clip-path:polygon(50% 0,100% 70%,90% 100%,10% 100%,0 70%); }
.cottage span { position:absolute; width:1.8rem; height:3rem; left:2.3rem; bottom:0; background:#6c442f; border-radius:.8rem .8rem 0 0; }
.cottage-left { left:12%; transform:scale(.88); }
.cottage-right { right:11%; bottom:7rem; }
.path { position:absolute; z-index:2; bottom:-1rem; left:38%; width:24%; height:15rem; background:#d9ab63; clip-path:polygon(40% 0,60% 0,100% 100%,0 100%); }
.tree { position:absolute; z-index:4; bottom:5rem; width:1.2rem; height:5rem; background:#70482e; }
.tree::before { content:""; position:absolute; left:-1.6rem; top:-3.5rem; width:4.4rem; height:4.5rem; border-radius:55% 45% 50% 50%; background:#4e8248; box-shadow:1.2rem .5rem 0 #679a50; }
.tree-one { left:5%; }.tree-two { right:4%; bottom:4rem; transform:scale(.8); }
.panel,.split,.testing,.legal-page { padding:clamp(4rem,8vw,7rem) clamp(1.25rem,8vw,8rem); }
.panel { background:var(--paper); text-align:center; }
.panel h2 { max-width:52rem; margin-left:auto; margin-right:auto; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; max-width:72rem; margin:3rem auto 0; text-align:left; }
.feature-grid article { padding:1.7rem; border:1px solid var(--line); border-radius:1rem; background:var(--cream); }
.feature-grid article>span { color:var(--gold); font-size:1.7rem; }
.feature-grid p,.split p,.testing p { color:var(--muted); }
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,8vw,8rem); }
.testing { display:grid; grid-template-columns:1.3fr .7fr; gap:3rem; align-items:center; background:#e7f1df; }
.testing-card { display:grid; grid-template-columns:1fr auto; gap:.7rem 1.5rem; padding:1.5rem; border:1px solid #b8cbaa; border-radius:1rem; background:rgba(255,255,255,.7); }
.testing-card span { color:var(--berry); font-weight:750; text-align:right; }
.legal-page { max-width:58rem; margin:auto; min-height:70vh; }
.legal-page h1 { font-size:clamp(2.5rem,5vw,4.5rem); }
.legal-page section { padding:1.2rem 0; border-top:1px solid var(--line); }
footer { display:flex; justify-content:space-between; gap:2rem; padding:2rem clamp(1.25rem,5vw,5rem); color:var(--muted); border-top:1px solid var(--line); }
@media (max-width:760px) { .site-header,.hero,.split,.testing,footer { display:block; } nav { gap:.65rem 1rem; margin-top:1rem; }.hero { min-height:auto; }.storybook { min-height:22rem; margin-top:3rem; }.feature-grid { grid-template-columns:1fr; }.testing-card { margin-top:2rem; } footer p { margin:.5rem 0; } }
@media (max-width:480px) { .hero-actions { align-items:flex-start; flex-direction:column; }.site-header { padding-left:1rem; padding-right:1rem; } nav { font-size:.92rem; }.testing-card { grid-template-columns:1fr; }.testing-card span { text-align:left; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button:hover { transform:none; } }