/* Psychic Visions AI — storytelling site
   Velvet-dark theatre. One ground, one gold, candle-warm highlights.
   Display: Cormorant Garamond. Script: Great Vibes (matches the app).
   Body: Spectral. */

:root{
  --bg:#0A0614; --bg-2:#140E24; --card:#1A0E30; --line:#2A1845;
  --gold:#D4A843; --gold-lt:#F5D77A; --gold-deep:#8A6A1F;
  --purple:#6B2FA0; --violet:#9B4DCA;
  --ink:#F4EEFF; --muted:#B7ABD9; --dim:#6B5E9B;
  --serif:"Cormorant Garamond",Georgia,serif;
  --script:"Great Vibes",cursive;
  --body:"Spectral",Georgia,serif;
  --nav-h:76px;
  --phone-w:min(300px,26vw);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.05;margin:0 0 .6em;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,5.4vw,4.8rem)}
h2{font-size:clamp(2rem,4.4vw,3.6rem)}
h3{font-size:1.6rem}
p{margin:0 0 1em}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.script{font-family:var(--script);font-weight:400}

/* grain: a static tile scrolled by CSS keeps dark areas from banding */
.grain{position:fixed;inset:-50%;pointer-events:none;z-index:60;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{to{transform:translate(3%,-2%)}}
@media (prefers-reduced-motion:reduce){.grain{animation:none}}

/* ── nav ─────────────────────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:50;display:flex;align-items:center;justify-content:center;padding:0 clamp(16px,3vw,40px);
  background:linear-gradient(180deg,rgba(10,6,20,.92),rgba(10,6,20,.55) 70%,transparent);transition:background .4s}
.nav.is-scrolled{background:rgba(10,6,20,.86);backdrop-filter:blur(14px);border-bottom:1px solid rgba(212,168,67,.14)}
.nav-brand{display:block;line-height:0}
.nav-logo{height:64px;width:auto;filter:drop-shadow(0 0 16px rgba(212,168,67,.35))}
@media (max-width:760px){.nav-logo{height:50px}}

/* ── the film ────────────────────────────────────────────────────────── */
.film{position:relative}
.world{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.world-layer{position:absolute;inset:0;opacity:0;will-change:opacity,transform}
.vignette{position:absolute;inset:0;background:
  radial-gradient(ellipse 70% 60% at 50% 45%,transparent 40%,rgba(10,6,20,.55) 75%,rgba(10,6,20,.95) 100%)}

.room{background-size:cover;background-position:50% 38%;filter:saturate(1.05)}
.sky{background:radial-gradient(ellipse at 50% 30%,#1a1030 0%,#0A0614 60%)}
#stars{position:absolute;inset:0;width:100%;height:100%}
.zodiac{position:absolute;left:50%;top:50%;width:min(92vmin,900px);aspect-ratio:1;transform:translate(-50%,-50%);will-change:transform}
.zodiac-ring{width:100%;height:100%;overflow:visible}
.zr-outer,.zr-inner{fill:none;stroke:var(--gold);stroke-opacity:.35;stroke-width:1}
.zr-outer{stroke-dasharray:2 6}
.zodiac-ring text{fill:var(--gold-lt);font-family:var(--serif);font-size:22px;text-anchor:middle;dominant-baseline:middle;opacity:.85}
.zodiac-ring text.is-yours{fill:#fff;font-size:34px;opacity:1;filter:drop-shadow(0 0 10px var(--gold))}

.cards{perspective:1400px}
.card{position:absolute;left:50%;top:50%;width:clamp(120px,13vw,190px);aspect-ratio:2/3.4;margin:calc(-1*clamp(120px,13vw,190px)*1.7/2) 0 0 calc(-1*clamp(120px,13vw,190px)/2);
  border-radius:12px;background:
    linear-gradient(160deg,#241540,#12091f 60%,#1b0f2e);
  border:1px solid rgba(212,168,67,.45);box-shadow:0 30px 60px rgba(0,0,0,.6),inset 0 0 0 6px rgba(212,168,67,.08),inset 0 0 40px rgba(155,77,202,.25);
  display:grid;place-items:end center;padding:14px;pointer-events:auto;cursor:pointer;
  transition:box-shadow .35s,filter .35s;will-change:transform}
.card::before{content:"";position:absolute;inset:10px;border:1px solid rgba(212,168,67,.35);border-radius:8px;
  background:radial-gradient(circle at 50% 42%,rgba(245,215,122,.55),rgba(245,215,122,0) 28%),
             conic-gradient(from 0deg,transparent 0 40%,rgba(212,168,67,.18) 50%,transparent 60% 100%)}
.card span{position:relative;font-family:var(--serif);font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt)}
.card:hover{filter:brightness(1.25);box-shadow:0 40px 80px rgba(0,0,0,.7),0 0 40px rgba(212,168,67,.35),inset 0 0 0 6px rgba(212,168,67,.18)}

.lines svg{width:100%;height:100%}
.pl{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-opacity:.8;
  stroke-dasharray:1 1;stroke-dashoffset:1;pathLength:1;filter:drop-shadow(0 0 6px rgba(212,168,67,.6))}
.pl-heart{stroke:var(--gold-lt)}

.voice{background:radial-gradient(ellipse at 50% 60%,rgba(107,47,160,.35),transparent 60%)}
#wave{position:absolute;inset:0;width:100%;height:100%}

.candles{background:radial-gradient(ellipse 60% 40% at 50% 100%,rgba(245,215,122,.32),transparent 70%),
                    radial-gradient(ellipse 30% 22% at 20% 92%,rgba(245,180,90,.28),transparent 70%),
                    radial-gradient(ellipse 30% 22% at 80% 92%,rgba(245,180,90,.28),transparent 70%)}

/* the held subject */
.stage{position:sticky;top:0;height:100vh;z-index:5;pointer-events:none;display:grid;place-items:center}
.phone{position:relative;width:var(--phone-w);aspect-ratio:1206/2622;border-radius:calc(var(--phone-w)*.17);
  background:#050308;padding:calc(var(--phone-w)*.035);box-shadow:0 60px 120px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.08),inset 0 0 0 2px rgba(255,255,255,.04);
  will-change:transform;transform:translateY(6vh) scale(.94)}
.phone-notch{position:absolute;top:calc(var(--phone-w)*.06);left:50%;transform:translateX(-50%);width:32%;height:calc(var(--phone-w)*.09);background:#050308;border-radius:999px;z-index:3}
.phone-screen{position:absolute;inset:calc(var(--phone-w)*.035);border-radius:calc(var(--phone-w)*.135);overflow:hidden;background:var(--bg)}
.scr{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .5s;will-change:opacity}
.scr-0{object-position:center}
.scr-voice{display:grid;place-items:center;background:var(--bg)}
.scr-voice{background:radial-gradient(ellipse at 50% 40%,#2a1660 0%,#120a2c 55%,var(--bg) 100%)}
.scr-voice video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75}
.scr-voice-label{margin-top:52%}
.scr-voice-label{position:relative;z-index:2;text-align:center;text-shadow:0 2px 20px rgba(0,0,0,.8)}
.scr-voice-label .script{display:block;font-size:clamp(1.6rem,3.2vw,2.6rem);color:var(--gold-lt)}
.scr-voice-label small{display:block;font-family:var(--serif);letter-spacing:.3em;text-transform:uppercase;font-size:.65rem;color:var(--muted);margin-top:.2em}
.phone-glow{position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(circle,rgba(212,168,67,.22),transparent 60%);z-index:-1;opacity:0;transition:opacity .6s}

/* chapters */
.chapter{position:relative;z-index:10;min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 4vh) clamp(28px,7vw,120px) 12vh;max-width:min(640px,42vw);box-sizing:border-box}
.ch-1{margin-top:-100vh}
.chapter:nth-child(even){margin-left:auto;text-align:left}
.ch-6{min-height:190vh;justify-content:flex-start;padding-top:22vh}   /* law 6: the defining event gets the frames */
.plaque{display:inline-block;font-family:var(--serif);font-size:.8rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(212,168,67,.35);padding:.45em 1em;border-radius:3px;margin-bottom:1.6rem;background:rgba(10,6,20,.55);backdrop-filter:blur(6px)}
.lede{font-size:1.18rem;color:var(--muted)}
.chapter p{color:var(--muted);font-size:1.06rem;max-width:46ch}
.hint{margin-top:3rem;font-family:var(--serif);letter-spacing:.4em;text-transform:uppercase;font-size:.7rem;color:var(--dim);animation:hint 2.4s ease-in-out infinite}
@keyframes hint{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(6px)}}
.sign-line{font-family:var(--serif);font-size:1.5rem;color:var(--ink)!important}
.sign-line strong{color:var(--gold-lt);font-weight:600}
.glyph{margin-left:.35em;color:var(--gold-lt)}
.dob{display:grid;gap:.45rem;margin-top:1.2rem;font-family:var(--serif);letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;color:var(--dim)}
.dob input{font:inherit;font-family:var(--body);font-size:1rem;letter-spacing:0;text-transform:none;color:var(--ink);background:rgba(26,14,48,.7);border:1px solid rgba(212,168,67,.3);border-radius:10px;padding:.7em .9em;color-scheme:dark;max-width:260px}
.rooms-list{list-style:none;padding:0;margin:0 0 1.2rem;display:grid;gap:.55rem}
.rooms-list li{display:grid;grid-template-columns:8.5em 1fr;gap:1em;align-items:baseline;color:var(--muted);font-size:1rem;padding:.55em 0;border-bottom:1px solid rgba(212,168,67,.14)}
.rooms-list b{font-family:var(--serif);font-weight:600;font-size:1.25rem;color:var(--ink);letter-spacing:.01em}
.cards-hint{font-size:.85rem!important;color:var(--dim)!important;font-style:italic}
.script-big{font-family:var(--script);font-size:clamp(3rem,7vw,5.6rem);color:var(--gold-lt);margin:0 0 -.2em;line-height:1;text-shadow:0 0 40px rgba(212,168,67,.35)}
blockquote{margin:1.4rem 0;padding-left:1.2rem;border-left:2px solid var(--gold);font-family:var(--serif);font-style:italic;font-size:1.35rem;color:var(--ink);line-height:1.4}
.creds{list-style:none;padding:0;margin:0 0 1.8rem;display:flex;flex-wrap:wrap;gap:.5rem}
.creds li{font-family:var(--serif);font-size:.85rem;letter-spacing:.08em;color:var(--gold-lt);border:1px solid rgba(212,168,67,.4);border-radius:999px;padding:.35em .9em;background:rgba(10,6,20,.5)}

/* the play button — the one interaction that must feel like an event */
.play{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;width:min(100%,420px);margin-top:1rem;
  background:rgba(26,14,48,.65);border:1px solid rgba(212,168,67,.45);border-radius:999px;padding:.6rem 1.4rem .6rem .6rem;color:var(--ink);font:inherit;cursor:pointer;
  backdrop-filter:blur(10px);transition:border-color .3s,box-shadow .3s;pointer-events:auto}
.play:hover{border-color:var(--gold-lt);box-shadow:0 0 40px rgba(212,168,67,.25)}
.play-ring{position:relative;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--gold-lt),var(--gold));display:grid;place-items:center;flex:none}
.play-ring::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(212,168,67,.6);opacity:0}
.play[aria-pressed="true"] .play-ring::after{animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.5);opacity:0}}
.play-icon{display:none}  /* triangle is drawn on .play-ring::before */
.play-ring::before{content:"";display:block;width:0;height:0;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--bg);margin-left:4px}
.play[aria-pressed="true"] .play-ring::before{width:14px;height:16px;border:0;margin:0;background:linear-gradient(90deg,var(--bg) 0 38%,transparent 38% 62%,var(--bg) 62%)}
.play-label{font-family:var(--serif);font-size:1.15rem;font-weight:500;text-align:left}
.play-time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.9rem}

