:root{--mustard:#E9B72B;--brown:#2B1D0E;--tile:#6E7A4E;--tile2:#5A6540;--grout:#3E4630;--ink:#F1E9D2;--red:#F4212E;--green:#6BBE45;--black:#0F1419}
*{box-sizing:border-box}
html,body{margin:0;background:var(--tile);color:var(--ink);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
body{background-image:repeating-linear-gradient(0deg,var(--grout) 0 3px,transparent 3px 90px),repeating-linear-gradient(90deg,var(--grout) 0 3px,transparent 3px 90px)}
a{color:inherit;text-decoration:none}
h1,h2,.tick,.sign i{font-family:Anton,Impact,"Arial Black",sans-serif;font-weight:400;letter-spacing:1px}
.mono{font-family:"IBM Plex Mono","SF Mono",Menlo,monospace}
.top{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;background:var(--brown)}
.brand{display:flex;align-items:center;gap:12px;font-family:Anton,Impact,sans-serif;font-size:22px;letter-spacing:2px;color:var(--mustard)}
.top nav{display:flex;gap:22px;font-weight:700;font-size:15px}.top nav a.x{color:var(--mustard)}
.hero{display:grid;grid-template-columns:3fr 2fr;min-height:560px;background:var(--brown)}
.hero .photo{position:relative;overflow:hidden}.hero .photo img{width:100%;height:100%;object-fit:cover;display:block;object-position:center 40%}
.sign{position:absolute;left:5%;top:11%;width:22%;max-width:260px;aspect-ratio:2.3;background:var(--ink);border:4px solid #4A3B22;transform:skewY(4deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#2A2620}
.sign b{font-size:clamp(11px,1.3vw,19px);font-weight:900;letter-spacing:1px}.sign i{font-style:normal;color:#B3261E;font-size:clamp(16px,1.9vw,28px);letter-spacing:2px}
.panel{background:var(--mustard);color:var(--brown);padding:44px 40px;display:flex;flex-direction:column;justify-content:center}
.tick{display:inline-block;align-self:flex-start;background:var(--brown);color:var(--mustard);font-size:30px;letter-spacing:3px;padding:6px 16px 4px}
h1{font-size:clamp(48px,6vw,86px);line-height:.98;margin:18px 0 14px}
.lead{font-size:20px;line-height:1.45;font-weight:700;margin:0 0 22px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--brown);color:var(--mustard);font-weight:900;font-size:17px;padding:14px 20px;border:3px solid var(--brown)}
.btn.ghost{background:transparent;color:var(--brown)}
.dot{width:12px;height:12px;border-radius:6px;background:var(--red);display:inline-block}
.fine{margin:18px 0 0;font-size:13px;font-weight:700;opacity:.85}
.price{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:70px 6vw;max-width:1500px;margin:0 auto}
.stall{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000}
.stall .pov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the phone screen quad in the still: x 45.1–63.1 %, y 17.2–77.3 % */
.screen{position:absolute;left:45.1%;top:17.2%;width:18%;height:60.1%;background:#000;color:#E7E9EA;border-radius:4% / 2.5%;overflow:hidden;font-family:"IBM Plex Mono",monospace;padding:6% 5%;display:flex;flex-direction:column;gap:3%;container-type:inline-size}
.screen .statusbar{display:flex;justify-content:space-between;font-size:6cqw;font-weight:700}.screen .batt{color:var(--red)}
.screen .hdr{display:flex;align-items:center;gap:4%;font-size:5cqw;margin-top:4%}
.screen .live{display:flex;align-items:center;gap:3%;background:var(--red);color:#fff;font-weight:900;padding:1% 5%}.screen .live .dot{width:5cqw;height:5cqw;background:#fff}
.screen .pair{color:#9AA3AD}.screen .chip{margin-left:auto;background:var(--mustard);color:#111;padding:1% 5%;font-weight:700}
.screen .chip.live{background:var(--green)}.screen .chip.delayed{background:var(--red);color:#fff}
.screen .big{font-size:20cqw;font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1.05;margin-top:4%}
.screen .delta{font-size:6cqw;color:var(--green)}.screen .delta.down{color:var(--red)}
.screen .spark{width:100%;height:16cqw;margin-top:2%}.screen .spark polyline{fill:none;stroke:var(--mustard);stroke-width:3;vector-effect:non-scaling-stroke}
.screen .stats{display:grid;grid-template-columns:1fr 1fr;gap:4% 6%;margin-top:4%;border-top:1px solid #2F3336;padding-top:4%}
.screen .stats small{display:block;font-size:4.2cqw;color:#9AA3AD}.screen .stats b{font-size:6.5cqw;color:#fff}
.screen .asof{margin-top:auto;font-size:4cqw;color:#5F6B76}
.price .copy h2,.stream .copy h2{font-size:clamp(34px,4vw,56px);margin:0 0 14px;color:var(--mustard)}
.price .copy p,.stream .copy p{font-size:18px;line-height:1.55;margin:0 0 14px}
.small{font-size:13px;opacity:.7}
.plumbing{background:var(--brown);padding:70px 6vw}
.plumbing h2{font-size:clamp(40px,5vw,72px);margin:0;color:var(--mustard)}
.plumbing .sub{font-size:20px;font-weight:700;margin:8px 0 34px;color:var(--ink)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1400px}
.steps li{background:#1C2430;border:3px solid #4A5560;padding:22px 20px;display:flex;flex-direction:column;gap:10px;min-height:190px}
.steps .n{width:34px;height:34px;border-radius:17px;background:var(--mustard);color:var(--brown);font-family:Anton,Impact,sans-serif;font-size:20px;display:flex;align-items:center;justify-content:center}
.steps b{font-size:20px;color:#fff}.steps span:last-child{font-size:15px;line-height:1.5;color:#C9D1D9}
.tag{margin:28px 0 0;font-family:Anton,Impact,sans-serif;font-size:26px;letter-spacing:1px;color:var(--mustard)}
.stream{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:70px 6vw;max-width:1500px;margin:0 auto}
.stream .video{aspect-ratio:16/9;background:#000;border:4px solid var(--brown)}.stream video{width:100%;height:100%;display:block;object-fit:cover}
footer{background:var(--brown);padding:40px 6vw 60px}
footer .row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-family:Anton,Impact,sans-serif;font-size:20px;letter-spacing:2px;color:var(--mustard)}
footer .row a{color:var(--ink)}footer .row .mono{font-size:15px;letter-spacing:0;color:var(--ink);opacity:.8}
.disclaimer{max-width:900px;font-size:13px;line-height:1.6;opacity:.8;margin-top:22px}
@media (max-width:900px){.hero{grid-template-columns:1fr}.hero .photo{min-height:300px}.price,.stream{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}.top nav{display:none}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}