:root{color-scheme:dark;--bg:#0e1712;--surface:#18251d;--paper:#f0ede4;--ink:#17251b;--mint:#b7edc5;--gold:#dcc48f;--muted:#bbc9be;--line:#3a4b40;--ease:cubic-bezier(.2,.65,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--bg);color:var(--paper);font:16px/1.6 "Helvetica Neue",Helvetica,Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}img,video{max-width:100%;display:block}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-weight:600;line-height:1.08;letter-spacing:-.045em}p{color:var(--muted)}button,a,summary{touch-action:manipulation}:focus-visible{outline:3px solid var(--gold);outline-offset:5px}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;flex:none}.wrap{width:min(1180px,calc(100% - 80px));margin-inline:auto}.skip{position:fixed;inset-inline-start:12px;top:12px;transform:translateY(-180%);background:var(--paper);color:var(--ink);padding:12px 18px;z-index:10}.skip:focus{transform:none}.site-nav{display:flex;align-items:center;justify-content:space-between;min-height:86px;border-bottom:1px solid var(--line);gap:20px}.brand{display:inline-flex;align-items:center;gap:10px;font-size:21px;letter-spacing:.13em;font-weight:700;min-height:44px}.brand svg{width:31px;height:31px}.nav-links{display:flex;align-items:center;gap:28px;font-size:14px}.nav-links a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;justify-content:center}.language{border:1px solid var(--line);padding:4px 15px;border-radius:100px}.hero{display:grid;grid-template-columns:1.35fr 1fr;grid-template-areas:"intro film" "conversion film";gap:34px 70px;padding-block:70px 45px;align-items:start}.intro{grid-area:intro}.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--mint);margin-bottom:22px;display:flex;align-items:center;gap:9px}.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.intro h1{font-size:clamp(62px,6.2vw,88px);line-height:1.01}.intro h1 em{font:inherit;color:var(--mint)}.lead{font-size:19px;line-height:1.55;max-width:470px;margin-top:28px}.conversion{grid-area:conversion;align-self:end}.store-label{font-size:12px;letter-spacing:.06em;color:var(--gold);margin-bottom:12px}.stores{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:510px}.store{min-height:82px;padding:16px 20px;border:1px solid var(--mint);background:var(--mint);color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:8px;border-radius:8px;transition:background .2s,transform .2s}.store.google{background:transparent;color:var(--paper);border-color:#6e8c76}.store:hover{transform:translateY(-2px);background:#d1f5db}.store.google:hover{background:#263e2f}.store small{display:block;font-size:12px;line-height:1.5}.store strong{font-size:21px;line-height:1.35;display:block;letter-spacing:-.025em}.region{font-size:14px;line-height:1.55;max-width:470px;margin-top:15px}.film,.film-halo{grid-area:film;position:relative;isolation:isolate;justify-self:center;width:min(100%,310px);padding-top:4px}.film-halo::before{content:"";position:absolute;inset:40px -60px 80px;border:1px solid #7f9c6e33;border-radius:50%;z-index:-1;transform:rotate(-16deg);box-shadow:0 0 0 35px #b7edc506}.screen{position:relative;aspect-ratio:9/16;background:#070b09;border:5px solid #35483b;border-radius:28px;overflow:hidden;box-shadow:0 28px 85px #0008}.screen video,.screen-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.screen.is-playing .screen-poster{opacity:0;pointer-events:none}.screen-toggle{position:absolute;bottom:12px;left:12px;right:12px;min-height:44px;border:1px solid #fff6;border-radius:7px;background:#e7f6e9;color:#101714;padding:9px 12px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:13px}.screen-toggle[hidden]{display:none}.screen-toggle [hidden]{display:none}.film figcaption{font-size:12px;line-height:1.5;margin:14px 0 0;color:#afc2b4;text-align:center}.platform-note{font-size:14px;color:#afc2b4;border-top:1px solid var(--line);padding-block:22px 32px;max-width:1180px}.proof-strip{background:var(--mint);color:var(--ink);padding:23px 0}.proof-inner{display:flex;align-items:center;justify-content:space-between;gap:35px}.proof-inner p{font-size:12px;color:var(--ink);max-width:190px;line-height:1.5}.proof-inner strong{font-size:29px;letter-spacing:-.04em;font-weight:600;display:block;line-height:1.15}.proof-inner span{font-size:13px}.section{padding-block:90px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:36px}.section-head h2{font-size:clamp(38px,4vw,56px)}.section-head p{max-width:340px;font-size:16px}.screens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.screen-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}.screen-card .image-well{background:#1f3427;padding:24px 40px 0;overflow:hidden;height:360px}.screen-card img{width:100%;height:auto;border-radius:12px 12px 0 0}.screen-card figcaption{padding:24px}.screen-card .index{font-size:11px;letter-spacing:.12em;color:var(--mint)}.screen-card h3{font-size:25px;margin:12px 0}.screen-card p{font-size:14px}.paper{background:var(--paper);color:var(--ink)}.paper p{color:#46594c}.questions{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px}.questions h2{font-size:52px}.questions .intro-copy{margin-top:24px;max-width:340px}.questions details{border-top:1px solid #a5b5a9}.questions details:last-child{border-bottom:1px solid #a5b5a9}.questions summary{cursor:pointer;list-style:none;font-size:19px;line-height:1.4;min-height:76px;display:flex;gap:20px;align-items:center;justify-content:space-between;padding:18px 0}.questions summary::-webkit-details-marker{display:none}.questions summary::after{content:"+";font-size:26px}.questions details[open] summary::after{content:"−"}.questions details p{padding:0 30px 24px 0;font-size:15px}.questions a{text-decoration:underline;text-underline-offset:3px}.closing{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:70px}.closing h2{font-size:59px;max-width:450px}.closing .stores{margin-top:5px}.closing-note{font-size:14px;margin-top:18px}.footer{border-top:1px solid var(--line);padding:28px 0}.footer-inner{display:flex;align-items:start;justify-content:space-between;gap:30px}.footer p{font-size:13px}.footer nav{display:flex;gap:8px 24px;flex-wrap:wrap;justify-content:end}.footer nav a{font-size:14px;min-height:44px;display:inline-flex;align-items:center}html[dir=rtl] body{font-family:"Geeza Pro",Tahoma,Arial,sans-serif}html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3{letter-spacing:0;line-height:1.25}html[dir=rtl] .brand{direction:ltr;font-family:Helvetica,Arial,sans-serif}html[dir=rtl] .eyebrow{letter-spacing:0;font-size:14px}html[dir=rtl] .intro h1{font-size:72px}html[dir=rtl] .questions details p{padding:0 0 24px 30px}html[dir=rtl] .store strong{font-family:Helvetica,Arial,sans-serif}html[dir=rtl] .region,html[dir=rtl] .platform-note{font-size:15px}
@media(max-width:900px){.wrap{width:calc(100% - 48px)}.hero{gap:28px 32px;grid-template-columns:1.1fr 1fr}.intro h1{font-size:60px}.lead{font-size:17px}.store{padding:14px}.store strong{font-size:18px}.film,.film-halo{width:260px}.screen-card .image-well{padding-inline:20px;height:310px}.questions{gap:45px}.closing{gap:40px}.closing h2{font-size:48px}html[dir=rtl] .intro h1{font-size:57px}}
@media(max-width:620px){.wrap{width:calc(100% - 36px)}.site-nav{min-height:66px}.brand{font-size:17px;gap:6px}.brand svg{width:27px;height:27px}.nav-links{gap:12px;font-size:13px}.nav-links .how-link{display:none}.language{padding-inline:12px}.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"intro intro" "film conversion";gap:24px 16px;padding-block:36px 24px}.eyebrow{font-size:10px;margin-bottom:17px;letter-spacing:.09em}.intro h1{font-size:clamp(42px,11.3vw,64px);line-height:1.04;max-width:460px}.intro h1 br:nth-of-type(2){display:none}.intro h1 em::before{content:" "}.lead{font-size:16px;line-height:1.5;margin-top:18px;max-width:420px}.film,.film-halo{width:100%;padding:0;align-self:start}.film-halo::before{inset:35px -8px 70px;box-shadow:none}.screen{border-radius:17px;border-width:3px}.screen-toggle{bottom:7px;left:6px;right:6px;padding:7px 8px;font-size:11px;min-height:44px}.screen-toggle span[aria-hidden]{display:none}.film figcaption{font-size:11px;margin-top:10px;text-align:start}.conversion{align-self:start;padding-top:0}.stores{grid-template-columns:1fr;gap:10px}.store{min-height:76px;padding:12px 11px}.store strong{font-size:18px}.store small{font-size:11px}.store svg{width:16px;height:16px}.store-label{font-size:11px;line-height:1.5;margin-bottom:10px;letter-spacing:0}.region{font-size:13px;line-height:1.55;margin-top:13px}.platform-note{font-size:13px;line-height:1.6;padding-block:18px 24px}.proof-strip{padding-block:22px}.proof-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.proof-inner p{grid-column:1/-1;max-width:none;font-size:11px}.proof-inner strong{font-size:27px}.proof-inner span{font-size:11px}.section{padding-block:58px}.section-head{display:block;margin-bottom:26px}.section-head h2{font-size:38px}.section-head p{font-size:15px;margin-top:18px;max-width:100%}.screens{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;gap:16px;scrollbar-color:#8eaa95 #142219}.screen-card{flex:0 0 85%;scroll-snap-align:start}.screen-card .image-well{height:345px;padding:22px 35px 0}.screen-card figcaption{padding:22px}.questions,.closing{grid-template-columns:1fr;gap:30px}.questions h2,.closing h2{font-size:40px}.questions .intro-copy{margin-top:18px}.questions summary{font-size:17px;min-height:70px}.questions details p{font-size:14px}.closing .stores{grid-template-columns:1fr 1fr}.closing .store strong{font-size:18px}.footer-inner{display:block}.footer nav{justify-content:start;gap:4px 18px;margin-top:14px}.footer nav a{font-size:14px}html[dir=rtl] .intro h1{font-size:43px}html[dir=rtl] .eyebrow{font-size:12px}html[dir=rtl] .region,html[dir=rtl] .platform-note{font-size:14px}html[dir=rtl] .intro h1 br:nth-of-type(2){display:block}}
@media(max-width:360px){.wrap{width:calc(100% - 28px)}.hero{column-gap:12px}.intro h1{font-size:39px}.lead{font-size:15px}.store{padding:11px 9px}.store strong{font-size:16px}.store svg{width:13px}.store small{font-size:10px}.screen-toggle{font-size:10px}.region{font-size:12px}.screen-card .image-well{height:320px;padding-inline:27px}.closing .store strong{font-size:16px}html[dir=rtl] .intro h1{font-size:38px}html[dir=rtl] .region{font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* Optional controls for the existing native, swipeable screenshot rail. */
.gallery-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.gallery-controls[hidden] { display:none; }
.gallery-controls button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:8px 12px; border:1px solid #6e8c76; border-radius:8px; color:var(--paper); background:var(--surface); cursor:pointer; font-size:14px; }
.gallery-controls button:hover { background:#263e2f; }
.gallery-controls button[aria-disabled=true] { border-style:dashed; cursor:default; }
.gallery-controls output { font-size:14px; color:var(--muted); white-space:nowrap; }
html[dir=rtl] .gallery-controls .gallery-arrow { transform:scaleX(-1); }

/* Mobile decision area: full-width store choices; preserve the gameplay-led hero. */
@media (max-width:620px) {
 .hero { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); grid-template-areas:"eyebrow eyebrow" "headline headline" "film lead" "conversion conversion"; gap:18px 16px; padding-top:28px; }
 .hero .intro { display:contents; }
 .hero .eyebrow { grid-area:eyebrow; margin-bottom:0; }
 .hero .intro h1 { grid-area:headline; max-width:none; }
 .hero .intro h1 br:nth-of-type(2) { display:block; }
 .hero .intro h1 em::before { content:none; }
 .hero .lead { grid-area:lead; margin:0; font-size:16px; line-height:1.55; align-self:start; }
 .hero .film, .hero .film-halo { width:100%; max-width:190px; }
 .hero .film figcaption { font-size:12px; line-height:1.5; }
 .hero .screen-toggle { font-size:12px; min-height:44px; }
 .hero .conversion { width:100%; }
 .hero .stores { max-width:none; }
 .hero .store { min-height:76px; padding:14px 18px; }
 .hero .store strong { font-size:21px; }
 .hero .store small,.hero .store-label { font-size:14px; }
 .hero .store svg { width:22px; height:22px; }
 .hero .region { font-size:14px; max-width:none; }
 html[dir=rtl] .hero .lead { font-size:17px; }
}
html[dir=rtl] .store > svg { transform:scaleX(-1); }

/* Keep the mobile video control focus ring within its clipping screen. */
@media (max-width:620px) {
 .screen-toggle:focus-visible { outline:3px solid currentColor; outline-offset:-5px; }
}

/* Preserve the original orbit tilt; bound the decoration, never its content parent. */
.film-halo::before {
 inset:auto;
 left:50%; top:calc(50% - 20px);
 box-sizing:border-box;
 width:min(calc(100% + 120px), clamp(216px, calc(32.4242424242vw + 14.9696969697px), 430px));
 height:min(calc(100% - 120px), clamp(296px, calc(32.4242424242vw + 94.9696969697px), 510px));
 transform:translate(-50%, -50%) rotate(-16deg);
 box-shadow:0 0 0 clamp(0px, calc(9.21052631579vw - 82.8947368421px), 35px) #b7edc506;
}
/* Restore the original phone box exactly; no fractional-width gap follows 620px. */
@media (max-width:620px) {
 .film-halo::before { inset:35px -8px 70px; width:auto; height:auto; transform:rotate(-16deg); box-shadow:none; }
}
/* Share the existing fluid gutter; retain the accepted smooth hero endpoints. */
@media (min-width:900px) and (max-width:1280px) {
 .wrap {
  width:min(1180px, calc(100% - clamp(48px, calc(8.42105263158vw - 27.7894736842px), 80px)));
 }
 .hero.wrap {
  --aq-column-gap:clamp(32px, calc(10vw - 58px), 70px);
  --aq-column-growth:clamp(0px, calc(14.7976323788vw - 133.178691409px), 56.2310030395px);
  grid-template-columns:minmax(0, calc((100% - var(--aq-column-gap)) * 0.5238095238095238 + var(--aq-column-growth))) minmax(0, 1fr);
  gap:clamp(28px, calc(1.57894736842vw + 13.7894736842px), 34px) var(--aq-column-gap);
 }
 .hero .film, .hero .film-halo { width:clamp(260px, calc(13.1578947368vw + 141.578947368px), 310px); }
 .hero .intro h1 { font-size:clamp(60px, calc(5.09473684211vw + 14.1473684211px), 79.36px); }
 html[dir=rtl] .hero .intro h1 { font-size:clamp(57px, calc(3.94736842105vw + 21.4736842105px), 72px); }
 .hero .lead { font-size:clamp(17px, calc(0.526315789474vw + 12.2631578947px), 19px); }
 .hero .store { padding:clamp(14px, calc(0.526315789474vw + 9.26315789474px), 16px) clamp(14px, calc(1.57894736842vw - 0.210526315789px), 20px); }
 .hero .store strong { font-size:clamp(18px, calc(0.789473684211vw + 10.8947368421px), 21px); }
}

/* R4: reflow enlarged text without widening the page or clipping focus. */
.hero > *, .closing > *, .store > span, .proof-inner > * {
 min-inline-size:0;
}
.hero .intro h1, .closing h2, .store > span, .proof-inner > *, .screen-card h3 {
 overflow-wrap:break-word;
}
.site-nav, .gallery-controls { flex-wrap:wrap; }
.gallery-controls button {
 min-inline-size:0;
 max-inline-size:100%;
 overflow-wrap:break-word;
}
.screen-toggle .play-label, .screen-toggle .pause-label {
 min-inline-size:0;
 overflow-wrap:break-word;
}
/* Retain the existing 3px outline; use the paper section's dark palette color. */
.paper :focus-visible { outline-color:var(--ink); }
@media (max-width:620px) {
 .proof-inner { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .closing .stores { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* At extreme zoom, give each closing store choice the available line width. */
@media (max-width:260px) {
 .closing .stores { grid-template-columns:minmax(0,1fr); }
}

/* R6: retain whole labels without assigning spanning content to one mobile track. */
.stores { display:flex; flex-wrap:wrap; }
.store { flex:1 1 calc(50% - 6px); min-inline-size:min-content; max-inline-size:100%; }
.store > span, .proof-inner > * { min-inline-size:min-content; }
.proof-inner { flex-wrap:wrap; }
.proof-inner strong { white-space:nowrap; overflow-wrap:normal; }
.gallery-controls button { min-inline-size:min-content; flex-wrap:wrap; }

/* Keep the control in flow, explicitly above both absolute media layers.
   Clear the old absolute offsets: relative positioning must not add them again. */
.screen { display:grid; }
.screen-toggle {
 position:relative; inset:auto; z-index:1;
 align-self:end; margin:8px 12px 12px; flex-wrap:wrap;
}
.screen-toggle .play-label, .screen-toggle .pause-label { min-inline-size:min-content; }
.screen-card figcaption { padding-inline:clamp(8px, calc(40px - 1em), 24px); }

/* Only the desktop copy track has an intrinsic minimum. The film track can
   shrink; its percentage maximum resolves against that definite track. */
@media (width > 620px) {
 .hero { grid-template-columns:minmax(min-content,1.35fr) minmax(0,1fr); }
 .hero .film, .hero .film-halo { max-inline-size:100%; }
 /* Enlarged card headings wrap cards before splitting ordinary words.
    Image pixels do not impose a 480px intrinsic minimum on the card. */
 .screens { display:flex; flex-wrap:wrap; }
 .screen-card { flex:1 1 calc((100% - 48px) / 3); min-inline-size:min-content; max-inline-size:100%; }
 .screen-card .image-well { contain:inline-size; }
}
@media (width > 620px) and (max-width:900px) {
 .hero { grid-template-columns:minmax(min-content,1.1fr) minmax(0,max(260px,calc((100% - 32px) / 2.1))); }
}
@media (min-width:900px) and (max-width:1280px) {
 .hero.wrap {
  grid-template-columns:minmax(min-content, calc((100% - var(--aq-column-gap)) * 0.5238095238095238 + var(--aq-column-growth))) minmax(0,1fr);
 }
}
@media (max-width:620px) {
 /* Both minima participate. A full-width heading/store cannot give all its
    intrinsic width to the film and collapse the lead column to 5px. */
 .hero { grid-template-columns:minmax(min-content,.9fr) minmax(min-content,1.1fr); }
 .hero .film, .hero .film-halo { max-inline-size:190px; }
 .hero .store { flex-basis:100%; }
 .closing .store { flex-basis:calc(50% - 5px); }
 .proof-inner { display:flex; }
 .proof-inner > p { flex:1 0 100%; }
 /* Equal thirds match R4 when they fit; enlarged labels wrap whole groups. */
 .proof-inner > div { flex:1 0 calc((100% - 32px) / 3); }
 .screen-toggle { margin:0 6px 7px; }
 .screen-card figcaption { padding-inline:clamp(8px, calc(38px - 1em), 22px); }
}
@media (max-width:260px) {
 /* At 200% phone zoom the two intrinsic columns cannot both fit.
    Reflow existing areas without moving DOM nodes or keyboard stops. */
 .hero { grid-template-columns:minmax(0,1fr); grid-template-areas:"eyebrow" "headline" "film" "lead" "conversion"; }
 .closing .store { flex-basis:100%; }
 .screen-card figcaption { padding-inline:8px; }
}

/* R7: confine the halo alone. This window never contains media or controls. */
.hero { --aq-halo-gutter:39px; }
.film-frame {
 grid-area:film; position:relative; isolation:isolate;
 min-inline-size:0; align-self:start;
}
.film-frame > .film { margin-inline:auto; }
.film-halo-window {
 position:absolute; inset:0; z-index:-1; pointer-events:none;
 overflow:clip; overflow-clip-margin:var(--aq-halo-gutter);
}
/* Shared width/cap rules above keep this decorative box equal to the figure. */
.film-halo {
 position:absolute; top:0; left:50%; height:100%;
 transform:translateX(-50%); min-inline-size:0;
}
/* Wrap only the language value at its existing spaces, never inside 240/12. */
.proof-inner strong.proof-languages { white-space:normal; }
@media (max-width:900px) {
 .hero { --aq-halo-gutter:23px; }
}
@media (min-width:900px) and (max-width:1280px) {
 .hero { --aq-halo-gutter:calc(clamp(24px, calc(4.21052631579vw - 13.8947368421px), 40px) - 1px); }
}
@media (max-width:620px) {
 .hero { --aq-halo-gutter:17px; }
}
@media (max-width:360px) {
 .hero { --aq-halo-gutter:13px; }
}

/* Keep the halo's reference rectangle independent of its paint window. */
.film-halo-plane { position:absolute; inset:0; }

/* WebKit without overflow-clip-margin: expand only the empty paint window.
   The inset plane cancels that expansion, preserving the original ring size,
   centre and -16deg angle. Media, controls and focus are never descendants. */
@supports not (overflow-clip-margin:1px) {
 .film-halo-window {
  inset:calc(0px - var(--aq-halo-gutter));
  overflow:hidden;
 }
 .film-halo-plane { inset:var(--aq-halo-gutter); }
}