.btn{display:inline-block;text-decoration:none;font-family:var(--serif);font-weight:600;font-size:1.1rem;letter-spacing:.02em;padding:.85em 1.9em;border-radius:999px;border:0;cursor:pointer;pointer-events:auto}
.btn-gold{color:var(--bg);background:linear-gradient(135deg,var(--gold-lt),var(--gold));box-shadow:0 14px 40px rgba(212,168,67,.25);transition:transform .25s,box-shadow .25s}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 20px 50px rgba(212,168,67,.38)}

/* ── after the film ───────────────────────────────────────────────────── */
.enter{position:relative;z-index:10;background:linear-gradient(180deg,rgba(10,6,20,0),var(--bg) 18%);padding:18vh clamp(20px,6vw,90px) 12vh}
.enter-inner{max-width:1040px;margin:0 auto;text-align:center}
.eyebrow{font-family:var(--serif);letter-spacing:.32em;text-transform:uppercase;font-size:.8rem;color:var(--gold)}
.enter .lede{max-width:56ch;margin:0 auto 3rem}
.offer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.4rem;text-align:left;margin:0 0 3rem}
.offer{position:relative;background:linear-gradient(160deg,rgba(26,14,48,.9),rgba(20,14,36,.9));border:1px solid rgba(212,168,67,.25);border-radius:22px;padding:2rem 2rem 1.4rem;overflow:hidden}
.offer::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 20% 0%,rgba(212,168,67,.14),transparent 55%);pointer-events:none}
.offer-live{border-color:rgba(212,168,67,.6);box-shadow:0 0 0 1px rgba(212,168,67,.2),0 40px 80px rgba(0,0,0,.4)}
.offer h3{color:var(--ink)}
.price{font-family:var(--serif);font-size:3rem;font-weight:600;color:var(--gold-lt);margin:.2em 0 .6em;line-height:1}
.price span{font-size:1rem;font-weight:400;color:var(--muted);margin-left:.3em}
.price em{font-size:1.3rem;font-style:italic;color:var(--muted);font-weight:400;margin:0 .25em}
.offer ul{margin:0 0 1rem;padding-left:1.1em;color:var(--muted)}
.offer li{margin:.35em 0}
.fine{font-size:.82rem!important;color:var(--dim)!important}

