:root{
  --bg:#EEF4F0; --ink:#12201B; --soft:#4B5E57; --line:#CFDDD5;
  --green:#0F6E56; --mid:#1D9E75; --paper:#FFFFFF; --loss:#A63A24;
  --serif:"DM Serif Display",Georgia,serif; --sans:"Inter",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--sans)}
.embed body,body.embed{background:transparent}
:focus-visible{outline:3px solid var(--mid);outline-offset:2px}
.page{max-width:1040px;margin:0 auto;padding:48px 16px 64px}
.intro{max-width:640px;margin-bottom:36px}
h1{font:400 clamp(34px,6vw,54px)/1.05 var(--serif);margin:0 0 14px;letter-spacing:-.01em}
.intro p{font-size:18px;color:var(--soft);margin:0}
h2{font:400 28px/1.15 var(--serif);margin:0 0 8px}

.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:40px;align-items:start}
@media(max-width:820px){.grid{grid-template-columns:1fr;gap:28px}}

/* inputs */
.field{padding:0 0 26px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.field:last-child{border-bottom:0}
.field label{display:block;font-weight:600;font-size:18px}
.hint{margin:2px 0 12px;color:var(--soft);font-size:15px}
.pair{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center}
input[type=number]{width:100%;padding:12px 14px;font:600 22px var(--sans);border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.money{display:flex;align-items:center;max-width:200px;border:1.5px solid var(--line);border-radius:10px;background:#fff;padding-left:14px}
.money span{font:600 22px var(--sans);color:var(--soft)}
.money input{border:0;padding-left:6px}
.money:focus-within{outline:3px solid var(--mid);outline-offset:2px}
.money input:focus-visible{outline:0}
input[type=range]{width:100%;accent-color:var(--green);height:28px}
.readout{margin:6px 0 0;font-weight:600;color:var(--green)}

/* the ticket: the one bold thing */
.ticket{position:sticky;top:20px;background:var(--paper);border-radius:6px;padding:22px 22px 0;
  box-shadow:0 1px 0 var(--line),0 18px 40px rgba(15,110,86,.12);font-variant-numeric:tabular-nums}
.tk-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:6px}
.tk-head h2{font-size:24px;margin:0}
.tk-no{font-size:14px;color:var(--soft)}
.tk-lines{margin:0}
.tk-lines div{display:flex;align-items:baseline;gap:8px;padding:9px 0}
.tk-lines dt{color:var(--soft);flex:0 0 auto}
.tk-lines div::after{content:"";order:1;flex:1;border-bottom:2px dotted var(--line);transform:translateY(-4px)}
.tk-lines dd{order:2;margin:0;font-weight:600}
.tk-lines .lost dt,.tk-lines .lost dd{color:var(--loss)}
.tk-total{margin:12px 0 0;padding:16px 0 20px;border-top:2px solid var(--ink)}
.tk-total span{display:block;color:var(--soft);font-size:15px}
.tk-total strong{display:block;font:400 clamp(44px,8vw,60px)/1 var(--serif);color:var(--loss);margin-top:6px}
/* tear-off stub with perforation */
.stub{position:relative;margin:0 -22px;padding:18px 22px 22px;background:#F4FAF7;border-radius:0 0 6px 6px;
  border-top:2px dashed var(--line)}
.stub::before,.stub::after{content:"";position:absolute;top:-11px;width:20px;height:20px;border-radius:50%;background:var(--bg)}
.stub::before{left:-10px}.stub::after{right:-10px}
.stub p{margin:0;font-size:16px}
.stub b{color:var(--green)}
.bump{animation:bump .35s ease-out}
@keyframes bump{40%{transform:scale(1.04)}}

/* lead form */
.lead{max-width:640px;margin-top:56px}
.lead > p{color:var(--soft);margin:0 0 20px}
.lead label{display:block;font-weight:600;font-size:15px;margin-bottom:14px}
.lead input,.lead select{display:block;width:100%;margin-top:5px;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:#fff;font:16px var(--sans);color:var(--ink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.two{grid-template-columns:1fr;gap:0}}
.send{margin-top:6px;border:0;border-radius:10px;background:var(--green);color:#fff;font:600 17px var(--sans);padding:15px 22px;cursor:pointer;width:100%;max-width:320px}
.send:hover{background:#0C5C48}
.send:disabled{opacity:.6}
.err{background:#FBE7E2;color:var(--loss);padding:10px 12px;border-radius:9px;font-size:15px}
.hp{position:absolute;left:-9999px;height:0;opacity:0}
.cta{display:inline-block;background:var(--green);color:#fff;text-decoration:none;font-weight:600;padding:13px 20px;border-radius:10px}

body.embed .page{padding:16px}
@media (prefers-reduced-motion:reduce){.bump{animation:none}}