:root{
  --overlay:rgba(10,10,12,0.38);
  --glass-bg:rgba(255,255,255,0.14);
  --glass-bg-strong:rgba(255,255,255,0.26);
  --glass-border:rgba(255,255,255,0.55);
  --glass-border-strong:rgba(255,255,255,0.85);
  --btn-bg:rgba(0,0,0,0.32);
  --btn-border:rgba(255,255,255,0.5);
  --gold:#f2c879;
  --emerald:#10b981;
  --emerald-deep:#047857;
  /* Main-site palette, used for the nav login pill, the CTA button and the
     brand mark text — the one deliberate point of visual continuity with
     bewithyou.co on an otherwise dark, photo-driven page. */
  --sage:#8B9468;
  --sage-deep:#66713F;
  --terracotta:#C17D42;
  --gold-brand:#D9BE87;
  --radius:14px;
  --radius-sm:10px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

html,body{
  margin:0;
  padding:0;
  height:100%;
  width:100%;
  overflow:hidden;
  font-family:'Montserrat',sans-serif;
  background:#000;
}

body{
  position:relative;
  height:100vh;
  height:100dvh;
  height:calc(var(--app-height, 100dvh));
  width:100vw;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:#fff;
  filter:brightness(1.1);
}

body.bg-landscape{ background-image:var(--bg-landscape); }
body.bg-portrait{ background-image:var(--bg-portrait); }

@media (orientation:landscape){
  body.auto-bg{ background-image:var(--bg-landscape); }
}
@media (orientation:portrait){
  body.auto-bg{ background-image:var(--bg-portrait); }
}

.page-loader{
  position:fixed; inset:0; z-index:100;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px;
  background:#0a0a0c;
  transition:opacity .4s ease;
}
.page-loader.is-hidden{ opacity:0; pointer-events:none; }
.loader-brand{
  font-family:'Pacifico', cursive;
  font-weight:400;
  font-size:30px;
  letter-spacing:0;
  color:#fff;
}
.loader-bar-track{
  height:3px;
  border-radius:2px;
  background:rgba(255,255,255,0.18);
  overflow:hidden;
}
.loader-bar-fill{
  height:100%;
  width:0%;
  border-radius:inherit;
  background:rgba(255,255,255,0.85);
  transition:width .25s ease;
}
.loader-pct{
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  font-size:13px;
  letter-spacing:.02em;
  color:rgba(255,255,255,0.7);
}

.page-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.12) 30%, rgba(0,0,0,0.22) 70%, rgba(0,0,0,0.5) 100%);
  pointer-events:none;
}

@keyframes cta-breathe{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.07); }
}

/* ---------- Top nav: transparent, brand left, login pill right ---------- */
.top-nav{
  position:absolute;
  top:0; left:0; right:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px max(20px, env(safe-area-inset-left)) 0 max(20px, env(safe-area-inset-right));
  padding-top:max(16px, env(safe-area-inset-top));
  background:transparent;
}

.brand-badge{
  display:flex; align-items:center; gap:7px;
  text-decoration:none;
}
/* Same size as the main site's nav brand (.brand / .brand-text in
   assets/css/style.css) — 44px mark, 26px wordmark, at every breakpoint. */
.brand-badge img{ width:44px; height:44px; display:block; filter:drop-shadow(0 1px 4px rgba(0,0,0,.5)); }
.brand-badge span{
  font-family:'Pacifico', cursive; font-weight:400; font-size:21px; letter-spacing:0;
  color:#fff; text-shadow:0 1px 5px rgba(0,0,0,.55);
  white-space:nowrap;
}

/* In-card login link: no button chrome — just text whose fill is an
   animated gold/terracotta gradient that slowly drifts, so the "button"
   is the glowing text itself rather than a filled pill. (Used to also
   style a nav-bar login button; that button was removed from the nav
   entirely, but the animation/gradient stays here for this link.) */
@keyframes gradient-flow{
  0%{ background-position:0% 50%; }
  100%{ background-position:200% 50%; }
}

/* ---------- Stage: a compact question card up top, then the widget,
   CTA and login link flowing beneath it directly on the page (not
   inside any glass panel). Column layout, centered, same top offset as
   before so the card starts in the same place it always has. ---------- */
.stage-wrap{
  position:relative;
  z-index:5;
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:30px;
  padding:96px 18px 22px;
}

/* ---------- The glass card itself — Apple-liquid-glass style, same flat
   tint/border/blur as the play-pause button and nav-arrow circles. It has
   no background image of its own: ::before's backdrop-filter genuinely
   blurs whatever is actually behind the card (the real page photo), so it
   never shows a crop or framing that doesn't match its surroundings. The
   card is static (no idle motion) with a plain, even, subtle white edge
   rather than a shiny/reflective highlight. Sized to its content now (just the
   dots and the question+arrows row) rather than filling the screen. ---------- */