/* ── footer ───────────────────────────────────────────────────────────── */
.footer{position:relative;z-index:10;background:var(--bg);border-top:1px solid rgba(212,168,67,.14);padding:4rem clamp(20px,6vw,90px) 3rem;text-align:center;color:var(--dim);font-size:.9rem}
.footer-logo{height:96px;width:auto;margin:0 auto 1.6rem;filter:drop-shadow(0 0 18px rgba(212,168,67,.3))}
.footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem 2rem;margin-bottom:1.4rem;font-family:var(--serif);font-size:1rem}
.footer nav a{color:var(--muted);text-decoration:none}
.footer nav a:hover{color:var(--gold-lt)}
.footer p{max-width:70ch;margin:.3em auto}

/* ── portrait: its own camera, not a crop of the desktop (law 14) ─────── */
@media (max-width:1100px), (orientation:portrait){
  :root{--phone-w:min(200px,44vw)}
  .stage{align-items:start;padding-top:calc(var(--nav-h) + 3vh);box-sizing:border-box}
  .phone{transform:translateY(0) scale(1)}
  .chapter,.chapter:nth-child(even){max-width:none;margin:0;}
  .ch-1{margin-top:-100vh}
  .chapter,.chapter:nth-child(even){padding-top:calc(var(--nav-h) + 3vh + var(--phone-w)*2.25 + 4vh);padding-bottom:10vh;min-height:100vh;text-align:left}
  .ch-6{min-height:170vh}
  h1{font-size:clamp(2.2rem,10vw,3.4rem)}h2{font-size:clamp(1.7rem,7.5vw,2.6rem)}
  .card{width:clamp(70px,20vw,100px)}
  .rooms-list li{grid-template-columns:6.5em 1fr;font-size:.92rem}
  .zodiac{width:110vmin;top:38%}
}

