/* Restore the centered character-led hero without reverting the newer page content. */
.header{position:relative;top:auto;left:auto;transform:none;width:100%;height:88px;padding:0 max(24px,calc((100% - 1200px)/2));border-radius:0;background:#085de8;color:#fff;box-shadow:none}
.header nav a{color:#fff}.header .menu-toggle{display:none}
.hero{display:block;height:710px;min-height:620px;max-height:calc(100svh - 150px);padding:0;background:#085de8;text-align:center}
.hero::before{display:none}
.hero .hero-copy{width:min(540px,90%);max-width:none;margin:auto;padding-top:30px;z-index:2}
.hero .eyebrow{display:block;color:#c3ecff;font-size:12px;font-weight:850;letter-spacing:0;margin:0 0 18px}
.hero h1{width:440px;max-width:100%;height:232px;margin:0 auto -4px;font:inherit;letter-spacing:0}
.hero h1 img{width:100%;height:100%;object-fit:contain}
.hero .tagline{font:700 32px/1.2 Fredoka,sans-serif;margin-bottom:14px}
.hero .hero-description{max-width:none;font-size:17px;line-height:1.45;margin:0 0 26px}
.hero .button,.header .button{border-radius:7px;padding:16px 24px;gap:32px;min-height:58px;font-size:16px}
.header .button.small{padding:11px 16px;min-height:42px;font-size:13px;gap:22px}
.hero .button>span,.header .button>span{display:inline;width:auto;height:auto;border-radius:0;background:none;font:inherit;transform:none}
.hero .hero-store-badges{justify-content:center;height:66px;margin:22px auto 0;gap:8px}
.hero .hero-store-badges .apple-badge{height:44px;width:auto}
.hero .hero-store-badges .google-badge{height:66px;width:auto}
.hero .availability{display:block;font-size:12px;margin:4px 0 0;color:#d3eaff;letter-spacing:0}
.hero-cast .block{width:260px}.hero-red{left:calc(50% - 640px);top:30px}.hero-yellow{right:calc(50% - 620px);top:26px}.hero-blue{left:calc(50% - 500px);bottom:5px}.hero-green{right:calc(50% - 500px);bottom:6px}
/* Four colorful teaching cards flank the real gameplay preview. */
.how-section{background:#eaf4fb}
.how-section .section{width:min(1280px,calc(100% - 64px))}
.how-section .personality-heading{margin-bottom:40px}
.how-section h2,.how-section h3,.how-section .eyebrow{letter-spacing:0}
.how-grid{grid-template-columns:minmax(0,1fr) 250px minmax(0,1fr);gap:24px;align-items:stretch}
.how-card{padding:30px;border:1px solid #14344918;border-radius:8px;box-shadow:0 6px 0 #14344913;overflow:hidden}
.how-slide{background:#6ed4ff!important;grid-column:1;grid-row:1}
.how-match{background:#ffabc9!important;grid-column:3;grid-row:1}
.how-time{background:#ffe16b!important;grid-column:1;grid-row:2}
.how-plan{background:#a5ed8f!important;grid-column:3;grid-row:2}
.how-card h3{font-size:30px;line-height:1.12;letter-spacing:0;text-wrap:pretty;margin:0 0 16px;color:#12344a}
.how-card .eyebrow{font-size:11px;font-weight:850;letter-spacing:0;color:#174660;margin:26px 0 12px}
.how-card>p:last-child{color:#24465a;font-size:16px;line-height:1.65;margin-bottom:0}
.how-visual{height:130px;justify-content:center}
.slide-demo{grid-template-columns:90px 30px 90px;gap:12px;justify-content:start}
.slide-space{background:#ffffff55;border-color:#2679a3}
.match-demo{gap:4px;justify-content:flex-start}.match-demo .block{width:30%;max-width:98px}
.clock-demo{align-items:flex-start;justify-content:center}.clock-demo strong{font-size:64px;line-height:1}
.clock-demo>span:last-child{font-size:13px}.demo-time-track{max-width:280px;width:100%;height:9px;background:#c8a13b}
.plan-demo{justify-content:flex-start;gap:24px}.plan-demo .block{width:110px}.plan-demo>span{font-size:12px;color:#175432}
.real-gameplay{grid-column:2;grid-row:1/3;width:250px;max-width:100%;transform:none;justify-self:center;margin:0;align-self:center}
.real-gameplay figcaption{font-size:12px;color:#24465a}
@media(max-width:1100px){.how-grid{grid-template-columns:1fr 1fr}.how-slide{grid-column:1;grid-row:1}.how-match{grid-column:2;grid-row:1}.how-time{grid-column:1;grid-row:2}.how-plan{grid-column:2;grid-row:2}.real-gameplay{grid-column:1/-1;grid-row:3;margin-top:20px}.hero-cast .block{width:210px}.hero-red{left:-70px}.hero-yellow{right:-70px}.hero-blue{left:20px}.hero-green{right:20px}}
@media(max-width:650px){.header{height:72px;padding:0 18px;gap:12px}.header nav{display:none}.header .button.small{font-size:12px;padding:10px 12px;gap:15px}.hero{height:680px;min-height:540px;max-height:none}.hero .hero-copy{padding-top:20px}.hero h1{height:190px;width:340px}.hero .eyebrow{font-size:10px;margin-bottom:3px}.hero .tagline{font-size:26px}.hero .hero-description{font-size:15px;margin-bottom:23px}.hero .button{font-size:14px;min-height:53px;gap:20px}.hero .hero-store-badges{gap:0;margin-top:18px;height:60px}.hero .hero-store-badges .apple-badge{height:40px}.hero .hero-store-badges .google-badge{height:60px}.hero-cast .block{width:23%;max-width:110px;top:auto;bottom:18px}.hero-red{left:3%;rotate:-12deg}.hero-yellow{right:auto;left:26%;bottom:30px;rotate:8deg}.hero-blue{left:49%;rotate:-7deg}.hero-green{right:3%;bottom:30px;rotate:10deg}.hero-edition{display:none}.how-section .section{width:calc(100% - 32px)}.how-grid{grid-template-columns:minmax(0,1fr);gap:20px}.how-card{grid-column:1;grid-row:auto;padding:26px}.how-card h3{font-size:29px}.how-card>p:last-child{font-size:16px}.how-card .eyebrow{margin-top:20px}.real-gameplay{grid-column:1;grid-row:5;width:min(280px,100%)}.how-visual{height:120px}}
@media(max-width:360px){.hero h1{width:290px}.hero .tagline{font-size:23px}.how-card{padding:22px}.how-card h3{font-size:27px}.slide-demo{grid-template-columns:78px 26px 78px}}