@import url("fonts.css");
@import url("global-shell.css");

/* HeroHop uses the existing Mac Winsoft shell; page styles stay scoped. */
.hh-page { margin:0; color:#142d46; background:#fff; font:17px/1.65 "SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
html[lang="ar"] .hh-page { font-family:"SF Arabic","SF Pro AR","Geeza Pro",Tahoma,Arial,sans-serif; line-height:1.9; }
.hh-page *, .hh-home-card * { box-sizing:border-box; }
.hh-page img { max-width:100%; }
.hh-page h1,.hh-page h2,.hh-page h3,.hh-page p,.hh-page figure { margin:0; }
.hh-page a { color:#1257a5; text-underline-offset:.22em; }
.hh-page a:focus-visible,.hh-page summary:focus-visible { outline:3px solid #1875cc; outline-offset:5px; border-radius:6px; }
.hh-page .skip-link { position:fixed; inset:10px auto auto 10px; z-index:100; padding:10px 16px; color:white; background:#142d46; transform:translateY(-160%); }
.hh-page .skip-link:focus { transform:none; }
.hh-wrap { width:min(1120px,calc(100% - 48px)); margin-inline:auto; }
.hh-productbar { background:#fff; border-bottom:1px solid #e0e8ef; }
.hh-bar { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:78px; }
.hh-brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:#142d46!important; font-size:22px; font-weight:700; }
.hh-brand img { border-radius:11px; width:40px; height:40px; }
.hh-bar nav { display:flex; flex-wrap:wrap; align-items:center; gap:26px; font-size:14px; }
.hh-bar nav a { text-decoration:none; }
.hh-bar nav a:hover { text-decoration:underline; }
.hh-language { font-weight:650; }
.hh-hero { padding:76px 0 62px; background:radial-gradient(ellipse at 88% 25%,#d8edff,transparent 54%),linear-gradient(180deg,#f4f9ff,#fff); overflow:hidden; }
.hh-hero-grid { display:grid; grid-template-columns:1.12fr 1fr; align-items:center; gap:60px; }
.hh-eyebrow { color:#2666a2; font-size:14px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; margin-bottom:18px!important; }
html[lang="ar"] .hh-eyebrow { letter-spacing:0; }
.hh-hero h1 { font-size:clamp(44px,5.6vw,76px); font-weight:750; letter-spacing:-.055em; line-height:1.07; margin-bottom:26px; }
html[lang="ar"] .hh-hero h1 { letter-spacing:0; font-size:clamp(42px,4.9vw,68px); line-height:1.4; }
.hh-lead { color:#466078; font-size:20px; line-height:1.7; }
.hh-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:28px; }
.hh-actions .app-store-badge { margin:0; }
.hh-text-link { display:inline-flex; gap:10px; align-items:center; text-decoration:none; font-weight:650; }
.hh-text-link:hover { text-decoration:underline; }
.hh-fine { color:#536980; font-size:13px; line-height:1.7; margin-top:18px!important; }

/* One authored character frame and the approved game scenery; no fake screenshot. */
.hh-stage { position:relative; width:100%; max-width:460px; height:540px; margin-inline:auto!important; border:8px solid #fff; border-radius:40px; background:linear-gradient(160deg,#63bceb,#bfeeff 55%,#e2f6ff); box-shadow:0 24px 65px #2f68942b,0 0 0 1px #d1e5f5; isolation:isolate; overflow:hidden; direction:ltr; }
.hh-stage img { position:absolute; display:block; object-fit:contain; height:auto!important; max-height:none!important; }
.hh-scene-label { position:absolute; left:22px; top:21px; padding:5px 12px; border:1px solid #ffffffb3; border-radius:99px; color:#164267; background:#ffffffc9; font-size:12px; font-weight:650; z-index:4; }
.hh-castle { width:76%!important; left:1%; bottom:6%; opacity:.82; z-index:1; }
.hh-character { width:61%!important; left:34%; top:4%; z-index:3; }
.hh-platform-high { width:54%!important; left:40%; top:61%; z-index:2; }
.hh-platform-low { width:66%!important; left:3%; bottom:4%; z-index:2; }
.hh-cloud { position:absolute; width:130px; height:35px; border-radius:50%; background:#ffffffb5; z-index:0; }
.hh-cloud::before,.hh-cloud::after { content:""; position:absolute; width:60px; height:50px; border-radius:50%; background:inherit; bottom:6px; left:22px; }
.hh-cloud::after { width:47px; height:39px; left:68px; }
.hh-cloud-one { top:24%; left:-24px; }
.hh-cloud-two { bottom:34%; right:-24px; transform:scale(.8); }
.hh-facts { border-block:1px solid #e4ebf1; }
.hh-fact-grid { display:grid; grid-template-columns:repeat(3,1fr); padding-block:26px; text-align:center; gap:20px; }
.hh-fact-grid p { display:flex; flex-direction:column; }
.hh-fact-grid strong { font-size:28px; letter-spacing:-.03em; }
.hh-fact-grid span { color:#61768a; font-size:14px; }
.hh-section { padding:100px 0; }
.hh-section-heading { max-width:650px; margin-bottom:44px; }
.hh-page h2 { font-size:clamp(34px,4.2vw,52px); font-weight:720; line-height:1.15; letter-spacing:-.035em; margin-bottom:22px; }
html[lang="ar"] .hh-page h2 { letter-spacing:0; line-height:1.45; }
.hh-section-heading>p:last-child { font-size:19px; color:#536a80; }
.hh-world-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.hh-world-card { border-radius:24px; background:#f2f7fc; overflow:hidden; border:1px solid #e3ecf5; }
.hh-world-art { height:255px; display:flex; flex-direction:column; align-items:center; justify-content:end; padding:18px 20px 7px; background:radial-gradient(ellipse,#e5f2fc,transparent 75%); }
.hh-world-scenery { width:auto; height:175px; max-height:175px; object-fit:contain; max-width:86%!important; }
.hh-world-platform { width:94%; height:54px; object-fit:contain; }
.hh-world-caption { padding:12px 24px 24px; }
.hh-world-caption span { font-size:12px; color:#587086; }
.hh-world-caption h3 { font-size:21px; line-height:1.45; margin-top:5px; }
.hh-play { background:#eef6fd; }
.hh-play-grid { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; }
.hh-play .hh-section-heading { margin:0; }
.hh-steps { list-style:none; counter-reset:steps; margin:0; padding:0; display:grid; gap:30px; }
.hh-steps li { counter-increment:steps; padding-inline-start:60px; position:relative; }
.hh-steps li::before { content:counter(steps,decimal-leading-zero); position:absolute; inset-inline-start:0; top:3px; color:#3983bc; font-size:22px; font-weight:700; }
.hh-steps h3 { font-size:22px; margin-bottom:6px; }
.hh-steps p { color:#536a80; }
.hh-direction-art { display:flex; direction:ltr; justify-content:space-between; width:190px; margin-top:25px; }
.hh-direction-art span { border:1px solid #a6c8e3; border-radius:18px; width:72px; height:60px; background:white; display:grid; place-items:center; color:#2e6c9d; font-size:30px; }
.hh-purchase { display:grid; grid-template-columns:1fr 1fr; gap:72px; border:1px solid #e0e8ed; border-radius:30px; padding:58px; align-items:center; }
.hh-purchase p { max-width:450px; color:#536a80; }
.hh-purchase .app-store-badge { margin-top:26px; }
.hh-unlock { padding:32px; background:#fff9ec; border-radius:22px; }
.hh-unlock-label { color:#946521!important; font-size:13px; font-weight:700; margin-bottom:12px!important; }
.hh-unlock h3 { font-size:32px; line-height:1.3; margin-bottom:18px; }
.hh-unlock ul { padding-inline-start:20px; margin-block:20px; }
.hh-unlock li { padding-bottom:8px; }
.hh-unlock p:last-child { font-size:14px; }
.hh-family { background:#f3f8fc; }
.hh-family-inner { max-width:760px; text-align:center; }
.hh-family-inner>p:not(.hh-eyebrow) { color:#536a80; font-size:19px; }
.hh-family .hh-actions { justify-content:center; }
.hh-button { display:inline-flex; align-items:center; justify-content:center; padding:12px 22px; background:#155ba4; border-radius:99px; color:white!important; text-decoration:none; min-height:48px; font-weight:650; }
.hh-button:hover { background:#104c8c; }

.hh-support-hero { padding-block:70px 40px; }
.hh-support-hero h1 { font-size:clamp(40px,5vw,64px); line-height:1.2; letter-spacing:-.04em; margin-bottom:24px; }
html[lang="ar"] .hh-support-hero h1 { letter-spacing:0; line-height:1.5; }
.hh-support-hero .hh-lead { max-width:780px; }
.hh-topic-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.hh-topic-links a { border:1px solid #d5e2ed; border-radius:99px; padding:8px 16px; text-decoration:none; font-size:14px; background:#f5f9fc; }
.hh-support-main { max-width:900px; padding-bottom:90px; }
.hh-faq-group { margin-top:48px; scroll-margin-top:24px; }
.hh-faq-group h2 { font-size:29px; margin-bottom:20px; }
.hh-faq { border-bottom:1px solid #dfe7ed; }
.hh-faq summary { padding:22px 28px 22px 0; font-weight:650; font-size:18px; cursor:pointer; }
html[dir="rtl"] .hh-faq summary { padding:22px 0 22px 28px; }
.hh-faq>div { color:#506579; padding:0 26px 24px 0; }
html[dir="rtl"] .hh-faq>div { padding:0 0 24px 26px; }
.hh-contact-panel { border-radius:26px; background:#eff6fd; padding:40px; margin-top:60px; }
.hh-contact-panel h2 { font-size:32px; }
.hh-contact-panel>p { color:#506579; margin-bottom:24px; }

/* Home art is a wide illustration inside the existing product-card layout. */
.home-product-page .hh-home-card .home-product__media { background:#c5eaff; aspect-ratio:16/7; position:relative; }
.home-product-page .hh-home-stage { border:0; border-radius:0; max-width:none; height:100%; width:100%; margin:0!important; box-shadow:none; }
.hh-home-stage .hh-character { width:34%!important; top:-9%; left:49%; }
.hh-home-stage .hh-castle { width:40%!important; left:12%; bottom:0; }
.hh-home-stage .hh-platform-high { width:31%!important; left:54%; top:70%; }
.hh-home-stage .hh-platform-low { width:35%!important; left:9%; bottom:2%; }
.hh-home-stage .hh-scene-label { display:none; }

@media(max-width:950px) {
 .hh-hero-grid { gap:28px; }.hh-stage { height:470px; }
 .hh-purchase { padding:34px; gap:32px; }.hh-play-grid { gap:40px; }
 .hh-world-grid { gap:16px; }.hh-world-art { height:225px; }.hh-world-scenery { height:150px; }
}
@media(max-width:700px) {
 .hh-wrap { width:calc(100% - 36px); }.hh-bar { min-height:76px; gap:12px; }.hh-brand { font-size:18px; gap:8px; }.hh-bar nav { gap:15px; font-size:13px; }
 .hh-hero { padding:42px 0; }.hh-hero-grid { grid-template-columns:1fr; gap:34px; }.hh-hero-copy { max-width:560px; }.hh-hero h1 { font-size:52px; }.hh-lead { font-size:18px; }
 .hh-stage { width:min(390px,100%); height:460px; border-width:7px; border-radius:32px; }.hh-actions { gap:20px; }
 .hh-fact-grid { gap:12px; padding-block:20px; }.hh-fact-grid strong { font-size:23px; }.hh-fact-grid span { font-size:12px; }
 .hh-section { padding:60px 0; }.hh-page h2 { font-size:36px; }.hh-section-heading { margin-bottom:30px; }
 .hh-world-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.hh-world-art { height:205px; padding-inline:8px; }.hh-world-scenery { height:135px; }.hh-world-platform { height:46px; }.hh-world-caption { padding:10px 14px 18px; }.hh-world-caption h3 { font-size:17px; }
 .hh-play-grid,.hh-purchase { grid-template-columns:1fr; gap:34px; }.hh-purchase { padding:28px 23px; }.hh-unlock { padding:25px; }.hh-family-inner { text-align:start; }.hh-family .hh-actions { justify-content:flex-start; }
 .hh-support-hero { padding-block:42px 20px; }.hh-support-hero h1 { font-size:42px; }.hh-faq-group { margin-top:38px; }.hh-faq-group h2 { font-size:26px; }.hh-contact-panel { padding:26px; }
 .home-product-page .hh-home-card .home-product__media { aspect-ratio:16/10; }.home-product-page .hh-home-stage { height:100%; width:100%; border:0; border-radius:0; }
 .hh-home-stage .hh-character { width:46%!important; top:0; left:44%; }.hh-home-stage .hh-castle { width:54%!important; left:1%; bottom:4%; }.hh-home-stage .hh-platform-high { width:42%!important; left:49%; top:73%; }.hh-home-stage .hh-platform-low { width:42%!important; left:3%; bottom:3%; }
}
@media(max-width:390px) {
 .hh-brand img { width:32px; height:32px; }.hh-bar nav { gap:10px; }.hh-hero h1 { font-size:44px; }.hh-world-grid { grid-template-columns:1fr; }.hh-world-art { height:250px; }.hh-world-scenery { height:175px; }.hh-stage { height:410px; }
}
@media(prefers-reduced-motion:reduce) { .hh-page { scroll-behavior:auto; } }