/* ── Bottom dock — mirrors components/GlassDock.tsx in the app ─────────────
   Geometry copied from the app so the two read as one product: pill radius 30
   inside a radius-32 hairline ring, 6px pad, 60px minimum item, 9px/700/1.1
   uppercase labels, and the active item inverted to a gold fill on ink. */
.dock{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);z-index:55;
  display:flex;justify-content:center;pointer-events:none}
.dock-ring{position:relative;border-radius:32px;border:1px solid rgba(245,215,122,.2);
  box-shadow:0 8px 18px rgba(245,215,122,.22),0 18px 50px rgba(0,0,0,.55);pointer-events:auto}
.dock-pill{display:flex;align-items:center;gap:2px;padding:6px;border-radius:30px;
  background:rgba(26,14,48,.92);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%)}
.dock-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:7px 13px;min-width:60px;border-radius:22px;text-decoration:none;color:var(--muted);
  transition:background .25s,color .25s,box-shadow .25s}
.dock-item svg{width:22px;height:22px;fill:currentColor}
.dock-item span{font-family:var(--body);font-size:9px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;line-height:1}
.dock-item:hover{background:rgba(255,255,255,.08);color:var(--gold-lt)}
.dock-item.is-active{background:var(--gold);color:var(--bg);box-shadow:0 4px 12px rgba(245,215,122,.55)}
.dock-item.is-active:hover{background:var(--gold);color:var(--bg)}
/* one glowing dot with a short tail, riding the pill's outline (the app draws
   this with reanimated; here the dot and its tail are two dashes on the same
   rounded rect, the tail parked 6 units behind the dot) */
