/* Bliss Live Events - web
   Tokens and components lifted from bliss-web-prototype.html and the page
   design guide. Adapted for real pages: what the prototype positioned inside
   its fake browser viewport (scrim, modal, payment sheet, toast) is now fixed
   to the window. */

:root{
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --serif:"Lora",Georgia,"Times New Roman",serif;
  --mono:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --site:#150E2E; --site-2:#1B1236;
  --ink:#EDE7FA; --ink-2:#9C93BE; --ink-3:#6E6690;
  --s-ink:#EDE7FA; --s-ink-2:#9C93BE; --s-ink-3:#6E6690;
  --line:rgba(196,178,255,.12); --line-2:rgba(196,178,255,.22);
  --fill:rgba(255,255,255,.035);
  --violet:#A78BFA; --amber:#F0A868; --live:#FF5A72; --ok:#6EE7B7;
  --halo-violet:#7C3AED; --halo-orchid:#C084FC; --halo-peach:#FDBA74; --halo-gold:#FFD9A8;
  --halo:linear-gradient(96deg,var(--halo-violet) 0%,var(--halo-orchid) 50%,var(--halo-peach) 100%);
  --halo-glow:0 8px 26px rgba(192,132,252,.34),0 2px 10px rgba(253,186,116,.18);
  --t-quick:160ms; --t-std:280ms; --t-slow:460ms;
  --ease:cubic-bezier(.32,.72,0,1); --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;

  /* Header/footer tokens lifted verbatim from blissbygurudev.com's own
     stylesheet (bliss-style.css) so those two components match it exactly.
     Prefixed and kept separate from the tokens above - nothing else on this
     site should start pulling from these. */
  --ref-sans:"Outfit",var(--sans);
  --ref-glass:rgba(244,241,255,.045); --ref-glass-2:rgba(244,241,255,.07);
  --ref-line:rgba(192,132,252,.16); --ref-line-strong:rgba(192,132,252,.32);
  --ref-text:#F4F1FF; --ref-text-soft:rgba(244,241,255,.72); --ref-text-mute:rgba(244,241,255,.52);
  --ref-cta:linear-gradient(100deg,#6D28D9 0%,#8B5CF6 24%,#C084FC 48%,#E9A07E 76%,#FB923C 100%);
  --ref-ease:cubic-bezier(.22,1,.36,1);
  --ref-maxw:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
/* A single element even a fraction of a pixel wider than the viewport lets
   the whole page scroll sideways - harmless in Chrome (rounds away), but iOS
   Safari's elastic overscroll makes it visible as a sliver of bare background
   next to whatever sits at the edge (the hero photo, most noticeably). This
   is the belt to whatever the true fractional-pixel culprit turns out to be
   - it cannot make a genuinely too-wide element look right, only stop a
   near-miss from rubber-banding into a visible gap. */
body{margin:0;overflow-x:hidden;background:var(--site);color:var(--s-ink);font-family:var(--sans);
  font-weight:300;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh}
/* Set server-side (partials/top.ejs) whenever a modal/sheet is rendered with
   the page - these have no client-side "open" toggle to hang a scroll-lock
   off, so the page itself loads already locked. */
body.modal-open{overflow:hidden}
button{font:inherit;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================
   HEADER + FOOTER - cloned from blissbygurudev.com's own nav/footer.site
   (structure, spacing, colors, type, breakpoints and behavior all sourced
   from that site's live stylesheet). Kept sticky rather than the source's
   fixed positioning - fixed would need every page's top padding adjusted to
   not sit under it, which is the one thing this clone deliberately does not
   carry over, since it isn't part of the header/footer itself. */
.nav{position:sticky;top:0;z-index:100;font-family:var(--ref-sans);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .5s var(--ref-ease),backdrop-filter .5s,border-color .5s,padding .4s var(--ref-ease)}
.nav .wrap{width:min(100% - 44px,var(--ref-maxw));padding-inline:0;
  display:flex;align-items:center;justify-content:flex-start;gap:24px;padding-block:20px}
.nav.stuck{background:rgba(15,9,32,.86);backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);border-bottom-color:var(--ref-line)}
.nav.stuck .wrap{padding-block:12px}
.scrollbar{position:fixed;top:0;left:0;height:2px;z-index:101;background:var(--halo);width:0;
  transition:width .1s linear}

.brand{display:flex;align-items:center;gap:12px;flex:none;background:none;border:none;color:var(--ref-text);
  padding:0;text-decoration:none}
.brand .mark{width:34px;height:34px;flex:0 0 auto;transition:transform .7s var(--ref-ease)}
.brand:hover .mark{transform:rotate(90deg) scale(1.06)}
.brand .name{display:block;font-size:1.42rem;font-weight:600;letter-spacing:.07em;line-height:1;
  background:linear-gradient(100deg,#F4F1FF,#E6DCFF 55%,#FFD9A8);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.brand .tagline{display:block;font-size:.53rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ref-text-mute);font-weight:400;margin-top:3px}

.navlinks{display:flex;align-items:center;gap:4px}
.navlinks a{position:relative;background:none;border:none;padding:9px 15px;border-radius:999px;
  font-size:.92rem;color:var(--ref-text-soft);text-decoration:none;white-space:nowrap;flex:none;
  transition:color .3s,background .3s}
.navlinks a::after{content:"";position:absolute;left:15px;right:15px;bottom:4px;height:1px;
  background:var(--halo);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ref-ease)}
.navlinks a:hover{color:var(--ref-text)}
.navlinks a:hover::after,.navlinks a[aria-current]::after{transform:scaleX(1)}
.navlinks a[aria-current]{color:var(--ref-text)}

.nav-actions{display:flex;align-items:center;gap:12px;margin-left:auto}

/* Header/footer buttons match the reference's own .btn treatment exactly,
   scoped here so the rest of the site's buttons (checkout, event CTAs) keep
   their existing look untouched. */
.nav .btn,footer.site .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:10px;padding:15px 30px;border-radius:999px;font-weight:500;font-size:.97rem;letter-spacing:.01em;
  font-family:var(--ref-sans);color:#fff;background:var(--ref-cta);
  box-shadow:0 12px 34px -12px rgba(168,85,247,.65);overflow:hidden;isolation:isolate;white-space:nowrap;
  border:none;transition:transform .45s var(--ref-ease),box-shadow .45s var(--ref-ease),filter .45s var(--ref-ease)}
.nav .btn::after,footer.site .btn::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
  transform:translateX(-130%);transition:transform .9s var(--ref-ease)}
.nav .btn:hover,footer.site .btn:hover{transform:translateY(-3px);
  box-shadow:0 20px 50px -14px rgba(251,146,60,.75);filter:saturate(1.18) brightness(1.09)}
.nav .btn:hover::after,footer.site .btn:hover::after{transform:translateX(130%)}
.nav .btn.ghost,footer.site .btn.ghost{color:var(--ref-text);background:var(--ref-glass);
  border:1px solid var(--ref-line-strong);box-shadow:none;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav .btn.ghost:hover,footer.site .btn.ghost:hover{background:var(--ref-glass-2);border-color:var(--halo-orchid);
  box-shadow:0 0 30px -8px rgba(192,132,252,.5)}
.nav .btn.sm,footer.site .btn.sm{padding:11px 22px;font-size:.88rem}

.avatar{width:32px;height:32px;border-radius:50%;background:var(--halo);border:none;color:#fff;
  font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;
  text-shadow:0 1px 1px rgba(40,12,70,.45);transition:transform var(--t-quick) var(--ease)}
.avatar:hover{transform:scale(1.06)}
.acct{position:relative}
.menu{position:absolute;right:0;top:44px;z-index:20;background:#1E1440;border:1px solid var(--line-2);
  border-radius:12px;padding:6px;min-width:210px;box-shadow:0 18px 40px rgba(0,0,0,.5);
  display:flex;flex-direction:column;animation:pop2 var(--t-std) var(--ease-out) both}
@keyframes pop2{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.menu .who{padding:9px 11px;border-bottom:1px solid var(--line);margin-bottom:4px}
.menu .who b{display:block;font-size:13px;font-weight:400}
.menu .who p{margin:0;font-size:11.5px;color:var(--s-ink-3);word-break:break-all}
.menu a,.menu button{background:none;border:none;color:var(--s-ink-2);text-align:left;padding:9px 11px;
  border-radius:8px;font-size:13.5px;text-decoration:none;width:100%;
  transition:background var(--t-quick) var(--ease),color var(--t-quick) var(--ease)}
.menu a:hover,.menu button:hover{background:rgba(255,255,255,.05);color:var(--s-ink)}

/* Burger + full-screen mobile menu, swapped in for .navlinks below 880px
   (the reference's own breakpoint). Sign in/create account (or the account
   menu) and the CTA all move into the overlay rather than crowding the bar. */
.burger{display:none;flex-direction:column;width:44px;height:44px;border-radius:12px;
  border:1px solid var(--ref-line-strong);align-items:center;justify-content:center;
  background:var(--ref-glass);flex:0 0 auto}
.burger span{display:block;width:18px;height:1.5px;background:var(--ref-text);border-radius:2px;
  transition:transform .4s var(--ref-ease),opacity .3s}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mobilemenu{position:fixed;inset:0;z-index:99;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;text-align:center;font-family:var(--ref-sans);
  background:rgba(11,7,24,.94);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s var(--ref-ease),visibility .45s}
.mobilemenu.open{opacity:1;visibility:visible;pointer-events:auto}
.mobilemenu-close{position:absolute;top:18px;right:20px;width:40px;height:40px;border-radius:50%;
  background:var(--ref-glass);border:1px solid var(--ref-line-strong);color:var(--ref-text);font-size:16px;
  display:flex;align-items:center;justify-content:center;transition:background .3s}
.mobilemenu-close:hover{background:var(--ref-glass-2)}
.mobilemenu-links{display:flex;flex-direction:column;align-items:center;gap:2px}
.mobilemenu-links a{font-size:1.35rem;font-weight:400;padding:8px;letter-spacing:-.02em;
  color:var(--ref-text-soft);text-decoration:none;transition:color .3s}
.mobilemenu-links a:hover{color:var(--ref-text)}
.mobilemenu-links a[aria-current]{color:transparent;background:var(--halo);
  -webkit-background-clip:text;background-clip:text}
.mobilemenu-actions{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:22px;
  padding-top:22px;border-top:1px solid var(--ref-line);width:calc(100vw - 64px);max-width:380px}
.mobilemenu-actions .btn{width:100%}
.mobilemenu-actions .signed{justify-content:center;margin:0 0 4px;color:var(--ref-text-mute)}

/* header.ejs currently shows two links (Events/How it works) plus Sign in/
   Create account - verified by screenshot down to 600px before "Create
   account" starts clipping, so the collapse point sits at 620px with a
   small safety margin. Re-check this if more nav links or actions are added
   back (e.g. the reference's own six links + CTA needed ~1100px). */
@media (max-width:620px){
  .navlinks{display:none}
  .nav-actions .btn,.nav-actions .acct{display:none}
  .burger{display:flex}
}

/* footer.site - the reference's four-column footer */
footer.site{border-top:1px solid var(--ref-line);padding:clamp(56px,7vw,86px) 0 34px;
  background:rgba(11,7,24,.55);font-family:var(--ref-sans)}
footer.site .wrap{width:min(100% - 44px,var(--ref-maxw));padding-inline:0}
footer.site .brand{margin-bottom:0}
.f-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;
  border-bottom:1px solid var(--ref-line)}
.f-brand .brand{margin-bottom:20px}
.f-brand,.f-col{min-width:0}
.f-brand p{color:var(--ref-text-mute);font-size:.92rem;max-width:34ch}
.news{display:flex;gap:9px;margin-top:24px;max-width:380px;flex-wrap:wrap}
.news input{flex:1;min-width:0;padding:13px 18px;border-radius:999px;border:1px solid var(--ref-line-strong);
  background:var(--ref-glass);color:var(--ref-text);font:inherit;font-size:.92rem;
  transition:border-color .3s,background .3s}
.news input::placeholder{color:var(--ref-text-mute)}
.news input:focus{outline:none;border-color:var(--halo-orchid);background:var(--ref-glass-2)}
.f-col h5{margin:0 0 18px;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ref-text-mute);font-weight:500}
.f-col li+li{margin-top:11px}
.f-col a{color:var(--ref-text-soft);font-size:.93rem;text-decoration:none;
  transition:color .3s,padding-left .35s var(--ref-ease);display:inline-block}
.f-col a:hover{color:var(--halo-gold);padding-left:5px}
.f-bot{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:28px;flex-wrap:wrap}
.f-bot small{color:var(--ref-text-mute);font-size:.83rem}
.social{display:flex;gap:10px}
.social a{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  border:1px solid var(--ref-line);background:var(--ref-glass);
  transition:transform .45s var(--ref-ease),border-color .35s,background .35s}
.social a:hover{transform:translateY(-3px);border-color:var(--halo-orchid);background:var(--ref-glass-2)}
.social svg{width:17px;height:17px;fill:var(--ref-text-soft)}
.social a:hover svg{fill:var(--halo-gold)}

@media (max-width:1080px){
  .f-top{grid-template-columns:1fr 1fr;gap:36px}
  .f-brand{grid-column:1/-1}
}
@media (max-width:620px){
  .f-top{grid-template-columns:1fr}
  .news{max-width:none}
}

/* ------------------------------------------------------------ page + type */
.page{animation:pageIn var(--t-slow) var(--ease-out) both}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wrap{max-width:1040px;margin-inline:auto;padding-inline:30px}
@media (max-width:640px){.wrap{padding-inline:16px}}
.stack{display:flex;flex-direction:column;gap:20px}
.pad{padding-top:26px;padding-bottom:44px}
.rise > *{animation:rise var(--t-std) var(--ease-out) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rise > *:nth-child(2){animation-delay:45ms}
.rise > *:nth-child(3){animation-delay:90ms}
.rise > *:nth-child(4){animation-delay:135ms}
.rise > *:nth-child(5){animation-delay:180ms}
.rise > *:nth-child(6){animation-delay:225ms}
.rise > *:nth-child(7){animation-delay:270ms}
.rise > *:nth-child(n+8){animation-delay:315ms}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--s-ink-2)}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--violet);opacity:.85}
h2.big{margin:0;font-size:clamp(30px,4vw,44px);font-weight:200;line-height:1.08;letter-spacing:-.01em}
h2.big .serif{display:block;font-family:var(--serif);font-weight:400;font-size:.94em;color:#C9B8F2}
h3.sec{margin:0;font-size:22px;font-weight:300}
p.lede{margin:0;max-width:56ch;color:var(--s-ink-2);font-size:16.5px;line-height:1.62}
p.sub{margin:0;color:var(--s-ink-2);font-size:14px;line-height:1.55}
.tnum{font-variant-numeric:tabular-nums}

.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{border:1px solid var(--line-2);border-radius:999px;padding:6px 14px;font-size:12.5px;color:var(--s-ink-2)}
.chip b{color:var(--halo-orchid);font-weight:400}
@media (max-width:640px){
  .chip{font-size:14.5px;padding:7px 15px}
}

.btn{border:none;border-radius:999px;padding:13px 26px;font-size:14.5px;font-weight:500;color:#fff;
  background:var(--halo);text-shadow:0 1px 2px rgba(70,26,10,.34);box-shadow:var(--halo-glow);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  transition:transform var(--t-quick) var(--ease),filter var(--t-std) var(--ease),opacity var(--t-std) var(--ease)}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:scale(.975)}
