:root { --ink:#173438; --cream:#f4f0e5; --card:#fffdf7; --mint:#58c5a0; --mint-soft:#d8f2e6; --orange:#f47a45; --blue:#416fc1; --line:#c7cec5; --muted:#68797a; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 85% 5%,rgba(88,197,160,.24),transparent 24rem),linear-gradient(rgba(23,52,56,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(23,52,56,.04) 1px,transparent 1px),var(--cream); background-size:auto,28px 28px,28px 28px; font-family:"Avenir Next","Trebuchet MS",sans-serif; }
button { font:inherit; color:inherit; }
.shell { width:min(1260px,100%); min-height:100vh; margin:auto; padding:0 30px 28px; }
header { height:82px; display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid var(--ink); }
.brand { display:flex; align-items:center; gap:11px; color:inherit; text-decoration:none; font:900 18px "Avenir Next Condensed",sans-serif; text-transform:uppercase; letter-spacing:.07em; }
.brand span { display:grid; place-items:center; width:42px; height:42px; border:2px solid var(--ink); border-radius:50% 50% 50% 12px; background:var(--mint); font-size:23px; }
.header-actions { display:flex; align-items:center; gap:20px; }.flow-link { padding:9px 11px; border:1px solid var(--ink); color:var(--ink); background:var(--card); font:800 9px Menlo,monospace; text-decoration:none; text-transform:uppercase; box-shadow:3px 3px 0 var(--ink); }.flow-link:hover,.flow-link:focus-visible { outline:3px solid var(--orange); outline-offset:2px; }
.location { color:var(--muted); font:800 10px Menlo,monospace; text-transform:uppercase; letter-spacing:.08em; }.location i { display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:var(--mint); }
.hero { min-height:330px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:40px; padding:48px 3vw; }
.eyebrow { margin:0 0 12px; color:var(--muted); font:800 10px/1.5 Menlo,monospace; letter-spacing:.12em; }
h1 { margin:0 0 20px; font:900 clamp(62px,7vw,100px)/.82 "Avenir Next Condensed","Arial Narrow",sans-serif; letter-spacing:-.05em; text-transform:uppercase; } h1 em { color:var(--orange); font-style:normal; }
.hero > div:first-child > p:last-child { max-width:560px; color:var(--muted); font-size:17px; line-height:1.55; }
.how-to { display:flex; align-items:center; gap:10px; padding:17px 20px; border:2px solid var(--ink); background:var(--card); box-shadow:5px 5px 0 var(--ink); font:800 10px Menlo,monospace; text-transform:uppercase; white-space:nowrap; }.how-to span { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:var(--mint); }.how-to i { width:24px; height:1px; background:var(--line); }
.order-layout { display:grid; grid-template-columns:1.35fr .65fr; gap:28px; align-items:start; }
.menu,.cart { padding:26px; border:2px solid var(--ink); background:var(--card); box-shadow:8px 8px 0 var(--ink); }
.section-title,.cart-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:22px; }.section-title h2,.cart-head h2 { margin:0; font:900 34px "Avenir Next Condensed",sans-serif; text-transform:uppercase; }.section-title > small { padding:7px 9px; border:1px solid var(--ink); background:var(--mint-soft); font:800 9px Menlo,monospace; text-transform:uppercase; }
.products { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.product { cursor:pointer; padding:0; overflow:hidden; border:2px solid var(--ink); background:#faf7ed; text-align:left; box-shadow:4px 4px 0 var(--ink); transition:.15s; }.product:hover,.product:focus-visible { outline:3px solid var(--orange); outline-offset:2px; transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); }.product.selected { background:var(--mint-soft); }
.art { height:190px; display:grid; place-items:center; border-bottom:2px solid var(--ink); }.art.cold { background:#dce7df; }.art.orange { background:#ffd9c8; }.art.blue { background:#d9e2f4; }.art i { width:70px; height:112px; display:grid; place-items:center; border:3px solid var(--ink); border-radius:9px 9px 18px 18px; color:white; box-shadow:inset 0 8px rgba(255,255,255,.2); font:900 24px "Avenir Next Condensed",sans-serif; font-style:normal; }.cold i { background:#29403d; }.orange i { background:var(--orange); }.blue i { background:var(--blue); }
.product-copy { display:block; padding:16px; }.product-copy b,.product-copy small,.product-copy strong { display:block; }.product-copy b { font:900 18px "Avenir Next Condensed",sans-serif; text-transform:uppercase; }.product-copy small { min-height:34px; margin:5px 0 12px; color:var(--muted); font-size:12px; line-height:1.35; }.product-copy strong { color:var(--orange); font:900 15px Menlo,monospace; }
.cart { position:sticky; top:20px; min-height:535px; }.text-button { cursor:pointer; padding:0; border:0; border-bottom:1px solid var(--ink); background:transparent; font:800 10px Menlo,monospace; text-transform:uppercase; }
.empty-cart { display:grid; place-items:center; min-height:390px; text-align:center; }.empty-cart p { max-width:220px; color:var(--muted); line-height:1.5; }.cup-icon { font-size:64px; filter:grayscale(1); opacity:.55; }
.selected-drink { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:16px; padding:14px 0; border-block:1px solid var(--line); }.selected-drink > span { font:900 20px "Avenir Next Condensed",sans-serif; text-transform:uppercase; }.selected-drink strong { font:900 13px Menlo,monospace; text-transform:uppercase; }.selected-drink b { color:var(--orange); font:900 42px "Avenir Next Condensed",sans-serif; }
.qr { width:min(250px,88%); aspect-ratio:1; display:grid; place-items:center; margin:0 auto 15px; padding:9px; border:2px solid var(--ink); background:white; }.qr img { width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }.qr > span { color:var(--line); font:900 42px Menlo,monospace; }
.scan-title { margin:0; text-align:center; font:900 20px "Avenir Next Condensed",sans-serif; text-transform:uppercase; }.scan-help { margin:5px auto 15px; max-width:270px; color:var(--muted); text-align:center; font-size:11px; line-height:1.45; }
.button { display:block; padding:13px 15px; border:2px solid var(--ink); background:var(--mint); color:var(--ink); box-shadow:4px 4px 0 var(--ink); font:900 10px Menlo,monospace; text-align:center; text-decoration:none; text-transform:uppercase; }.button:hover,.button:focus-visible { outline:3px solid var(--orange); outline-offset:2px; }
.waiting { display:flex; justify-content:center; align-items:center; gap:9px; margin-top:18px; color:var(--muted); font:800 10px Menlo,monospace; text-transform:uppercase; }.waiting i { width:9px; height:9px; border-radius:50%; background:var(--orange); animation:pulse 1s infinite; }
.success { display:flex; align-items:center; gap:13px; margin-top:18px; padding:14px; border:2px solid var(--ink); background:var(--mint-soft); }.success > span { display:grid; place-items:center; width:38px; height:38px; border:2px solid var(--ink); border-radius:50%; background:var(--mint); font-weight:900; }.success b,.success small { display:block; }.success b { font:900 16px "Avenir Next Condensed",sans-serif; text-transform:uppercase; }.success small { margin-top:3px; color:var(--muted); }
.success-dialog { width:min(430px,calc(100% - 28px)); padding:34px; border:2px solid var(--ink); background:var(--card); color:var(--ink); box-shadow:10px 10px 0 var(--ink); text-align:center; }.success-dialog::backdrop { background:rgba(23,52,56,.72); backdrop-filter:blur(3px); }.success-dialog-mark { display:grid; place-items:center; width:76px; height:76px; margin:0 auto 20px; border:3px solid var(--ink); border-radius:50%; background:var(--mint); font-size:40px; font-weight:900; }.success-dialog h2 { margin:0; font:900 34px/1 "Avenir Next Condensed",sans-serif; text-transform:uppercase; }.success-dialog > p:not(.eyebrow) { margin:14px auto 24px; color:var(--muted); line-height:1.5; }.success-dialog .button { width:100%; cursor:pointer; }
.flow-shell { max-width:1120px; }.flow-page { padding:70px 0 20px; }.flow-hero { max-width:850px; margin-bottom:55px; }.flow-hero h1 { font-size:clamp(56px,8vw,104px); }.flow-hero > p:last-child { max-width:650px; color:var(--muted); font-size:18px; line-height:1.55; }.service-rail { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:stretch; margin-bottom:55px; }.service-rail article { min-height:170px; padding:18px; border:2px solid var(--ink); background:var(--card); box-shadow:5px 5px 0 var(--ink); }.service-rail article:nth-of-type(4) { background:var(--mint-soft); }.service-rail article span,.service-rail article b,.service-rail article small { display:block; }.service-rail article span { color:var(--orange); font:900 11px Menlo,monospace; }.service-rail article b { margin:34px 0 8px; font:900 18px/1.05 "Avenir Next Condensed",sans-serif; text-transform:uppercase; }.service-rail article small { color:var(--muted); font-size:11px; line-height:1.4; }.service-rail > i { align-self:center; padding:0 7px; font:900 22px Menlo,monospace; font-style:normal; }.flow-steps { margin:0; padding:0; border-top:2px solid var(--ink); list-style:none; }.flow-steps li { display:grid; grid-template-columns:90px 1fr; gap:20px; padding:28px 0; border-bottom:1px solid var(--line); }.flow-steps li > span { color:var(--orange); font:900 30px "Avenir Next Condensed",sans-serif; }.flow-steps b { font:900 23px "Avenir Next Condensed",sans-serif; text-transform:uppercase; }.flow-steps p { max-width:720px; margin:7px 0 0; color:var(--muted); line-height:1.55; }.flow-page code { padding:2px 5px; background:var(--mint-soft); font:700 11px Menlo,monospace; }.flow-rule { margin-top:38px; padding:26px; border:2px solid var(--ink); background:#ffd9c8; box-shadow:7px 7px 0 var(--ink); }.flow-rule strong { font:900 25px "Avenir Next Condensed",sans-serif; text-transform:uppercase; }.flow-rule p { margin:8px 0 0; line-height:1.55; }
.sequence-section { margin:0 0 55px; padding:26px; border:2px solid var(--ink); background:var(--card); box-shadow:8px 8px 0 var(--ink); }.sequence-section h2 { margin:0 0 20px; font:900 34px "Avenir Next Condensed",sans-serif; text-transform:uppercase; }.sequence-scroll { overflow-x:auto; border:1px solid var(--line); background:linear-gradient(rgba(23,52,56,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(23,52,56,.035) 1px,transparent 1px),#fffdf7; background-size:24px 24px; }.sequence-scroll:focus-visible { outline:3px solid var(--orange); outline-offset:3px; }.sequence-diagram { display:block; min-width:900px; width:100%; height:auto; }.sequence-diagram .actor rect { fill:var(--mint-soft); stroke:var(--ink); stroke-width:2; }.sequence-diagram .actor text { fill:var(--ink); font:900 16px "Avenir Next Condensed",sans-serif; text-anchor:middle; text-transform:uppercase; }.sequence-diagram .lifelines line { stroke:var(--muted); stroke-width:1.5; stroke-dasharray:7 7; }.sequence-diagram .messages line,.sequence-diagram .self-message { fill:none; stroke:var(--ink); stroke-width:2; marker-end:url(#sequenceArrow); }.sequence-diagram .messages text { fill:var(--ink); stroke:var(--card); stroke-width:6px; paint-order:stroke; font:700 12px Menlo,monospace; text-anchor:middle; }.sequence-hint { margin:12px 0 0; color:var(--muted); font:700 9px Menlo,monospace; text-transform:uppercase; }
footer { display:flex; justify-content:space-between; margin-top:42px; padding-top:20px; border-top:2px solid var(--ink); color:var(--muted); font:800 9px Menlo,monospace; text-transform:uppercase; }
.toast { position:fixed; right:22px; bottom:22px; max-width:340px; padding:14px 17px; border:2px solid var(--ink); background:var(--ink); color:white; box-shadow:5px 5px 0 var(--orange); font:700 11px Menlo,monospace; transform:translateY(160%); transition:.2s; }.toast.show { transform:none; }
[hidden] { display:none !important; }
@keyframes pulse { 50% { opacity:.25; transform:scale(.75); } }
@media(max-width:900px){.hero{grid-template-columns:1fr}.how-to{width:max-content}.order-layout{grid-template-columns:1fr}.cart{position:static;order:-1}.products{grid-template-columns:repeat(3,1fr)}.service-rail{grid-template-columns:1fr 1fr;gap:14px}.service-rail>i{display:none}}
@media(max-width:640px){.shell{padding-inline:14px}.location{display:none}.hero{min-height:auto;padding:42px 0}.hero h1{font-size:58px}.how-to{width:100%;overflow-x:auto;padding:14px;font-size:8px}.products{grid-template-columns:1fr}.product{display:grid;grid-template-columns:120px 1fr}.art{height:150px;border:0;border-right:2px solid var(--ink)}.art i{width:58px;height:94px}.product-copy small{min-height:auto}.menu,.cart{padding:18px}.cart{min-height:auto}.empty-cart{min-height:230px}.success-dialog{padding:28px 20px}.flow-page{padding-top:48px}.flow-hero{margin-bottom:35px}.service-rail{grid-template-columns:1fr}.service-rail article{min-height:135px}.service-rail article b{margin-top:24px}.flow-steps li{grid-template-columns:55px 1fr;gap:10px}footer{display:block}footer span{display:block;margin-top:7px}}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}