.dock-laser{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.dock-laser rect{fill:none;stroke:var(--gold-lt)}
.dock-tail{stroke-width:2;stroke-linecap:round;stroke-dasharray:5 95;opacity:.45;
  filter:drop-shadow(0 0 3px var(--gold-lt));animation:dockTail 7s linear infinite}
.dock-dot{stroke-width:5;stroke-linecap:round;stroke-dasharray:.01 99.99;
  filter:drop-shadow(0 0 5px var(--gold-lt)) drop-shadow(0 0 11px var(--gold));animation:dockDot 7s linear infinite}
@keyframes dockDot{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@keyframes dockTail{from{stroke-dashoffset:5}to{stroke-dashoffset:-95}}
@media (prefers-reduced-motion:reduce){.dock-tail,.dock-dot{animation:none}.dock-tail{opacity:0}}

/* content must clear the floating dock, exactly like DOCK_CLEARANCE in the app */
.footer{padding-bottom:118px}
@media (max-width:520px){
  .dock{bottom:calc(env(safe-area-inset-bottom,0px) + 8px)}
  .dock-item{min-width:0;padding:7px 9px}
  .dock-item span{font-size:8px;letter-spacing:.9px}
}

/* ═══ Enter: two ways in, and the booking form ═══════════════════════════
   The app card and the sitting card are deliberately unequal — the sitting is
   the thing you can act on right now, so it carries the gold edge and the CTA. */
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(18px,2.4vw,30px);margin:3rem 0 0;text-align:left}
.way{position:relative;border:1px solid rgba(212,168,67,.18);border-radius:20px;padding:clamp(24px,2.6vw,36px);
  background:linear-gradient(170deg,rgba(30,18,55,.72),rgba(14,9,28,.72));backdrop-filter:blur(8px);display:flex;flex-direction:column}
.way-live{border-color:rgba(212,168,67,.5);box-shadow:0 0 60px rgba(212,168,67,.12)}
.way-kicker{font-family:var(--serif);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin:0 0 .9rem}
.way h3{font-size:clamp(1.5rem,2.2vw,2rem);margin:0 0 .5em}
.way-price{font-family:var(--serif);margin:.2em 0 .8em;color:var(--gold-lt)}
.way-price b{font-size:clamp(2.2rem,3.4vw,3rem);font-weight:500}
.way-price span{color:var(--muted);font-size:1rem;margin-left:.2em}
.way-sub{color:var(--muted);margin:0 0 1.1em}
.way-list{list-style:none;padding:0;margin:0 0 1.6rem;display:grid;gap:.55em}
.way-list li{position:relative;padding-left:1.5em;color:var(--muted);font-size:1rem}
.way-list li::before{content:"✦";position:absolute;left:0;color:var(--gold);font-size:.8em;top:.25em}
.way .fine{margin-top:1rem}
.way-cta{align-self:flex-start;margin-top:auto}
.store-badge{display:inline-block;line-height:0;border-radius:10px;align-self:flex-start;margin-top:auto;
  transition:transform .25s,filter .25s;filter:drop-shadow(0 6px 22px rgba(0,0,0,.6))}
.store-badge:hover{transform:translateY(-2px);filter:drop-shadow(0 10px 26px rgba(212,168,67,.35))}
.store-badge img{width:168px;height:56px;max-width:100%}

/* ── the form ─────────────────────────────────────────────────────────── */
.booking{margin:clamp(48px,7vw,90px) auto 0;max-width:760px;text-align:left;
  border:1px solid rgba(212,168,67,.22);border-radius:22px;padding:clamp(26px,3.4vw,48px);
  background:linear-gradient(170deg,rgba(24,14,46,.8),rgba(12,8,24,.86));backdrop-filter:blur(10px)}
.booking-title{font-size:clamp(1.7rem,3vw,2.4rem);margin:0 0 1.6rem}
.bf-group{border:0;padding:0;margin:0 0 1.6rem;min-width:0}
.bf-group legend{font-family:var(--serif);font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);padding:0;margin-bottom:.8rem}
.bf-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.bf-choices-3{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.bf-choice{position:relative;display:block;cursor:pointer}
.bf-choice input{position:absolute;opacity:0;width:0;height:0}
.bf-choice-body{display:block;border:1px solid rgba(212,168,67,.22);border-radius:14px;padding:1rem 1.1rem;
  background:rgba(255,255,255,.02);transition:border-color .2s,background .2s,box-shadow .2s}
.bf-choice-body b{display:block;font-family:var(--serif);font-size:1.2rem;color:var(--ink);font-weight:500}
.bf-choice-body em{display:block;font-style:normal;font-family:var(--serif);font-size:1.5rem;color:var(--gold-lt);margin:.15em 0 .3em}
.bf-choice-body small{color:var(--dim);font-size:.86rem;line-height:1.5;display:block}
.bf-choice-sm .bf-choice-body{text-align:center;padding:.9rem 1rem}
.bf-choice-sm .bf-choice-body small{margin-top:.35em;font-size:.8rem}
.bf-choice-sm .bf-choice-body b{font-size:1.05rem}
.bf-choice:hover .bf-choice-body{border-color:rgba(212,168,67,.45)}
.bf-choice input:checked + .bf-choice-body{border-color:var(--gold);background:rgba(212,168,67,.1);box-shadow:0 0 26px rgba(212,168,67,.16)}
.bf-choice input:focus-visible + .bf-choice-body{outline:2px solid var(--gold-lt);outline-offset:3px}
.bf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px 18px;margin-bottom:1.1rem}
.bf-field{display:block;min-width:0}
.bf-field-wide{margin-bottom:1.3rem}
.bf-field > span{display:block;font-family:var(--serif);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:.45rem}
.bf-field > span i{font-style:normal;color:var(--dim);letter-spacing:.1em}
.bf-field input,.bf-field select,.bf-field textarea{width:100%;box-sizing:border-box;font-family:var(--body);font-size:1rem;
  color:var(--ink);background:rgba(255,255,255,.04);border:1px solid rgba(212,168,67,.2);border-radius:12px;padding:.8em 1em;
  transition:border-color .2s,box-shadow .2s}