.btn[disabled],.btn.is-disabled{opacity:.4;box-shadow:none;cursor:not-allowed;pointer-events:none}
.btn.ghost{background:none;border:1px solid var(--line-2);color:var(--s-ink);box-shadow:none;
  font-weight:400;text-shadow:none}
.btn.ghost:hover{border-color:var(--violet);filter:none}
.btn.small{padding:9px 18px;font-size:13px}
.btn.block{display:flex;width:100%;text-align:center}
.linkish{background:none;border:none;padding:0;color:var(--halo-orchid);font-size:inherit;
  text-decoration:none;border-bottom:1px solid transparent}
.linkish:hover{border-bottom-color:currentColor}

.card{border:1px solid var(--line);background:var(--fill);border-radius:16px;padding:20px}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;padding:64px 0 46px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-30% -10% auto -10%;height:520px;pointer-events:none;
  background:radial-gradient(48% 60% at 22% 30%,rgba(124,58,237,.42),transparent 70%),
             radial-gradient(38% 52% at 78% 12%,rgba(253,186,116,.16),transparent 70%);
  animation:drift 18s ease-in-out infinite;z-index:0}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-2%,2%,0) scale(1.06)}}

/* Banner spec section 1/3/6: 2880x1200 desktop, 1080x1280 mobile master,
   swapped at 768px. A dark-left scrim keeps the headline column (left 50%,
   30-78% height per the safe-area guide) readable over any photo. */
