/* Base: reset, layout, type scale, shared atoms (buttons, tags, kickers,
   empty states). Section-specific rules live in css/sections/<page>/. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 var(--font-body)}
a{color:var(--red-deep);text-decoration:none}
a:hover,a:focus-visible{color:var(--red);text-decoration:underline}
:focus-visible{outline:2px solid var(--red-deep);outline-offset:2px}
img{max-width:100%;display:block}
button{font:inherit}

.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
@media (min-width:720px){.wrap{padding:0 48px}}

h1,h2,h3{font-family:var(--font-display);font-weight:400;letter-spacing:.01em;margin:0}

/* Page hero: kicker + big Bebas heading (coming soon / visit us / business pages) */
.page-head{padding:28px 0 6px}
.page-head h1{font-size:42px;line-height:.95;margin-top:8px}
.page-head .lede{font-size:13px;line-height:1.6;color:var(--body);margin:10px 0 0;max-width:640px}
.page-head .sub{font-size:13px;color:var(--muted);margin-top:8px}
@media (min-width:720px){
  .page-head{padding:52px 0 12px}
  .page-head h1{font-size:72px;margin-top:10px}
  .page-head .lede,.page-head .sub{font-size:15px}
  .page-head .lede{margin-top:14px}
}

.kicker{font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--red-deep)}
@media (min-width:720px){.kicker{font-size:13px;letter-spacing:.22em}}

/* Buttons */
.btn{display:inline-block;font-weight:600;font-size:14px;padding:12px 22px;
  border-radius:var(--radius-btn);border:0;cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{text-decoration:none}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover,.btn-red:focus-visible{background:var(--red-deep);color:#fff}
.btn-outline{background:none;border:1.5px solid var(--ink);color:var(--ink)}
.btn-outline:hover,.btn-outline:focus-visible{color:var(--ink);background:var(--surface)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover,.btn-ink:focus-visible{color:#fff;background:#000}

/* Gold: Today markers + price tags ONLY (spec §2 rule 3) */
.price-tag{display:inline-block;background:var(--gold);color:var(--on-gold);
  font-weight:700;font-size:12px;padding:5px 8px;border-radius:3px;white-space:nowrap}
.today-chip{display:inline-block;background:var(--gold);color:var(--on-gold);
  font-weight:700;font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 6px;border-radius:2px;vertical-align:middle}

.cert-badge{display:inline-block;border:1.5px solid var(--ink);color:var(--ink);
  font-weight:700;font-size:11px;padding:3px 6px;border-radius:2px}

/* Section headings ("Coming soon", "Prices", …) */
.section-h{font-family:var(--font-display);font-size:26px;line-height:1.15}
.section-h--rule{border-bottom:3px solid var(--red);display:inline-block}
@media (min-width:720px){.section-h{font-size:40px}}

/* Empty states always point somewhere useful (spec §8) */
.empty-state{background:var(--surface);border:1px solid var(--line);
  padding:24px 20px;text-align:center}
.empty-state .h{font-family:var(--font-display);font-size:24px;line-height:1.05}
.empty-state p{font-size:13px;line-height:1.6;color:var(--muted);margin:6px 0 0}

/* Error pages (404 / maintenance share the pattern) */
.error-page{padding:56px 0 48px}
.error-page h1{font-size:46px;line-height:.95;margin-top:8px}
.error-page p{font-size:14px;line-height:1.6;color:var(--body);margin:12px 0 0;max-width:480px}
.error-page .actions{display:flex;align-items:center;gap:16px;margin-top:22px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}