/* Public storefront, September 2026. Same system for both games.
   Content, URLs, pricing and auth remain in the original templates. */
:root {
  --ink:#0b0d12; --deck:#12161e; --slab:#1a202b; --line:#2a303c;
  --white:#f4f5f7; --muted:#a5aebc; --red:#f13a46; --red-hi:#ff5560;
  --display:"Montserrat","Segoe UI",sans-serif;
  --body:"Montserrat","Segoe UI",sans-serif;
  --label:"Oswald","Arial Narrow","Segoe UI",sans-serif;
  --gutter:clamp(20px,3.5vw,56px);
}
html { scroll-padding-top:112px }
body { background:var(--ink); color:var(--white); font:400 16px/1.75 var(--body); overflow-x:clip }
body:before,body:after { display:none }
.wrap { width:100%; max-width:1392px; padding-left:var(--gutter); padding-right:var(--gutter); margin-inline:auto }
section { padding:112px 0; border-top-color:#ffffff12; scroll-margin-top:32px }
h1,h2,h3 { font-family:var(--display); letter-spacing:-.045em }
h2,h3 { font-style:normal; text-transform:none }
h2 { max-width:1000px; font-size:clamp(32px,3.5vw,48px); font-weight:800; line-height:1.16; margin:0 0 24px }
h3 { font-size:24px; font-weight:700; line-height:1.3; margin:0 0 16px }
p { margin:0 0 20px }
.lead { font-size:18px; line-height:1.8; color:#b8c0ce; max-width:760px; margin:0 }
.eyebrow,.companion-kicker { font:500 12px/1.7 var(--mono); letter-spacing:.13em; color:#fa8188; margin-bottom:20px }
.red { color:var(--red) }
.note { color:var(--muted); font-size:14px; line-height:1.75 }
a { text-underline-offset:5px }
:focus-visible { outline:2px solid #ff8d96; outline-offset:5px }
/* Quiet navigation. The game switch occupies the same place on both homes. */
header { z-index:50; background:#0b0d12ed; border-bottom:1px solid #ffffff12; backdrop-filter:blur(18px) }
.hrow,.bar { min-height:88px; height:auto; gap:24px; display:flex; align-items:center; flex-wrap:wrap; padding-top:16px; padding-bottom:16px }
.logo { font:900 italic 22px/1 var(--display); letter-spacing:-.05em; text-decoration:none; white-space:nowrap }
.game-picker { flex-shrink:0; display:inline-grid; margin:0; gap:4px; padding:5px; border:1px solid #333a47; border-radius:9px; background:#151a23 }
.game-picker a { padding:11px 14px; border-radius:5px; font:600 12px/1.3 var(--body); letter-spacing:0; text-transform:none; text-align:center }
.game-picker a[aria-current="page"] { background:#343b49; box-shadow:none; color:#fff }
.game-picker a[aria-current="page"]:before { content:""; display:inline-block; width:5px; height:5px; margin-right:7px; border-radius:50%; background:var(--red); vertical-align:middle }
nav:not(.game-picker) { display:flex; gap:22px; align-items:center; margin-left:auto; font:500 13px/1.4 var(--body); letter-spacing:0; text-transform:none }
nav a { white-space:nowrap }
.hrow nav a.only-in { display:none!important }
.who:empty { display:none!important }
.hrow>.btn,.bar>.btn { flex-shrink:0 }
.btn { min-height:54px; padding:16px 24px; font:700 14px/1.45 var(--body); font-style:normal; text-transform:none; letter-spacing:0; clip-path:none; border-radius:7px; background:#e62936; box-shadow:none; transform:none!important; transition:background .18s,box-shadow .18s }
.btn:hover { background:#fa3c48; filter:none; box-shadow:0 8px 24px #e629361a; transform:none }
.btn:after { display:none }
.btn.ghost { background:#ffffff05; border:1px solid #ffffff38; color:#edf0f5; font:600 14px/1.45 var(--body); letter-spacing:0; font-style:normal }
.btn.ghost:hover { background:#ffffff0c; border-color:#a3acbd; box-shadow:none }
.btn.sm { min-height:44px; padding:11px 18px; font-size:13px; background:#ffffff08; border:1px solid #ffffff25 }
.btn.sm:hover { background:#ffffff12 }
/* Hero: one focal image, readable copy, two priority actions and a quiet download. */
.hero[data-hero] { min-height:730px; padding:94px 0 80px; align-items:center; background:#0b0e14 }
.hero[data-hero]>.wrap { max-width:1392px; padding-inline:var(--gutter) }
.hero-art { inset:28px max(0px,calc((100% - 1840px)/2)) 0; transform:none!important; will-change:auto }
/* Fit the whole composition on wide monitors; cover used to cut off faces
   once the viewport became wider than the source artwork's aspect ratio. */
.hero-art img { display:block; width:auto; max-width:100%; height:100%; margin-left:auto; object-fit:contain; object-position:right top;
  mask-image:linear-gradient(90deg,transparent,#000 24%,#000 92%,transparent),linear-gradient(0deg,transparent,#000 15%,#000 98%,transparent);
  mask-composite:intersect }
.hero[data-hero]:before { background:linear-gradient(90deg,#080c13f5 0%,#080c13eb 24%,#080c1399 45%,#080c1308 68%),linear-gradient(0deg,#0b0d12,transparent 20%) }
.hero-copy { width:53%; max-width:680px; text-shadow:none }
.hero-copy:before { display:none }
.hero h1 { font-size:clamp(46px,4.6vw,68px); font-weight:900; line-height:1.04; letter-spacing:-.055em; margin:0 0 30px }
.hero[data-hero] h1 .red { display:block }
.hero .eyebrow { font-size:11px; line-height:1.8; letter-spacing:.1em; margin-bottom:28px }
.hero .lead { font:400 18px/1.8 var(--body); color:#cbd1dc; max-width:570px; margin:0 }
.hero-cta { margin-top:34px }
.top-actions { display:grid; grid-template-columns:max-content max-content; align-items:stretch; justify-content:start; gap:12px }
.top-actions .btn { min-height:54px; padding:16px 22px; font-size:14px; text-align:center }
.top-actions .demo-cta { background:#ffe0e3; border:1px solid #ffe0e3; color:#17191f }
.top-actions .demo-cta:hover { background:#fff1f2; border-color:#fff1f2; color:#0b0d12; box-shadow:0 8px 24px #ffe0e326 }
.top-actions .buy-cta { background:#e62936; color:#fff }
.top-actions .buy-cta:hover { background:#fa3c48 }
.top-actions .launcher-cta { grid-column:1/-1; justify-self:start; background:#eef2f8; border:1px solid #eef2f8; color:#11151d; box-shadow:0 8px 28px #0005 }
.top-actions .launcher-cta:hover { background:#fff; border-color:#fff; color:#0b0d12; box-shadow:0 10px 28px #ffffff33 }
.hero .seo-card-link { margin:16px 0 0; color:#aeb8ca; font-size:13px }
.hero-app-note { color:#b8c1d0; max-width:510px; margin:24px 0 0; font-size:14px; line-height:1.7 }
.hero-foundation { padding-top:28px; padding-bottom:28px; border-bottom:1px solid #ffffff14 }
.hero-foundation .trust { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px 28px; margin:0 }
.hero-foundation .pill { padding:0; border:0; background:none; font:500 13px/1.6 var(--body); letter-spacing:0; text-transform:none; color:#b6bfce }
.hero-foundation .pill:before { content:"✓"; color:#fa7079; margin-right:9px }
.hero-explanation { max-width:900px; font-size:16px; line-height:1.85; color:#aeb8c8; margin:26px 0 0 }
/* Media is presented at a usable size. Nothing is replaced with fake UI. */
.video-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; margin-top:42px }
.video-grid-majestic { grid-template-columns:repeat(3,minmax(0,1fr)) }
.video-item:first-child { grid-row:auto }
.video-item h3 { font-size:23px; margin:22px 0 9px }
.demo { border:1px solid #ffffff1c; clip-path:none; border-radius:12px; overflow:hidden }
.demo-play{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;
  width:72px;height:72px;border:2px solid #fff;border-radius:50%;background:#e62936;color:#fff;
  font-size:30px;line-height:1;box-shadow:0 12px 36px #0009,0 0 0 8px #e6293633;cursor:pointer;
  transition:background .2s,box-shadow .2s,scale .2s}
.demo-play:hover,.demo-play:focus-visible{background:#ff4b57;box-shadow:0 14px 36px #0009,0 0 0 12px #e6293644;scale:1.08}
.demo-play[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.demo-play{transition:none}}
.demo-cap { font:400 14px/1.65 var(--body); text-transform:none; letter-spacing:0; color:var(--muted); margin:0 }
.video-item .seo-card-link { margin-top:12px }
.seo-card-link { font:600 14px/1.6 var(--body); letter-spacing:0; color:#c8d0df; margin:6px 0 22px; text-decoration:none }
.seo-card-link:after { display:none }
.seo-card-link:hover { color:#ff838a; text-decoration:underline }
.cols { gap:28px }
.c3 { grid-template-columns:repeat(3,minmax(0,1fr)) }
.c2 { grid-template-columns:repeat(2,minmax(0,1fr)) }
.card { padding:32px; border:1px solid #ffffff14; background:#12161e; clip-path:none; border-radius:12px; overflow:hidden; box-shadow:none; will-change:auto; transform:none!important }
.card:before,.card:after,.plan:before,.plan:after,button.shot:before { display:none }
.card:hover { border-color:#ffffff25; box-shadow:none }
.card p { font-size:16px!important; line-height:1.8 }
#why .card { padding:32px 0 0; border:0; border-top:1px solid #ffffff26; background:none; border-radius:0 }
#why h3 { font-size:23px }
#why .cols { gap:48px; margin-top:48px!important }
/* All eight bot descriptions are still server-rendered. Long feature lists
   are native disclosures (indexable and functional without JavaScript). */
#bots .cols { align-items:start; gap:36px; margin-top:48px!important }
#bots .card { padding:32px }
#bots .shot.tall { margin:-32px -32px 28px!important; width:calc(100% + 64px); aspect-ratio:16/10; border-radius:0; background:#111720 }
#bots .shot img { object-fit:cover; object-position:center; transform:none }
#bots h3 { font-size:28px; margin-bottom:16px }
#bots .tag { border:0; padding:0; margin-bottom:12px; font:500 11px/1.6 var(--mono); color:#ea8992; letter-spacing:.08em }
#bots .seo-card-link { margin:0 0 24px }
.bot-features { border-top:1px solid #ffffff16; border-bottom:0; padding:0; margin:0 }
.bot-features summary { display:flex; align-items:center; justify-content:space-between; padding:18px 0 0; font:600 14px/1.5 var(--body); color:#d0d7e3; min-height:48px }
.bot-features summary:before { display:none }
.bot-features summary:after { content:"+"; color:var(--red); font-size:24px; font-weight:400 }
.bot-features[open] summary:after { content:"−" }
.bot-features .feat { padding:24px 0 0 }
ul.feat li { color:#bfc8d6; font:400 15px/1.8 var(--body); margin-bottom:12px; padding-left:20px }
ul.feat li:before { top:12px; width:6px; height:3px; border-radius:2px; background:#ec7079 }
#bots .shared-features { grid-column:1/-1; display:grid; grid-template-columns:1fr 1.5fr; column-gap:56px; padding:40px; margin-top:12px; background:none; border:1px solid #ffffff1e }
.shared-features .tag { grid-column:1; align-self:end }
.shared-features h3 { grid-column:1 }
.shared-features .feat { grid-column:2; grid-row:1/span 3; columns:2; column-gap:32px }
.shared-features li { break-inside:avoid }
/* Steps are calm, stable columns, not pointer-reactive tiles. */
.steps { gap:36px; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:48px!important }
.step { position:relative; overflow:hidden; border:1px solid #ffffff24; border-radius:14px; padding:26px 25px 30px; counter-increment:setup;
  background:linear-gradient(145deg,#191d27,#12161e 65%);box-shadow:inset 0 1px #ffffff0b;
  transition:border-color .3s,box-shadow .3s,background .3s,translate .3s }
.step:before { content:counter(setup,decimal-leading-zero); position:relative; display:grid; place-items:center; opacity:1;
  background:#f13a4620; color:#ff818a; font:700 14px/1 var(--mono); margin-bottom:28px;
  width:46px; height:46px; border:1px solid #f13a4666; border-radius:11px;transition:background .3s,color .3s,box-shadow .3s }
.step:after{content:"";position:absolute;inset:-80% auto auto -55%;width:110%;height:190%;pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,#ffffff0c 50%,transparent 62%);transform:translateX(-50%) rotate(18deg);transition:transform .65s}
.step:hover{border-color:#f13a46a0;box-shadow:0 14px 34px #f13a4619,inset 0 1px #ffffff20;translate:0 -5px}
.step:hover:before{background:#e62936;color:#fff;box-shadow:0 0 22px #e6293666}
.step:hover:after{transform:translateX(200%) rotate(18deg)}
#how .step:nth-child(2).reveal{transition-delay:.08s}#how .step:nth-child(3).reveal{transition-delay:.16s}#how .step:nth-child(4).reveal{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.step,.step:before,.step:after{transition:none!important}.step:hover{translate:0}}
.steps,.app-how { counter-reset:setup }
.step h3 { font-size:21px; margin-bottom:16px }
.step p { font:400 15px/1.85 var(--body); color:var(--muted) }
#shots .cols { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; margin-top:40px!important }
/* Flatten the legacy preserve-3d layer: rotated images otherwise intersect
   their opaque parent background, hiding part of the picture. */
.shot { clip-path:none; border-radius:10px; border-color:#ffffff20; background:#12161e; transform:none!important; transform-style:flat; perspective:none; isolation:isolate; overflow:hidden }
button.shot,button.shot.wide { aspect-ratio:auto; display:block; overflow:hidden; text-align:left }
button.shot img { position:relative; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; transform:none!important }
.shot .cap { position:static; display:block; padding:18px 22px; max-width:none; border:0; background:#141922; color:#b9c3d3; font:400 14px/1.65 var(--body); text-transform:none; letter-spacing:0; opacity:1; transform:none }
/* The phone picture has its own space; text never covers the device. */
#android-companion { padding:112px 0 }
.companion-banner { grid-template-columns:1fr 1.05fr; gap:32px; padding:44px; align-items:center; border:1px solid #ffffff1a; border-radius:16px; clip-path:none; background:#141821 }
.companion-copy { padding:0; min-width:0 }
.companion-copy h2 { font-size:clamp(32px,3.5vw,48px); line-height:1.12; margin:0 0 24px }
.companion-copy p { font:400 16px/1.8 var(--body); max-width:500px }
.companion-visual { min-height:0; width:100%; aspect-ratio:1/1.1; align-self:stretch; border-radius:10px; background:#12161e }
.companion-visual img { object-position:37% center; animation:companion-drift 22s ease-in-out infinite alternate }
.companion-visual:after { background:linear-gradient(0deg,#090d1599,transparent 24%) }
.companion-visual figcaption { left:18px; right:18px; bottom:18px; padding:12px; font-size:10px; letter-spacing:0; border-radius:5px }
.companion-benefits { gap:12px 20px; margin:26px 0; font:500 13px/1.6 var(--body); text-transform:none; letter-spacing:0 }
.companion-actions { gap:20px; margin:30px 0 20px }
.companion-actions .btn { font-size:14px; padding:16px 22px }
.companion-text-link { font:600 14px/1.65 var(--body); color:#dce1eb }
.companion-fine { font:400 13px/1.8 var(--body)!important; color:#a7afbf!important; margin:18px 0 0 }
/* All five real plans remain together. No new urgency or sales claims. */
#price>.lead { max-width:820px }
.companion-plan-note { display:block; background:none; border:0; margin:22px 0 0; padding:0; font:400 15px/1.8 var(--body); color:#b0bacb; max-width:850px }
.plans { grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; margin-top:52px; align-items:stretch }
.plan { padding:46px 22px 24px; min-height:292px; border:1px solid #ffffff24; border-radius:10px; background:#12161e; clip-path:none; box-shadow:none; will-change:auto; transform:none!important }
.plan:hover { border-color:#a7afbf; box-shadow:none }
.plan.best { background:#1a151d; border:1px solid #ed555e; box-shadow:none }
.plan .name { font:600 16px/1.5 var(--body); text-transform:none; letter-spacing:0; color:#d1d7e2 }
.plan .price { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; font:800 36px/1.2 var(--display); letter-spacing:-.04em; margin:22px 0 10px }
.plan .price small { font:500 20px/1 var(--body); margin:0; color:#a7afbf }
.plan .per { color:#a7afbf; font:400 12px/1.6 var(--body); margin-bottom:14px }
.plan .old { font:400 14px/1.5 var(--body); margin:12px 0 -12px }
.plan .save { font:500 11px/1.6 var(--body); text-transform:none; letter-spacing:0; border:0; border-radius:4px; padding:4px 7px; margin:0 0 24px; color:#9fd7b5; background:#79c9960c }
.plan .save.hot { color:#ffa3ac; background:#ff727c12 }
.plan .btn { font-size:14px; min-height:48px; padding:13px 14px; background:#252d3b; color:#e8ecf4 }
.plan .btn:hover { background:#354156 }
.plan.best .btn { background:#e62936; color:white }
.plan.best .btn:hover { background:#fa3c48 }
.best-mark { top:0; right:20px; padding:7px 10px; font:600 10px/1.3 var(--body); letter-spacing:.08em; clip-path:none; border-radius:0 0 4px 4px; background:#d92e3b }
#price>.note { margin-top:28px!important; max-width:820px; font-size:14px!important; line-height:1.8 }
.demo-box { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-top:40px; padding:36px 40px; gap:32px; border:1px solid #ffffff1e; background:#141922; border-radius:12px; clip-path:none }
.demo-box:before { display:none }
.demo-box .trial-copy { flex:1 1 390px }
.demo-box .eyebrow { color:#ff8d95 }
.demo-box h3 { font-size:26px; margin-bottom:14px }
.demo-box p { font-size:15px!important; line-height:1.8; max-width:760px }
.demo-box .btn { font-size:14px; padding:16px 22px }
.trial-note { margin:15px 0 0; color:#b9c3d2; font-size:14px; line-height:1.65 }
.trial-note a { color:#ff8790; text-underline-offset:4px }
.aside-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:24px }
.aside-actions .btn { min-height:52px; padding:12px 10px; text-align:center; font-size:12px; line-height:1.35 }
.aside-actions .demo-cta { background:#ffe0e3; color:#17191f; border:1px solid #ffe0e3 }
.aside-actions .demo-cta:hover { background:#fff1f2; color:#0b0d12; border-color:#fff1f2 }
#login { margin-top:28px!important }
/* Larger FAQ rows, legible legal footer; the original text is all retained. */
#faq>div:last-child { max-width:1000px; margin-top:36px!important }
details { padding:26px 0; border-bottom:1px solid #ffffff20 }
summary { position:relative; font:600 18px/1.6 var(--body); padding-right:40px }
summary:before { content:"+"; position:absolute; right:4px; top:0; margin:0; font-weight:400; font-size:27px; color:var(--red) }
details p { font:400 16px/1.85 var(--body); color:#b1bccd; margin:22px 44px 4px 0; max-width:880px }
footer { margin-top:0; padding:64px 0 48px; border-color:#ffffff14; background:#090b10; color:#9aa4b6; font:400 13px/1.9 var(--body) }
footer p { max-width:950px; margin:0 0 16px }
footer .logo { margin-bottom:24px!important; font-size:22px!important }
.flinks,footer .flinks { display:flex; flex-wrap:wrap; gap:14px 30px; max-width:1150px; line-height:1.8; margin:32px 0; padding:28px 0; border-top:1px solid #ffffff16; border-bottom:1px solid #ffffff16 }
.flinks a { font-size:13px; color:#c0c8d5; border:0; white-space:normal }
.paymarks { gap:16px; margin:20px 0 }
.modal-card { padding:32px; border-radius:12px; clip-path:none; max-height:calc(100dvh - 40px); overflow:auto }
.modal-card h3 { font-size:26px }
.modal-card .provider { font:500 14px/1.6 var(--body); text-transform:none; letter-spacing:0; border-radius:6px; padding:16px }
.modal-card p { font-size:14px!important; line-height:1.8 }
.lightbox { z-index:100; padding:36px 20px }
.lightbox img { max-height:calc(100% - 100px) }
.lb-cap { font:400 14px/1.6 var(--body); text-transform:none; letter-spacing:0 }
/* Content stays readable if scripts or animations fail. */
.reveal { opacity:1; transform:none; transition:none }
.progress,.scroll-progress { display:none }
@media(prefers-reduced-motion:no-preference) {
  .hero-copy { animation:site-enter .5s ease-out both }
  @keyframes site-enter { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } }
}
/* Android landing shares exactly the same type, spacing and button system. */
.companion-page .app-hero { gap:64px; padding:72px 0 80px; grid-template-columns:1fr 1fr }
.app-hero h1 { font:900 italic clamp(40px,4.5vw,64px)/1.06 var(--display); letter-spacing:-.05em; margin:0 0 30px }
.app-hero .lead { font-size:18px; line-height:1.85 }
.app-hero .companion-visual { aspect-ratio:1/1.15; min-height:540px; box-shadow:none; border-color:#ffffff20; border-radius:12px }
.app-breadcrumbs,.crumbs { font:400 12px/1.7 var(--body); padding-top:28px; color:#a4aebf; letter-spacing:0 }
.app-ribbon { margin:0 0 40px; border:0; background:none; gap:48px; border-top:1px solid #ffffff1c; border-bottom:1px solid #ffffff1c }
.app-ribbon div { background:none; padding:32px 0 }
.app-ribbon b { font:700 24px/1.4 var(--body); text-transform:none; margin-bottom:6px }
.app-ribbon span { font-size:14px }
.app-feature-grid { gap:28px; margin-top:48px }
.app-feature { padding:32px; border:1px solid #ffffff16; border-radius:12px; background:#13171f; transform:none!important }
.app-feature h3 { font-size:23px; margin:28px 0 18px }
.app-feature p { font-size:16px; line-height:1.8 }
.app-feature .num { font-size:11px; letter-spacing:.05em; color:#eb8c95 }
.app-game-grid { gap:32px; margin-top:44px }
.app-game { min-height:420px; border-radius:12px; border-color:#ffffff18 }
.app-game img { object-position:70% center }
.app-game div { padding:32px }
.app-game h3 { font-size:28px; margin-bottom:14px }
.app-game p { font-size:16px; line-height:1.7 }
.app-how { gap:44px; margin-top:48px }
.app-how .step p { font-size:15px; line-height:1.85 }
.app-download { margin-top:60px; padding:48px; background:#141922; border:1px solid #ffffff25; border-radius:12px }
.app-download h3 { font-size:30px; line-height:1.3; margin:0 0 20px }
.app-download p { font-size:16px; line-height:1.85 }
.app-legal { margin-top:28px; font-size:13px; line-height:1.8; max-width:1050px; color:#9eabba }
/* Bot detail pages, without changing their indexed content or route structure. */
.product-page .bar { justify-content:space-between }
.product-page .bar nav { order:3; width:100%; flex-wrap:wrap; justify-content:flex-start; gap:12px 22px; padding-top:6px }
.product-page .hero { grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); min-height:650px; padding:64px 0 88px; gap:64px }
.product-page .hero:before,.hero-visual:before,.hero-frame:after { display:none }
.product-page .hero-copy { width:100%; max-width:none }
.product-page .hero h1 { font-size:clamp(36px,4.1vw,58px); line-height:1.1; text-transform:none }
.product-page .hero .lead { font-size:18px; line-height:1.8 }
.product-page .hero-visual { width:100%; min-height:0; order:0; margin:0 }
.hero-frame { transform:none!important; clip-path:none; border-radius:12px; border:1px solid #ffffff1e; box-shadow:none }
.hero-frame img,.hero-visual:hover img { width:100%; height:auto; transform:none; aspect-ratio:4/3; object-position:58% center }
.hud { position:relative; inset:auto; margin:16px 0 0; padding:18px 22px; box-shadow:none; border-color:#ffffff18; border-radius:8px; font-size:11px; background:#12171f }
.product-page .trust { gap:12px; margin:28px 0 }
.product-page .trust span { border:0; padding:0; background:none; font:500 12px/1.8 var(--body); color:#b8c4d5; letter-spacing:0 }
.product-page .trust span:before { content:"✓"; margin-right:7px; color:#fb7b85 }
.product-page section.content { padding:96px 0 }
.content-grid { grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr); gap:72px; align-items:start }
.content h2 { font-size:clamp(30px,3vw,43px); line-height:1.2; letter-spacing:-.045em; margin-bottom:28px }
.content h3 { font-size:25px; margin:36px 0 18px }
.content p,.content li { font-size:16px; line-height:1.9; color:#bdc7d7 }
.content p { margin:0 0 24px }
.content li+li { margin-top:12px }
.content .card h3 { margin-top:0 }
.content aside.card { padding:32px }
.content .fact { font:400 14px/1.6 var(--body); padding-top:16px }
.content .fact b { font-style:normal; font-size:14px }
.detail-plans{scroll-margin-top:96px}
.detail-plans>p{max-width:850px;color:#bfc8d6;font-size:16px;line-height:1.8}
.detail-plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:16px;margin-top:34px}
.detail-plan{display:flex;flex-direction:column;align-items:flex-start;min-height:255px;padding:24px;
  border:1px solid #ffffff27;border-radius:12px;background:linear-gradient(145deg,#1b202b,#12161e);
  transition:border-color .25s,transform .25s,box-shadow .25s}
.detail-plan:hover{border-color:#f13a46a6;transform:translateY(-4px);box-shadow:0 16px 38px #e629361f}
.detail-plan h3{margin:0 0 18px;font-size:20px;line-height:1.25}
.detail-old{color:#8993a5;text-decoration:line-through;font-size:13px}
.detail-price{font:800 33px/1.2 var(--display);margin:3px 0 9px;color:#fff}
.detail-price small{font-size:17px;font-weight:500;color:#bfc8d6}
.detail-discount{font-size:11px;font-weight:700;color:#ff818a;margin-bottom:12px}
.detail-plan .btn{width:100%;margin-top:auto;text-align:center;font-size:12px;line-height:1.3;padding:13px 11px}
.detail-after{margin-top:22px!important}.detail-after a{color:#ff818a;font-weight:700}
.cta { background:#171c26; border:1px solid #ffffff24; border-radius:12px; clip-path:none; padding:40px; margin-top:44px }
.cta:before { display:none }
.cta h2 { font-size:30px; line-height:1.25; margin:0 }
.cta p { font-size:16px; line-height:1.8; margin:18px 0 }
.cta .btn { background:#e62936; white-space:normal }
.faq { gap:0; max-width:1000px }
.faq details { background:none; border:0; border-bottom:1px solid #ffffff24; padding:26px 0; overflow:visible }
.faq details[open] { background:none; border-color:#ffffff24 }
.faq summary { padding:0 40px 0 0; font:600 18px/1.65 var(--body) }
.faq summary:before { display:none }
.faq summary:after { right:4px; top:0; font-size:27px; font-weight:400; color:var(--red) }
.faq p { margin:20px 30px 0 0; font-size:16px }
.related-grid { gap:24px }
.related-grid .card { min-height:0; padding:28px }
.related-grid .card h3 { font-size:21px; margin:0 0 12px }
.related-grid .card p { font-size:15px; margin:0 }
.product-page>section.wrap.content { padding-left:var(--gutter); padding-right:var(--gutter) }
.product-page>section.wrap.content .cta { margin:0 }
@media(max-width:1180px) {
  .hrow { gap:16px 24px }
  .hrow>.game-picker { margin-left:auto }
  .hrow>nav:not(.game-picker) { order:5; width:100%; justify-content:center; gap:32px; margin:0; padding:8px 0 0 }
  .hrow>.btn { margin-left:auto }
  .hero[data-hero] { min-height:720px }
  .hero-art img { width:100%; object-fit:cover; object-position:82% top }
  .hero-copy { width:60% }
  .hero h1 { font-size:56px }
  .plans { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px }
  .plan { min-height:300px }
  .companion-banner { padding:32px; gap:28px }
  .companion-visual { aspect-ratio:auto; min-height:520px }
  .companion-page .app-hero { gap:36px }
  .app-hero .companion-visual { min-height:560px }
  .content-grid { gap:40px }
  .product-page .hero { gap:36px }
}
@media(max-width:900px) {
  section { padding:84px 0 }
  h2 { font-size:36px }
  .hero[data-hero] { min-height:720px; padding:64px 0 }
  .hero-copy { width:65% }
  .hero .lead { font-size:16px }
  .hero h1 { font-size:48px }
  .hero[data-hero]:before { background:linear-gradient(90deg,#080c13f5,#080c13c9 40%,#080c1333 90%),linear-gradient(0deg,#0b0d12,transparent 24%) }
  #why .cols { grid-template-columns:1fr; gap:28px }
  #why .card { padding:28px 0 0 }
  .video-grid,.video-grid-majestic { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px }
  .video-item h3 { font-size:21px }
  #bots .cols { gap:24px }
  #bots .card { padding:24px }
  #bots .shot.tall { margin:-24px -24px 24px!important; width:calc(100% + 48px) }
  #bots h3 { font-size:24px }
  #bots .shared-features { padding:32px; gap:20px; grid-template-columns:1fr }
  .shared-features .feat { grid-column:1; grid-row:auto; columns:2 }
  .steps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px }
  .companion-banner { grid-template-columns:1fr; padding:36px; gap:32px }
  .companion-copy p { max-width:650px }
  .companion-visual { min-height:0; aspect-ratio:3/2 }
  .companion-visual img { object-position:center }
  .app-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .app-how { gap:24px }
  .app-how .step h3 { font-size:20px }
  .app-game { min-height:340px }
  .app-game h3 { font-size:24px }
  .product-page .hero { grid-template-columns:1fr; gap:40px; padding:48px 0 64px }
  .product-page .hero-visual { width:100%; max-width:100%; order:0 }
  .hero-frame img { aspect-ratio:16/10; object-position:center }
  .content-grid { grid-template-columns:1fr; gap:44px }
  .content aside.card { max-width:none }
}
@media(max-width:680px) {
  html { scroll-padding-top:150px }
  :root { --gutter:22px }
  body { font-size:15px }
  section { padding:72px 0 }
  h2 { font-size:32px; line-height:1.2; margin-bottom:22px }
  h3 { font-size:23px }
  .eyebrow { font-size:10px; letter-spacing:.11em; margin-bottom:18px }
  .lead { font-size:16px; line-height:1.85 }
  .hrow,.bar { padding:14px var(--gutter); gap:14px 12px; min-height:72px }
  .logo { font-size:19px }
  .hrow>.btn,.bar>.btn { font-size:11px; padding:10px 13px; margin-left:auto; min-height:42px }
  .hrow>.game-picker { order:3; width:100%; margin:0 }
  .game-picker a { font-size:12px; padding:10px 12px }
  .hrow>nav:not(.game-picker),.product-page .bar nav { display:none }
  .hero[data-hero] { display:block; min-height:0; padding:310px 0 52px }
  .hero-art { inset:14px 0 auto; height:400px }
  .hero-art img { object-position:82% top; object-fit:cover }
  .hero[data-hero]:before { background:linear-gradient(0deg,#0b0d12 0%,#0b0d12 40%,#0b0d12e0 58%,#0b0d1200 83%) }
  .hero-copy { width:100%; max-width:none }
  .hero h1 { font-size:clamp(38px,9.5vw,60px); line-height:1.06; margin-bottom:24px }
  .hero .eyebrow { font-size:10px; margin-bottom:22px }
  .hero .lead { font-size:16px; line-height:1.85 }
  .hero-cta { margin-top:30px }
  .top-actions { grid-template-columns:minmax(0,1fr); width:100% }
  .top-actions .btn { max-width:none; min-height:54px; padding:16px; font-size:14px }
  .top-actions .launcher-cta { justify-self:stretch }
  .hero-app-note { margin-top:20px; font-size:14px; line-height:1.8 }
  .hero .seo-card-link { font-size:12px; line-height:1.8; margin-top:20px }
  .hero-foundation { padding-top:24px; padding-bottom:24px }
  .hero-foundation .trust { justify-content:flex-start; gap:14px }
  .hero-foundation .pill { font-size:12px; flex-basis:100% }
  .hero-explanation { font-size:15px; margin-top:24px }
  .video-grid,.video-grid-majestic { display:grid; grid-template-columns:1fr; gap:36px; margin-top:32px }
  .video-item:first-child { grid-row:auto }
  .video-item h3 { font-size:23px; margin-top:20px }
  .cols.c2,.cols.c3 { grid-template-columns:1fr }
  #bots .cols { gap:28px; margin-top:34px!important }
  #bots .card { padding:24px }
  #bots .shot.tall { aspect-ratio:16/11 }
  #bots .card p { font-size:15px!important }
  #bots .seo-card-link { font-size:13px; line-height:1.8 }
  #bots .shared-features { padding:28px 24px; gap:8px }
  .shared-features .feat { columns:auto; margin-top:12px }
  .steps { gap:30px; grid-template-columns:1fr }
  .step { padding-top:24px }
  .step:before { display:block; margin-bottom:18px }
  .step h3 { font-size:23px; margin-bottom:12px }
  .step p { font-size:15px }
  #shots .cols { grid-template-columns:1fr; gap:24px; margin-top:30px!important }
  .shot .cap { font-size:13px; padding:16px 18px }
  #android-companion { padding:72px 0 }
  .companion-banner { padding:26px 22px; gap:28px; border-radius:12px }
  .companion-copy h2 { font-size:34px }
  .companion-copy p { font-size:15px; line-height:1.85 }
  .companion-kicker { font-size:10px; line-height:1.8; letter-spacing:.08em }
  .companion-benefits { display:grid; gap:10px; font-size:13px; margin:22px 0 }
  .companion-actions { gap:20px; margin:26px 0 18px }
  .companion-actions .btn { padding:15px 16px; font-size:13px; width:100% }
  .companion-visual { border-radius:8px; aspect-ratio:4/3 }
  .companion-visual figcaption { left:10px; right:10px; bottom:10px; padding:9px; font-size:9px; line-height:1.6 }
  .companion-fine { font-size:12px!important; line-height:1.8!important }
  .plans { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:34px }
  .plan { padding:40px 18px 20px; min-height:284px }
  .plan .price { font-size:32px }
  .plan .name { font-size:14px }
  .plan .per { font-size:12px }
  .plan .btn { font-size:13px }
  .companion-plan-note { font-size:14px; line-height:1.8 }
  .demo-box { padding:28px 24px; margin-top:32px; gap:24px }
  .demo-box div { min-width:0; flex-basis:100% }
  .demo-box h3 { font-size:24px; line-height:1.4 }
  .demo-box p { font-size:14px!important }
  .demo-box .btn { width:100% }
  summary,.faq summary { font-size:16px; line-height:1.65; padding-right:30px }
  details { padding:24px 0 }
  details p,.faq p { font-size:15px; line-height:1.85; margin:20px 0 0 }
  footer { padding:48px 0 32px; font-size:12px; line-height:1.9 }
  .flinks,footer .flinks { gap:16px 24px; margin:28px 0; padding:24px 0; display:grid; grid-template-columns:1fr 1fr }
  .flinks a { font-size:12px; line-height:1.7 }
  .companion-page .app-hero { grid-template-columns:1fr; padding:40px 0 48px; gap:34px }
  .app-hero h1 { font-size:clamp(38px,9.5vw,60px); line-height:1.08; margin-bottom:26px }
  .app-hero .lead { font-size:16px }
  .app-hero .companion-visual { min-height:0; aspect-ratio:4/3; box-shadow:none }
  .app-ribbon { gap:0; margin-bottom:0; grid-template-columns:1fr }
  .app-ribbon div { padding:22px 0; gap:24px; border-bottom:1px solid #ffffff12 }
  .app-ribbon div:last-child { border:0 }
  .app-ribbon b { font-size:21px; margin:0 }
  .app-ribbon span { font-size:13px }
  .app-feature-grid,.app-game-grid,.app-how { grid-template-columns:1fr; gap:24px; margin-top:34px }
  .app-feature { padding:28px }
  .app-feature h3 { margin:24px 0 16px; font-size:23px }
  .app-feature p { font-size:15px }
  .app-game { min-height:360px }
  .app-game div { padding:26px }
  .app-game h3 { font-size:26px }
  .app-game p { font-size:15px }
  .app-how { gap:34px }
  .app-how .step h3 { font-size:23px }
  .app-download { padding:28px 24px; margin-top:42px }
  .app-download h3 { font-size:26px }
  .app-download p { font-size:15px }
  .app-legal { font-size:12px; line-height:1.9 }
  .product-page .hero { padding:38px 0 58px; gap:36px }
  .product-page .hero h1 { font-size:clamp(34px,8.5vw,48px) }
  .product-page .hero .lead { font-size:16px }
  .product-page .hero-actions { gap:12px }
  .product-page .hero-actions .btn { width:100%; font-size:13px }
  .product-page section.content { padding:68px 0 }
  .content h2 { font-size:30px; margin-bottom:24px }
  .content h3 { font-size:24px }
  .content p,.content li { font-size:15px; line-height:1.9 }
  .content-grid { gap:40px }
  .content aside.card { padding:26px }
  .related-grid { grid-template-columns:1fr; gap:20px }
  .related-grid .card { padding:24px }
  .cta { display:block; padding:28px 24px; margin-top:36px }
  .cta h2 { font-size:26px; line-height:1.3 }
  .cta p { font-size:15px; line-height:1.85 }
  .cta .btn { width:100%; margin-top:20px; font-size:13px }
}
@media(max-width:420px) {
  .plans { grid-template-columns:1fr }
  .plan { min-height:0; padding:32px 26px 26px }
  .plan .price { font-size:40px; margin:18px 0 8px }
  .plan .per { font-size:14px }
  .plan .name { font-size:18px }
  .plan .save { margin-bottom:20px }
  .plan .btn { margin-top:18px; font-size:14px }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*:before,*:after { animation:none!important; transition:none!important }
}