.hero-media{position:absolute;inset:0;z-index:1;margin:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:74% 26%;display:block}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--site) 0%,rgba(21,14,46,.82) 42%,rgba(21,14,46,.25) 66%,transparent 82%)}
.hero .wrap{position:relative;z-index:2;display:flex;flex-direction:column;gap:22px}

/* Below 768px the photo can't carry text over any part of it without
   risking Gurudev's face - stacked instead: the photo becomes its own
   banner (mobile master's 27:32 ratio) and the copy flows in normal,
   solid-background document flow underneath rather than overlaying it. */
@media (max-width:768px){
  .hero{padding:0 0 40px}
  /* Shorter than the 27:32 master ratio, capped well under full viewport
     height, so the heading starts to show without scrolling past the whole
     photo first - a phone's address/tab bars already eat 100-150px of real
     viewport height that a fixed-size screenshot doesn't account for. */
  .hero-media{position:relative;inset:auto;width:100%;max-width:100%;aspect-ratio:4/3;max-height:38vh}
  .hero-media img{width:100%;max-width:100%;object-position:50% 18%}
  .hero-media::after{display:none}
  .hero .wrap{padding-top:22px}
}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
section.band{padding:44px 0;border-top:1px solid var(--line)}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:18px}
.grid3.one{grid-template-columns:minmax(0,340px)}
/* One or two cards: two-up columns so a lone card doesn't stretch full width. */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:620px){.grid2{grid-template-columns:1fr}}

