/* Claw'd Plans — simple design system: dark canvas, one sans family, serif only for the big title and prices,
   white buttons, one terracotta accent. Animations: transform/opacity only. */
:root {
  --bg: #0a0807; --card: #17110e; --card2: #211915; --line: rgba(255, 196, 150, .10); --line2: rgba(255, 196, 150, .2);
  --text: #fbefe3; --mute: #b5a597; --mute2: #7d6f63; --accent: #ff7a1a; --accent2: #ffb067; --accent-ink: #1a0b02; --ok: #9fd8a8; --warn: #ffc27a;
  --r: 18px; --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
  --f-body: 'Hanken', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --f-display: 'Serif4', Georgia, serif; --f-mono: var(--f-body);
  --glow: 0 0 0 1px rgba(255, 122, 26, .55), 0 0 28px rgba(255, 122, 26, .28);
  color-scheme: dark;
}
@font-face { font-family: 'Serif4'; src: url(/fonts/serif4.woff2?v=4) format('woff2'); font-weight: 500 900; font-display: swap; }
@font-face { font-family: 'Hanken'; src: url(/fonts/hanken.woff2?v=4) format('woff2'); font-weight: 300 900; font-display: swap; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 var(--f-body); overflow-x: clip; }
a { color: inherit; }
img { max-width: 100%; height: auto; }
::selection { background: var(--accent); color: var(--accent-ink); }
.wrap { width: min(1040px, 100% - 32px); margin-inline: auto; }
.mono { font-family: var(--f-body); }
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(55% 32% at 50% 8%, rgba(255, 122, 26, .16), transparent 70%),
  radial-gradient(70% 38% at 50% 78%, rgba(255, 110, 20, .16), transparent 72%),
  radial-gradient(120% 80% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55) 100%),
  var(--bg); }

.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 19px/1 var(--f-body); letter-spacing: -.01em; }
.brand img { border-radius: 50%; }
.nav-r { display: flex; align-items: center; gap: 8px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 11px 18px; border: 1px solid transparent; border-radius: 99px; cursor: pointer;
  background: var(--text); color: #1a0b02; font: 700 15px/1 var(--f-body); text-decoration: none; white-space: nowrap; transition: transform .2s var(--ease), opacity .2s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.98); }
.btn:disabled, .btn.wait { opacity: .6; pointer-events: none; }
.btn.accent { background: linear-gradient(180deg, #ff9a3c, #ff6a10); color: var(--accent-ink); box-shadow: 0 0 0 1px rgba(255, 160, 80, .7) inset, 0 6px 26px rgba(255, 106, 16, .35); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line2); }
.btn.small { min-height: 38px; padding: 8px 14px; font-size: 14px; }
.btn.big { width: 100%; min-height: 50px; padding: 15px 20px; font-size: 16px; }

.live-dot, .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; animation: blink 1.8s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
.offscreen, .offscreen * { animation-play-state: paused !important; }
.rv { opacity: 1; }

.foot { display: flex; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; margin-top: 80px; padding: 26px 0 36px; border-top: 1px solid var(--line); color: var(--mute2); font-size: 13px; }
.foot a { display: inline-flex; align-items: center; min-height: 36px; min-width: 32px; color: var(--mute); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }