/* self-hosted fonts (declared here, not in extra stylesheets, to save render-blocking requests; a face only downloads when used) */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:optional;src:url(/fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:optional;src:url(/fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Pinyon Script';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/pinyon-script-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/cormorant-garamond-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/fredoka-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/fredoka-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/fredoka-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/fredoka-latin-700-normal.woff2) format('woff2')}
/* site.css: Furoki Bingo's override layer on the shared Furoki brand (brand v3).
   Load order: furoki-tokens.css, furoki.css (synced from furoki-website/brand/, see brand.lock.json), then this file.
   The shared look (sand page, framed column, nav and phone menu, headings, pill buttons, focus ring, gradient panels,
   cards, steps, pricing, FAQ, closing panel, footer, legal pages) comes from furoki.css; don't restyle it here.
   Bingo's localisation: the ball-outline pattern on .gfx.grid panels, the party accent on the dauber highlighter,
   the gold button variant, and its own components (floating orbs, browser preview, card preview, pack chips,
   floating demo pill, company-event panel). */
:root {
  --display: var(--font-display);
  --accent: var(--orange); --accent-2: var(--pink);
  /* Bingo's own twist: the pattern on .gfx.grid panels is a grid of ball outlines */
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Ccircle cx='15' cy='15' r='9' fill='none' stroke='%23fff' stroke-opacity='.65'/%3E%3C/svg%3E");
}

.btn.gold { background: var(--ink); border-color: var(--ink); color: var(--card); }

/* hero: a wider stage for the live game preview */
.hero-demo { position: relative; }
.hero-in { grid-template-columns: 1fr 1.2fr; }
@media (max-width: 1000px) { .hero-in { grid-template-columns: 1fr; } }

.orb { position: absolute; border-radius: 50%; display: grid; place-items: center; font: 600 22px var(--display); color: rgba(255, 255, 255, .95); box-shadow: inset -10px -12px 24px rgba(0, 0, 0, .14), inset 10px 10px 24px rgba(255, 255, 255, .5), 0 24px 40px rgba(0, 0, 0, .14); animation: float 8s ease-in-out infinite; pointer-events: none; z-index: 2; }
/* kept clear of the demo's buttons */
.orb.o1 { width: 84px; height: 84px; background: radial-gradient(circle at 32% 28%, #ffd2b8, var(--orange) 70%); left: 6%; top: -34px; }
.orb.o2 { width: 64px; height: 64px; background: radial-gradient(circle at 32% 28%, #d9d3ff, var(--violet) 70%); font-size: 18px; right: -10px; top: -22px; animation-delay: -2s; }
.orb.o3 { width: 52px; height: 52px; background: radial-gradient(circle at 32% 28%, #ffe0ee, var(--pink) 70%); font-size: 16px; right: 12%; bottom: -22px; animation-delay: -4s; }
@keyframes float { 50% { transform: translateY(-14px) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .orb { animation: none; } }
@media (max-width: 1000px) { .orb { display: none; } }
.browser { border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px rgba(0, 0, 0, .25); }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #fff; border-bottom: 1px solid var(--line); }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #dcdcdc; }
.browser-bar span { margin-left: 10px; font-size: var(--fs-12); color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 3px 14px; flex: 1; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-frame { position: relative; aspect-ratio: 1280 / 820; overflow: hidden; }
.browser-frame iframe { position: absolute; top: 0; left: 0; width: 1280px; height: 820px; border: 0; transform-origin: 0 0; }
.looks { display: flex; align-items: center; gap: 12px; margin-top: 20px; font-size: var(--fs-13); font-weight: var(--weight-medium); color: var(--muted); flex-wrap: wrap; }
.looks > div { display: flex; gap: 8px; }
.look { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; transition: transform .12s; }
.look:hover { transform: scale(1.12); }
.look[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }

.card-stage { min-height: 460px; display: grid; place-items: center; }
.card-demo { --primary: #b08d3e; --on-primary: #fff; --accent: #d9b8a6; --bg: #faf7ef; --text: #4a4137; --font-display: 'Pinyon Script', cursive;
  max-width: 400px; margin: 0 auto; width: 100%; background: linear-gradient(color-mix(in srgb, var(--accent) 14%, #fff), #fff); border-radius: 22px; padding: 22px 24px 16px; box-shadow: 0 30px 60px rgba(0, 0, 0, .3); transform: rotate(-3deg); transition: transform .3s; color: var(--ink); }
.card-demo:hover { transform: rotate(0); }
.cd-names { font-family: var(--font-display); text-align: center; font-size: 40px; line-height: 1.1; color: var(--text); margin-bottom: 12px; }
.card-demo[data-font="serif"] .cd-names, .card-demo[data-font="modern"] .cd-names, .card-demo[data-font="playful"] .cd-names { font-size: 30px; font-weight: 600; }
.card-demo[data-dark="1"] .cd-names { color: color-mix(in srgb, var(--primary) 70%, #000); }
.cd-names span { color: var(--primary); font-size: .75em; }
.cd-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cd-grid b { background: var(--primary); color: var(--on-primary); text-align: center; border-radius: 8px; padding: 4px 0; font-size: 20px; }
.cd-grid i { font-style: normal; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--primary) 40%, #ddd); border-radius: 8px; font-weight: 600; font-size: 20px; color: var(--ink); position: relative; }
.cd-grid i.m::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: color-mix(in srgb, var(--accent) 70%, transparent); mix-blend-mode: multiply; }
.cd-foot { text-align: right; font-size: 12px; font-weight: 600; margin-top: 10px; color: var(--muted); }

/* pricing: Bingo extras on the shared price cards */
.price.best .btn.gold { background: #fff; border-color: #fff; color: var(--ink); }
.price.best .btn.gold:hover { background: #ececec; }
.packs-line { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.packs-line span { font-size: var(--fs-13); padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); color: #fff; }
.packs-line b { font-weight: var(--weight-medium); }

.final .btn.gold { background: #fff; border-color: #fff; color: var(--ink); }
.final .btn.gold:hover { background: #ececec; }

/* floating demo pill, like a voice-chat button */
.float-demo { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 140%); z-index: 40; display: inline-flex; align-items: center; gap: 12px; background: #fff; color: var(--ink); text-decoration: none; font-size: var(--fs-13); font-weight: var(--weight-medium); padding: 8px 24px 8px 8px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12), 0 0 0 1px var(--line); transition: transform .35s ease; white-space: nowrap; }
.float-demo.on { transform: translate(-50%, 0); }
.float-demo i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: var(--weight-medium) var(--fs-13) var(--font-sans); font-style: normal; color: #fff; background: radial-gradient(circle at 32% 28%, #ffd2b8 0, var(--orange) 70%); box-shadow: inset -4px -5px 9px rgba(0, 0, 0, .15); }
.float-demo i.roll { animation: roll .5s ease; }
@keyframes roll { from { transform: rotate(-200deg) scale(.6); } }
@media (prefers-reduced-motion: reduce) { .float-demo { transition: none; } }

/* company events */
.corp-stage { min-height: 420px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.corp-co { text-transform: uppercase; letter-spacing: .18em; font-size: var(--fs-13); font-weight: var(--weight-medium); color: rgba(255, 255, 255, .8); }
.corp-title { font: var(--weight-regular) var(--fs-24)/1.1 var(--display); letter-spacing: -.02em; margin: 10px 0 26px; }
.corp-balls { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.corp-balls i { font-style: normal; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 34% 28%, #fff, #e9ecf5 60%, #c9cfe0); color: #1c2240; font-weight: var(--weight-medium); font-size: var(--fs-14); box-shadow: inset -5px -6px 10px rgba(0, 0, 0, .15), 0 10px 20px rgba(0, 0, 0, .2); }
.corp-chat { display: grid; gap: 10px; margin-top: 30px; justify-items: start; text-align: left; }
.corp-chat span { background: #fff; color: var(--ink); border-radius: 22px; padding: 11px 18px; font-size: var(--fs-13); max-width: 90%; }
.corp-chat span.me { justify-self: end; background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .55); }
.sub a { color: inherit; }