/* ----------------------------------------------------------- event card */
.ev-card{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:16px;
  background:var(--fill);overflow:hidden;text-align:left;color:inherit;padding:0;text-decoration:none;
  transition:border-color var(--t-std) var(--ease),transform var(--t-std) var(--ease),box-shadow var(--t-std) var(--ease)}
.ev-card:hover{border-color:rgba(167,139,250,.45);transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.34)}
/* Card art spec: 1600x900 master (16:9), no text overlay - the day/time
   already has its own chip in .ev-foot, so nothing needs to sit on the photo. */
.ev-band{aspect-ratio:16/9;position:relative;overflow:hidden;background:var(--site-2);
  background-size:cover;background-position:50% 45%;background-repeat:no-repeat;
  container-type:inline-size}
.ev-band-art{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
/* The day number, dropped into the calendar chip painted into the artwork.
   Sized and placed in cqw/% of the band so it keeps its spot at any card
   width. The two photographs put the chip in slightly different places,
   hence the per-art nudge - measured off the image files themselves. */
/* Month and day, written into the blank calendar chip painted into the
   artwork. The box is laid over the chip itself (its rect measured off the
   image files), and the two lines are centred inside it - so the whole thing
   keeps its place and proportions at any card width. */
.ev-date{position:absolute;z-index:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.4cqw;text-align:center;
  font-family:var(--serif);color:#1d0c5c;line-height:1;pointer-events:none}
.ev-date .m{font-size:2.6cqw;font-weight:600;letter-spacing:.08em}
.ev-date .d{font-size:6.4cqw;font-weight:500;font-variant-numeric:lining-nums}
.ev-band[data-art="2"] .ev-date{left:6.50%;top:70.22%;width:10.69%;height:20.56%}
.ev-band[data-art="3"] .ev-date{left:5.12%;top:67.78%;width:10.69%;height:20.56%}
@keyframes halo{to{transform:rotate(360deg)}}
.ev-body{padding:16px;display:flex;flex-direction:column;gap:9px;flex:1}
.ev-body h4{margin:0;font-size:18px;font-weight:400}
.ev-body p{margin:0;font-size:13px;color:var(--s-ink-2);line-height:1.45}
.ev-foot{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin-top:auto;padding-top:6px;
  flex-wrap:wrap}
.price{font-size:17px;font-weight:300}
.price.none{font-size:13.5px;color:var(--s-ink-2)}

.tag{font-size:10.5px;padding:3px 10px;border-radius:999px;border:1px solid rgba(167,139,250,.4);
  color:#CDB8FB;background:rgba(124,58,237,.18);white-space:nowrap}
.tag.plain{border-color:var(--line-2);color:var(--s-ink-2);background:none}
.tag.held{border-color:rgba(110,231,183,.45);color:var(--ok);background:rgba(110,231,183,.12)}
.tag.block{border-color:rgba(240,168,104,.45);color:var(--amber);background:rgba(240,168,104,.12)}
.tag.live{border-color:rgba(255,90,114,.5);color:#FF8A9C;background:rgba(255,90,114,.14)}
@media (max-width:640px){
  .tag{font-size:14px;padding:5px 12px}
}

/* A handful of small, muted body-copy sizes read fine on desktop but get
   uncomfortably tight on a phone - a modest bump each, not a redesign. */
@media (max-width:640px){
  .step p{font-size:15.5px !important}
  .f-brand p{font-size:16.5px!important}
  .f-bot small{font-size:16.5px!important}
  .note{font-size:15.5px !important}
  .fact p{font-size:15.5px!important}
  .more .tile > p{font-size:15.5px!important}
  .ev-body p{font-size:15.5px!important}
  .faq p {font-size:15.5px!important}
  .faq summary {font-size:16.5px!important}
  .eyebrow {font-size:11.5px!important}
  .signed {font-size:16.5px!important}
  p.sub{font-size:15.5px!important}
}

/* --------------------------------------------------------- steps + faq */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:18px}
.step{display:flex;flex-direction:column;gap:8px}
.step .n{font-family:var(--serif);font-size:25px;font-weight:400;color:var(--halo-orchid)}
.step b{font-weight:400;font-size:18px;margin: 0px 0px 6px;}
.step p{margin:0;font-size:13.5px;color:var(--s-ink-2);line-height:1.5}
.faq{border-top:none}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:16px 0;font-size:15.5px;display:flex;
  justify-content:space-between;gap:16px;transition:color var(--t-quick) var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--halo-orchid)}
.faq summary::after{content:"+";color:var(--s-ink-3)}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin:0 0 16px;font-size:14px;color:var(--s-ink-2);max-width:70ch}

.legal{max-width:70ch}
.legal p{margin:0 0 16px;font-size:14px;color:var(--s-ink-2);line-height:1.65}
.legal h4{margin:26px 0 8px;font-size:15px;font-weight:500;color:var(--s-ink)}
.legal a{color:var(--halo-orchid)}
/* ---------------------------------------------------- detail + checkout */
.two-col{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}
@media (max-width:820px){.two-col{grid-template-columns:1fr}}
.crumb{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--s-ink-3);flex-wrap:wrap}
.crumb a{background:none;border:none;color:var(--s-ink-2);padding:0;font-size:12.5px;text-decoration:none}
.crumb a:hover{color:var(--halo-orchid)}
/* Event banner spec: 2400x800 (3:1) desktop master, 1200x900 (4:3) mobile,
   swapped at 768px. Text lives in the bottom-left 48%x42% safe area; the
   subject sits right of the 60% mark, so the two never fight. */
.detail-hero{aspect-ratio:3/1;border-radius:16px;position:relative;overflow:hidden}
.detail-hero.short{aspect-ratio:4/1}
.detail-hero .banner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:70% 42%;display:block}
.detail-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(10,6,18,.88) 0%,rgba(10,6,18,.55) 42%,transparent 72%),
             linear-gradient(90deg,rgba(10,6,18,.62) 0%,rgba(10,6,18,.18) 48%,transparent 62%)}
.detail-hero .hero-copy{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:24px 26px;
  display:flex;flex-direction:column;gap:8px;max-width:52%}
