/* VILLINO · ERBA — checkout, trip, terms (sama keel mis index.html). Värvid: tokenid :root-is. */
:root{--page:#F3EFE9;--panel:#FFFCF8;--ink:#292D30;--muted:#5E605F;--line:#C7BDB2;--soft:#E3DCD3;--accent:#94452F;--accent-d:#7B3624;--gold:#7A5E28;--ok:#3F6B3A;--err:#A12B2B;--olive:#4A5240}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font-family:Montserrat,system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;margin:0;letter-spacing:.005em}
a{color:var(--accent)}img{max-width:100%;display:block}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 40px;background:var(--panel);border-bottom:1px solid var(--soft)}
.bar .brand{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;letter-spacing:.22em;font-size:20px;text-decoration:none;color:var(--ink);white-space:nowrap}
.bar a.back{font-size:14px;color:var(--muted);text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px;margin:0 auto;padding:0 24px}
h1.page{font-size:clamp(32px,4vw,44px);line-height:1.1;margin:40px 0 28px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;border-radius:999px;font:inherit;font-weight:500;text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not([disabled]){background:var(--accent-d)}
.btn-primary[disabled]{opacity:.45;cursor:default}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-block{width:100%}
.link{background:none;border:0;padding:0;font:inherit;color:var(--ink);text-decoration:underline;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:64px;align-items:start;padding-bottom:80px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px 28px;margin:0 0 16px}
.step[data-state="todo"]{opacity:.55}
.step-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.step-h h2{font-size:26px}
.step-h .n{font-family:Inter,sans-serif;font-size:13px;color:var(--muted)}
.step-sum{margin:6px 0 0;color:var(--muted);font-size:15px}
.step-body{margin-top:16px;display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.field input,.field select{font:inherit;font-size:16px;color:var(--ink);padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:#fff;min-height:48px}
.field input[disabled]{background:var(--soft)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer;background:#fff}
.opt input{margin-top:6px;accent-color:var(--accent);width:18px;height:18px}
.opt:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.opt b{display:block;font-weight:500}.opt span{display:block;color:var(--muted);font-size:14px}
.opt.dis{opacity:.5;cursor:default}
.msg{font-size:14px;margin:0}.msg.err{color:var(--err)}.msg.ok{color:var(--ok)}.note{margin:0;font-size:13px;color:var(--muted);line-height:1.6}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}.or::before,.or::after{content:"";flex:1;height:1px;background:var(--soft)}
.google{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--muted);font:inherit;font-weight:500;cursor:not-allowed}
.sum{position:sticky;top:24px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px}
.sum .ph{aspect-ratio:16/10;border-radius:12px;background:#E8DED2;overflow:hidden;position:relative;margin-bottom:16px}
.sum .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sum h3{font-size:28px;margin-bottom:4px}
.sum .free{font-size:14px;color:var(--ok);margin:0 0 4px}.sum .free a{color:inherit}
.sum hr{border:0;border-top:1px solid var(--soft);margin:16px 0}
.kv{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:15px;margin:0 0 10px}
.kv small{display:block;color:var(--muted);font-size:13px}
.kv .change{font-size:14px}
.lines{display:flex;flex-direction:column;gap:8px;font-size:15px}
.lines div{display:flex;justify-content:space-between;gap:16px}
.lines .tot{border-top:1px solid var(--soft);padding-top:12px;margin-top:4px;font-weight:600}
.lines .tot span:last-child{font-size:17px}
details.pb summary{cursor:pointer;font-size:14px;margin-top:12px;text-decoration:underline}
.timer{font-size:13px;color:var(--muted);margin:0 0 12px}
.timer b{font-family:Inter,sans-serif;color:var(--ink)}
.confirm{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:32px;max-width:760px;margin:0 auto 80px}
.confirm h1{font-size:40px;margin-bottom:8px}
.ok-badge{display:inline-flex;align-items:center;gap:8px;color:var(--ok);font-weight:500;font-size:14px;margin-bottom:12px}
.box{border:1px solid var(--soft);border-radius:12px;padding:16px 18px;background:#fff;margin:16px 0}
.box h3{font-size:22px;margin-bottom:6px}
#pay-el,#ece{min-height:60px}
.terms-chk{display:flex;gap:12px;align-items:flex-start;font-size:15px}
.terms-chk input{margin-top:5px;width:18px;height:18px;accent-color:var(--accent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.prose h2{font-size:30px;margin:36px 0 8px}.prose p,.prose li{color:var(--ink)}.prose .ph-note{background:#F3E4DB;color:#6E3222;padding:2px 8px;border-radius:6px;font-size:14px}
.sticky-m{display:none}
@media (max-width:860px){
 .bar{padding:14px 16px}.wrap,.narrow{padding:0 16px}
 .grid{grid-template-columns:minmax(0,1fr);gap:24px}
 .sum{position:static;order:-1}
 .step{padding:20px 18px}.row2{grid-template-columns:1fr}
 h1.page{margin:24px 0 16px}
 .confirm{padding:22px 18px}.confirm h1{font-size:32px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
[hidden]{display:none!important}