:root{--bg:#f2e7d7;--surface:#fbf6ec;--ink:#161818;--muted:#6f5e54;--line:#e0d1bb;--pri:#7e1322;--onpri:#fff;--sun:#eb732f}
@font-face{font-family:Anton;src:url(/shared/fonts/anton.ttf) format("truetype");font-display:swap}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
main{max-width:520px;margin:0 auto;padding:max(28px,env(safe-area-inset-top)) 18px 40px}
.brand{display:flex;gap:12px;align-items:center;font-size:15px;line-height:1.2}
.brand div{display:flex;flex-direction:column}.brand span{font-size:13px;font-weight:600}.brand b strong{font-weight:800}
h1{font-family:Anton,Impact,"Arial Narrow",sans-serif;font-weight:400;letter-spacing:.4px;line-height:1.05;font-size:44px;margin:26px 0 8px}h1 em{font-style:normal;color:var(--pri)}
h2{margin:0 0 12px;font-size:20px}
.lead{color:var(--muted);margin:0 0 22px}.small{font-size:13px;color:var(--muted)}.foot{text-align:center}
.card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:20px;margin:14px 0;box-shadow:0 6px 20px rgba(40,24,16,.05)}
.btn{display:block;text-align:center;background:var(--pri);color:var(--onpri);padding:16px;border-radius:999px;font-weight:800;text-decoration:none;letter-spacing:.4px}
ol{padding-left:20px;margin:16px 0 8px}li{margin:6px 0}
code{font-size:11px;word-break:break-all;background:#e9dcc6;padding:1px 6px;border-radius:6px}
.qr{text-align:center}.qr canvas{border-radius:16px;border:1px solid var(--line);background:#fff;padding:8px;width:184px;height:184px}
/* the iPhone card: one big tappable row that leads to the web app */
.webapp{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);background:#fff;border:1.5px solid var(--pri);border-radius:18px;padding:16px;transition:transform .15s,box-shadow .15s}
.webapp:active{transform:scale(.985)}.webapp:hover{box-shadow:0 6px 18px rgba(126,19,34,.18)}
.webapp-text{flex:1;font-size:15px;line-height:1.4}.webapp-text b{color:var(--pri)}
.arrow{flex:none;color:#fff;background:var(--pri);border-radius:50%;padding:10px;width:44px;height:44px}
.tip{margin:12px 2px 0}
.notice{background:#fff;border:1.5px solid var(--pri);border-radius:18px;padding:14px 16px;margin:0 0 6px;font-weight:600}
/* show the card for the visitor's own device first */
#cards{display:flex;flex-direction:column}
html[data-platform="ios"] #ios{order:-1}
html[data-platform="android"] #android{order:-1}
html[data-platform="ios"] #qr,html[data-platform="android"] #qr{display:none}