.detail-hero .eyebrow-hero{font-size:14.5px;color:rgba(255,255,255,.92);font-weight:300}
.detail-hero .eyebrow-hero b{font-weight:600}
.detail-hero .k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.detail-hero h2{margin:0;font-family:var(--serif);font-weight:400;font-size:36px;line-height:1.16;color:#fff}
.detail-hero .chip{border-color:rgba(255,255,255,.32);color:rgba(255,255,255,.86)}
.detail-hero .chip b{color:#FFE7C7}
@media (max-width:768px){
  .detail-hero{aspect-ratio:4/3}
  .detail-hero .hero-copy{max-width:100%}
  .detail-hero h2{font-size:27px}
  .detail-hero::after{background:linear-gradient(0deg,rgba(10,6,18,.94) 0%,rgba(10,6,18,.4) 52%,transparent 78%)}
}

.event-intro{background:var(--site-2);border-radius:16px;padding:26px 28px;
  display:flex;flex-direction:column;gap:12px}
.event-intro h3{margin:0;font-size:clamp(21px,2.6vw,27px);font-weight:600;line-height:1.32}
.event-intro p{margin:0;color:var(--s-ink-2);font-size:15px;line-height:1.65;max-width:56ch}

.facts{display:flex;flex-direction:column}
.fact{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.fact:last-child{border-bottom:none}
.fact .ic{width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.06);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:12px}
.fact b{display:block;font-weight:400;font-size:14px}
.fact p{margin:2px 0 0;font-size:12.5px;color:var(--s-ink-2)}

.buy{position:sticky;top:80px;border:1px solid var(--line-2);border-radius:16px;padding:20px;
  background:linear-gradient(160deg,rgba(124,58,237,.16),rgba(255,255,255,.02))}
.buy .amt{font-size:32px;font-weight:200;line-height:1}
.buy .amt.words{font-size:24px}
.buy .amt small{font-size:13px;color:var(--s-ink-2);font-weight:300}
.buy ul{list-style:none;margin:14px 0;padding:0;display:flex;flex-direction:column;gap:8px}
.buy li{font-size:13px;color:var(--s-ink-2);display:flex;gap:8px}
.buy li i{font-style:normal;color:var(--ok)}
.signed{display:flex;gap:9px;align-items:center;font-size:12px;color:var(--s-ink-3);margin-top:10px}

/* Mobile-only floating price + CTA (event.ejs's .mobile-buy-bar) - the .buy
   sidebar above stacks into normal document flow once the two-col grid
   collapses (also 820px), so without this the price and primary action
   would only be reachable by scrolling all the way past the hero, facts and
   CMS copy first. */
.mobile-buy-bar{display:none}
@media (max-width:820px){
  /* .page.has-mobile-buy{padding-bottom:92px} */
  .page.has-mobile-buy{padding-bottom:52px}
  /* Fully replaced by .mobile-buy-bar below at this width - same price,
     checklist context and primary action, just reachable without scrolling. */
  .has-mobile-buy .buy{display:none}
  .mobile-buy-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;
    justify-content:space-between;gap:14px;padding:14px 20px calc(14px + env(safe-area-inset-bottom));
    background:#0B0718;border-top:1px solid var(--line-2)}
  .mobile-buy-bar .amt{font-size:21px;font-weight:300;line-height:1.15;flex:0 1 auto}
  .mobile-buy-bar .amt.words{font-size:16px}
  .mobile-buy-bar .amt small{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--s-ink-3);font-weight:400;margin-top:2px}
  .mobile-buy-bar .btn{flex:0 0 auto;white-space:nowrap;padding:14px 26px}
}

/* ------------------------------------------------- event long-form copy
   The CMS's own content fragment for the event (views/event.ejs's copy.
   extended, sliced from its own quote onward in lib/content.js). Its markup
   is a flat run of headings, paragraphs, card groups and a stats grid with
   no wrapping containers of their own, so .more lays that flow out itself:
   every direct child spans the full width by default, and only a tile
   that's part of a pillar/step/testimonial group narrows to sit in a row
   with its siblings. */
.more{margin-top:8px;display:flex;flex-wrap:wrap;gap:16px}
.more > *{flex:1 1 100%}
.more > .tile.pillar,.more > .tile.step,.more > .tile.said{flex:1 1 220px}

.more h2.sec{margin:22px 0 0;font-size:20px;font-weight:300}
.more h2.sec:first-child{margin-top:0}
.more p.prose{margin:0;color:var(--s-ink-2);font-size:14.5px;line-height:1.7}
.more .grad{background:var(--halo);-webkit-background-clip:text;background-clip:text;color:transparent}

.more blockquote.quote{margin:0;padding:22px 26px;border-left:2px solid var(--halo-orchid);
  background:var(--fill);border-radius:0 16px 16px 0}
.more blockquote.quote p{margin:0;font-family:var(--serif);font-size:19px;font-style:italic;line-height:1.5}
.more blockquote.quote cite{display:block;margin-top:10px;font-style:normal;font-size:12.5px;color:var(--s-ink-3)}

.more .tile{border:1px solid var(--line);background:var(--fill);border-radius:16px;padding:18px}
.more .tile .ic{display:none}
.more .tile h3.grad{margin:0 0 6px;font-size:22px;font-weight:600}
.more .tile > p{margin:0;font-size:13px;color:var(--s-ink-2);line-height:1.6}
.more .tile p.prose{font-size:14px;margin:0 0 10px}
.more .tile p.prose:last-child{margin-bottom:0}

.more .tile .who{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.more .tile .who img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.more .tile .who h3.grad{font-size:17px;margin:0}
.more .tile .who > span > span{display:block;font-size:12px;color:var(--s-ink-3);margin-top:2px;font-weight:300}

.more .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}
.more .stat{text-align:center}
.more .stat .figure{display:block;font-size:26px;font-weight:400}
.more .stat .unit{display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--s-ink);margin-top:2px}
.more .stat p{margin:6px 0 0;font-size:12px;color:var(--s-ink-2)}

.more .tile.said > p{font-style:italic;font-size:13.5px;color:var(--s-ink)}
.more .tile.said .by{display:flex;align-items:center;gap:8px;margin-top:12px}
.more .tile.said .chip{width:26px;height:26px;padding:0;border:none;border-radius:50%;background:var(--halo);
  display:flex;align-items:center;justify-content:center;font-size:11px;color:#1B1236}
.more .tile.said .by cite{font-style:normal;font-size:12.5px;color:var(--s-ink-2)}

.more .spacer{height:4px}

.field{display:flex;flex-direction:column;gap:6px}
.field .k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--s-ink-2)}
.inp{display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:11px;
  padding:12px 14px;background:rgba(255,255,255,.02);
  transition:border-color var(--t-quick) var(--ease),box-shadow var(--t-quick) var(--ease)}