.bf-field textarea{resize:vertical;line-height:1.6}
.bf-field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(1.25em),calc(100% - 15px) calc(1.25em);background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.6em}
/* iOS Safari sizes a date input from its own content and ignores width, so it
   grew past the panel and centred its text while every other field sat left.
   Stripping the native appearance puts it back under our control. */
.bf-field input[type="date"]{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%;text-align:left}
.bf-field input[type="date"]::-webkit-date-and-time-value{text-align:left;margin:0}
.bf-field input[type="date"]::-webkit-datetime-edit{padding:0}
.bf-field input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(74%) sepia(38%) saturate(560%) hue-rotate(2deg);opacity:.8;cursor:pointer}
/* a grid child will not shrink below its content unless told it may */
.bf-grid > *{min-width:0}
.bf-field input:focus,.bf-field select:focus,.bf-field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,168,67,.16)}
.bf-field input::placeholder,.bf-field textarea::placeholder{color:var(--dim)}
.bf-error{color:#F2A0B4;background:rgba(226,115,150,.1);border:1px solid rgba(226,115,150,.35);border-radius:12px;padding:.8em 1em;margin:0 0 1rem;font-size:.95rem}
.bf-submit{width:100%;margin-bottom:1rem}
.bf-submit[aria-busy="true"]{opacity:.7;pointer-events:none}
.btn-ghost{background:transparent;border:1px solid rgba(212,168,67,.4);color:var(--gold-lt)}
.btn-ghost:hover{border-color:var(--gold);background:rgba(212,168,67,.08)}
@media (max-width:640px){
  .booking{padding:22px 18px}
  .bf-choices,.bf-grid{grid-template-columns:1fr}
}

/* sittings promotion (owner console) */
.bf-choice-body em s{opacity:.55;font-weight:400;font-size:.85em;margin-right:6px}
.bf-promo{display:inline-block;margin-left:10px;padding:2px 10px;border-radius:999px;background:rgba(212,168,67,.18);color:#F1D27A;font-size:12px;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}