:root { --bg:#FBFAF7; --bg2:#F5F1E8; --bg3:#EFE7D8; --ink:#2B2825; --soft:#47423D; --muted:#7B7570; --ghost:#A8A29B; --rule:#E6E1D8; --accent:#C9664A; --accent-ink:#9C4A33; --water:#41607A; --water-bg:#E6EEF6; --water-bg2:#CFDDEC; --bedrock:#2E2623; --bedrock-ink:#D9CFC6; }
* { box-sizing:border-box } html { background:var(--bg); color:var(--ink); font-family:'Instrument Sans',-apple-system,'Helvetica Neue',Arial,sans-serif; -webkit-font-smoothing:antialiased; scroll-behavior:smooth }
body { margin:0; line-height:1.5 } a { color:var(--accent-ink); text-decoration:none } a:hover { text-decoration:underline }
.wrap { max-width:1040px; margin:0 auto; padding:0 28px }
h1,h2,h3,.serif { font-family:'Instrument Serif',Georgia,'Times New Roman',serif; font-weight:400; letter-spacing:-0.015em }
h2 { font-size:38px; line-height:1.08; margin:0 0 14px } h3 { font-size:24px; margin:0 0 8px }
p { margin:0 0 14px } .muted { color:var(--muted) } .small { font-size:13px }
header { display:flex; align-items:center; justify-content:space-between; padding:26px 0 }
.brand { display:flex; align-items:center; gap:12px; font-weight:600; font-size:17px; color:var(--ink) } .brand img { width:34px; height:34px; border-radius:8px }
nav { display:flex; gap:24px; font-size:14px } nav a { color:var(--muted) }
/* hero: the water */
.hero { background:linear-gradient(180deg,var(--water-bg) 0%, var(--bg) 100%); padding:56px 0 40px; }
.hero .wrap { display:grid; grid-template-columns:1.02fr 1fr; gap:52px; align-items:center }
h1 { font-size:64px; line-height:.98; margin:0 0 20px }
.lede { font-size:20px; line-height:1.45; color:var(--soft); margin:0 0 26px; max-width:520px }
.cta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px }
.btn { display:inline-block; background:var(--accent); color:#fff; font-weight:500; font-size:16px; padding:13px 24px; border-radius:999px } .btn:hover { text-decoration:none; filter:brightness(.95) }
code.brew { font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:13px; background:#fff; border:1px solid var(--rule); padding:10px 14px; border-radius:8px; color:var(--soft) }
.fine { font-size:13px; color:var(--muted) }
/* interactive core */
.demo { position:relative }
.core { border-radius:14px 14px 40px 40px; overflow:hidden; box-shadow:0 40px 70px -36px rgba(43,40,37,.5); font-size:12.5px; background:var(--bg) }
.core .water { position:relative; height:42px; background:linear-gradient(#E1ECF5,#C4D9EC); overflow:hidden } .core .water svg { position:absolute; left:0; top:0; animation:drift 6s linear infinite } .core .water span { position:absolute; right:16px; top:13px; font-size:11px; color:var(--water) }
.core .l { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 16px; cursor:pointer; transition:filter .15s; animation:settle .9s cubic-bezier(.2,.8,.2,1) both } .core .l:hover, .core .l.on { filter:brightness(1.06); outline:2px solid rgba(255,255,255,.85); outline-offset:-2px }
.core .l span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0 } .core .l b { font-family:'Instrument Serif',Georgia,serif; font-weight:400; font-size:17px; letter-spacing:-.02em; white-space:nowrap }
.grey { background:repeating-linear-gradient(135deg,#D3CFC9 0 6px,#C7C2BB 6px 8px); color:#383532 } .stone { background:repeating-linear-gradient(135deg,#3B2A27 0 6px,#332320 6px 8px); color:#D9B8B2 }
.card { margin-top:16px; min-height:168px; background:#fff; border:1px solid var(--rule); border-radius:12px; box-shadow:0 24px 50px -24px rgba(43,40,37,.35); padding:16px 18px; font-size:13px }
.card.swap { animation:fade .25s }
@keyframes fade { from { opacity:.4 } to { opacity:1 } } .card h3 { font-size:21px; margin:0 0 4px } .card .o { color:var(--soft); margin:0 0 8px } .card .e { margin:0 0 3px } .card .e span { color:var(--muted) } .card .e.w { color:var(--accent-ink) } .card .a { margin-top:10px; display:flex; gap:8px } .card .a i { font-style:normal; font-size:12px; padding:6px 12px; border-radius:999px; border:1px solid var(--ghost) } .card .a i.p { background:var(--accent); color:#fff; border-color:var(--accent) }
.hint { text-align:center; font-size:12px; color:var(--muted); margin-top:12px }
@keyframes settle { from { transform:translateY(-40px); opacity:0 } to { transform:none; opacity:1 } } @keyframes drift { to { transform:translateX(-120px) } }
@media (prefers-reduced-motion:reduce) { .core .l, .core .water svg { animation:none } }
/* strata: sections get warmer and deeper as you scroll */
section { padding:72px 0 } .s-sand { background:var(--bg2) } .s-ochre { background:var(--bg3) } .s-bedrock { background:var(--bedrock); color:var(--bedrock-ink) } .s-bedrock h2 { color:#fff } .s-bedrock .muted { color:#B4A89E } .s-bedrock a { color:#F0B9A5 }
.story { display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:center }
.story .q { font-family:'Instrument Serif',Georgia,serif; font-size:52px; line-height:1.04; letter-spacing:-.02em } .story .q em { color:var(--accent-ink) }
.story ol { margin:0; padding-left:22px; color:var(--soft); font-size:16px } .story ol li { margin-bottom:4px }
.three { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:30px }
.ev { background:#fff; border:1px solid var(--rule); border-radius:12px; padding:20px 20px 18px }
.ev .t { font-family:'Instrument Serif',Georgia,serif; font-size:21px; margin:0 0 4px } .ev .sz { color:var(--muted); font-size:13px; margin:0 0 12px } .ev p { font-size:14px; margin:0 0 5px } .ev p span { color:var(--muted) } .ev p.w { color:var(--accent-ink) }
.two { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:26px } .two p { font-size:16px; color:var(--soft) }
ul.promise { list-style:none; padding:0; margin:22px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:14px 32px } ul.promise li { font-size:16px; line-height:1.45; padding-left:26px; position:relative } ul.promise li::before { content:"—"; position:absolute; left:0; color:var(--accent) } ul.promise li strong { color:#fff }
table { width:100%; border-collapse:collapse; margin-top:26px; font-size:14px } th, td { text-align:left; padding:12px 10px; border-bottom:1px solid var(--rule); vertical-align:top } th { font-weight:500; color:var(--muted); font-size:13px } td:first-child, th:first-child { color:var(--ink); font-weight:500 } td.y { color:var(--accent-ink); font-weight:500 } .tnote { font-size:12px; color:var(--muted); margin-top:10px }
.install { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start } .install .box { background:#fff; border:1px solid var(--rule); border-radius:12px; padding:24px }
.faq details { border-top:1px solid var(--rule); padding:14px 0 } .faq summary { cursor:pointer; font-size:17px; font-weight:500; list-style:none } .faq summary::-webkit-details-marker { display:none } .faq p { color:var(--soft); margin:10px 0 0; font-size:15px }
footer { padding:34px 0 48px; font-size:13px; color:var(--muted); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap }
@media (max-width:820px) { .hero .wrap, .story, .three, .two, .install, ul.promise { grid-template-columns:1fr } h1 { font-size:44px } .story .q { font-size:38px }  }