:root{--ink:#0a0f1f;--ink2:#121a33;--line:#243052;--text:#e8ecf6;--mute:#93a0c2;--sun:#ffb95e;--moon:#cdd8ef;--ok:#7fd6b0}
*{box-sizing:border-box}
html{background:var(--ink)}
body{margin:0;color:var(--text);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;background:linear-gradient(#0a0f1f,#0e1630 420px,#0a0f1f);overflow-x:hidden}
.hero{position:relative;padding:56px max(20px,calc((100% - 880px)/2 + 4px)) 150px;overflow:hidden}
.sky{position:absolute;left:0;right:0;bottom:0;width:100%;height:150px;z-index:0}
.hero>*:not(.sky){position:relative;z-index:1}
.eyebrow{letter-spacing:.22em;text-transform:uppercase;font-size:12px;color:var(--sun);margin:0 0 14px}
h1{font:400 clamp(30px,6vw,52px)/1.08 "Iowan Old Style",Palatino,"Palatino Linotype",Georgia,serif;margin:0 0 16px;max-width:15em}
h1 em{color:var(--sun);font-style:italic}
.lede{color:var(--mute);max-width:34em;margin:0;font-size:18px}
main{max-width:880px;margin:0 auto;padding:0 16px 40px}
.panel{background:var(--ink2);border:1px solid var(--line);border-radius:14px;padding:18px;display:grid;gap:14px;margin-bottom:20px}
label{display:grid;gap:6px;font-size:13px;color:var(--mute)}
input,select{font:inherit;color:var(--text);background:#0b1124;border:1px solid var(--line);border-radius:8px;padding:10px;width:100%;min-width:0}
input:focus,select:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.row.r3{grid-template-columns:1fr 1fr 110px}.row.r2{grid-template-columns:140px}
.slider output{color:var(--sun);font-weight:600}
input[type=range]{padding:0;accent-color:var(--sun)}
fieldset{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
legend{font-size:13px;color:var(--mute);margin-bottom:8px;padding:0}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-size:14px;color:var(--text);cursor:pointer;background:#0b1124}
.chip input{width:auto;accent-color:var(--sun)}
.ghost,.btn{font:inherit;border-radius:10px;padding:10px 16px;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--text);text-decoration:none;display:inline-block;text-align:center}
.btn{background:var(--sun);color:#1a1205;border-color:var(--sun);font-weight:600}
.btn.solid{background:var(--moon);border-color:var(--moon)}
.ghost:hover{border-color:var(--sun)}
.summary{margin:26px 4px 12px;color:var(--mute)}
.summary b{color:var(--text);font:400 34px "Iowan Old Style",Palatino,Georgia,serif;margin-right:6px}
.month{margin:22px 4px 8px;font:italic 400 20px "Iowan Old Style",Palatino,Georgia,serif;color:var(--sun)}
.card{display:grid;grid-template-columns:76px 1fr auto;gap:14px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:var(--ink2)}
.card.best{border-color:#6a5a3a;box-shadow:inset 3px 0 0 var(--sun)}
.d{font:400 30px/1 "Iowan Old Style",Palatino,Georgia,serif;text-align:center}
.d small{display:block;font:12px system-ui;color:var(--mute);letter-spacing:.08em;text-transform:uppercase;margin-top:4px}
.what{font-weight:600}
.what span{display:inline-block;font-size:11px;font-weight:600;color:#1a1205;background:var(--sun);border-radius:99px;padding:1px 8px;margin-left:6px;vertical-align:1px}
.times{color:var(--mute);font-size:14px;font-variant-numeric:tabular-nums}
.times i{font-style:normal;color:var(--text)}
.gap{text-align:right;font-variant-numeric:tabular-nums;color:var(--mute);font-size:13px;min-width:70px}
.gap b{display:block;color:var(--text);font-size:20px;font-weight:500}
.empty{padding:30px;text-align:center;color:var(--mute);border:1px dashed var(--line);border-radius:12px}
.unlock h2{font:400 26px "Iowan Old Style",Palatino,Georgia,serif;margin:0}
.unlock p{margin:0;color:var(--mute)}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.locked{opacity:.35;pointer-events:none}.unlocked .locked{opacity:1;pointer-events:auto}
.unlocked #pay,.unlocked #paid{display:none}
footer{max-width:880px;margin:0 auto;padding:10px 20px 50px;color:var(--mute);font-size:13px}
footer a{color:var(--moon)}
@media(max-width:520px){
 .hero{padding-top:36px}.lede{font-size:16px}
 .row{grid-template-columns:1fr}.row.r3{grid-template-columns:1fr 1fr}.row.r3 label:last-child{grid-column:1/-1}.row.r2{grid-template-columns:1fr}
 .card{grid-template-columns:56px 1fr;padding:12px}.gap{grid-column:2;text-align:left;display:flex;gap:8px;align-items:baseline}.gap b{font-size:16px}
 .d{font-size:26px}
}