@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');
:root{--ink:#172a26;--muted:#415850;--paper:#f7f3e8;--line:#c8cec0;--dark:#101f20;--mint:#bcebc9;--gold:#f4cc83}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 'DM Sans',sans-serif}
a{color:inherit;text-underline-offset:.22em}button,select{font:inherit}button{cursor:pointer}a:focus-visible,button:focus-visible,select:focus-visible{outline:3px solid #bd7935;outline-offset:4px}
.wrap{width:min(1240px,calc(100% - 52px));margin:auto}.bar,nav,.actions{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}.bar{justify-content:space-between;padding:1.1rem 0}
header,footer{background:var(--dark);color:#f8f4e8}header{border-bottom:1px solid #ffffff24}.brand{font-weight:700;text-decoration:none;letter-spacing:-.025em}.brand:before{content:'✳';color:var(--gold);margin-right:.5rem}
nav a{text-decoration:none;font-size:.92rem}.button{display:inline-flex;background:var(--ink);color:#fff;padding:.68rem 1.05rem;border-radius:4px;text-decoration:none;font-weight:700}.button:hover{filter:brightness(1.13)}
.hero{background:var(--dark);color:var(--paper);padding:clamp(3.5rem,8vw,7rem) 0}.hero p{color:#cfdbd0}.hero .button,header .button{background:var(--gold);color:var(--dark)}.label{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}.hero .label{color:var(--gold)}
h1,h2,h3{line-height:1.01;margin:0;font-weight:400;font-family:'Instrument Serif',Georgia,serif}h1{font-size:clamp(3.65rem,6.8vw,7rem);max-width:15ch}h1 em{color:var(--mint);font-weight:400}h2{font-size:clamp(2.7rem,5vw,4.8rem);margin-bottom:1.4rem}h3{font-size:2.1rem}
p{max-width:62ch;color:var(--muted)}.lede{font-size:clamp(1.1rem,1.7vw,1.34rem);max-width:46ch}.actions{margin-top:1.7rem}.section{padding:clamp(2.8rem,6vw,5.2rem) 0;border-bottom:1px solid var(--line)}
.hero-layout{display:grid;grid-template-columns:1fr minmax(0,1fr);align-items:center;gap:clamp(2rem,5vw,5rem)}.demo{min-width:0;color:#f8f4e8;background:#172d2c;border:1px solid #4b6a5b;border-radius:16px;overflow:hidden;box-shadow:0 24px 75px #0005}
.demo-top,.demo-output{padding:1rem 1.3rem}.demo-top{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;border-bottom:1px solid #4b6a5b}.demo-top label{font-size:.83rem}.demo select{max-width:100%;background:#243e39;color:#fff;border:1px solid #78917e;border-radius:4px;padding:.35rem}.demo p{margin:.3rem 0;color:#d2e0d3}.demo .prompt{padding:1rem 1.3rem 0;font-size:.95rem;min-height:4.2rem}
.constellation{height:clamp(150px,18vw,230px);position:relative;isolation:isolate;display:flex;justify-content:space-evenly;align-items:center;background:radial-gradient(ellipse,#365a48 0%,transparent 73%)}
.constellation:before{content:"";position:absolute;inset:22% 12%;border:1px solid #bcebc960;border-radius:50%;transform:rotate(-10deg);z-index:-1}.constellation:after{content:"";position:absolute;inset:40% 9%;border-top:1px solid #bcebc950;z-index:-1}
.agent{display:grid;place-items:center;gap:.5rem;border:0;background:transparent;color:#f8f4e8;font-size:.78rem;font-weight:700}.orb{display:grid;place-items:center;width:clamp(46px,8vw,83px);aspect-ratio:1;border-radius:50%;border:1px solid #83ac94;background:radial-gradient(circle at 33% 29%,#75a48c,#23443a 54%,#142623);box-shadow:0 0 24px #a2e7b130;color:#fff;font-size:1.45rem;transition:transform .45s,box-shadow .45s}.agent[aria-pressed=true] .orb{transform:translateY(-7px) scale(1.13);box-shadow:0 0 32px #f4cc8380;border-color:var(--gold);color:var(--gold)}
.demo[data-playing=true] .agent[aria-pressed=true] .orb{animation:breathe 2.4s ease-in-out infinite}.demo[data-playing=true] .constellation:before{animation:orbit 7s ease-in-out infinite}
@keyframes breathe{50%{transform:translateY(-12px) scale(1.17);box-shadow:0 0 45px #f4cc8390}}@keyframes orbit{50%{transform:rotate(10deg)}}
.demo-output{border-top:1px solid #4b6a5b;min-height:9.8rem}.demo-output strong{color:var(--gold)}.demo-output p{font-size:.94rem}.motion{margin-top:.65rem;background:none;color:var(--mint);border:0;padding:0;text-decoration:underline;text-underline-offset:3px;font-size:.84rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));gap:1.65rem}.grid article{border-top:2px solid var(--ink);padding:1.15rem 0}.grid article h3 a{text-decoration:none}.price{font-weight:700;font-size:1.35rem}.small{font-size:.88rem}.hs-form-frame{max-width:720px}.skip{position:absolute;left:1rem;transform:translateY(-150%);background:var(--paper);color:var(--ink);padding:.5rem}.skip:focus{transform:none}
.split{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.split article{padding:1.5rem;background:#e6eadd}.split article p{margin-bottom:.6rem}
@media(max-width:850px){.hero-layout{grid-template-columns:1fr}.hero h1{max-width:17ch}.demo{max-width:620px}}
@media(max-width:540px){.wrap{width:calc(100% - 32px)}nav{gap:.7rem}.bar{gap:.65rem}.split{grid-template-columns:1fr}.demo-output{min-height:11rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}