/* Independent artwork, live copy and curve: shared by still and future video. */
.hero.portal-hero{position:relative;display:block;isolation:isolate;min-height:0;padding:0;background:#fff;color:var(--navy);overflow:hidden;border-radius:0}
.portal-hero::before,.portal-hero::after{display:none}
.portal-hero>.wrap{position:relative;z-index:2;display:flex;align-items:center;min-height:600px;padding:48px 0 88px;pointer-events:none;max-width:none}
.portal-hero .hero-copy{display:block;width:40%;min-width:0;padding:0;pointer-events:auto}
.portal-hero h1{font-size:clamp(2.1rem,3.4vw,3.15rem);font-weight:700;line-height:1.12;letter-spacing:-.045em;margin:0 0 22px;max-width:none;text-wrap:balance;color:#0c1734}
.portal-hero h1 span{display:block}
.portal-hero .hero-copy>p:not(.hero-reassurance){font-size:1.125rem;line-height:1.55;color:#566789;max-width:450px;margin:0 0 26px}
.portal-hero .cta-row{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.button[data-signup]{background:#cc4600;color:#fff;border:0;border-radius:12px;box-shadow:none;min-height:52px;padding:15px 22px;font-size:1rem;font-weight:600;line-height:1.35;text-align:center}
.button[data-signup]:hover{background:#b83c00;color:#fff;box-shadow:0 5px 16px #ef570024}
.button[data-signup]:active{background:#a93700;color:#fff;box-shadow:none;transform:translateY(1px)}
.button[data-signup] .trial-label{min-width:0}
.button[data-signup] svg{width:20px;height:20px;flex:none}
html[dir=rtl] .button[data-signup] svg{transform:scaleX(-1)}
.portal-hero .price-note{max-width:450px;font-size:.8125rem;line-height:1.5;color:#626c80;text-align:start}
.portal-hero .hero-reassurance{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 7px;max-width:none;margin:22px 0 0;font-size:.875rem;font-weight:400;line-height:1.5;color:#596b85}
.portal-hero .hero-reassurance span{display:inline;width:auto}
.portal-hero .hero-reassurance .reassurance-dot{flex:none}
.portal-hero .portal-art{position:absolute;z-index:0;inset:0 0 0 auto;align-self:stretch;height:100%;width:58%;margin:0;background:#fff;direction:ltr;overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 4%)}
.portal-scene{position:absolute;left:0;top:0;height:100%;width:auto;aspect-ratio:1586/992}
.portal-art picture{display:block;width:100%;height:100%}
.portal-label{position:absolute;transform:translate(-50%,-50%);font-size:clamp(.75rem,1.1vw,1.0625rem);line-height:1.1;text-align:center;font-weight:700;color:#3a260f;white-space:nowrap;overflow-wrap:normal;max-width:15%;direction:ltr}
.portal-label-number{left:55.5%;top:81.4%;transform:translate(-50%,-50%) rotate(5deg)}
.portal-label-measure{left:62.4%;top:53.1%;transform:translate(-50%,-50%) rotate(-5deg)}
.portal-label-fraction{left:64.6%;top:24.2%}
.portal-art img,.portal-art .portal-video{display:block;width:100%;height:100%;max-height:none;object-fit:cover;object-position:45% center;filter:brightness(1.012)}
.portal-art .portal-video{position:absolute;inset:0;opacity:0;transition:opacity .25s}
.portal-art[data-playing] .portal-video{opacity:1}
.portal-art .portal-motion{position:absolute;z-index:3;right:22px;bottom:76px;min-height:44px;padding:8px 14px;border:1px solid #bbcddd;border-radius:30px;background:#fffffff2;color:#233955;font-size:.875rem;cursor:pointer}
.portal-hero .hero-curve{position:absolute;z-index:1;bottom:-1px;left:0;width:100%;height:72px;pointer-events:none}
.hero-learning{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0 auto;padding:14px 0 24px}
.hero-learning article{display:flex;align-items:flex-start;gap:17px;min-width:0;padding:0 22px 0 0}
.hero-learning article+article{border-inline-start:1px solid #e0e8ef;padding-inline-start:24px}
.hero-learning article>div{min-width:0;overflow-wrap:anywhere;hyphens:auto}
.hero-learning svg{color:#1297ec;width:46px;height:46px;flex:none}
.hero-learning h2{font-size:1.0625rem;line-height:1.3;font-weight:700;letter-spacing:-.015em;margin:0 0 8px}
.hero-learning p{font-size:.9375rem;line-height:1.5;color:#5b6d8c;margin:0}
.hero-learning+#why{padding-top:64px}
html[data-market=hu] .portal-hero h1{font-size:clamp(2rem,3.05vw,2.8rem)}
/* Preserve physical artwork direction while Hebrew reads naturally RTL. */
html[dir=rtl] .portal-hero>.wrap{direction:ltr}
html[dir=rtl] .portal-hero .hero-copy{direction:rtl;text-align:right}
.device-availability{margin-top:18px;max-width:450px;text-align:start}
.device-availability .device-heading{margin:0;font-size:.875rem;line-height:1.5;font-weight:400;color:#596b85}
.app-download{display:none;padding:42px 0;background:#f1f8fe;text-align:center}
.app-download[data-platform]:not([data-platform=desktop]){display:block}
.app-download[hidden],.app-store-link[hidden]{display:none!important}
.app-download-inner{max-width:560px}
.app-download h2{font-size:clamp(1.5rem,5vw,2rem);line-height:1.18;letter-spacing:-.025em}
.app-download p{font-size:1rem;line-height:1.55;margin:14px auto 18px;max-width:420px;color:#526583}
.app-store-links{display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap;padding:10px;direction:ltr}
.app-store-link{display:flex;align-items:center;min-height:44px;border-radius:6px}
.app-store-link img{display:block;height:44px;width:auto;max-width:100%}
@media(min-width:1800px){.portal-hero>.wrap{min-height:640px}.portal-hero .portal-art{width:min(calc(50% + 130px),1023px)}.portal-art img,.portal-art .portal-video{object-position:left center}}
@media(min-width:1101px) and (max-width:1200px){
 .portal-hero>.wrap{min-height:560px;padding-top:36px;padding-bottom:78px}
 .portal-hero .hero-copy{width:40%}
 .portal-hero h1{font-size:clamp(2rem,3.4vw,2.6rem)}
 .portal-hero .hero-copy>p:not(.hero-reassurance){font-size:1rem}
 .portal-hero .portal-art{width:55%}
 .portal-art img,.portal-art .portal-video{object-position:42% center}
 .hero-learning{gap:16px}.hero-learning article{gap:12px;padding-right:0}.hero-learning article+article{padding-inline-start:16px}.hero-learning svg{width:34px;height:34px}
}
@media(max-width:1100px){
 .portal-hero>.wrap{display:block;min-height:0;padding:32px 0 20px}
 .portal-hero .hero-copy{width:100%;max-width:580px;margin:auto}
 .portal-hero h1{font-size:clamp(1.8rem,6.7vw,2.7rem);line-height:1.12;margin-bottom:16px;letter-spacing:-.035em}
 .portal-hero .hero-copy>p:not(.hero-reassurance){font-size:1rem;max-width:32rem;margin-bottom:20px}
 .portal-hero .cta-row{gap:12px}
 .portal-hero .button{width:auto;max-width:100%;text-align:center}
 .portal-hero .price-note{font-size:.8125rem;text-align:start;max-width:32rem}
 .portal-hero .hero-reassurance{margin-top:18px;gap:0 6px}
 .portal-hero .portal-art{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1586/992;max-height:none;margin:0}
 .portal-scene{inset:0;width:100%;height:100%;aspect-ratio:auto}
 .portal-art img,.portal-art .portal-video{object-fit:cover;object-position:center}
 .portal-hero .hero-curve{height:40px}
 .portal-art .portal-motion{bottom:44px;right:14px}
 .hero-learning{grid-template-columns:1fr;gap:0;padding:12px 0 6px}
 .hero-learning article,.hero-learning article+article{padding:18px 4px;border-inline-start:0;gap:16px}
 .hero-learning article+article{border-top:1px solid #e0e8ef}
 .hero-learning svg{width:38px;height:38px}
 .hero-learning h2{font-size:1.0625rem}.hero-learning p{font-size:.9375rem}
 .hero-learning+#why{padding-top:50px}
 .mobile-cta[data-hero-visible]{display:none}
 html[data-market=hu] .portal-hero h1{font-size:clamp(1.75rem,6.3vw,2.5rem)}
}
@media(min-width:761px) and (max-width:1100px){
 .portal-hero>.wrap{padding-bottom:28px}.portal-hero .hero-copy{max-width:720px}
 .hero-learning{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding-top:16px}
 .hero-learning article,.hero-learning article+article{display:block;border:0;padding:8px}
 .hero-learning svg{margin-bottom:12px}
 .portal-label{font-size:1.1rem}
}
@media(max-width:760px){
 .portal-hero .portal-art{aspect-ratio:4/3}
 .portal-label{font-size:2vw;max-width:none}
 .portal-label-number{left:63.6%;top:80.8%;font-size:2.5vw}
 .portal-label-measure{left:74.8%;top:49.5%;transform:translate(-50%,-50%) rotate(-3deg)}
 .portal-label-fraction{left:71.0%;top:22.8%;font-size:2.2vw}
}
/* Enlarged text gets natural height; artwork moves below the copy. */
html[data-enlarged-text] .portal-hero>.wrap{display:block;min-height:0;padding-block:32px}
html[data-enlarged-text] .portal-hero .hero-copy{width:100%}
html[data-enlarged-text] .portal-hero .portal-art{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:8/5}
@media(max-width:760px){html[data-enlarged-text] .portal-hero .portal-art{aspect-ratio:4/3}}
html[data-enlarged-text] .hero-learning{grid-template-columns:1fr}
html[data-enlarged-text] .hero-learning article+article{border-inline-start:0;border-top:1px solid #e0e8ef;padding:24px 0}
@media(prefers-reduced-motion:reduce){.portal-art .portal-video{transition:none}.button[data-signup]{transition:none}}

@media(max-width:380px){html[data-market=hu] .portal-hero .hero-reassurance{font-size:.8125rem;gap:0 2px}}

/* Mobile follows the approved order: headline, artwork, trial, devices. */
@media(max-width:760px){
 .hero.portal-hero{display:flex;flex-direction:column;padding:24px 0 18px}
 .portal-hero>.wrap,.portal-hero .hero-copy,html[data-enlarged-text] .portal-hero>.wrap{display:contents}
 .portal-hero h1,.portal-hero .hero-copy>p,.portal-hero .cta-row,.portal-hero .device-availability{width:calc(100% - 40px);max-width:580px;margin-inline:auto}
 .portal-hero h1{order:1;margin-bottom:12px}
 .portal-hero .hero-copy>p:not(.hero-reassurance){order:2;margin-inline:auto;margin-bottom:16px;max-width:580px}
 .portal-hero .portal-art,html[data-enlarged-text] .portal-hero .portal-art{order:3;position:relative;inset:auto;width:100%;height:auto;aspect-ratio:4/3;margin:0 0 22px;mask-image:none}
 .portal-hero .cta-row{order:4;align-items:center;gap:10px}
 .portal-hero .cta-row .button{width:100%}
 .portal-hero .price-note{text-align:center}
 .portal-hero .device-availability{order:5;margin-top:18px;max-width:400px;text-align:center}
 .portal-hero .hero-reassurance{order:6;justify-content:center;text-align:center;margin-top:18px;margin-bottom:0}
 .portal-hero .hero-curve{display:none}
 .portal-art .portal-motion{bottom:12px}
 .app-download{display:block}
 html[dir=rtl] .portal-hero h1,html[dir=rtl] .portal-hero .hero-copy>p:not(.hero-reassurance){text-align:right}
}

/* The English film keeps its complete 16:9 frame, including gameplay labels. */
.portal-hero[data-hero-video] .portal-art--film{top:50%;right:24px;bottom:auto;width:min(calc(58% - 24px),calc(50% + 68px));height:auto;max-width:960px;transform:translateY(-50%);mask-image:none;overflow:visible;z-index:2;background:transparent}
.portal-art--film .portal-scene{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#fff}
.portal-art--film img,.portal-art--film .portal-video{object-fit:contain;object-position:center;filter:none}
.portal-art--film .portal-motion{right:12px;bottom:12px;box-shadow:0 2px 10px #0c173426}
@media(max-width:1100px){
 .portal-hero[data-hero-video] .portal-art--film{position:relative;inset:auto;width:calc(100% - 40px);height:auto;aspect-ratio:auto;max-width:900px;margin:0 auto 24px;transform:none}
}
@media(max-width:760px){
 .portal-art--film .portal-scene{border-radius:12px}
}
html[data-enlarged-text] .portal-hero[data-hero-video] .portal-art--film{position:relative;inset:auto;width:calc(100% - 40px);height:auto;aspect-ratio:auto;max-width:900px;margin:0 auto 24px;transform:none}

/* Trial controls share the hero treatment; navigation keeps its blue CTA. */
.carousel-button{display:inline-flex;align-items:center;justify-content:center}
.carousel-button svg{display:block;width:20px;height:20px;flex:none}
html[dir=rtl] .carousel-button svg{transform:rotate(180deg)}
@media(max-width:760px){.carousel-controls{display:none}}
@media(max-width:620px){
 .mobile-cta .button[data-signup]{flex:1 1 16rem;width:auto;max-width:100%;white-space:normal}
 footer{padding-bottom:calc(160px + env(safe-area-inset-bottom))}
 html[data-enlarged-text] .mobile-cta{position:static}
 html[data-enlarged-text] .mobile-cta .button[data-signup]{flex:0 1 auto}
 html[data-enlarged-text] footer{padding-bottom:24px}
}

.portal-hero .hero-copy>p.hero-inclusion {
  margin: -10px 0 22px;
  color: #245671;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.5;
}
.hero-inclusion span {
  display: inline-block;
  padding: 7px 10px;
  border-radius: 8px;
  background: #eaf5fc;
}
@media(max-width:760px){
  .portal-hero .hero-copy>p.hero-inclusion { margin: -4px auto 16px; order: 2; }
}