.inp:focus-within{border-color:var(--violet);box-shadow:0 0 0 3px rgba(167,139,250,.14)}
.inp input{flex:1;background:none;border:none;color:var(--s-ink);font:inherit;font-size:14.5px;min-width:0;outline:none}
.inp input::placeholder{color:var(--s-ink-3)}
.inp .muted{color:var(--s-ink-3);font-size:12px;white-space:nowrap}
.inp.bad{border-color:rgba(255,90,114,.65);animation:shake 320ms var(--ease)}

/* Shown only while the identifier field holds digits only - a mobile number,
   not an email. Hidden the moment a letter appears anywhere in it. */
.cc-badge{display:flex;align-items:center;gap:6px;padding-right:8px;margin-right:2px;
  border-right:1px solid var(--line-2);color:var(--s-ink);font-size:14.5px;white-space:nowrap}
.cc-badge .flag{font-size:16px;line-height:1}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}45%{transform:translateX(6px)}70%{transform:translateX(-3px)}}
.err{margin:0;font-size:12px;color:#FF8A9C}

/* A choice you press rather than a button that acts: the location answer in
   the "where from" sheet. Selected state is the accent border and the tick -
   the coordinates themselves are the server's business, not the visitor's. */
.pick{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;font:inherit;
  border:1px solid var(--line-2);border-radius:14px;padding:12px 15px;background:rgba(255,255,255,.02);
  color:var(--s-ink);
  transition:border-color var(--t-quick) var(--ease),background var(--t-quick) var(--ease)}
.pick:hover{border-color:var(--violet)}
.pick:focus-visible{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(167,139,250,.14)}
.pick[disabled]{opacity:.62;cursor:default}
.pick-ic{flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:rgba(255,255,255,.05);border:1px solid var(--line);
  color:var(--s-ink-2);transition:color var(--t-quick) var(--ease),
  border-color var(--t-quick) var(--ease),background var(--t-quick) var(--ease)}
.pick-ic svg{width:16px;height:16px;display:block}
.pick-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.pick-t b{font-weight:400;font-size:14.5px;color:var(--s-ink)}
.pick-t small{font-size:12.5px;color:var(--s-ink-3)}
.pick-on{margin-left:auto;color:var(--violet);font-size:14px;opacity:0;
  transition:opacity var(--t-quick) var(--ease)}
.pick.is-on{border-color:var(--violet);background:rgba(167,139,250,.08)}
.pick.is-on .pick-ic{color:var(--violet);border-color:rgba(167,139,250,.45);
  background:rgba(167,139,250,.12)}
.pick.is-on .pick-on{opacity:1}

.note{display:flex;gap:9px;border:1px solid var(--line);background:rgba(255,255,255,.02);border-radius:12px;
  padding:12px 14px;font-size:12.5px;color:var(--s-ink-2);line-height:1.5}
.note.warn{border-color:rgba(240,168,104,.35);background:rgba(240,168,104,.08);color:var(--amber)}
.note.ok{border-color:rgba(110,231,183,.3);background:rgba(110,231,183,.07);color:var(--ok)}
.kv{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:9px 0;color:var(--s-ink-2)}
.kv + .kv{border-top:1px solid var(--line)}
.kv b{color:var(--s-ink);font-weight:400}
.foot-note{margin:0;text-align:center;font-size:11.5px;color:var(--s-ink-3);line-height:1.5}
.foot-note.left{text-align:left}
/* Testing-only readout (views/account.ejs) - hidden from visitors, kept
   rendered server-side so it's one class away from being shown again. */
.debug-note{display:none}

.tick{width:56px;height:56px;border-radius:50%;background:var(--halo);display:flex;align-items:center;
  justify-content:center;font-size:24px;color:#fff;position:relative;animation:pop 420ms var(--ease-out) both}
.tick::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(253,186,116,.65);
  animation:ring 1.8s var(--ease-out) 280ms infinite}
@keyframes pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.05);opacity:1}100%{transform:scale(1)}}
@keyframes ring{0%{transform:scale(1);opacity:.65}100%{transform:scale(2);opacity:0}}
.ticket{border:1px solid rgba(167,139,250,.32);border-radius:16px;padding:18px;
  background:linear-gradient(150deg,rgba(124,58,237,.18),rgba(255,255,255,.02))}
.dash{height:1px;margin:14px -18px;background:repeating-linear-gradient(90deg,var(--line-2) 0 5px,transparent 5px 10px)}
.code{margin:6px 0 0;font-size:22px;letter-spacing:.18em;font-weight:300;font-variant-numeric:tabular-nums}
.centred{align-items:center;text-align:center;max-width:620px;padding:44px 30px}

/* ---------------------------------------------------------------- watch */
.watch{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:22px;align-items:start}
@media (max-width:900px){.watch{grid-template-columns:1fr}}
.player{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/9;display:flex;
  align-items:center;justify-content:center;
  background:radial-gradient(80% 110% at 50% 40%,#7C3AED,#3B1D74 45%,#1B1038)}
.player.waiting{background:radial-gradient(80% 110% at 50% 40%,#3B1D74,#22133F 55%,#170F32)}
.player::before{content:"";position:absolute;inset:-20%;background:inherit;animation:breathe 9s ease-in-out infinite}
.player video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0C0820}
.player .play{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.22);border:none;
  position:relative;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;
  transition:transform var(--t-quick) var(--ease),background var(--t-quick) var(--ease)}
.player .play:hover{background:rgba(255,255,255,.32)}
.countdown{position:relative;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center;
  padding:16px}
.countdown .num{font-family:var(--serif);font-size:clamp(30px,6vw,44px);font-weight:300;
  font-variant-numeric:tabular-nums;color:#fff}
.countdown .sub{font-size:13px;color:rgba(255,255,255,.72)}
.countdown .eyebrow{justify-content:center;color:rgba(255,255,255,.78)}
.pill-live{position:absolute;left:14px;top:14px;z-index:2;display:flex;align-items:center;gap:7px;
  background:rgba(255,90,114,.18);border:1px solid rgba(255,90,114,.5);color:#FF8A9C;font-size:11px;
  padding:4px 11px;border-radius:999px}
.pill-live i{width:6px;height:6px;border-radius:50%;background:var(--live);animation:beat 1.8s var(--ease) infinite}
@keyframes beat{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,90,114,.55)}70%{opacity:.6;box-shadow:0 0 0 8px rgba(255,90,114,0)}}
.watching{position:absolute;right:14px;top:14px;z-index:2;font-size:11.5px;color:rgba(255,255,255,.8);
  font-variant-numeric:tabular-nums}
.scrub{display:flex;align-items:center;gap:10px;padding:11px 2px 0;font-size:11.5px;color:var(--s-ink-2);
  font-variant-numeric:tabular-nums}
.scrub .bar{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.14);position:relative;overflow:hidden}
.scrub .bar i{position:absolute;inset:0 auto 0 0;background:var(--halo);transition:width 1s linear}
.rail-card{border:1px solid var(--line);background:var(--fill);border-radius:16px;padding:16px;
  display:flex;flex-direction:column;gap:12px}
