/* Compact, value-led entrance. Only A20 entrance is affected. */
html[data-yuni-surface=public] #app .hall-showcase-shell.pl-surface{background:transparent!important}
html[data-yuni-surface=public] #app .hall-showcase-shell.pl-surface::before{content:''!important;position:fixed!important;inset:0!important;width:100%!important;height:100dvh!important;background:linear-gradient(rgba(255,255,255,.48),rgba(255,255,255,.48)),#f5f4ee url('/experience/play-hall-seaside.png') center top/100% auto no-repeat!important;opacity:1!important;z-index:-1!important;pointer-events:none}
html[data-yuni-surface=public] #app .hall-showcase-shell main.hall-showcase{max-width:1120px!important;padding:12px 26px 24px!important;margin:auto!important;width:100%!important;box-sizing:border-box}
#app .hall-showcase>.journey-pro-nav-fixed,#app .hall-showcase>.journey-pro-nav-fixed::before{background:transparent!important;border:0!important;box-shadow:none!important}
#app .hall-showcase>.journey-pro-nav-fixed{padding:4px 0!important;margin-bottom:0!important;position:static!important}
#app .hall-showcase .hs-intro{padding:14px 0 20px;margin:0;background:none;border:0}
#app .hall-showcase .hs-intro h1{font-size:32px!important;line-height:1.35!important;color:#194c70;margin:0 0 5px!important}
#app .hall-showcase .hs-intro p{font-size:17px!important;line-height:1.7!important;color:#365e78;margin:0}
#app .hall-showcase .hs-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
#app .hall-showcase .hs-section{min-width:0;display:flex;flex-direction:column;background:rgba(255,253,247,.88);border:1px solid #ffffffa8;border-radius:12px;padding:24px 26px;box-shadow:0 4px 18px #7355310a}
#app .hall-showcase .hs-section>header{display:flex;align-items:baseline;gap:13px;margin:0 0 13px}
#app .hall-showcase .hs-number{font-size:13px;color:#65869a}
#app .hall-showcase .hs-section h2{font-size:27px!important;color:#245674;line-height:1.4!important;margin:0!important}
#app .hall-showcase .hs-section .hs-value{font-size:22px!important;line-height:1.55!important;font-weight:600;color:#28536d;margin:0 0 12px!important}
#app .hall-showcase .hs-description{font-size:16px!important;line-height:1.8!important;color:#46667b;margin:0 0 12px!important}
#app .hall-showcase .hs-resources{font-size:15px!important;line-height:1.8!important;color:#577387;margin:0 0 18px!important}
#app .hall-showcase .hs-grid{display:flex;gap:20px;align-items:flex-end;margin-top:auto;min-width:0}
#app .hall-showcase .hs-item{display:block;min-width:0;width:86px;text-decoration:none;color:#28536e}
#app .hall-showcase .hs-themes .hs-item{width:132px}
#app .hall-showcase .hs-item figure{margin:0 0 7px;background:transparent;border:0;border-radius:4px;overflow:hidden;display:flex;align-items:flex-end;justify-content:flex-start;height:94px}
#app .hall-showcase .hs-item img{display:block;max-width:100%;max-height:94px;width:auto;height:auto;object-fit:contain;border-radius:4px}
#app .hall-showcase .hs-item-small img{width:132px;max-height:70px}
#app .hall-showcase .hs-item h3{font-size:14px!important;line-height:1.5!important;font-weight:500;color:#365b72;margin:0!important}
#app .hall-showcase .hs-item:hover h3{text-decoration:underline}
#app .hall-showcase .hs-item:focus-visible{outline:3px solid #5d8ba9;outline-offset:5px;border-radius:4px}
#app .hall-showcase .hs-section footer{margin-top:20px;padding:0;border:0}
#app .hall-showcase .hs-section footer .button{font-size:16px!important;line-height:1.5!important;padding:9px 18px!important}
@media(min-width:801px) and (max-height:760px){#app .hall-showcase .hs-section{padding:20px 24px}#app .hall-showcase .hs-intro{padding:10px 0 14px}#app .hall-showcase .hs-section>header{margin-bottom:9px}#app .hall-showcase .hs-resources{margin-bottom:10px!important}#app .hall-showcase .hs-section footer{margin-top:15px}}
@media(max-width:800px){html[data-yuni-surface=public] #app .hall-showcase-shell main.hall-showcase{padding:12px 18px 30px!important}#app .hall-showcase .hs-sections{grid-template-columns:1fr;gap:18px}#app .hall-showcase .hs-section{padding:22px}#app .hall-showcase .hs-intro h1{font-size:29px!important}#app .hall-showcase .hs-section .hs-value{font-size:21px!important}#app .hall-showcase .hs-grid{gap:17px}#app .hall-showcase .hs-item{width:74px}#app .hall-showcase .hs-themes .hs-item{width:120px}}

/* Balance the two entrance panels around their value statements. */
html[data-yuni-surface=public] #app .ui-shell.hall-showcase-shell.pl-surface>main.hall-showcase.pl-main{width:91.5%!important;max-width:1440px!important;padding:12px 0 28px!important}
#app .hall-showcase .hs-intro{padding:18px 0 22px}
#app .hall-showcase .hs-intro h1{font-size:36px!important}
#app .hall-showcase .hs-intro p{font-size:19px!important}
#app .hall-showcase .hs-sections{gap:26px}
#app .hall-showcase .hs-section{padding:28px 30px;border-radius:12px}
#app .hall-showcase .hs-section>header{margin-bottom:16px}
#app .hall-showcase .hs-section h2{font-size:30px!important}
#app .hall-showcase .hs-section .hs-value{font-size:27px!important;line-height:1.55!important;margin-bottom:16px!important}
#app .hall-showcase .hs-description{font-size:19px!important;line-height:1.8!important;margin-bottom:14px!important;max-width:620px}
#app .hall-showcase .hs-resources{font-size:17px!important;line-height:1.8!important;padding-top:12px;border-top:1px solid #c8d4d680;margin-bottom:18px!important}
#app .hall-showcase .hs-grid{gap:22px}
#app .hall-showcase .hs-item h3{font-size:15px!important}
#app .hall-showcase .hs-section footer{margin-top:20px}
#app .hall-showcase .hs-section footer .button{font-size:17px!important;padding:10px 20px!important}
@media(min-width:801px) and (max-height:800px){
 #app .hall-showcase .hs-intro{padding:10px 0 14px}
 #app .hall-showcase .hs-section{padding:20px 26px}
 #app .hall-showcase .hs-section>header{margin-bottom:10px}
 #app .hall-showcase .hs-section .hs-value{font-size:25px!important;margin-bottom:10px!important}
 #app .hall-showcase .hs-description{font-size:18px!important;line-height:1.7!important;margin-bottom:10px!important}
 #app .hall-showcase .hs-resources{padding-top:8px;margin-bottom:12px!important;font-size:16px!important}
 #app .hall-showcase .hs-section footer{margin-top:14px}
}
@media(max-width:800px){
 #app .hall-showcase .hs-section{padding:22px}
 #app .hall-showcase .hs-intro h1{font-size:30px!important}
 #app .hall-showcase .hs-intro p{font-size:17px!important}
 #app .hall-showcase .hs-section h2{font-size:27px!important}
 #app .hall-showcase .hs-section .hs-value{font-size:23px!important}
 #app .hall-showcase .hs-description{font-size:18px!important}
 #app .hall-showcase .hs-resources{font-size:16px!important}
 #app .hall-showcase .hs-grid{gap:16px}
}

/* Soft supplied watercolor textures, with a light veil behind the copy. */
#app .hall-showcase .hs-section{background-color:#fffaf5;background-image:linear-gradient(145deg,rgba(255,255,255,.77),rgba(255,252,248,.55)),url('/experience/play-hall-peach.png');background-position:center;background-size:cover;background-repeat:no-repeat;border-color:#efdbcb;box-shadow:0 5px 22px #73553108}
#app .hall-showcase .hs-section:nth-child(2){background-color:#f4faff;background-image:linear-gradient(145deg,rgba(255,255,255,.68),rgba(248,252,255,.48)),url('/experience/play-hall-blue.png');border-color:#d2e4ef}
#app .hall-showcase .hs-description{color:#36566d}
#app .hall-showcase .hs-resources{color:#46647a}

/* Keep the secondary navigation aligned with the professional-space hub. */
@media(min-width:1101px){
 html[data-yuni-surface=public] #app .ui-shell.hall-showcase-shell.pl-surface>main.hall-showcase.pl-main{max-width:1800px!important;width:91.5%!important;padding-top:26px!important}
 #app .hall-showcase>.hs-intro,#app .hall-showcase>.hs-sections{max-width:1440px;margin-inline:auto}
}
#app .hall-showcase>.journey-pro-nav-fixed{position:sticky!important;top:var(--ui-header-height,64px)!important;z-index:80!important;display:flex!important;gap:8px!important;padding:9px 0!important;margin:0!important;}
#app .hall-showcase>.journey-pro-nav-fixed a{font-size:14px!important;padding:7px 12px!important;white-space:nowrap}
@media(max-width:800px){#app .hall-showcase>.journey-pro-nav-fixed{overflow-x:auto}#app .hall-showcase>.journey-pro-nav-fixed a{font-size:13px!important;padding:7px 9px!important}}

/* Center the two feature panels and crop the texture assets' white margins. */
#app .hall-showcase .hs-section{background-size:100% 100%,112% 120%;background-position:center,center;border:0;border-radius:16px;text-align:center;box-shadow:0 8px 22px rgba(57,82,101,.12),0 2px 5px rgba(57,82,101,.06);transition:transform .2s ease,box-shadow .2s ease}
#app .hall-showcase .hs-section:nth-child(2){border:0}
#app .hall-showcase .hs-section>header{justify-content:center;gap:10px}
#app .hall-showcase .hs-description{max-width:34em;margin-inline:auto!important}
#app .hall-showcase .hs-resources{align-self:stretch}
#app .hall-showcase .hs-grid{justify-content:center}
#app .hall-showcase .hs-item figure{justify-content:center}
#app .hall-showcase .hs-section footer .button{box-shadow:0 4px 9px rgba(29,83,122,.16);transition:transform .18s ease,box-shadow .18s ease}
#app .hall-showcase .hs-section:focus-within{box-shadow:0 13px 28px rgba(57,82,101,.18),0 3px 8px rgba(57,82,101,.08)}
@media(hover:hover) and (pointer:fine){
 #app .hall-showcase .hs-section:hover{transform:translateY(-4px);box-shadow:0 15px 30px rgba(57,82,101,.2),0 4px 9px rgba(57,82,101,.08)}
 #app .hall-showcase .hs-section footer .button:hover{transform:translateY(-2px);box-shadow:0 6px 13px rgba(29,83,122,.23)}
}
@media(prefers-reduced-motion:reduce){#app .hall-showcase .hs-section,#app .hall-showcase .hs-section footer .button{transition:none;transform:none!important}}

/* Stronger watercolor color and a calmer, narrower reading composition. */
#app .hall-showcase .hs-sections{gap:28px}
#app .hall-showcase .hs-section{padding:28px 34px 24px;background-color:#f9e2d2;background-image:linear-gradient(155deg,rgba(255,248,240,.28),rgba(255,246,235,.18) 48%,rgba(255,246,236,.55)),url('/experience/play-hall-peach.png');border-radius:18px;box-shadow:0 9px 24px rgba(74,83,92,.14),inset 0 1px 0 rgba(255,255,255,.6)}
#app .hall-showcase .hs-section:nth-child(2){background-color:#dceefb;background-image:linear-gradient(155deg,rgba(238,249,255,.24),rgba(229,245,255,.12) 48%,rgba(239,248,255,.5)),url('/experience/play-hall-blue.png')}
#app .hall-showcase .hs-section>header{margin-bottom:18px}
#app .hall-showcase .hs-number{opacity:.75}
#app .hall-showcase .hs-section h2{font-size:28px!important;letter-spacing:.04em}
#app .hall-showcase .hs-section .hs-value{font-size:28px!important;line-height:1.5!important;margin-bottom:18px!important;color:#194b66}
#app .hall-showcase .hs-description{width:100%;max-width:27em;text-align:left;text-wrap:pretty;font-size:18px!important;line-height:1.75!important;color:#31556c;margin-bottom:16px!important}
#app .hall-showcase .hs-resources{width:100%;max-width:27em;align-self:center;box-sizing:border-box;border-top:1px solid rgba(64,102,126,.18);padding-top:12px;font-size:16px!important;line-height:1.7!important;color:#3e6176;margin-bottom:18px!important}
#app .hall-showcase .hs-grid{gap:24px}
#app .hall-showcase .hs-item h3{font-size:14px!important;margin-top:4px!important}
#app .hall-showcase .hs-section footer{margin-top:18px}
#app .hall-showcase .hs-section footer .button{border-radius:7px;min-width:180px;padding:10px 22px!important}
@media(min-width:801px) and (max-height:800px){
 #app .hall-showcase .hs-section{padding:22px 28px 20px}
 #app .hall-showcase .hs-section>header{margin-bottom:12px}
 #app .hall-showcase .hs-section .hs-value{font-size:25px!important;margin-bottom:12px!important}
 #app .hall-showcase .hs-description{font-size:17px!important;margin-bottom:12px!important}
 #app .hall-showcase .hs-resources{padding-top:10px;margin-bottom:12px!important}
 #app .hall-showcase .hs-section footer{margin-top:14px}
}
@media(max-width:800px){
 #app .hall-showcase .hs-section{padding:24px}
 #app .hall-showcase .hs-section .hs-value{font-size:24px!important}
 #app .hall-showcase .hs-description{font-size:17px!important}
 #app .hall-showcase .hs-grid{gap:16px}
}