:root { color-scheme: light; --ink:#182b32; --muted:#40585f; --paper:#f6f8f4; --line:#c7d6cf; --accent:#125843; }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font:1.05rem/1.7 system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:var(--accent); text-underline-offset:.2em; } a:hover { text-decoration-thickness:.15em; } a:focus-visible,summary:focus-visible { outline:3px solid #a45109; outline-offset:4px; }
header,main,footer { max-width:1120px; margin:auto; padding:1.5rem clamp(1rem,4vw,3rem); } header { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--line); }
nav { display:flex; flex-wrap:wrap; gap:.4rem 1rem; } nav a { min-height:44px; display:inline-flex; align-items:center; } .brand { font-weight:750; max-width:30rem; }
.skip { position:absolute; top:-10rem; background:white; padding:1rem; } .skip:focus { top:0; z-index:1; }
.notice { border-left:4px solid #97500b; padding:1rem; background:#fff0d9; color:#532d08; } .hero { padding:3rem 0; max-width:54rem; } .eyebrow { text-transform:uppercase; letter-spacing:.14em; font-weight:650; color:var(--accent); }
h1 { font-size:clamp(2rem,5vw,4rem); line-height:1.14; letter-spacing:-.035em; overflow-wrap:anywhere; } h2 { font-size:1.65rem; line-height:1.3; margin-top:2.5rem; } h3 { line-height:1.4; } p,li { max-width:75ch; }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem; } .card { background:white; border:1px solid var(--line); border-radius:1rem; padding:1.5rem; } .card h2 { margin-top:0; font-size:1.25rem; }
.button { display:inline-block; padding:.7rem 1.2rem; border-radius:.5rem; background:var(--accent); color:white; font-weight:650; margin:.3rem .5rem .3rem 0; min-height:44px; }
details { border-bottom:1px solid var(--line); padding:1rem 0; } summary { cursor:pointer; font-weight:650; min-height:44px; } pre { white-space:pre-wrap; overflow-wrap:anywhere; padding:1rem; background:white; border:1px solid var(--line); } code { overflow-wrap:anywhere; }
figure { margin:1rem 0; } figure img { max-width:100%; height:auto; border-radius:1rem; } .asset { display:inline-block; padding:.5rem; } footer { border-top:1px solid var(--line); color:var(--muted); } .icon { width:56px; height:56px; vertical-align:middle; margin-right:.7rem; }
@media(max-width:760px) { .grid { grid-template-columns:1fr; } .hero { padding:1.5rem 0; } h1 { letter-spacing:-.02em; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }

.screenshots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem; }
@media(max-width:760px) { .screenshots { grid-template-columns:repeat(2,minmax(0,1fr)); } }