/* Gelli Belle Dreamland V95.5 — corrections #19–21.
   Sky stop order matches DOM; featured experiences match user reference layouts.
   This CSS loads last and replaces legacy per-section cards only for these two experiences. */

:root{
  --night-radio:5%; --night-routine:12%; --night-scapes:20%;
  --night-dream:31%; --night-garden:42%; --night-silk:53%;
  --night-hour:63%; --night-breathing:73%; --night-solos:82%;
  --night-calm:89%; --night-stories:94%; --night-end:98%;
}
/* One seamless vertical night sky across every section.
   V95.4's update-v11.css placed --night-routine AFTER --night-solos,
   although the planner was moved BEFORE Dreamscapes; CSS collapsed the reversed
   stop at Solos and produced the screenshot's very sharp horizontal band. */
html body{
  background-image:linear-gradient(180deg,
    #0b1934 0%,
    #142747 var(--night-radio),
    #233453 var(--night-routine),
    #263858 var(--night-scapes),
    #31385f var(--night-dream),
    #415a78 var(--night-garden),
    #57466b var(--night-silk),
    #375583 var(--night-hour),
    #345878 var(--night-breathing),
    #2f4c7a var(--night-solos),
    #292f55 var(--night-calm),
    #26254b var(--night-stories),
    #172645 var(--night-end),
    #0b1731 100%)!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%!important;
}
/* No edge-colored bands beneath the two restored content sections. */
body .gb975-narrative{
  width:100%; min-height:0;
  padding:clamp(92px,9vw,156px) clamp(24px,5vw,86px);
  position:relative; border:0; box-shadow:none; margin:0;
  background:transparent!important; background-image:none!important;
  isolation:isolate; overflow:hidden;
}
body .gb975-narrative::before{
  content:'';position:absolute;inset:-8% 0;z-index:-1;pointer-events:none;
  opacity:.34!important;
  background:radial-gradient(ellipse 46% 55% at 80% 50%,rgba(177,147,218,.14),transparent 78%)!important;
}
body .gb975-stories::before{
  background:radial-gradient(ellipse 54% 52% at 18% 50%,rgba(137,149,224,.15),transparent 80%)!important;
}
.gb975-narrative-inner{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr);
  gap:clamp(36px,6.5vw,115px);align-items:center;
  max-width:1460px;margin:0 auto;position:relative;
}
.gb975-stories .gb975-narrative-inner{grid-template-columns:minmax(0,.94fr) minmax(0,1.13fr)}
.gb975-copy{min-width:0;position:relative}
.gb975-copy .overline{font-size:11px;letter-spacing:.2em;margin-bottom:16px;color:#d9caee}
body .gb975-copy h2{
  font-size:clamp(55px,6.6vw,102px);line-height:1.04;
  font-weight:500;letter-spacing:-.055em;margin:0 0 21px;
  max-width:none;text-wrap:balance;
}
.gb975-copy h2 em{color:#ddc7fa;font-style:italic;font-weight:400}
.gb975-intro{font-size:clamp(15px,1.32vw,19px);line-height:1.76;color:#d9d5ee;max-width:640px;margin-bottom:0}
/* Four selectable guided relaxation previews, with no unavailable playback. */
.gb975-calm-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:30px 0 24px}
.gb975-calm-choices button{
  display:flex;align-items:center;gap:14px;min-width:0;min-height:75px;
  padding:13px 17px;text-align:left;border-radius:17px;
  border:1px solid rgba(235,223,255,.17);background:rgba(234,223,255,.075);
  color:#f7f0ff;transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.gb975-calm-choices button:hover{background:rgba(233,218,253,.14);border-color:rgba(241,220,255,.42)}
.gb975-calm-choices button:focus-visible{outline:3px solid #eacffd;outline-offset:3px}
.gb975-calm-choices button[aria-pressed='true']{background:rgba(200,175,231,.22);border-color:rgba(231,211,250,.68)}
.gb975-calm-choices .gb975-choice-icon{font-size:25px;line-height:1;color:#f1d5b5;width:33px;text-align:center;flex:none}
.gb975-calm-choices strong,.gb975-calm-choices small{display:block}
.gb975-calm-choices strong{font-size:13px;font-weight:750;line-height:1.3}
.gb975-calm-choices small{margin-top:5px;font-size:11px;color:#bfc2e3;line-height:1.2}
/* Deliberately non-interactive Coming Soon player preview. */
.gb975-preview{
  display:flex;align-items:center;gap:16px;padding:17px 20px;
  border:1px solid rgba(225,213,255,.23);border-radius:19px;
  background:rgba(233,222,252,.09);min-height:88px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.gb975-play-disc{display:grid;place-items:center;width:52px;height:52px;min-width:52px;border-radius:50%;background:linear-gradient(135deg,#ebd8c7,#d8b2d9);font-size:16px;color:#2a294a;padding-left:3px;opacity:.86}
.gb975-preview-copy{min-width:0;flex:1}
.gb975-preview-copy strong,.gb975-preview-copy small{display:block}
.gb975-preview-copy strong{font-size:13px;color:#f7f4ff;font-weight:700;line-height:1.35}
.gb975-preview-copy small{font-size:11px;margin-top:5px;color:#bbc3de}
.gb975-preview-tag{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.10em;color:#f3d5c7;white-space:nowrap}
/* Original narrative art direction: portrait arch with visible Susie shawl. */
.gb975-scene{display:flex;align-items:center;justify-content:center;position:relative;min-width:0}
.gb975-susie-arch,.gb975-story-orb{margin:0;position:relative;overflow:hidden;border:1px solid rgba(243,235,255,.36);box-shadow:0 35px 95px rgba(5,13,37,.46),0 0 0 15px rgba(224,213,255,.055),0 0 0 44px rgba(227,206,255,.025)}
.gb975-susie-arch{width:min(100%,465px);height:clamp(405px,43vw,585px);border-radius:46% 46% 23% 23%/34% 34% 17% 17%;background:#f0eee7}
.gb975-susie-arch>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 46%}
.gb975-susie-arch::after{content:'';position:absolute;inset:57% 0 0;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(22,29,54,.80))}
.gb975-susie-arch figcaption{position:absolute;z-index:2;left:26px;right:26px;bottom:28px;text-align:center;font:italic 500 clamp(17px,1.7vw,24px)/1.35 'Fraunces',Georgia,serif;color:#fff5ec;text-shadow:0 2px 10px rgba(8,13,24,.65)}
/* Sleepy Stories artwork, full-focus moon and glowing child inside story orb. */
.gb975-story-orb{width:min(100%,530px);aspect-ratio:1/1;border-radius:50%;background:#1c2444;box-shadow:0 32px 95px rgba(5,9,34,.4),0 0 0 18px rgba(205,205,255,.055),0 0 0 51px rgba(205,205,255,.025)}
.gb975-story-orb>img{display:block;width:100%;height:100%;object-fit:cover;object-position:46% 48%;filter:brightness(.93) saturate(.97)}
.gb975-story-orb::after{content:'';position:absolute;inset:60% 0 0;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(16,24,51,.78))}
.gb975-story-orb figcaption{position:absolute;z-index:2;bottom:28px;left:20px;right:20px;text-align:center;color:#fce5dd;font:italic 500 clamp(14px,1.25vw,19px)/1.35 'Fraunces',Georgia,serif;text-shadow:0 2px 9px rgba(4,8,27,.65)}
.gb975-story-hosts{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin:30px 0 26px}
.gb975-host{display:flex;align-items:center;gap:11px;min-width:0}
.gb975-host>img{width:53px;height:53px;border-radius:50%;object-fit:cover;object-position:50% 27%;border:2px solid rgba(255,255,255,.53);background:#b4a9d7}
.gb975-host strong,.gb975-host small{display:block}
.gb975-host strong{font-size:12px;color:#fff4f9;font-weight:700}
.gb975-host small{font-size:10px;color:#c7c5dd;margin-top:4px}
.gb975-host-then{font:italic 16px Georgia,serif;color:#f4dcae;white-space:nowrap}
.gb975-anchor{position:absolute;top:0;scroll-margin-top:100px}
@media(max-width:1030px){
  .gb975-narrative-inner,.gb975-stories .gb975-narrative-inner{gap:clamp(28px,4vw,55px)}
  body .gb975-copy h2{font-size:clamp(50px,6.4vw,80px)}
  .gb975-preview{padding:14px}
  .gb975-susie-arch{height:440px}
}
@media(max-width:780px){
  body .gb975-narrative{padding:clamp(66px,10vw,95px) 24px}
  .gb975-narrative-inner,.gb975-stories .gb975-narrative-inner{display:flex;flex-direction:column;gap:42px;text-align:left}
  .gb975-calm .gb975-copy,.gb975-stories .gb975-copy{width:min(640px,100%)}
  .gb975-calm .gb975-scene{order:2;width:100%}
  .gb975-stories .gb975-copy{order:1}
  .gb975-stories .gb975-scene{order:2;width:100%}
  .gb975-susie-arch{height:clamp(355px,70vw,520px);width:min(84%,380px)}
  .gb975-story-orb{width:min(85%,490px)}
  .gb975-story-hosts{gap:10px}
}
@media(max-width:480px){
  body .gb975-narrative{padding:65px 18px}
  body .gb975-copy h2{font-size:clamp(51px,11vw,66px)}
  .gb975-intro{font-size:15px}
  .gb975-calm-choices{gap:9px}
  .gb975-calm-choices button{padding:10px;gap:8px;min-height:72px}
  .gb975-calm-choices strong{font-size:12px}
  .gb975-calm-choices small{font-size:10px}
  .gb975-calm-choices .gb975-choice-icon{font-size:22px;width:25px}
  .gb975-preview{padding:13px 12px;gap:10px}
  .gb975-play-disc{height:42px;width:42px;min-width:42px}
  .gb975-preview-tag{font-size:9px}
  .gb975-host>img{width:45px;height:45px}
  .gb975-host small{font-size:9px}
  .gb975-story-hosts{gap:9px}
  .gb975-story-orb{width:min(100%,390px)}
  .gb975-story-orb figcaption{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.gb975-calm-choices button{transition:none}}

/* V95.5 — actual playlist symbol beside the active Build My Night song title. */
#gb21-routine .gb975-bedtime-song-line{
  display:flex;align-items:center;gap:12px;min-width:0;margin:6px 0 4px;
}
#gb21-routine .gb975-bedtime-song-line h4{
  margin:0;min-width:0;overflow-wrap:anywhere;
}
#gb21-routine .gb975-bedtime-collection-icon{
  --gb975-glow:#d7caff;display:grid;place-items:center;
  flex:0 0 36px;width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(237,227,255,.48);background:rgba(255,255,255,.10);
  color:#f7f1ff;font:400 28px/1 'Fraunces',Georgia,serif;
  transition:box-shadow .26s ease,background .26s ease,filter .26s ease;
}
#gb21-routine .gb975-bedtime-collection-icon[data-collection="classical"]{--gb975-glow:#edd6b9}
#gb21-routine .gb975-bedtime-collection-icon[data-collection="rnb"]{--gb975-glow:#f7c2dd}
#gb21-routine .gb975-bedtime-collection-icon[data-collection="jazz"]{--gb975-glow:#bedbf4}
#gb21-routine .gb975-bedtime-collection-icon[data-collection="ambient"]{--gb975-glow:#b6e3d7}
#gb21-routine .gb975-bedtime-collection-icon[data-collection="solos"]{--gb975-glow:#f5d4a6}
#gb21-routine .gb975-bedtime-collection-icon.is-playing{
  background:color-mix(in srgb,var(--gb975-glow) 23%,transparent);
  box-shadow:0 0 12px var(--gb975-glow),inset 0 0 12px rgba(255,255,255,.18);
  text-shadow:0 0 10px var(--gb975-glow);
}
@media(max-width:480px){
  #gb21-routine .gb975-bedtime-song-line{gap:9px}
  #gb21-routine .gb975-bedtime-collection-icon{width:30px;height:30px;flex-basis:30px;font-size:22px}
}
@media(prefers-reduced-motion:reduce){#gb21-routine .gb975-bedtime-collection-icon{transition:none}}
