/* Hello Platform v20 — seamless inner pages, stronger heroes, section rhythm, event spacing */
:root{--hp-page-gray:#f4f7fb;--hp-page-blue:#eef7ff;--hp-page-warm:#fff8ed;--hp-page-lilac:#f7f2ff;--hp-page-mint:#eefbf6}

/* Exact prototype CTA artwork: direct URL avoids CSS custom-property/background parsing issues. */
.hp-home .hp-cta{
  background-image:linear-gradient(90deg,rgba(40,19,113,.68),rgba(100,39,170,.48) 50%,rgba(194,77,27,.22)),url('../images/v19/cta-brighter.webp')!important;
  background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;
  min-height:270px!important;
}
.hp-home .hp-cta-overlay{background:linear-gradient(90deg,rgba(35,17,100,.20),rgba(108,40,172,.12) 52%,rgba(255,116,25,.08))!important}

/* Remove the white strip/column after all cinematic heroes. The wave now lands directly on the page gray. */
.hp-public-inner main,.hp-public-inner .main-content{background:var(--hp-page-gray)}
.hp-public-inner .platform-directory,.hp-public-inner .app-page,.hp-public-inner .platform-detail{padding-top:0!important}
.hp-public-inner .platform-directory-head::after,.hp-public-inner .app-hero::after,.hp-public-inner .platform-detail-hero::after,.hp-public-inner .event-detail-hero::after,.hp-public-inner .mini-site-cover::after{background:var(--hp-page-gray)!important;bottom:-58px!important}
.hp-public-inner .v19-hero-wave path{fill:var(--hp-page-gray)!important}
.hp-public-inner .platform-directory-head{margin-bottom:0!important}
.hp-public-inner .platform-directory>.platform-toolbar,.hp-public-inner .platform-directory>.directory-search{margin-top:0!important;position:relative;z-index:8}

/* Stronger, cleaner directory heroes, especially Schools and Learning Resources. */
.hp-public-inner .platform-directory-head{min-height:540px!important;align-items:center!important;padding-top:98px!important;padding-bottom:138px!important}
.hp-public-inner .platform-directory-head>div{max-width:790px}
.hp-public-inner .platform-directory-head:before{content:"";position:absolute;z-index:2;right:7%;top:18%;width:150px;height:150px;border-radius:38px;border:1px solid rgba(255,255,255,.34);background:radial-gradient(circle at 32% 30%,rgba(255,209,34,.42),transparent 38%),linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,.04));box-shadow:0 24px 70px rgba(0,0,0,.14);backdrop-filter:blur(5px);transform:rotate(8deg);animation:v20HeroFloat 5.5s ease-in-out infinite}
.page-hello-school .platform-directory-head{background-position:center 42%!important}
.page-learning-resources .platform-directory-head{background-position:center 46%!important}
.page-learning-resources .platform-directory-head:before{background:radial-gradient(circle at 32% 30%,rgba(85,234,255,.48),transparent 38%),linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.04))}
@keyframes v20HeroFloat{0%,100%{transform:translateY(0) rotate(8deg)}50%{transform:translateY(-14px) rotate(12deg)}}

/* Search/filter controls should feel attached to the content, not float over hero text. */
.hp-public-inner .platform-toolbar,.hp-public-inner .directory-search{width:min(1180px,calc(100% - 48px));margin:28px auto 38px!important;background:rgba(255,255,255,.98)!important;border:1px solid #e0e8f3!important;box-shadow:0 18px 46px rgba(9,35,77,.10)!important}
.hp-public-inner .event-search-bar{position:relative!important;z-index:2!important;clear:both!important;margin:42px 0 44px!important;padding:16px!important;background:#fff!important;box-shadow:0 16px 42px rgba(9,35,77,.10)!important}
.hp-public-inner .event-calendar-panel{margin-bottom:0!important}
.hp-public-inner .calendar-help{margin-bottom:22px!important}

/* More visual rhythm: inner pages no longer stay gray from top to bottom. */
.hp-public-inner .content-section:nth-of-type(4n+1){background:var(--hp-page-gray)}
.hp-public-inner .content-section:nth-of-type(4n+2){background:linear-gradient(180deg,var(--hp-page-blue),#f8fbff)}
.hp-public-inner .content-section:nth-of-type(4n+3){background:linear-gradient(180deg,var(--hp-page-warm),#fffdf9)}
.hp-public-inner .content-section:nth-of-type(4n+4){background:linear-gradient(180deg,var(--hp-page-lilac),#fcfaff)}
.hp-public-inner .soft-section{background:linear-gradient(135deg,#eef7ff 0%,#f7f2ff 52%,#fff8ed 100%)!important}
.hp-public-inner .split-feature{width:min(1180px,calc(100% - 48px));margin:0 auto!important;padding-left:0!important;padding-right:0!important}
.hp-public-inner .platform-card-grid{padding-bottom:68px}
.hp-public-inner .platform-directory>.platform-card-grid{margin-top:0}
.hp-public-inner .app-page>section:nth-of-type(even):not(.event-calendar-panel){background:#fff;border-radius:28px;padding:28px}

/* Cards sit cleanly on the changing section backgrounds. */
.hp-public-inner .platform-card,.hp-public-inner .feature-card,.hp-public-inner .listing-card{background:#fff!important}
.hp-public-inner .text-card{border-top:4px solid #087df1!important}

@media(max-width:760px){
 .hp-public-inner .platform-directory-head{min-height:450px!important;padding:70px 22px 110px!important}
 .hp-public-inner .platform-directory-head:before{width:92px;height:92px;right:5%;top:13%;opacity:.7}
 .hp-public-inner .platform-toolbar,.hp-public-inner .directory-search{width:calc(100% - 28px);margin:20px auto 30px!important}
 .hp-public-inner .event-search-bar{margin:30px 0 34px!important}
 .hp-home .hp-cta{min-height:300px!important;background-position:center center!important}
}
@media(prefers-reduced-motion:reduce){.hp-public-inner .platform-directory-head:before{animation:none!important}}