.mood-card{
  position:relative;
  flex:0 0 auto;
  width:100%;
  max-width:640px;
  border-radius:4px;
  border:none;
  box-shadow:0 30px 70px -25px rgba(0,0,0,0.55);
  cursor:pointer;
  /* overflow is intentionally NOT hidden here (desktop positions the nav
     arrows as glass circles outside this box's edge; overflow:hidden would
     clip them). .mood-card::before gets its own border-radius below so its
     backdrop-blur still clips to the card's rounded corners. */
  display:flex;
  flex-direction:column;
  transition:transform .38s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
  touch-action:none;
}
/* Card-level carousel motion — the whole glass card (not just its text
   content) slides and fades when the mood changes; see the matching
   .leaving-*/.entering-* logic in app.js's navigate(). */
.mood-card.leaving-next{ transform:translateX(-42px); opacity:0; }
.mood-card.leaving-prev{ transform:translateX(42px); opacity:0; }
.mood-card.entering-next{ transition:none; transform:translateX(42px); opacity:0; }
.mood-card.entering-prev{ transition:none; transform:translateX(-42px); opacity:0; }
.mood-card::before{
  /* the frosted-glass pane itself: blurs/tints the card's own cover-art
     background (backdrop-filter picks up whatever paints behind this
     layer, including .mood-card's own background-image) — lighter blur
     and a thinner tint than a typical overlay so the photo still reads
     as artwork behind glass, not just a dark smudge. */
  content:'';
  position:absolute; inset:0; z-index:1;
  border-radius:inherit;
  background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.4);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  pointer-events:none;
  overflow:hidden;
}

.mood-card-inner{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:26px clamp(18px, 4vw, 32px) 24px;
  gap:12px;
}

.mood-dots{ display:none; }
.mood-dot{
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,0.35);
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.mood-dot.active{ background:#fff; transform:scale(1.35); }

/* Question row — arrows flank the question, both inside the card, on
   every breakpoint (there's no separate desktop/mobile arrow placement
   anymore). */
.question-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
}

/* Grid (not flex) is what actually centers this correctly: a fixed-width
   item (max-width caps it below the wrap's full width) defaults to
   start-aligned in a plain flex/block context, which left the question
   sitting flush left instead of centered once the desktop arrows moved
   outside the row. justify-self/align-self:center on a single grid cell
   sidesteps that entirely. */
.question-text-wrap{
  display:grid;
  flex:1 1 auto;
  min-width:0;
  min-height:2.6em;
}
.mood-question{
  justify-self:center;
  align-self:center;
  margin:0;
  max-width:28ch;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(18px, 2.4vw, 24px);
  font-weight:600;
  line-height:1.35;
  text-align:center;
  text-shadow:0 2px 14px rgba(0,0,0,0.55);
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}

/* Sound widget — no outer ring, no colored gradient behind the play/pause
   control; just the amplifier-gradient waveform and a plain glass button,
   sitting side by side. Both share one size variable so the button is
   always exactly as tall as the waveform next to it. */
.widget-panel{
  --widget-size: clamp(36px, 6.24vh, 70px);
  flex:1 1 auto;
  min-height:0;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  /* Pinned to the bottom of its flexible slot so it sits right above the
     CTA button rather than centered in the space below the question card. */
  justify-content:flex-end;
  gap:34px;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .35s ease, transform .35s ease;
}
.widget-panel.visible{ opacity:1; transform:translateY(0); }

.widget-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  /* app.js sizes the waveform canvas per piece (--widget-size / ampFrac), so
     its height varies; a fixed row height (canvas overflows it evenly)
     keeps the button and waveform from shifting between pieces. */
  height:calc(var(--widget-size) * 1.6);
  flex:0 0 auto;
}

.widget-video-src{
  position:absolute; left:-9999px; top:0; width:1px; height:1px; opacity:0; pointer-events:none;
}

.play-pause-btn{
  flex:0 0 auto;
  width:var(--widget-size); height:var(--widget-size);
  border-radius:50%;
  background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.4);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .2s ease, transform .15s ease;
}
.play-pause-btn:hover{ background:rgba(255,255,255,0.24); }
.play-pause-btn:active{ transform:scale(0.92); }
.play-pause-btn svg{ width:60%; height:60%; }
.play-pause-btn svg#icon-play{ margin-left:3%; }

.widget-canvas{
  height:var(--widget-size);
  width:auto;
  max-width:220px;
  object-fit:contain;
  pointer-events:none;
}

.subtitle-box{ width:100%; display:flex; justify-content:center; padding:0 12px; }
/* A hard height (not min-height) — the widget-row above sits in a
   bottom-pinned flex column, so any height change here used to shift the
   play button/waveform up or down as a subtitle wrapped to its second
   line. Fixed height (with room for the two-line gap below) keeps that
   completely still regardless of line count. */
