@import url("assets/colors_and_type.css");
:root{--bg:#F6F5F2;--card:#fff;--line:rgba(22,22,22,.08);--ink:#161616;--mute:#6B6B6B;--mute2:#9A9A9A;
--p:#1F3326;--p2:#2E4A37;--pt:#E7ECE6;--gold:#C9A94D;--goldt:#F7F0DC;--ok:#3F7A52;--okt:#E3F0E6;--warn:#A9781F;--warnt:#FBF1DC;
--serif:"Domaine Display",Georgia,serif;--sans:"Founders Grotesk","Inter","Helvetica Neue",Arial,sans-serif;--r:16px;--sh:0 1px 2px rgba(0,0,0,.04),0 6px 18px -10px rgba(0,0,0,.12)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;font-size:15px}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
.demo-bar{background:#161616;color:#fff;text-align:center;font-size:11px;padding:5px 0;letter-spacing:.02em}
#app{max-width:600px;margin:0 auto;padding:0 12px 40px;min-height:100vh}
.ic{width:18px;height:18px;stroke-width:1.8}
/* top bars */
.topbar{display:flex;align-items:center;justify-content:space-between;height:56px;position:sticky;top:0;background:var(--bg);z-index:5}
.topbar .brand{font-weight:500;font-size:17px;letter-spacing:.14em}
.round{width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:var(--sh)}
.flag{width:30px;height:30px;border-radius:50%;background:var(--pt);display:grid;place-items:center;font-size:11px;font-weight:500;color:var(--p)}
.subbar{display:grid;grid-template-columns:38px 1fr 38px;align-items:center;height:56px;position:sticky;top:0;background:var(--bg);z-index:5}
.subbar h1{margin:0;text-align:center;font-size:16px;font-weight:500}
.subbar .skip{font-size:14px;color:var(--mute)}
.steps{display:flex;gap:6px;margin:0 0 18px}.steps i{flex:1;height:4px;border-radius:4px;background:#E2E2DE}.steps i.on{background:var(--p)}
/* hero */
.hero{position:relative;border-radius:22px;overflow:hidden;height:190px;background:#203226 center/cover;color:#fff;padding:24px 18px}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,26,18,.75),rgba(14,26,18,.35))}
.hero>*{position:relative;z-index:1}
.hero .hi{font-size:13px;letter-spacing:.14em;text-transform:uppercase;opacity:.9}
.hero h2{font-family:var(--serif);font-weight:400;font-size:34px;margin:6px 0 8px}
.hero p{margin:0;font-size:14px;opacity:.9}
.stay{margin:-46px 6px 0;position:relative;z-index:2}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:16px;margin-top:12px}
.row{display:flex;align-items:center;gap:12px}.grow{flex:1;min-width:0}
.thumb{width:44px;height:44px;border-radius:10px;background:#ccc center/cover;flex:none}
.ttl{font-weight:500;font-size:15px}.sub{color:var(--mute);font-size:13px;margin-top:2px}.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pin{width:34px;height:34px;border-radius:50%;background:var(--pt);color:var(--p);display:grid;place-items:center}
.hr{height:1px;background:var(--line);margin:14px 0}
.dates{display:flex;justify-content:space-between;align-items:center}
.lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.dates b{display:block;font-weight:500;margin:4px 0 6px}.dates small{font-size:12px;color:var(--mute)}
.swap{width:30px;height:30px;border-radius:50%;background:#F2F2EF;display:grid;place-items:center;color:var(--mute)}
.ibadge{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--pt);color:var(--p)}
.ibadge.gold{background:var(--goldt);color:var(--warn)}.ibadge.ok{background:var(--okt);color:var(--ok)}.ibadge.solid{background:var(--p);color:#fff}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;border-radius:12px;background:var(--p);color:#fff;font-weight:500;font-size:15px;margin-top:14px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line);height:42px}
.btn.text{background:none;color:var(--ink);height:36px;margin-top:6px;font-size:14px}
.btn.dark{background:#111}
.note{text-align:center;color:var(--mute);font-size:12px;margin-top:10px;display:flex;justify-content:center;gap:6px;align-items:center}
.note .ic{width:13px;height:13px}
.sec-h{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.sec-h a,.sec-h span.c{color:var(--p);text-transform:none;letter-spacing:0;font-size:12px;font-weight:500}
.prog{display:flex;align-items:center;gap:12px;padding:12px 0;position:relative}
.num{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--p);color:var(--p);display:grid;place-items:center;font-size:12px;font-weight:500;flex:none;background:#fff}
.num.done{background:var(--p);color:#fff}
.prog .mini{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:#F4F4F1;color:var(--p)}
.prog .mini .ic{width:15px;height:15px}
.chip{font-size:11px;padding:3px 9px;border-radius:999px;font-weight:500;white-space:nowrap}
.chip.req{background:var(--warnt);color:var(--warn);border:1px solid #F0DDB0}.chip.done{background:var(--okt);color:var(--ok);border:1px solid #CBE3D1}
.chip.p{background:var(--pt);color:var(--p)}
.tiles{display:flex;gap:8px;overflow-x:auto;margin:12px -12px 0;padding:2px 12px 6px;scrollbar-width:none}
.tile{flex:0 0 106px;background:#fff;border-radius:14px;box-shadow:var(--sh);padding:14px 8px;text-align:center}
.tile .ibadge{margin:0 auto 10px;border-radius:50%}.tile b{display:block;font-weight:500;font-size:13px}.tile small{color:var(--mute);font-size:11px}
.h2row{display:flex;justify-content:space-between;align-items:center;margin:22px 2px 10px}.h2row h3{margin:0;font-size:16px;font-weight:500}.h2row a{color:var(--p);font-size:13px;font-weight:500}
.ups{display:flex;gap:10px;overflow-x:auto;margin:0 -12px;padding:2px 12px 8px;scrollbar-width:none}
.up{flex:0 0 160px;background:#fff;border-radius:14px;box-shadow:var(--sh);padding:14px}.up .ibadge{width:28px;height:28px;border-radius:50%;margin-bottom:22px}.up b{font-weight:500;font-size:14px;display:block}.up small{color:var(--mute);font-size:12px}
.map{height:130px;border-radius:12px;background:linear-gradient(135deg,#E9ECE6 25%,#F3F4F0 25% 50%,#E9ECE6 50% 75%,#F3F4F0 75%) 0 0/40px 40px;display:grid;place-items:center;color:var(--p);margin:10px 0}
.map .ic{width:34px;height:34px;fill:var(--p);color:#fff}
.ph{font-family:var(--serif);font-weight:400;font-size:25px;margin:6px 2px 6px;line-height:1.15}
.lead{color:var(--mute);font-size:14px;margin:0 2px 14px;line-height:1.45}
.field{margin-top:12px}.field label{font-size:13px;display:block;margin-bottom:6px}.field label em{color:#B4472F;font-style:normal}
.inp{width:100%;height:44px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font:inherit;background:#fff}
.inp:focus{outline:2px solid var(--pt);border-color:var(--p)}
.tel{display:flex;gap:8px}.tel .cc{flex:0 0 78px}
.q{font-weight:500;font-size:14px;margin:16px 0 8px}
.seg{display:flex;gap:6px}.seg button{flex:1;height:38px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13px}
.seg button.on{background:var(--p);color:#fff;border-color:var(--p)}
.cnt{display:flex;align-items:center;justify-content:space-between;padding:12px;border:1px solid var(--line);border-radius:12px;margin-top:8px}
.cnt .ctl{display:flex;align-items:center;gap:12px}.cnt .ctl button{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--p)}
.cnt .ctl button.pl{background:var(--p);color:#fff;border-color:var(--p)}
.info{background:var(--pt);color:var(--p);border-radius:10px;padding:10px 12px;font-size:12px;margin-top:10px;display:flex;gap:8px;align-items:center}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--mute)}.chk input{width:18px;height:18px;accent-color:var(--p);margin:0}
.opt{border:1.5px solid var(--line);border-radius:14px;padding:6px;margin-top:12px;cursor:pointer}.opt.on{border-color:var(--p)}
.opt .top{background:#F4F4F1;border-radius:10px;padding:12px;position:relative}.opt.on .top{background:var(--pt)}
.radio{position:absolute;right:12px;top:12px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--mute2);background:#fff}
.opt.on .radio{border:6px solid var(--p)}
.price{font-family:var(--serif);font-size:24px;color:var(--p)}.price small{font-family:var(--sans);font-size:13px;color:var(--mute)}
.ticks{padding:8px 8px 4px}.ticks div{display:flex;gap:8px;font-size:13px;margin:8px 0;align-items:flex-start}.ticks .ic{width:15px;height:15px;color:var(--ok);flex:none;margin-top:1px}
.quote{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;font-size:12px;color:var(--p);margin:6px 8px}
.link-row{display:flex;justify-content:space-between;align-items:center;background:var(--pt);color:var(--p);border-radius:10px;padding:10px 12px;font-size:13px;font-weight:500;margin:8px}
.social{background:var(--goldt);border-radius:12px;padding:12px;display:flex;gap:10px;align-items:center;font-size:13px;margin-top:12px}
.av{display:flex}.av i{width:24px;height:24px;border-radius:50%;background:var(--p);color:#fff;font-style:normal;font-size:10px;display:grid;place-items:center;border:2px solid #fff;margin-left:-6px}.av i:first-child{margin-left:0}.av i:nth-child(2){background:var(--sage,#6E7A6B)}.av i:nth-child(3){background:var(--gold)}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;background:#fff;border-radius:999px;padding:3px 8px;color:var(--p);margin-bottom:6px}
.totrow{display:flex;justify-content:space-between;align-items:center;font-size:14px}.totrow b{color:var(--p);font-weight:500}
.rule{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.rule:last-child{border:0}
.uprow{border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:10px}
.uprow .pr{text-align:right;color:var(--p);font-weight:500}.uprow .pr small{display:block;color:var(--mute);font-weight:400;font-size:11px}
.addb{width:100%;height:38px;border:1px solid var(--line);border-radius:999px;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px}
.addb.on{background:var(--p);color:#fff;border-color:var(--p)}
.eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:4px 0 6px}
.almost{border-radius:16px;background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;padding:18px}
.almost .tag{background:rgba(255,255,255,.15);color:#fff}.almost h2{font-family:var(--serif);font-weight:400;margin:4px 0;font-size:24px}.almost p{margin:0;font-size:13px;opacity:.85}
.pay{display:flex;gap:8px}.pay button{flex:1;height:44px;border-radius:10px;border:1px solid var(--line);font-weight:500}.pay button.blk{background:#111;color:#fff}
.or{text-align:center;color:var(--mute);font-size:12px;margin:10px 0}
.cardsel{border:1.5px solid var(--p);background:var(--pt);border-radius:12px;padding:12px}
.visa{width:34px;height:22px;border-radius:4px;background:var(--p);color:#fff;font-size:9px;display:grid;place-items:center;font-weight:500}
.success{border-radius:16px;background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;padding:22px 18px;text-align:center}
.success .ok{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.15);display:grid;place-items:center;margin:0 auto 10px}
.success h2{font-family:var(--serif);font-weight:400;margin:6px 0;font-size:24px}.success p{margin:0;font-size:13px;opacity:.85}
.timer{display:flex;gap:8px;margin-top:10px}.timer div{flex:1;background:var(--p);color:#fff;border-radius:10px;text-align:center;padding:8px 0}.timer b{display:block;font-size:20px;font-weight:500}.timer small{font-size:11px;opacity:.8}
.warnline{color:var(--warn);font-size:12px;margin-top:10px;display:flex;gap:6px;align-items:center}
.lrow{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:12px;margin-top:8px}
.code{font-family:var(--serif);font-size:44px;letter-spacing:.2em;color:var(--p);text-align:center;margin:8px 0}
.stepacc{border:1px solid var(--line);border-radius:12px;margin-top:8px;padding:12px;display:flex;gap:12px;align-items:center}
.stepacc .num{background:var(--p);color:#fff}
.stepbody{font-size:13px;color:var(--mute);padding:0 12px 12px 48px;margin-top:-6px;border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-size:13px}.cal .dow{color:var(--mute);font-size:11px;padding:6px 0}
.cal button{height:38px;border-radius:10px}.cal .mut{color:#C8C8C4}.cal .cur{background:var(--pt);color:var(--p)}.cal .new{background:var(--p);color:#fff}.cal .ext{background:var(--goldt)}
.legend{display:flex;gap:14px;font-size:12px;color:var(--mute);margin-top:10px}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.task{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}.task:last-child{border:0}
.box{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--mute2);flex:none;display:grid;place-items:center;margin-top:2px}.task.on .box{background:var(--p);border-color:var(--p);color:#fff}.box .ic{width:13px;height:13px}
.task.on .ttl{text-decoration:line-through;color:var(--mute)}
.cat{flex:0 0 120px;background:#fff;border-radius:14px;box-shadow:var(--sh);padding:14px}
.place{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.place:last-child{border:0}
.st{font-size:11px;color:var(--ok)}.st.cl{color:#B4472F}
.big911{display:flex;align-items:center;justify-content:space-between;background:#FBEDEA;border-radius:14px;padding:14px;margin-top:12px}.big911 b{font-size:22px;color:#B4472F}
.lang{display:flex;align-items:center;gap:12px;padding:14px;border:1.5px solid var(--line);border-radius:12px;margin-top:8px;cursor:pointer;width:100%;text-align:left}.lang.on{border-color:var(--p);background:var(--pt)}
.validate{max-width:440px;margin:0 auto;padding-top:24px;text-align:center}
.validate img{height:22px;margin:24px auto 20px;display:block}
.validate .card{text-align:left}
.err{color:#B4472F;font-size:12px;margin-top:8px}
/* drawer & sheet */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:20}
.drawer{position:fixed;top:0;left:0;bottom:0;width:min(330px,86vw);background:var(--bg);z-index:21;padding:18px 14px;overflow:auto;border-radius:0 18px 18px 0}
.drawer .dg{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:18px 4px 8px}
.drawer button.di{display:flex;align-items:center;gap:12px;width:100%;padding:12px;background:#fff;border-radius:12px;margin-bottom:6px;font-size:14px;text-align:left}
.drawer .di .ic{color:var(--p)}
.sheet{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:600px;max-height:88vh;overflow:auto;background:#fff;border-radius:22px 22px 0 0;z-index:21;padding:10px 18px 24px}
.grab{width:40px;height:4px;border-radius:4px;background:#DDD;margin:0 auto 14px}
.stats{display:flex;gap:8px}.stats div{flex:1;background:var(--pt);border-radius:12px;padding:12px;text-align:center}.stats b{font-family:var(--serif);font-size:24px;color:var(--p);display:block}
.nc .ic{color:#B4472F!important}
.desk-note{display:none}
@media(min-width:900px){#app{padding-top:8px}.hero{height:210px}}
.hero h2,.almost h2,.success h2{color:#fff!important}.hero p,.hero .hi{color:#fff}
.success p,.almost p{color:#fff!important;opacity:.85}