
:root{--paper:#fff;--ink:#16181d;--soft:#626a78;--rule:#e6e8ec;--blue:#2f6fde;--blue-ink:#fff;--star:#f2a516;--shade:#f5f6f8;--you:#d94a30;
--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
@media (prefers-color-scheme:dark){:root{--paper:#121418;--ink:#eceef2;--soft:#9aa2b0;--rule:#2a2e36;--blue:#6f9cff;--blue-ink:#121418;--shade:#1b1e24;--you:#ff7a5c;color-scheme:dark}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:18px;line-height:1.55}
a{color:var(--blue);text-underline-offset:3px}
.wrap{max-width:1040px;margin:0 auto;padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px))}
.col{max-width:640px}
.top{display:flex;justify-content:space-between;align-items:center;padding-block:22px;gap:16px}
.name{font-weight:700;font-size:19px;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.top nav{display:flex;gap:22px;font-size:16px}.top nav a{color:var(--soft);text-decoration:none}.top nav a:hover{color:var(--ink)}
h1,h2{margin:0;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(38px,5.4vw,56px);line-height:1.05;font-weight:700}
h2{font-size:28px;line-height:1.2;font-weight:700;margin-bottom:14px}
p{margin:0 0 14px}
.sub{font-size:21px;color:var(--soft);margin-top:20px;max-width:34em}
.btn{display:inline-block;background:var(--blue);color:var(--blue-ink);font:inherit;font-size:17px;font-weight:600;text-decoration:none;padding:12px 22px;border-radius:999px;border:0;cursor:pointer}
.btn.plain{background:none;color:var(--blue);padding-inline:6px}
.btn:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:28px}
.hero{display:grid;grid-template-columns:1fr 380px;gap:64px;align-items:start;padding-block:40px 80px}
.hero>*{min-width:0}
.block{padding-block:56px;border-top:1px solid var(--rule)}
/* the search mock */
.store{background:var(--shade);border-radius:28px;padding:18px 16px 8px}
.search{background:var(--paper);border-radius:12px;padding:10px 12px;display:flex;gap:8px;align-items:center;font-size:16px;margin-bottom:10px}
.search svg{flex:none}
.res{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center;padding:11px 4px;border-bottom:1px solid var(--rule)}
.res:last-child{border-bottom:0}
.ic{width:48px;height:48px;border-radius:11px}
.blur{height:11px;border-radius:6px;background:var(--rule);width:62%;margin-bottom:7px}
.blur.s{width:38%;height:9px}
.meta{font-size:13px;color:var(--soft);display:flex;gap:6px;align-items:center}
.stars{color:var(--star);letter-spacing:1px}
.gap{text-align:center;font-size:13px;color:var(--soft);padding:12px 0 6px}
.res.you{background:var(--paper);border-radius:12px;padding-inline:10px;border:0;margin-bottom:8px}
.res.you b{display:block;font-size:15px}
.cap{font-size:13px;color:var(--soft);margin-top:10px}
ol.steps{padding-left:1.2em;margin:0}ol.steps li{margin-bottom:12px;padding-left:4px}
dl.when{margin:0;display:grid;grid-template-columns:150px 1fr;row-gap:14px;column-gap:20px}
dl.when dt{font-weight:600}dl.when dd{margin:0;color:var(--soft)}
.prices{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:760px}
.prices>div{border-left:2px solid var(--rule);padding-left:22px}
.amt{font-size:40px;font-weight:700;letter-spacing:-.02em;margin:6px 0 8px}.amt span{font-size:17px;font-weight:500;color:var(--soft)}
.qa h3{font-size:18px;margin:26px 0 6px}.qa p{color:var(--soft)}
form{display:grid;gap:14px;max-width:480px;margin-top:18px}
label{display:grid;gap:6px;font-size:16px;font-weight:600}
input{font:inherit;font-size:17px;padding:12px 14px;border-radius:10px;border:1px solid var(--rule);background:var(--paper);color:var(--ink)}
.note{font-size:15px;color:var(--soft)}.note.err{color:var(--you)}
table{border-collapse:collapse;width:100%;max-width:640px;font-size:16px}
th,td{text-align:left;padding:10px 0;border-bottom:1px solid var(--rule)}th{color:var(--soft);font-weight:500;font-size:15px}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
.tw{overflow-x:auto}
footer{border-top:1px solid var(--rule);padding-block:28px 40px;font-size:15px;color:var(--soft)}
footer a{color:var(--soft)}footer .wrap{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between}
@media (max-width:860px){.hero{grid-template-columns:1fr;gap:40px}.prices{grid-template-columns:1fr;gap:28px}dl.when{grid-template-columns:1fr;row-gap:2px}dl.when dd{margin-bottom:12px}.top nav a.hide{display:none}}
.hero{grid-template-columns:1fr 400px;gap:56px;padding-block:24px 48px;align-items:center}
h1{font-size:clamp(42px,5.6vw,64px)}
.sub{margin-top:14px}
.block{padding-block:40px}
.formbox{background:var(--shade);border-radius:20px;padding:18px;margin-top:24px}
.formbox form{max-width:none;margin:0;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px}
.formbox form>*{min-width:0}.formbox input{width:100%;min-width:0}
.formbox label[for=app]{grid-column:1/-1}
.formbox label{font-size:14px}
.formbox .note{grid-column:1/-1;margin:0}
.formbox .btn{white-space:nowrap;padding-block:13px}
.do{display:flex;gap:10px 22px;flex-wrap:wrap;margin-top:16px;font-size:15px;color:var(--soft)}
.do span{white-space:nowrap;display:flex;gap:8px;align-items:center}
.do i{font-style:normal;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:12px;font-weight:700}
.gapline{position:relative;margin:4px 0 4px 27px;height:84px;border-left:2px dashed var(--you)}
.gapline span{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:14px;font-weight:600;color:var(--you);white-space:nowrap}
.two{display:grid;grid-template-columns:1fr 1fr;gap:40px}.two>*{min-width:0}
.two h3{font-size:20px;margin:0 0 8px}
.go{display:inline-block;margin-top:6px;font-weight:600;text-decoration:none}
.stick{display:none}
@media (max-width:860px){.hero{grid-template-columns:1fr;gap:32px}h1{font-size:40px}.formbox form{grid-template-columns:1fr}.two{grid-template-columns:1fr;gap:24px}
 .stick{display:block;position:fixed;left:0;right:0;bottom:0;z-index:5;background:var(--paper);border-top:1px solid var(--rule);
 padding:10px max(22px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(22px,env(safe-area-inset-left,0px))}
 .stick .btn{display:block;text-align:center}body{padding-bottom:76px}}
@media (prefers-reduced-motion:no-preference){.res.you{animation:lift .7s .4s ease-out both}@keyframes lift{from{opacity:.3;transform:translateY(8px)}}}