.subtitle-inner{
  font-weight:500;
  font-size:clamp(14.85px, 1.87vw, 19.8px);
  line-height:1.35;
  text-shadow:0 2px 10px rgba(0,0,0,0.6);
  height:calc(2.7em + 10px);
  overflow:hidden;
}
.sub-line{ text-align:left; white-space:nowrap; }
.sub-line2{ text-align:center; margin-top:7px; }

/* CTA button — now a direct child of .stage-wrap, not nested in the glass
   card; the wrapper just gives it a predictable centered flex slot. */
.cta-wrap{
  flex:0 0 auto;
  display:flex;
  justify-content:center;
  width:100%;
}

.cta-btn{
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  font-size:14.5px;
  letter-spacing:.01em;
  color:#fff;
  background:var(--sage-deep);
  border:none;
  border-radius:14px;
  padding:15px 32px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.5);
  animation:cta-breathe 2.4s ease-in-out infinite;
  transition:background .2s ease;
}
.cta-btn:hover{ background:var(--sage); }
.cta-btn svg{ width:16px; height:16px; flex:0 0 auto; }
@media (max-width:700px){
  .cta-btn svg{ animation:phone-ring-vibrate 3s ease-in-out infinite; transform-origin:60% 40%; }
}
@keyframes phone-ring-vibrate{
  0%, 66%, 100%{ transform:rotate(0deg); }
  2%{ transform:rotate(-16deg); } 5%{ transform:rotate(14deg); }
  8%{ transform:rotate(-16deg); } 11%{ transform:rotate(14deg); }
  14%{ transform:rotate(-16deg); } 17%{ transform:rotate(14deg); }
  20%{ transform:rotate(-14deg); } 23%{ transform:rotate(12deg); }
  26%{ transform:rotate(-12deg); } 29%{ transform:rotate(10deg); }
  32%{ transform:rotate(-10deg); } 35%{ transform:rotate(8deg); }
  38%{ transform:rotate(-8deg); } 41%{ transform:rotate(6deg); }
  44%{ transform:rotate(-6deg); } 47%{ transform:rotate(4deg); }
  50%{ transform:rotate(-4deg); } 53%{ transform:rotate(0deg); }
}

.card-login-link{
  background-image:linear-gradient(90deg, var(--gold-brand), var(--terracotta), var(--gold-brand), var(--terracotta));
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:gradient-flow 4s linear infinite;
  border:none; padding:2px 4px; margin:0;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:13.5px;
  cursor:pointer;
}
.card-login-link:hover{ text-decoration:underline; }

/* Left/right nav buttons, now inline inside the question row on every
   breakpoint — plain directional glyphs, no circle/chrome around them. */
.card-arrow{
  flex:0 0 auto;
  display:flex;
  background:none;
  border:none;
  padding:6px 4px;
  color:rgba(255,255,255,0.75);
  align-items:center; justify-content:center;
  font-size:24px;
  text-shadow:0 1px 6px rgba(0,0,0,0.6);
  cursor:pointer;
}
.card-arrow:active{ transform:scale(0.9); }

/* Desktop: the nav arrows leave the question row and sit just outside the
   glass card's edge instead, each inside its own small glass circle (same
   frosted-glass look as the play/pause button). Mobile keeps the plain
   inline glyphs inside the card, untouched. */
@media (min-width:701px){
  /* Fixed, guaranteed-minimum gutter on each side so the circles (which sit
     outside the card's own edge) always have room, even before the card
     reaches its 640px max-width and the natural side margin opens up. */
  .stage-wrap{ padding-left:max(122px, env(safe-area-inset-left)); padding-right:max(122px, env(safe-area-inset-right)); padding-top:64px; }
  .card-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:46px; height:46px;
    border-radius:50%;
    background:rgba(255,255,255,0.14);
    border:1px solid rgba(255,255,255,0.4);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    padding:0;
    font-size:22px;
    transition:background .2s ease, transform .15s ease;
  }
  .card-arrow:active{ transform:translateY(-50%) scale(0.92); }
  .card-arrow:hover{ background:rgba(255,255,255,0.24); }
  .card-arrow-left{ left:-92px; }
  .card-arrow-right{ right:-92px; }
}

@media (max-width:700px){
  .top-nav{ padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); }
  /* No mobile shrink here anymore — matches the main site's nav brand,
     which stays 44px/26px at every breakpoint too. */

  .stage-wrap{ padding:78px 14px 16px; gap:24px; }

  .mood-card{ border-radius:4px; }
  .mood-card-inner{ padding:20px 14px 18px; gap:8px; }
  .mood-question{ font-size:clamp(17px, 4.6vw, 21px); max-width:22ch; }
  .card-arrow{ font-size:21px; }
}

@media (max-height:640px){
  .question-text-wrap{ min-height:2.2em; }
  .mood-question{ font-size:clamp(16px, 4vw, 19px); }
  .widget-panel{ --widget-size: clamp(30px, 5.3vh, 50px); }
}

@media (max-width:700px){ .brand-badge span{ font-size:14px; } }