.chatrow{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.45;padding:5px 0;
  animation:slideIn var(--t-slow) var(--ease-out) both}
@keyframes slideIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.av{width:24px;height:24px;border-radius:50%;flex:0 0 auto;background:linear-gradient(135deg,#C084FC,#7C3AED);
  display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:600;color:#fff;
  text-shadow:0 1px 1px rgba(40,12,70,.45)}
.av.tiny{width:20px;height:20px;font-size:9px}
.chatrow b{font-weight:400}
.chatrow span{color:var(--s-ink-2)}

/* --------------------------------------------------------------- account */
.pass-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.pass-row .who{flex:1;min-width:200px}
.pass-row b{font-weight:400;font-size:17px}
.empty{text-align:center;padding:36px}

/* ---------------------------------------------------------------- modals
   Above .nav (z-index 100) and .scrollbar (101) on purpose - a modal is a
   full takeover, so it must cover the sticky header too, not sit behind it. */
.scrim{position:fixed;inset:0;background:rgba(6,4,12,.72);z-index:120;backdrop-filter:blur(3px);
  animation:fade var(--t-std) var(--ease) both;border:none;width:100%;padding:0}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{position:fixed;left:50%;top:50%;z-index:121;width:min(430px,92%);max-height:88vh;overflow-y:auto;
  transform:translate(-50%,-50%);background:linear-gradient(180deg,#221646,#170F32);
  border:1px solid var(--line-2);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:14px;
  box-shadow:0 30px 70px rgba(0,0,0,.6);animation:sheetIn var(--t-slow) var(--ease-out) both}
@keyframes sheetIn{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.modal .x{position:absolute;right:14px;top:14px;width:28px;height:28px;border-radius:50%;border:none;
  background:rgba(255,255,255,.06);color:var(--s-ink-2);font-size:14px;display:flex;align-items:center;
  justify-content:center;text-decoration:none}
.modal .x:hover{background:rgba(255,255,255,.12)}
.tabs{display:flex;gap:6px;background:rgba(255,255,255,.04);border-radius:999px;padding:4px}
.tabs a{flex:1;border:none;background:none;color:var(--s-ink-2);border-radius:999px;padding:9px;
  font-size:13.5px;text-align:center;text-decoration:none;
  transition:background var(--t-quick) var(--ease),color var(--t-quick) var(--ease)}
.tabs a.on{background:rgba(124,58,237,.3);color:var(--s-ink)}
.oauth{display:flex;flex-direction:column;gap:9px}
.oauth button{display:flex;align-items:center;justify-content:center;gap:10px;border-radius:11px;padding:12px;
  font-size:14px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--s-ink);width:100%;
  transition:border-color var(--t-quick) var(--ease),transform var(--t-quick) var(--ease)}
.oauth button:hover{border-color:var(--violet)}
.oauth button:active{transform:scale(.985)}
.or{display:flex;align-items:center;gap:12px;color:var(--s-ink-3);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.otp{display:flex;gap:8px;justify-content:space-between}
.otp input{flex:1;width:100%;height:52px;border:1px solid var(--line-2);border-radius:11px;text-align:center;
  font-size:21px;font-family:var(--mono);color:var(--s-ink);background:rgba(255,255,255,.02);
  letter-spacing:.3em;outline:none}
.otp input:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(167,139,250,.14)}

/* ------------------------------------------------ payment provider sheet */
.stripe{position:fixed;left:50%;top:50%;z-index:122;width:min(400px,92%);max-height:90vh;overflow-y:auto;
  transform:translate(-50%,-50%);background:#fff;color:#1A1A1A;border-radius:14px;padding:0;
  box-shadow:0 30px 70px rgba(0,0,0,.6);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  animation:sheetIn var(--t-slow) var(--ease-out) both}
.stripe .top{display:flex;justify-content:space-between;align-items:center;padding:14px 18px 4px}
.stripe .top .who{font-size:13px;color:#6B7280}
.stripe .top button{width:26px;height:26px;border:none;background:none;color:#6B7280;font-size:16px;border-radius:50%}
.stripe .body{padding:4px 18px 0;display:flex;flex-direction:column;gap:12px}
.wallet{width:100%;border:none;border-radius:9px;padding:14px;font-size:16px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:6px}
.wallet.apple{background:#000;color:#fff}
.wallet.link{background:#00D66F;color:#0B1B12}
.wallet.link i{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;
  border-radius:50%;background:#0B1B12;color:#00D66F;font-size:11px;font-style:normal;margin:0 3px}
.stripe .divider{display:flex;align-items:center;gap:12px;color:#6B7280;font-size:13.5px}
.stripe .divider::before,.stripe .divider::after{content:"";flex:1;height:1px;background:#E5E7EB}
.stripe .lbl-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#6B7280}
.sfield{border:1px solid #D8DCE3;border-radius:8px;overflow:hidden;background:#fff}
.sfield .r{display:flex;align-items:center;gap:8px;padding:13px 12px;font-size:15.5px;color:#111827}
.sfield .r + .r{border-top:1px solid #E5E7EB}
.sfield .split{display:flex}
.sfield .split .r{flex:1}
.sfield .split .r + .r{border-top:none;border-left:1px solid #E5E7EB}
.sfield .ghosttext{color:#8A93A0}
.sfield input{flex:1;border:none;outline:none;font:inherit;font-size:15.5px;color:#111827;min-width:0;background:none}
.sfield .cap{font-size:11px;color:#6B7280;display:block}
.brands{display:flex;gap:4px}
.brands span{width:26px;height:17px;border-radius:3px;font-size:7px;font-weight:700;color:#fff;
  display:flex;align-items:center;justify-content:center}
.brands .visa{background:#1434CB}.brands .mc{background:#EB001B}
.brands .amex{background:#1F72CD}.brands .disc{background:#F0821E}
.stripe .serr{margin:0;font-size:13px;color:#B3261E;background:#FDECEA;border:1px solid #F6C9C4;
  border-radius:8px;padding:10px 12px}
.stripe .pay-wrap{padding:14px 18px 20px;background:#fff}
.btn-pay{width:100%;border:none;border-radius:9px;padding:15px;font-size:16.5px;font-weight:600;color:#fff;
  background:var(--halo);text-shadow:0 1px 2px rgba(70,26,10,.34);display:flex;align-items:center;
  justify-content:center;gap:8px;transition:filter var(--t-std) var(--ease)}
.btn-pay:hover{filter:brightness(1.06)}
.stripe .powered{margin:10px 0 0;text-align:center;font-size:12px;color:#8A93A0}

/* ------------------------------------------------------------ session end
   The sheet shown once a room closes (routes/pages.js's /:slug/session-end,
   views/partials/session-end-sheet.ejs) - one full-bleed screen per name in
   the API's own `sequence`, so it reads as its own moment rather than a form
   dialog. Sits above .modal/.stripe, same as them above .nav: only one
   overlay is ever open at a time. */
@keyframes seshIn{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}
.sesh{position:fixed;inset:0;z-index:123;overflow-y:auto;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:22px;padding:88px 28px 56px;
  background:radial-gradient(120% 70% at 50% 0%,#5B2FB8 0%,#33188A 38%,#170F32 78%,var(--site) 100%);
  animation:seshIn var(--t-slow) var(--ease-out) both}
.sesh .x{position:fixed;right:16px;top:16px;z-index:1;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:14px;text-decoration:none;transition:background var(--t-quick) var(--ease)}
.sesh .x:hover{background:rgba(255,255,255,.22)}

.sesh-art{position:relative;width:128px;height:128px;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center}
.sesh-avatar{width:100%;height:100%;border-radius:50%;overflow:hidden;
  border:3px solid rgba(255,255,255,.28);box-shadow:0 0 0 10px rgba(167,139,250,.16),0 20px 46px rgba(0,0,0,.4)}
.sesh-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.sesh-badge{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 40px rgba(0,0,0,.45));
  animation:pop 520ms var(--ease-out) both}
.sesh-glyph{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:42px;color:#fff;border:1px solid rgba(255,255,255,.22);
  background:radial-gradient(70% 70% at 50% 32%,rgba(255,255,255,.18),rgba(255,255,255,.02))}

/* A loose ring of soft, unlabeled circles behind the post-session avatar -
   the feeling of the room having been full, without inventing faces the API
   never sent. Decorative only, so it never competes with the real avatar. */
.sesh-orbit{position:absolute;inset:-56px;pointer-events:none}
.sesh-orbit i{position:absolute;display:block;border-radius:50%;background:var(--halo);opacity:.5;
  filter:blur(.3px);animation:sesh-drift 7s ease-in-out infinite}
.sesh-orbit .a{width:34px;height:34px;left:-6px;top:10px;animation-delay:0s}
.sesh-orbit .b{width:26px;height:26px;right:2px;top:-14px;background:linear-gradient(135deg,#FDBA74,#F0A868);animation-delay:.6s}
.sesh-orbit .c{width:22px;height:22px;right:-18px;bottom:30px;background:linear-gradient(135deg,#C084FC,#7C3AED);animation-delay:1.2s}
.sesh-orbit .d{width:30px;height:30px;left:-18px;bottom:6px;background:linear-gradient(135deg,#7C3AED,#C084FC);animation-delay:1.8s}
.sesh-orbit .e{width:18px;height:18px;left:36px;top:-24px;background:linear-gradient(135deg,#F0A868,#FDBA74);animation-delay:2.4s}
@keyframes sesh-drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-6px,0) scale(1.06)}}

.sesh-copy{display:flex;flex-direction:column;gap:14px;width:100%;max-width:380px;min-width:0}
.sesh-title{width:100%;min-width:0;margin:0;font-size:clamp(26px,6vw,32px);font-weight:300;line-height:1.16;color:#fff}
.sesh-title .serif{display:block;font-family:var(--serif);font-weight:400;color:#FBE3B8}
.sesh-body{width:100%;min-width:0;margin:0;font-size:14.5px;line-height:1.62;color:rgba(255,255,255,.82)}
.sesh-body-2{color:rgba(255,255,255,.58)}
.sesh-cta{width:100%;max-width:340px}

@media (max-width:480px){.sesh{padding:76px 22px 44px;gap:18px}}

/* ---------------------------------------------------------------- toast */
.toasts{position:fixed;left:50%;top:72px;z-index:40;transform:translateX(-50%);display:flex;
  flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:max-content;max-width:92vw}
.toast{background:rgba(24,16,44,.97);border:1px solid var(--line-2);border-radius:999px;padding:10px 18px;
  font-size:13px;color:var(--s-ink);animation:toastIn var(--t-std) var(--ease-out) both}
.toast.warn{border-color:rgba(240,168,104,.5);color:var(--amber)}
.toast.ok{border-color:rgba(110,231,183,.5);color:var(--ok)}
@keyframes toastIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}

/* Copy the API serves as an HTML fragment (content.url). It arrives as plain
   paragraphs and lists, so it inherits the .sub type and only needs rhythm. */
.api-copy{margin:0;color:var(--s-ink-2);font-size:14px;line-height:1.55}
.api-copy>*{margin:0}
.api-copy>*+*{margin-top:.7em}
.api-copy ul,.api-copy ol{padding-left:1.1em}
.api-copy a{color:inherit}