/* Clean yellow-accent preview; original V1 remains unchanged. */
@import url('/home-promise-preview.css');
.sb-integrated-benefits.sb-feature-bar {
 display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
 width: min(90rem, calc(100% - 4.8rem)); align-self: center;
 margin: 2.4rem auto 1.2rem; padding: 1.8rem 2rem; gap: .8rem;
 background: #201d24; border-radius: 999px; color: #fff;
}
.sb-integrated-benefits.sb-feature-bar > span {
 display: block; padding: .5rem 0; background: none; border: 0; border-radius: 0;
 font-size: clamp(1.4rem, 1.85vw, 2rem); line-height: 1.45; font-weight: 400;
 color: #fff; animation: none; box-shadow: none; white-space: nowrap;
}
@media(max-width: 600px) {
 .sb-integrated-benefits.sb-feature-bar {
  grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 2.8rem;
  width: calc(100% - 3.2rem); padding: 1.2rem; gap: .6rem;
 }
 .sb-integrated-benefits.sb-feature-bar > span { font-size: 1.4rem; }
}
.sb-integrated-benefits > span { display: inline-flex; align-items: center; gap: .65rem; }
.sb-integrated-benefits svg { width: 1.7rem; height: 1.7rem; flex: none; color: #513382; }
.sb-integrated-trial { gap: .8rem 1rem; }
.sb-integrated-trial > span { padding: .5rem 1rem; background: #f7df71; color: #211035; border: 1px solid #d1b344; border-radius: .7rem; }
.sb-integrated-benefits > .sb-benefit-lullabies { background: #f7df71; border-color: #d1b344; color: #211035; }
.sb-integrated-trial > span::before { content: none; }
.sb-v2-private-panel { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; max-width: none; margin: 5rem auto 0; padding: 1.4rem 0 2.4rem; background: none; border: 0; border-radius: 0; box-shadow: none; text-align: center; color: #000; }
.sb-v2-private-panel > svg { width: 3.2rem; height: 3.2rem; flex: none; color: #000; }
.sb-v2-private-panel strong { display: block; font-size: clamp(4rem, 6.4vw, 8.4rem); line-height: 1.02; letter-spacing: -.04em; font-weight: 500; text-wrap: balance; }
.sb-v2-private-panel .sb-integrated-privacy { margin-top: 2.4rem; font-size: clamp(1.8rem, 2.1vw, 2.1rem); line-height: 1.45; color: #000; }
.sb-integrated-action > .sb-trial-pill {
 --pill-colors: linear-gradient(115deg, #ffad55 0%, #ff82bf 20%, #9d7bff 40%, #53dff4 60%, #ffe879 80%, #ffad55 100%);
 position: relative; isolation: isolate; display: inline-flex; flex-direction: column; gap: .4rem;
 margin: 1.8rem auto 1rem; padding: 1.8rem 3.6rem !important; max-width: 100%;
 border: 2px solid transparent; border-radius: 100px;
 background: linear-gradient(#111014,#111014) padding-box, var(--pill-colors) border-box !important;
 background-size: 100% 100%, 300% 100% !important;
 color: #fff !important; font-size: 2rem !important; font-weight: 700; line-height: 1.35;
 text-align: center; transform: scale(1); transition: transform .2s ease;
}
.sb-trial-pill > span + span { font-size: 1.5rem; color: #fff; }
.sb-trial-pill::before { content: ''; position: absolute; inset: -10px; z-index: -2; border-radius: inherit; background: var(--pill-colors); background-size: 300% 100%; filter: blur(14px); opacity: .85; pointer-events: none; }
.sb-trial-pill::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #111014; pointer-events: none; }
.sb-integrated-action > .sb-trial-pill:hover { transform: scale(1.05); }
.sb-trial-pill:hover::before { opacity: 1; filter: blur(17px); }
@media(prefers-reduced-motion:no-preference) {
 .sb-trial-pill { animation: sb-pillar-border 7s ease-in-out infinite alternate; }
 .sb-trial-pill::before { animation: sb-pillar-glow 7s ease-in-out infinite alternate; }
}
@media(prefers-reduced-motion:reduce) { .sb-integrated-action > .sb-trial-pill { transition: none; } }
@keyframes sb-badge-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes sb-trial-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(247,223,113,0); } 50% { box-shadow: 0 0 0 5px rgba(247,223,113,.23); } }
@media(prefers-reduced-motion:no-preference) {
 .sb-integrated-benefits > span { animation: sb-badge-float 4.8s ease-in-out 2; }
 .sb-integrated-benefits > span:nth-child(2) { animation-delay: .35s; }
 .sb-integrated-benefits > span:nth-child(3) { animation-delay: .7s; }
 .sb-integrated-benefits:hover > span { animation-play-state: paused; }
 .sb-integrated-trial > span { animation: sb-trial-glow 3.8s ease-in-out 2; }
}
@media(max-width:30em) {
 .sb-integrated-benefits > span { gap: .4rem; }
 .sb-integrated-benefits svg { width: 1.4rem; height: 1.4rem; }
}

.sb-integrated-title span { display: block; }

/* Keep the entire desktop hero visible below the navigation at normal zoom.
   Only the illustration takes the remaining space; text is never cropped. */
@media (min-width: 768px) and (min-height: 640px) {
 [data-sb-section="home-hero"] > div {
  height: calc(100svh - 106px) !important;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
 }
 .sb-integrated-title {
  padding: clamp(28px, 4.2svh, 48px) 24px 0;
  font-size: clamp(32px, min(6svh, 4.8vw), 72px);
  white-space: normal;
 }
 [data-sb-section="home-hero"] .sb-source-subnav { margin-top: clamp(16px, 2svh, 28px); }
 [data-sb-section="home-hero"] .sb-source-switch { padding-block: 24px; }
 [data-sb-section="home-hero"] .sb-source-switch a { height: clamp(44px, 6svh, 60px); }
 [data-sb-section="home-hero"] > div > div[aria-hidden="true"] {
  height: 100%; min-height: 0;
 }
 .sb-integrated-action { width: min(100%, 90rem); padding: 0 24px 14px; justify-self: center; }
 .sb-integrated-action > .sb-trial-pill {
  margin: 8px auto 0; padding: 10px 30px !important;
  font-size: clamp(18px, 2.3svh, 22px) !important;
 }
 .sb-integrated-promise { margin: 8px auto 0; }
 .sb-v2-private-panel { margin-top: 16px; padding: 0; gap: 6px; }
 .sb-v2-private-panel > svg { width: 24px; height: 24px; }
 .sb-v2-private-panel strong { font-size: clamp(32px, 5svh, 60px); }
 .sb-v2-private-panel .sb-integrated-privacy { margin-top: 8px; font-size: clamp(14px, 2svh, 18px); }
}

/* Match the spacing around the neighbouring customization section. */
body[data-sb-page="home"] #sblb-host + #sb-panel2 {
 margin-top: 8rem !important;
}
@media (max-width: 767px) {
 body[data-sb-page="home"] #sblb-host + #sb-panel2 { margin-top: 5rem !important; }
}