:root {
  --ink:#292929;
  --body:#454545;
  --muted:#6b6b6b;
  --line:#e4e4e4;
  --orange:#b83f18;
  --orange-dark:#963411;
  --orange-soft:#fff1ec;
  --max:1180px;
}
* { box-sizing:border-box; }
body { margin:0; color:var(--body); background:#fff; font:16px/1.6 "Open Sans",Arial,sans-serif; }
a { color:var(--orange); text-underline-offset:3px; }
a:hover { color:var(--orange-dark); }
a:focus-visible { outline:3px solid #ffb79e; outline-offset:3px; }
h1,h2 { color:var(--ink); font-family:Arial,sans-serif; line-height:1.12; letter-spacing:-.025em; margin:0; }

.topbar { border-bottom:1px solid var(--line); background:#fff; }
.topbar-inner { width:min(var(--max),calc(100% - 32px)); min-height:68px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand img { display:block; height:30px; width:auto; }
.topbar nav { display:flex; gap:20px; font-size:.85rem; font-weight:700; }
.topbar nav a { color:#4b4b4b; text-decoration:none; }
.topbar nav a.active, .topbar nav a:hover { color:var(--orange); }

.hero { border-bottom:1px solid var(--line); background:radial-gradient(circle at 86% 12%,rgba(255,111,61,.14),transparent 28%),linear-gradient(180deg,#f8f8f8,#fff); }
.hero-inner { width:min(var(--max),calc(100% - 32px)); margin:auto; padding:64px 0 56px; }
.eyebrow { margin:0 0 12px; color:var(--orange-dark); font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.hero h1 { max-width:880px; font-size:clamp(2.2rem,5vw,4.2rem); }
.lead { max-width:720px; margin:20px 0 0; color:#5d5d5d; font-size:clamp(1.05rem,1.8vw,1.25rem); }

.button { display:inline-flex; min-height:54px; padding:13px 24px; align-items:center; justify-content:center; border:1px solid #a83712; border-radius:5px; background:var(--orange); color:#fff; font-weight:800; font-size:1.02rem; text-decoration:none; box-shadow:0 12px 28px rgba(150,52,17,.22); }
.button:hover { background:var(--orange-dark); color:#fff; }
.button.secondary { background:#fff; color:var(--ink); border-color:#bbb; box-shadow:none; }
.button.secondary:hover { border-color:var(--orange); color:var(--orange); }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

/* Hub: two QR codes side by side, for a screen or a printout */
.pair { width:min(var(--max),calc(100% - 32px)); margin:auto; padding:48px 0 72px; display:grid; grid-template-columns:1fr 1fr; gap:0; }
.pick { padding:8px 48px; text-align:center; }
.pick + .pick { border-left:1px solid var(--line); }
.pick h2 { font-size:clamp(1.6rem,3vw,2.4rem); }
.pick p { margin:10px auto 0; max-width:420px; min-height:3.2em; }
.pick .qr { display:block; width:min(320px,100%); height:auto; margin:28px auto 18px; }
.pick .url { font-family:Arial,sans-serif; font-weight:700; color:var(--ink); font-size:1.05rem; }
.pick .actions { justify-content:center; margin-top:18px; }

/* Product page */
.shell { width:min(var(--max),calc(100% - 32px)); margin:auto; padding:48px 0 80px; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:56px; align-items:start; }
.facts { margin:0; padding:0; list-style:none; }
.facts li { padding:16px 0; border-bottom:1px solid var(--line); font-size:1.04rem; }
.facts li:first-child { border-top:1px solid var(--line); }
.facts strong { color:var(--ink); }
.side { text-align:center; }
.side .qr { display:block; width:100%; height:auto; }
.side p { margin:10px 0 0; color:var(--muted); font-size:.9rem; }
.note { margin:22px 0 0; padding:16px 20px; border-left:5px solid var(--orange); background:var(--orange-soft); color:#333; }

footer { border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; }
footer div { width:min(var(--max),calc(100% - 32px)); margin:auto; padding:22px 0; display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; }

@media (max-width:760px) {
  .topbar nav { display:none; }
  .hero-inner { padding:40px 0 36px; }
  .pair { grid-template-columns:1fr; padding:24px 0 48px; }
  .pick { padding:28px 0; }
  .pick + .pick { border-left:0; border-top:1px solid var(--line); }
  .pick .qr { width:220px; }
  .pick p { min-height:0; }
  .shell { grid-template-columns:1fr; gap:32px; padding:32px 0 56px; }
  .side { display:none; }
  .button { width:100%; }
}