:root{
  --ink:#121212; --ink2:#1a1a1a; --rule:#34312b; --rule2:#4a463d;
  --paper:#EEE7D8; --dim:#a39c8c; --gold:#C9A84C; --gold2:#dcbf6a; --rust:#D4784A; --ok:#8FBF8F;
  --hair:1px;
  --head:'Bebas Neue','Oswald','Arial Narrow','Helvetica Neue',sans-serif;
  --body:'Barlow','Inter','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
}
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){:root{--hair:0.5px}}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body{background:var(--ink);color:var(--paper);font:400 1rem/1.5 var(--body);min-height:100vh}
.wrap{max-width:560px;margin:0 auto;padding:0 20px 48px}
svg{display:block}
.sprite{position:absolute}
.ic{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter;flex:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
[tabindex="-1"]:focus{outline:none}
[hidden]{display:none!important}

.top{display:flex;justify-content:space-between;align-items:flex-end;padding:22px 0 14px;border-bottom:var(--hair) solid var(--rule2)}
.shop{font:400 1.9rem/1 var(--head);letter-spacing:.07em;text-transform:uppercase}
.shop small{display:block;font:400 .72rem/1.35 var(--mono);letter-spacing:.03em;color:var(--dim);text-transform:none;margin-top:7px}
.call{font:500 .8rem/1 var(--mono);color:var(--ink);background:var(--gold);padding:10px 12px;text-decoration:none;border-radius:2px;letter-spacing:.02em;white-space:nowrap;flex:none;margin-left:12px}
.demo{font:500 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding:9px 0;border-bottom:var(--hair) solid var(--rule)}

#app{min-height:60vh}
.screen{animation:in .22s ease-out both}
.screen.back{animation-name:inb}
@keyframes in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes inb{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.screen,.screen.back{animation:none}.dot{animation:none}}

.hero{padding:34px 0 22px}
.kick{display:flex;align-items:center;gap:9px;font:500 .72rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:blink 2.6s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
h1{font:400 3.9rem/.9 var(--head);letter-spacing:.015em;text-transform:uppercase}
.lede{margin-top:14px;color:var(--dim);max-width:34ch}
.hrs{margin-top:12px;font:400 .76rem/1.4 var(--mono);color:var(--dim);letter-spacing:.02em}
.sect{font:500 .68rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:26px 0 10px}
.list{border-top:var(--hair) solid var(--rule2)}
.row{display:grid;grid-template-columns:26px 28px 1fr 14px;gap:12px;align-items:center;width:100%;padding:16px 2px;border-bottom:var(--hair) solid var(--rule2);min-height:60px}
.row:hover,.row:focus-visible{background:#181714}
.row .n{font:400 .78rem/1 var(--mono);color:var(--dim);font-variant-numeric:tabular-nums}
.row .t{display:block;font:400 1.4rem/1.05 var(--head);letter-spacing:.06em;text-transform:uppercase}
.row .d{display:block;font:400 .86rem/1.35 var(--body);color:var(--dim);margin-top:3px}
.row .ar{width:14px;height:14px;color:var(--gold)}
.fine{margin-top:24px;font:400 .72rem/1.55 var(--mono);color:var(--dim);letter-spacing:.02em}

.bar{display:flex;justify-content:space-between;align-items:center;padding:16px 0 12px;font:500 .78rem/1 var(--mono);letter-spacing:.06em;color:var(--dim)}
.bar button{color:var(--gold);padding:8px 0;font:500 .78rem/1 var(--mono);letter-spacing:.06em}
.crumb{font:500 .7rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.q{font:400 2.1rem/1.02 var(--head);letter-spacing:.02em;text-transform:uppercase;margin:2px 0 18px}
.sub{color:var(--dim);margin:-6px 0 18px}
.opt{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;width:100%;padding:15px 2px;border-bottom:var(--hair) solid var(--rule2);min-height:56px}
.opt:hover,.opt:focus-visible{background:#181714}
.opts{border-top:var(--hair) solid var(--rule2)}
.opt .k{font:400 .78rem/1.7 var(--mono);color:var(--gold)}
.opt .x{font:400 1.02rem/1.35 var(--body)}

.sheet{border:var(--hair) solid var(--rule2);background:var(--ink2);border-radius:2px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/></filter><rect width='160' height='160' filter='url(%23g)'/></svg>")}
.sh{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:var(--hair) solid var(--rule2);font:500 .68rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.sec{padding:16px;border-bottom:var(--hair) dashed var(--rule2)}
.sec:last-child{border-bottom:0}
.lab{font:500 .68rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.big{font:400 2.1rem/1 var(--head);letter-spacing:.03em;text-transform:uppercase}
.pri{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.stamp{display:inline-flex;align-items:center;gap:9px;border:2px solid var(--rust);color:var(--rust);padding:8px 13px 6px;transform:rotate(-1.6deg);font:400 1.5rem/1 var(--head);letter-spacing:.14em;text-transform:uppercase;filter:url(#rough)}
.stamp .ic{width:20px;height:20px;stroke-width:1.8}
.stamp.gold{border-color:var(--gold);color:var(--gold)}
.stamp.green{border-color:var(--ok);color:var(--ok)}
.when{font:400 .84rem/1.4 var(--mono);color:var(--dim)}
.read{font:400 1.45rem/1.1 var(--head);letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px}
.sec p{margin:8px 0 0}
.sec p:first-of-type{margin-top:0}
.pts{list-style:none}
.pts li{display:grid;grid-template-columns:24px 1fr;gap:6px;padding:8px 0;border-top:var(--hair) dotted var(--rule2)}
.pts li:first-child{border-top:0;padding-top:0}
.pts li:last-child{padding-bottom:0}
.pts .k{font:400 .8rem/1.65 var(--mono);color:var(--dim)}
.btn{display:block;width:100%;text-align:center;text-decoration:none;font:400 1.35rem/1 var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--gold);padding:16px 14px 14px;border-radius:2px;margin-top:14px}
.btn:hover{background:var(--gold2)}
.ghost{display:block;width:100%;text-align:center;text-decoration:none;margin-top:10px;padding:14px;border:var(--hair) solid var(--rule2);border-radius:2px;font:500 .8rem/1 var(--mono);letter-spacing:.08em;color:var(--paper);text-transform:uppercase}
.ghost:hover{border-color:var(--gold)}
.foot{margin:16px 2px 0;font:400 .7rem/1.6 var(--mono);color:var(--dim)}

label{display:block;font:500 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:16px 0 6px}
input,textarea{width:100%;background:var(--ink2);border:var(--hair) solid var(--rule2);border-radius:2px;color:var(--paper);padding:13px 12px;font:400 1rem/1.3 var(--body)}
input:focus,textarea:focus{outline:none;border-color:var(--gold)}
textarea{min-height:104px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.err{margin-top:10px;font:400 .82rem/1.4 var(--mono);color:var(--rust)}
.card{border:var(--hair) solid var(--rule2);background:var(--ink2);border-radius:2px;padding:16px;margin-bottom:12px}
.card p{margin-top:6px}
.card a{color:var(--gold2)}
footer{margin-top:34px;padding-top:14px;border-top:var(--hair) solid var(--rule);font:400 .68rem/1.6 var(--mono);color:var(--dim);letter-spacing:.03em}
@media (min-width:700px){.wrap{padding-top:18px}h1{font-size:4.8rem}}
