:root{--ii-shell-navy:#173f63;--ii-shell-navy-deep:#123552;--ii-shell-teal:#245d6a;--ii-shell-teal-muted:#34737d;--ii-shell-aqua:#62dfdc;--ii-shell-aqua-soft:#72e8e5;--ii-shell-blue:#39afe0;--ii-shell-pink:#e62972;--ii-shell-nav-accent:#ffe36d;--ii-shell-white:#fff;--ii-shell-display-font:"Luckiest Guy","Arial Rounded MT Bold",system-ui,sans-serif;--ii-shell-body-font:Inter,"Avenir Next",Avenir,"Segoe UI",system-ui,sans-serif;--ii-footer-art-rail:104px}.ii-site-global-shell{position:relative;isolation:isolate;min-height:100vh;background:var(--ii-shell-aqua-soft)}.ii-site-global-shell>.ii-site-page-background-wrap{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background-repeat:repeat-y;background-position:center top;background-size:100% auto;background-color:var(--ii-shell-aqua-soft)}.ii-site-global-shell>.ii-site-page-background-wrap>.ii-site-page-background{position:absolute;inset:0;width:100%;height:100%;min-width:100%;min-height:100%;max-width:none;object-fit:fill;object-position:center top;display:block;pointer-events:none;opacity:0}.ii-site-global-content-plane{position:relative;z-index:1;background:transparent}.ii-site-page{position:relative;isolation:isolate;min-height:var(--ii-studio-viewport-height,100vh);background:transparent}.ii-site-page-background-wrap{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}.ii-site-page-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block;pointer-events:none}.ii-site-header{position:relative;top:auto;z-index:1000;min-height:128px;padding:6px 22px;background:var(--ii-shell-aqua-soft);font-family:var(--ii-shell-display-font);box-shadow:0 6px 22px rgba(20,56,87,.16);overflow:hidden}.ii-site-header-frame{position:relative;z-index:1;width:min(100%,1680px);height:100%;margin-inline:auto;display:grid;grid-template-columns:minmax(190px,1fr) auto minmax(230px,1fr);align-items:center;column-gap:clamp(12px,1.35vw,24px)}.ii-site-header-background{position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;display:block;object-fit:cover;object-position:center bottom;pointer-events:none}.ii-site-header-frame>*{position:relative;z-index:1}.ii-site-header>*:not(.ii-site-header-background):not(.ii-site-header-frame){position:relative;z-index:1}.ii-site-brand{display:flex;align-items:center;justify-self:start;text-decoration:none}.ii-site-brand-image{display:block;width:clamp(145px,11vw,190px);height:auto;object-fit:contain}.ii-site-header-frame>[data-ii-frame-positioned="1"].ii-site-primary-nav{width:max-content}.ii-site-primary-nav{display:flex;justify-content:center;align-items:center;gap:clamp(12px,1.35vw,24px);margin:0}.ii-site-primary-nav a{text-decoration:none;color:var(--ii-shell-navy-deep);font-family:var(--ii-shell-display-font);font-size:clamp(18px,1.05vw,22px);font-weight:400;line-height:1.1;letter-spacing:.01em;padding:8px 3px;border-bottom:3px solid transparent;text-shadow:0 1px 0 rgba(255,255,255,.28)}.ii-site-primary-nav a:hover,.ii-site-primary-nav a.is-current{color:var(--ii-shell-navy);border-color:var(--ii-shell-nav-accent)}.ii-site-play{display:flex;align-items:center;justify-content:center;justify-self:end;text-decoration:none;background:transparent;border:0;padding:0;box-shadow:none}.ii-site-play-image{display:block;width:clamp(180px,12vw,230px);height:auto;object-fit:contain;transition:transform .18s ease,filter .18s ease}.ii-site-play:hover .ii-site-play-image,.ii-site-play:focus-visible .ii-site-play-image{transform:translateY(-2px) scale(1.025);filter:drop-shadow(0 5px 6px rgba(20,56,87,.2))}.ii-site-menu-toggle{display:none;border:0;background:transparent;font-size:28px;color:var(--ii-shell-navy-deep);cursor:pointer}.ii-site-footer{position:relative;z-index:10;padding:calc(var(--ii-footer-art-rail) + 24px) 30px 38px;background:var(--ii-shell-aqua);color:var(--ii-shell-teal);overflow:hidden;font-family:var(--ii-shell-body-font)}.ii-site-footer-frame{position:relative;z-index:1;width:min(100%,1180px);margin-inline:auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}.ii-site-footer-background{position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;display:block;object-fit:cover;object-position:center top;pointer-events:none}.ii-site-footer>*:not(.ii-site-footer-background):not(.ii-site-footer-frame){position:relative;z-index:1}.ii-site-footer-frame>div{display:flex;flex-direction:column;gap:9px}.ii-site-footer strong{font-family:var(--ii-shell-display-font);font-size:clamp(22px,1.25vw,28px);font-weight:400;line-height:1.1;letter-spacing:.01em;color:var(--ii-shell-navy-deep);text-shadow:0 1px 0 rgba(255,255,255,.25)}.ii-site-footer p,.ii-site-footer a{font-family:var(--ii-shell-body-font);font-size:clamp(15px,.95vw,18px);line-height:1.45}.ii-site-footer a{text-decoration:none;color:var(--ii-shell-teal);transition:color .16s ease,transform .16s ease}.ii-site-footer a:hover,.ii-site-footer a:focus-visible{color:var(--ii-shell-navy-deep);transform:translateY(-1px)}.ii-site-footer-brand p{margin:0;color:var(--ii-shell-teal)}.ii-site-copyright{grid-column:1/-1;border-top:1px solid rgba(23,63,99,.2);padding-top:18px;margin-top:8px;font-size:clamp(12px,.72vw,14px)!important;line-height:1.4;color:var(--ii-shell-teal-muted)}@media (max-width:767px), (min-width:768px) and (max-width:1024px) and (orientation:portrait){:root{--ii-footer-art-rail:86px}.ii-site-header{padding:7px 18px;min-height:106px}.ii-site-header-frame{position:static;display:flex;height:auto}.ii-site-header-frame>[data-ii-frame-positioned="1"]{position:static!important;left:auto!important;top:auto!important}.ii-site-header-frame>.ii-site-header-nav-slot[data-ii-frame-positioned="1"]{position:relative!important;display:flex!important;align-items:center;justify-content:center;margin-left:auto}.ii-site-header-frame>*{position:relative;z-index:1}.ii-site-primary-nav{z-index:2}.ii-site-menu-toggle{display:flex;align-items:center;justify-content:center;margin:0}.ii-site-primary-nav{display:none;position:absolute;left:50%;right:auto;top:100%;translate:-50% 0;width:min(420px,90vw)!important;box-sizing:border-box;flex-direction:column;gap:4px;padding:16px;border-radius:18px;background:rgba(114,232,229,.97);box-shadow:0 16px 34px rgba(20,56,87,.2)}.ii-site-header.is-menu-open{overflow:visible}.ii-site-header.is-menu-open .ii-site-primary-nav{display:flex}.ii-site-play{margin-left:0}.ii-site-footer{padding-top:calc(var(--ii-footer-art-rail) + 20px)}.ii-site-footer-frame{grid-template-columns:1fr 1fr}.ii-site-footer-brand{grid-column:1/-1}}@media (max-width:767px){:root{--ii-footer-art-rail:70px}.ii-site-header{padding:6px 10px;min-height:88px}.ii-site-header-frame{gap:8px}.ii-site-brand-image{width:112px}.ii-site-play-image{width:126px}.ii-site-footer{padding:calc(var(--ii-footer-art-rail) + 18px) 22px 30px}.ii-site-footer-frame{grid-template-columns:1fr}.ii-site-footer-brand{grid-column:auto}.ii-site-footer strong{font-size:22px}.ii-site-footer p,.ii-site-footer a{font-size:15px}}
.ii-site-global-content-end{display:block;width:100%;height:0;margin:0;padding:0;border:0;flex:0 0 auto;pointer-events:none}
/* 0.9.95: Desktop responsive protected-slot composition.
   Geometry owns the unscaled slot shell; responsive fit is a separate visual transform.
   Any future header slot that uses data-ii-header-slot-shell participates automatically. */
.ii-site-header-slot[data-ii-header-slot-shell="1"],.ii-site-header-nav-slot[data-ii-header-slot-shell="1"]{transform-origin:left center;will-change:transform}
.ii-site-header-nav-slot{display:flex;align-items:center;justify-content:center;width:max-content}
.ii-site-header-nav-slot>.ii-site-primary-nav{width:max-content}
@media (max-width:767px), (min-width:768px) and (max-width:1024px) and (orientation:portrait){.ii-site-header-nav-slot{display:flex}}

/* 0.9.96: single-authority Desktop expanded/collapsed header.
   These selectors intentionally outrank the legacy physical-width media queries when
   Studio forces the Desktop bucket, eliminating the hybrid Desktop+mobile state. */
.ii-site-header-frame[data-ii-header-layout="expanded"]>.ii-site-header-nav-slot{display:block!important}
.ii-site-header-frame[data-ii-header-layout="expanded"]>.ii-site-header-nav-slot>.ii-site-menu-toggle{display:none!important}
.ii-site-header-frame[data-ii-header-layout="expanded"] .ii-site-primary-nav{display:flex!important;position:static!important}
.ii-site-header-frame[data-ii-header-layout="collapsed"]{position:relative!important;display:flex!important;align-items:center;justify-content:space-between;height:100%!important}
.ii-site-header-frame[data-ii-header-layout="collapsed"]>.ii-site-header-nav-slot{display:flex!important;align-items:center;justify-content:center;min-width:48px;min-height:48px;z-index:3}
.ii-site-header-frame[data-ii-header-layout="collapsed"] .ii-site-menu-toggle{display:flex!important;align-items:center;justify-content:center;width:48px;height:48px;margin:0!important;padding:0;border-radius:14px;font-size:32px;line-height:1}
.ii-site-header-frame[data-ii-header-layout="collapsed"] .ii-site-primary-nav{display:none!important}
.ii-site-header-frame[data-ii-header-layout="collapsed"]>.ii-site-brand,
.ii-site-header-frame[data-ii-header-layout="collapsed"]>.ii-site-play{margin:0!important}
.ii-site-header[data-ii-header-layout="collapsed"],.ii-site-header:has(.ii-site-header-frame[data-ii-header-layout="collapsed"]){overflow:hidden}
.ii-site-header.is-menu-open:has(.ii-site-header-frame[data-ii-header-layout="collapsed"]){overflow:visible}
.ii-site-header.is-menu-open .ii-site-header-frame[data-ii-header-layout="collapsed"]>.ii-site-header-nav-slot{z-index:4}
.ii-site-header.is-menu-open .ii-site-header-frame[data-ii-header-layout="collapsed"] .ii-site-primary-nav{display:flex!important;position:absolute!important;left:50%!important;right:auto!important;top:100%!important;translate:-50% 0!important;width:min(420px,90vw)!important;box-sizing:border-box!important;flex-direction:column;gap:4px;padding:16px;border-radius:18px;background:rgba(114,232,229,.97);box-shadow:0 16px 34px rgba(20,56,87,.2)}
/* 0.9.99: Protected Slot v2. The authored slot is the geometry owner; artwork is content. */
.ii-site-brand[data-ii-protected-slot="1"]>.ii-site-brand-image,
.ii-site-play[data-ii-protected-slot="1"]>.ii-site-play-image{display:block;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain}
.ii-site-header-frame>[data-ii-protected-slot-root="1"]{position:absolute!important;left:0!important;top:0!important;width:100%!important;height:100%!important;pointer-events:none!important;overflow:visible!important}
.ii-site-header-frame>[data-ii-protected-slot-root="1"]>[data-ii-protected-slot="1"]{pointer-events:auto}
.ii-site-brand[data-ii-protected-slot="1"]{width:275px;height:125px}
.ii-site-play[data-ii-protected-slot="1"]{width:300px;height:125px}

/* 0.9.101: Protected Slot runtime contract hardening.
   The neutral custom root must not form a stacking context, and expanded Desktop
   scaling is expressed as a frame-state rule so later hydration cannot drop it. */
.ii-site-header-frame>[data-ii-protected-slot-root="1"]{z-index:auto!important;transform:none!important;translate:none!important}
.ii-site-header-frame[data-ii-header-layout="expanded"]>[data-ii-header-menu-slot],
.ii-site-header-frame[data-ii-header-layout="expanded"]>.ii-site-header-nav-slot{transform-origin:left center!important}

/* 0.9.102: protected custom plane is a neutral paint-order container.
   Its children own z-index; same-z custom artwork is inserted before built-in slots. */
.ii-site-header-frame>[data-ii-protected-slot-root="1"]{isolation:auto!important}

/* 0.9.103: custom Protected Header slots are direct chrome-frame children.
   The authoring root remains a neutral storage/discovery node outside the frame. */
.ii-site-header-frame>[data-ii-header-slot-shell="1"][data-ii-protected-slot-hoisted="1"]{pointer-events:auto!important}
[data-ii-protected-slot-root="1"][data-ii-studio-custom-root="site.shared.header"]:empty{position:absolute!important;left:0!important;top:0!important;width:0!important;height:0!important;pointer-events:none!important;overflow:visible!important}

/* 0.9.109: collapsed Desktop keeps start/end slots vertically centered and opens the disclosure panel from the centered menu trigger. */

/* 0.9.110: collapsed Desktop remains one continuously scaled protected composition. */
.ii-site-header-frame[data-ii-header-layout="collapsed"]>.ii-site-header-nav-slot{transform:none!important}

/* The Studio Header surface is the same fixed structural frame as the public
   Header. Oversized protected layers remain in the model but are clipped. */
.ii-shell-workspace-site-shared-header .ii-site-header[data-ii-studio-chrome="header"]{overflow:hidden}
/* 0.9.112: one Header geometry model at every breakpoint. The hamburger is a
   direct child of the inner Header frame, so its authored v4 left/top use the
   exact same containing block as Logo/Play/custom slots. HEADER_NAV remains the
   semantic/panel owner through data-ii-header-navigation-owner + aria-controls. */
.ii-site-header-frame>.ii-site-header-menu-slot{position:absolute;z-index:4}
.ii-site-header-frame[data-ii-header-layout="expanded"]>.ii-site-header-menu-slot{display:none!important}
.ii-site-header-frame[data-ii-header-layout="collapsed"]>.ii-site-header-menu-slot{display:flex!important;align-items:center;justify-content:center;width:48px;height:48px;margin:0!important;padding:0;border-radius:14px;font-size:32px;line-height:1}
.ii-site-header-frame[data-ii-header-layout="collapsed"]>.ii-site-header-nav-slot{position:absolute!important;left:50%!important;right:auto!important;top:50%!important;translate:-50% -50%!important;width:48px!important;height:48px!important;min-width:48px;min-height:48px;pointer-events:none}
.ii-site-header-frame[data-ii-header-layout="collapsed"]>.ii-site-header-nav-slot>.ii-site-primary-nav{pointer-events:auto}
.ii-site-header.is-menu-open .ii-site-header-frame[data-ii-header-layout="collapsed"]>.ii-site-header-nav-slot>.ii-site-primary-nav{display:flex!important;position:absolute!important;left:50%!important;right:auto!important;top:100%!important;translate:-50% 0!important;width:min(420px,90vw)!important}

/* 0.9.113: canonical Header geometry. Once Shared Shell resolves a layout, the
   inner frame is always the positioning containing block. Physical viewport
   media queries may choose typography/fallback presentation before JS, but they
   cannot switch v4 geometry back to static/flex coordinates. */
.ii-site-header-frame[data-ii-chrome-frame="header"][data-ii-header-layout]{position:relative!important;height:100%!important}
.ii-site-header-frame[data-ii-chrome-frame="header"][data-ii-header-layout]>[data-ii-header-v4-runtime-active="1"]{position:absolute!important}

/* 0.9.117: native Header components are composed by CSS alone.
   Logo, Navigation and Play are placed by the grid above and sized by their
   clamp() ladder. Only custom Protected Slots carry authored coordinates, and
   only those receive absolute positioning from the shared projector. */
.ii-site-header-frame[data-ii-chrome-frame="header"]>.ii-site-brand,
.ii-site-header-frame[data-ii-chrome-frame="header"]>.ii-site-play,
.ii-site-header-frame[data-ii-chrome-frame="header"]>.ii-site-header-nav-slot{position:relative}
.ii-site-header-frame[data-ii-header-layout="collapsed"]>.ii-site-brand{justify-self:start;margin-right:auto}
.ii-site-header-frame[data-ii-header-layout="collapsed"]>.ii-site-play{justify-self:end;margin-left:auto}
.ii-site-header-frame[data-ii-header-layout="collapsed"]>.ii-site-header-menu-slot{left:50%;top:50%;translate:-50% -50%;right:auto;bottom:auto}


/* 0.9.118 Stage A.1: native Header slots are responsive components, not fixed
   protected-slot canvases. The 0.9.99 275x125 / 300x125 boxes were authored-era
   geometry and overrode the original clamp() ladder even after 0.9.117 stopped
   projecting native coordinates. That made Tablet/Mobile crop giant Logo/Play
   artwork inside otherwise-correct 128/106/88 structural frames. Custom protected
   slots keep their own explicit geometry; these rules only normalize the built-ins. */
.ii-site-header-frame[data-ii-chrome-frame="header"]>[data-ii-component="site_pages.shared.header.logo"],
.ii-site-header-frame[data-ii-chrome-frame="header"]>[data-ii-component="site_pages.shared.header.play"]{width:auto!important;height:auto!important;max-width:none!important;max-height:none!important}
.ii-site-header-frame[data-ii-chrome-frame="header"]>[data-ii-component="site_pages.shared.header.logo"]>.ii-site-brand-image{width:clamp(145px,11vw,190px)!important;height:auto!important;max-width:100%!important;max-height:100%!important}
.ii-site-header-frame[data-ii-chrome-frame="header"]>[data-ii-component="site_pages.shared.header.play"]>.ii-site-play-image{width:clamp(180px,12vw,230px)!important;height:auto!important;max-width:100%!important;max-height:100%!important}
@media (max-width:767px){
  .ii-site-header-frame[data-ii-chrome-frame="header"]>[data-ii-component="site_pages.shared.header.logo"]>.ii-site-brand-image{width:112px!important}
  .ii-site-header-frame[data-ii-chrome-frame="header"]>[data-ii-component="site_pages.shared.header.play"]>.ii-site-play-image{width:126px!important}
}

/* 0.9.121: the open disclosure panel must escape the Header, and nothing else may
   re-clip it. The Header's structural height still comes from the frame model, so
   letting paint escape does not violate the protected-slot contract — that contract
   forbids a child ENLARGING the Header, which overflow cannot do. */
.ii-site-header.is-menu-open,
.ii-site-header.is-menu-open[data-ii-header-layout],
.ii-site-header.is-menu-open:has(.ii-site-header-frame[data-ii-header-layout]){overflow:visible!important}
.ii-site-header.is-menu-open .ii-site-header-frame{overflow:visible!important}
.ii-site-header.is-menu-open .ii-site-header-nav-slot{overflow:visible!important}
/* The panel outranks every sibling protected slot inside the Header. */
.ii-site-header.is-menu-open .ii-site-primary-nav{z-index:60!important}

/* 0.9.131: Homepage is not a Universal Content Shell consumer. Its long-standing
   Studio composition lives in one dedicated scene host between linked Universal
   Header/Footer siblings. This removes the circular "outer document changes inner
   scene height" relationship introduced by wrapping Homepage in the shared shell. */
[data-ii-studio-external-chrome="1"]{visibility:visible!important}
/* 0.9.132: the Homepage scene height is authored design state, emitted inline on
   the scene host by SharedShell from ii_studio_authored_scene_height. The former
   fallback chain resolved to 100vh because --ii-studio-scene-height and
   --ii-studio-viewport-height are written only by Studio's admin-only
   world-viewport.js, so no public page ever set either one. The remaining 1080px
   fallback is a design constant, not a measurement: never a viewport unit, never
   Header + content + Footer, never scrollHeight. */
.ii-homepage-studio-scene-host[data-ii-studio-scene-host="1"]{display:block!important;position:relative!important;width:100%!important;min-width:0!important;max-width:none!important;height:var(--ii-studio-scene-height,1080px)!important;min-height:var(--ii-studio-scene-height,1080px)!important;max-height:none!important;margin:0!important;padding:0!important;overflow:visible!important;background:transparent!important;box-sizing:border-box!important}
.ii-homepage-studio-scene-host[data-ii-studio-scene-host="1"]>.ii-studio-custom-component-root[data-ii-studio-custom-root="site.homepage"]{display:block!important;position:absolute!important;left:0!important;top:0!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;overflow:visible!important}
/* 0.9.237: retired. --ii-bg-logical-paint-height could exceed the content
   handoff and clip the artwork before its final source row; the paint box is
   now sized once, from --ii-studio-page-content-bottom. */

/* 0.9.133 — page background fill modes inside the authored Homepage scene.
   The scene box is authored design state; these rules only decide how the
   artwork fills it. 'scene' is the default and is what shipped before, so its
   rule is intentionally a no-op restatement for clarity. Zero crop in scene
   mode requires the box aspect to equal the artwork aspect, which is what
   Studio's Fit to artwork button solves for. */
/* 0.9.237: retired. Studio's critical CSS is the single fit authority. */
/* 0.9.237: the last Site Pages fit/focal declaration for the Studio page
   background is retired, completing the single-authority rule.

   This rule implemented the authored 'contain' scene fit. Two problems: it keyed
   off data-ii-scene-fit, which was the SERVER-rendered attribute and therefore
   Desktop's value on every device; and it hard-coded object-position:center
   center, so it overrode any authored focal point exactly as the retired
   writers did.

   Site Pages is a shell. It sizes the paint box (see the 0.9.236 block below)
   and owns the footer seam. It does not decide how artwork fills that box.
   object-fit and object-position for .is-page-background now come from exactly
   one place: PageComponentRegistry's published critical CSS.

   KNOWN GAP, deliberately visible rather than papered over: that critical CSS
   currently emits cover unconditionally, so an authored 'contain' fit has no
   renderer after this change. The Homepage is authored 'contain' on Desktop but
   was never rendered as such -- the dev.165 runtime forced fill over it -- so no
   live appearance changes. Either implement contain in Studio's critical CSS or
   drop it from SceneHeightRegistry's allowed fit values; do not reintroduce a
   second writer here. */


/* 0.9.151: one expanded Header composition from Desktop through Tablet.
   Native Logo/Nav/Play and custom protected artwork share the same width-derived
   composition scale. The mobile breakpoint alone switches to disclosure mode. */
.ii-site-header-frame[data-ii-header-layout="expanded"]{grid-template-columns:var(--ii-header-responsive-logo-width,190px) minmax(0,1fr) var(--ii-header-responsive-play-width,230px)!important;column-gap:var(--ii-header-responsive-gap,24px)!important}
.ii-site-header-frame[data-ii-header-layout="expanded"]>[data-ii-component="site_pages.shared.header.logo"]>.ii-site-brand-image{width:var(--ii-header-responsive-logo-width,190px)!important;height:auto!important;max-width:none!important}
.ii-site-header-frame[data-ii-header-layout="expanded"]>[data-ii-component="site_pages.shared.header.play"]>.ii-site-play-image{width:var(--ii-header-responsive-play-width,230px)!important;height:auto!important;max-width:none!important}
.ii-site-header-frame[data-ii-header-layout="expanded"] .ii-site-primary-nav{gap:var(--ii-header-responsive-gap,24px)!important;min-width:0!important;max-width:100%!important;white-space:nowrap}
.ii-site-header-frame[data-ii-header-layout="expanded"] .ii-site-primary-nav a{font-size:var(--ii-header-responsive-nav-font,22px)!important;padding-top:var(--ii-header-responsive-nav-pad-y,8px)!important;padding-bottom:var(--ii-header-responsive-nav-pad-y,8px)!important}


/* 0.9.154: Header Bar endcap composition.
   The public responsive composition widens the decorative bar to 275..1405 in
   the 1680 design frame. Logo and Play remain centered on those exact two ends,
   while Primary Navigation owns the protected middle lane. */
.ii-site-header-frame[data-ii-header-layout="expanded"]>[data-ii-name="Header Bar"]{object-fit:fill!important}
.ii-site-header-frame[data-ii-header-layout="expanded"]{display:flex!important;align-items:center!important;justify-content:center!important;grid-template-columns:none!important;column-gap:0!important}
.ii-site-header-frame[data-ii-header-layout="expanded"]>[data-ii-component="site_pages.shared.header.logo"]{position:absolute!important;left:var(--ii-header-responsive-logo-left,180px)!important;right:auto!important;top:50%!important;bottom:auto!important;translate:0 -50%!important;margin:0!important;z-index:4!important}
.ii-site-header-frame[data-ii-header-layout="expanded"]>[data-ii-component="site_pages.shared.header.play"]{position:absolute!important;left:auto!important;right:var(--ii-header-responsive-play-right,160px)!important;top:50%!important;bottom:auto!important;translate:0 -50%!important;margin:0!important;z-index:4!important}
.ii-site-header-frame[data-ii-header-layout="expanded"]>.ii-site-header-nav-slot{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;translate:none!important;margin:0!important;justify-self:auto!important;z-index:3!important;max-width:calc(100% - var(--ii-header-responsive-logo-width,190px) - var(--ii-header-responsive-play-width,230px) - (2 * var(--ii-header-responsive-gap,24px)))!important}


/* 0.9.153: the Header stays expanded only while the real no-wrap Navigation fits
   between the Logo and Play endcaps. Runtime measurement flips this attribute
   before overlap; Mobile remains a hard collapsed floor. */
.ii-site-header-frame[data-ii-header-layout="collapsed"]>[data-ii-name="Header Bar"]{display:none!important}


/* 0.9.154: shared-chrome seam + wider responsive Header composition.
   A 2px visual overlap removes sub-pixel raster seams where an unscaled Header/
   Footer meets a transformed Studio canvas. The overlap is flow-owned and is
   accounted for by Studio's external-chrome metrics in dev.142. */
:root{--ii-shared-chrome-seam-overlap:2px}
.ii-site-header{margin-bottom:calc(-1 * var(--ii-shared-chrome-seam-overlap))!important}
.ii-site-footer{margin-top:calc(-1 * var(--ii-shared-chrome-seam-overlap))!important}
.ii-site-header-frame[data-ii-header-layout="expanded"]>[data-ii-name="Header Bar"]{object-fit:fill!important}
.ii-site-header-frame[data-ii-header-layout="expanded"]>.ii-site-header-nav-slot{max-width:none!important}


/* 0.9.155: simplify the Universal Header back to one native composition.
   Header Bar is retired; Logo | Navigation | Play own the expanded frame.
   No negative chrome overlap is used. */
:root{--ii-shared-chrome-seam-overlap:0px}
.ii-site-header{margin-bottom:0!important}
.ii-site-footer{margin-top:0!important}
.ii-site-header-frame>[data-ii-name="Header Bar"]{display:none!important}
.ii-site-header-frame[data-ii-header-layout="expanded"]{display:grid!important;grid-template-columns:var(--ii-header-responsive-logo-width,190px) minmax(0,1fr) var(--ii-header-responsive-play-width,230px)!important;align-items:center!important;justify-content:normal!important;column-gap:var(--ii-header-responsive-gap,24px)!important}
.ii-site-header-frame[data-ii-header-layout="expanded"]>[data-ii-component="site_pages.shared.header.logo"]{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;translate:none!important;margin:0!important;justify-self:start!important;z-index:4!important}
.ii-site-header-frame[data-ii-header-layout="expanded"]>[data-ii-component="site_pages.shared.header.play"]{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;translate:none!important;margin:0!important;justify-self:end!important;z-index:4!important}
.ii-site-header-frame[data-ii-header-layout="expanded"]>.ii-site-header-nav-slot{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;translate:none!important;margin:0!important;justify-self:center!important;z-index:3!important;min-width:0!important;max-width:100%!important}

/* 0.9.237: retired. This pinned object-position:center center, which
   overrode every authored --ii-bg-focal-x/y. Fit and focal are now owned
   solely by Studio's published critical CSS. */

/* 0.9.157 - Universal footer refresh */
.ii-site-footer{padding:calc(var(--ii-footer-art-rail) + 26px) 30px 28px;background:#2f6f90;color:#fff}
.ii-site-footer-frame{width:min(100%,1320px);grid-template-columns:minmax(0,1.55fr) minmax(180px,.75fr) minmax(260px,.9fr);column-gap:clamp(34px,5vw,88px);row-gap:24px;align-items:start}
.ii-site-footer-frame>div,.ii-site-footer-frame>nav{display:flex;flex-direction:column;gap:8px;min-width:0}
.ii-site-footer strong{color:#a9e7ff;font-size:clamp(23px,1.4vw,31px);letter-spacing:.025em;text-shadow:0 2px 0 rgba(10,47,77,.18);margin-bottom:10px}
.ii-site-footer p,.ii-site-footer a{color:#fff;font-size:clamp(14px,.88vw,17px);font-weight:600}
.ii-site-footer a:hover,.ii-site-footer a:focus-visible{color:#ffd13b;transform:translateY(-1px)}
.ii-site-footer-brand{gap:14px!important}
.ii-site-footer-logo{display:block;width:clamp(160px,13vw,220px);height:auto;max-height:105px;object-fit:contain;object-position:left center}
.ii-site-footer-description{max-width:560px;margin:0;white-space:normal;font-weight:500!important;line-height:1.42!important}
.ii-site-footer-explore a{width:max-content;max-width:100%;font-family:var(--ii-shell-display-font);font-size:clamp(16px,1vw,20px);font-weight:400;line-height:1.15;letter-spacing:.01em}
.ii-site-footer-social{align-items:flex-start}
.ii-site-footer-social-icons{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:2px 0 12px}
.ii-site-footer-social-link{display:grid!important;place-items:center;width:48px;height:48px;border-radius:999px;background:#ffc532;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}
.ii-site-footer-social-link:hover,.ii-site-footer-social-link:focus-visible{transform:translateY(-2px) scale(1.04)!important;filter:brightness(1.04);box-shadow:0 8px 18px rgba(10,47,77,.18)}
.ii-site-footer-social-link img{display:block;width:27px;height:27px;object-fit:contain;max-width:none}
.ii-site-footer-esrb{display:block;width:58px;height:auto;max-height:92px;object-fit:contain;margin-top:2px}
.ii-site-footer-bottom{grid-column:1/-1!important;display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;border-top:1px solid rgba(255,255,255,.22);padding-top:18px;margin-top:4px}
.ii-site-footer-legal-links{grid-column:2;display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;padding:8px 18px;border-radius:999px;background:#55c8ef}
.ii-site-footer-legal-links a{color:#173f63;font-size:13px;font-weight:800;line-height:1.1}
.ii-site-footer-legal-links a:hover,.ii-site-footer-legal-links a:focus-visible{color:#0d2f4b}
.ii-site-copyright{grid-column:1/-1!important;border-top:0!important;padding-top:0!important;margin:0!important;text-align:center;font-size:11px!important;color:rgba(255,255,255,.88)!important}
@media (max-width:1024px){.ii-site-footer-frame{grid-template-columns:minmax(0,1.35fr) minmax(180px,.65fr);column-gap:46px}.ii-site-footer-social{grid-column:1/-1;display:grid!important;grid-template-columns:auto 1fr;column-gap:24px;align-items:center}.ii-site-footer-social>strong{grid-column:1/-1}.ii-site-footer-social-icons{margin:0}.ii-site-footer-esrb{margin:0}.ii-site-footer-bottom{grid-column:1/-1!important}}
@media (max-width:767px){.ii-site-footer{padding:calc(var(--ii-footer-art-rail) + 18px) 22px 24px}.ii-site-footer-frame{grid-template-columns:1fr;gap:30px}.ii-site-footer-brand,.ii-site-footer-social,.ii-site-footer-bottom{grid-column:auto!important}.ii-site-footer-logo{width:175px}.ii-site-footer-description{max-width:none}.ii-site-footer-social{display:flex!important;align-items:flex-start}.ii-site-footer-bottom{display:flex!important;flex-direction:column;align-items:stretch;gap:12px}.ii-site-footer-legal-links{justify-content:center;border-radius:18px}.ii-site-copyright{text-align:center}}

/* 0.9.158 - Header/footer contrast + footer alignment polish */
:root{--ii-shell-chrome-ink:#18536f;--ii-shell-chrome-ink-strong:#123f58}
.ii-site-header{color:var(--ii-shell-chrome-ink)}
.ii-site-primary-nav a{color:var(--ii-shell-chrome-ink)!important;text-shadow:0 1px 0 rgba(255,255,255,.65),0 1px 3px rgba(18,63,88,.12)}
.ii-site-primary-nav a:hover,.ii-site-primary-nav a.is-current{color:var(--ii-shell-chrome-ink-strong)!important}
.ii-site-menu-toggle{color:var(--ii-shell-chrome-ink-strong)!important}
.ii-site-footer{color:var(--ii-shell-chrome-ink);background:#65c7e8}
.ii-site-footer strong{color:var(--ii-shell-chrome-ink-strong)!important;text-shadow:0 1px 0 rgba(255,255,255,.72),0 1px 3px rgba(18,63,88,.12)}
.ii-site-footer p,.ii-site-footer a,.ii-site-footer-brand p{color:var(--ii-shell-chrome-ink)!important;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.ii-site-footer a:hover,.ii-site-footer a:focus-visible{color:#0d3850!important}
.ii-site-footer-brand{align-items:center!important;text-align:center}
.ii-site-footer-logo{object-position:center center!important;margin-inline:auto}
.ii-site-footer-description{margin-inline:auto!important;text-align:center;max-width:590px}
.ii-site-footer-social{align-items:stretch!important}
.ii-site-footer-social-icons{justify-content:flex-start}
.ii-site-footer-esrb{width:clamp(105px,8vw,138px)!important;max-height:none!important;margin:14px 0 0 auto!important;align-self:flex-end}
.ii-site-footer-legal-links{background:rgba(75,190,229,.9)}
.ii-site-footer-legal-links a{color:var(--ii-shell-chrome-ink-strong)!important;text-shadow:none}
.ii-site-copyright{color:var(--ii-shell-chrome-ink)!important;text-shadow:0 1px 0 rgba(255,255,255,.5)}
@media (max-width:1024px){.ii-site-footer-social{align-items:stretch!important}.ii-site-footer-esrb{width:112px!important;margin-left:auto!important}}
@media (max-width:767px){.ii-site-footer-brand{align-items:center!important}.ii-site-footer-social{align-items:center!important;text-align:center}.ii-site-footer-social-icons{justify-content:center}.ii-site-footer-esrb{width:104px!important;margin:12px auto 0!important;align-self:center}}

/* 0.9.160 - corrected white/blue chrome typography and unframed social artwork */
:root{
  --ii-shell-outline-blue:#075f9f;
  --ii-shell-outline-blue-dark:#034d84;
}

/* Match the page's bright white lettering with a crisp saturated-blue edge. */
.ii-site-primary-nav a,
.ii-site-footer strong,
.ii-site-footer p,
.ii-site-footer a,
.ii-site-footer-brand p,
.ii-site-copyright{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  -webkit-text-stroke:1px var(--ii-shell-outline-blue)!important;
  paint-order:stroke fill;
  text-shadow:
    -1.25px -1.25px 0 var(--ii-shell-outline-blue),
     1.25px -1.25px 0 var(--ii-shell-outline-blue),
    -1.25px  1.25px 0 var(--ii-shell-outline-blue),
     1.25px  1.25px 0 var(--ii-shell-outline-blue),
     0 2px 2px rgba(3,77,132,.20)!important;
}
.ii-site-primary-nav a:hover,
.ii-site-primary-nav a.is-current,
.ii-site-footer a:hover,
.ii-site-footer a:focus-visible{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  -webkit-text-stroke:1.15px var(--ii-shell-outline-blue-dark)!important;
}
.ii-site-footer strong{font-weight:400!important}
.ii-site-footer-description{font-weight:500!important}

/* Do not manufacture circles, gold fills, rims, borders or clipping around supplied media-library icons. */
.ii-site-footer-social-link{
  display:block!important;
  width:52px!important;
  height:52px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:0!important;
  overflow:visible!important;
}
.ii-site-footer-social-link:hover,
.ii-site-footer-social-link:focus-visible{
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  transform:translateY(-2px)!important;
}
.ii-site-footer-social-link img{
  display:block!important;
  width:52px!important;
  height:52px!important;
  max-width:none!important;
  object-fit:contain!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}
.ii-site-footer-social{align-items:center!important;text-align:center}
.ii-site-footer-social-icons{
  justify-content:center!important;
  flex-wrap:nowrap;
  gap:12px;
  margin:2px auto 10px!important;
}
.ii-site-footer-esrb{
  display:block!important;
  width:clamp(118px,8.5vw,150px)!important;
  height:auto!important;
  max-height:none!important;
  margin:12px auto 0!important;
  align-self:center!important;
}
.ii-site-footer-legal-links{
  background:rgba(50,169,221,.66)!important;
  border:1px solid rgba(255,255,255,.44);
}
.ii-site-footer-legal-links a{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
@media (max-width:1024px){
  .ii-site-footer-social{display:flex!important;align-items:center!important}
  .ii-site-footer-social-icons{margin-inline:auto!important}
  .ii-site-footer-esrb{width:124px!important;margin:10px auto 0!important}
}
@media (max-width:767px){
  .ii-site-footer-social-icons{flex-wrap:wrap;max-width:310px}
  .ii-site-footer-social-link,.ii-site-footer-social-link img{width:46px!important;height:46px!important}
  .ii-site-footer-esrb{width:112px!important}
}


/* 0.9.161 - centered stacked footer */
@media (max-width:1024px){
  .ii-site-footer-frame{justify-items:center!important;text-align:center!important}
  .ii-site-footer-frame>div,.ii-site-footer-frame>nav{width:100%!important;align-items:center!important;text-align:center!important}
  .ii-site-footer-brand,.ii-site-footer-explore,.ii-site-footer-social,.ii-site-footer-bottom{justify-self:center!important;text-align:center!important}
  .ii-site-footer-explore a,.ii-site-footer-explore strong{align-self:center!important;text-align:center!important}
  .ii-site-footer-description{margin-left:auto!important;margin-right:auto!important;text-align:center!important}
  .ii-site-footer-social{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important}
  .ii-site-footer-social-icons{justify-content:center!important;margin-left:auto!important;margin-right:auto!important}
  .ii-site-footer-esrb{align-self:center!important;margin-left:auto!important;margin-right:auto!important}
  .ii-site-footer-bottom{align-items:center!important}
  .ii-site-footer-legal-links{align-self:center!important;margin-left:auto!important;margin-right:auto!important}
  .ii-site-copyright{width:100%!important;text-align:center!important}
}
@media (max-width:767px){
  .ii-site-footer{padding-left:18px!important;padding-right:18px!important}
  .ii-site-footer-frame{gap:34px!important}
  .ii-site-footer-explore{align-items:center!important}
  .ii-site-footer-explore a{display:block!important;width:100%!important;text-align:center!important}
  .ii-site-footer-social-icons{max-width:330px!important;flex-wrap:wrap!important}
  .ii-site-footer-legal-links{width:min(100%,360px)!important;box-sizing:border-box!important}
}

/* 0.9.162: Homepage component geometry is Studio-owned at every breakpoint.
   Do not add viewport max-width/overflow rules here: the authoritative runtime
   must be the only writer of the published component boxes. */


/* 0.9.165 - Homepage/Footer matched-width seam + blended art extension.
   The Studio Homepage canvas scales its entire authored composition to the real
   layout viewport. The continuation art must therefore use the footer's exact
   rendered width too. 0.9.164 incorrectly imposed a 1920px minimum, which made
   the two halves use different scales below 1920px.

   The protected <img> is the truth layer at the seam: full footer width, natural
   aspect ratio, centered top. If responsive footer content outgrows that image,
   the same replaceable footer artwork is reused underneath as an aspect-preserved
   cover layer. The bottom of the truth layer softly masks into that fill so no
   flat-color band or second hard image seam is exposed. */
.ii-site-footer[data-ii-homepage-footer-seam-lock="1"]{
  margin-top:-2px!important;
  isolation:isolate;
  background:linear-gradient(180deg,#a9e5ff 0%,#7ed3f6 45%,#56bee9 100%)!important;
}
.ii-site-footer[data-ii-homepage-footer-seam-lock="1"]::before{
  content:"";
  position:absolute;
  inset:-8px;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.02) 0%,rgba(255,255,255,.10) 58%,rgba(255,255,255,.16) 100%),
    var(--ii-homepage-footer-art-url,none);
  background-repeat:no-repeat,no-repeat;
  background-size:cover,cover;
  background-position:center center,center center;
  filter:saturate(.92) brightness(1.035) blur(.35px);
  transform:scale(1.012);
  transform-origin:center center;
}
.ii-site-footer[data-ii-homepage-footer-seam-lock="1"]>.ii-site-footer-background{
  position:absolute!important;
  inset:auto!important;
  left:0!important;
  right:auto!important;
  top:0!important;
  bottom:auto!important;
  width:100%!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center top!important;
  transform:none!important;
  translate:none!important;
  scale:none!important;
  rotate:none!important;
  transform-origin:center top!important;
  z-index:1!important;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 74%,rgba(0,0,0,.96) 80%,rgba(0,0,0,.78) 87%,rgba(0,0,0,.38) 95%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 74%,rgba(0,0,0,.96) 80%,rgba(0,0,0,.78) 87%,rgba(0,0,0,.38) 95%,transparent 100%);
}
.ii-site-footer[data-ii-homepage-footer-seam-lock="1"]>.ii-site-footer-frame{
  position:relative;
  z-index:2;
}

/* Keep the responsive footer compact enough that the art extension is a safety
   net rather than the dominant visual surface. Desktop composition is unchanged. */
@media (max-width:1024px){
  .ii-site-footer[data-ii-homepage-footer-seam-lock="1"]{
    padding-bottom:20px!important;
  }
  .ii-site-footer[data-ii-homepage-footer-seam-lock="1"]>.ii-site-footer-frame{
    row-gap:22px!important;
  }
  .ii-site-footer[data-ii-homepage-footer-seam-lock="1"] .ii-site-footer-brand{
    gap:9px!important;
  }
  .ii-site-footer[data-ii-homepage-footer-seam-lock="1"] .ii-site-footer-description{
    line-height:1.34!important;
  }
  .ii-site-footer[data-ii-homepage-footer-seam-lock="1"] .ii-site-footer-social-icons{
    margin-bottom:6px!important;
  }
  .ii-site-footer[data-ii-homepage-footer-seam-lock="1"] .ii-site-footer-esrb{
    margin-top:4px!important;
  }
  .ii-site-footer[data-ii-homepage-footer-seam-lock="1"] .ii-site-footer-bottom{
    padding-top:12px!important;
    margin-top:0!important;
  }
}
@media (max-width:767px){
  .ii-site-footer[data-ii-homepage-footer-seam-lock="1"]{
    padding-top:calc(var(--ii-footer-art-rail) + 12px)!important;
    padding-bottom:16px!important;
  }
  .ii-site-footer[data-ii-homepage-footer-seam-lock="1"]>.ii-site-footer-frame{
    gap:20px!important;
  }
  .ii-site-footer[data-ii-homepage-footer-seam-lock="1"] .ii-site-footer-logo{
    width:162px!important;
  }
  .ii-site-footer[data-ii-homepage-footer-seam-lock="1"] .ii-site-footer-description{
    line-height:1.30!important;
  }
  .ii-site-footer[data-ii-homepage-footer-seam-lock="1"] .ii-site-footer-explore{
    gap:5px!important;
  }
  .ii-site-footer[data-ii-homepage-footer-seam-lock="1"] .ii-site-footer-social{
    gap:6px!important;
  }
  .ii-site-footer[data-ii-homepage-footer-seam-lock="1"] .ii-site-footer-social-icons{
    gap:9px!important;
    margin:0 auto 3px!important;
  }
  .ii-site-footer[data-ii-homepage-footer-seam-lock="1"] .ii-site-footer-esrb{
    width:104px!important;
    margin:3px auto 0!important;
  }
  .ii-site-footer[data-ii-homepage-footer-seam-lock="1"] .ii-site-footer-bottom{
    gap:6px!important;
    padding-top:9px!important;
  }
  .ii-site-footer[data-ii-homepage-footer-seam-lock="1"] .ii-site-footer-legal-links{
    padding:6px 12px!important;
  }
}

/* 0.9.166 launch hardening: assemble the public Homepage behind a first-paint
   veil instead of letting individual Studio layers pop in one-by-one on slow
   connections. The veil is progressive enhancement: it is only active when the
   tiny wp_head bootstrap has confirmed JavaScript is available. Studio authoring
   previews are deliberately not gated. */
html.ii-site-pages-js .ii-homepage-studio-scene-host[data-ii-homepage-load-gate="1"]{
  isolation:isolate;
}
html.ii-site-pages-js .ii-homepage-studio-scene-host[data-ii-homepage-load-gate="1"]::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2147480000;
  pointer-events:none;
  opacity:1;
  visibility:visible;
  background:
    radial-gradient(ellipse at 8% 20%,rgba(255,255,255,.93) 0 8%,rgba(255,255,255,.44) 15%,transparent 29%),
    radial-gradient(ellipse at 88% 17%,rgba(255,255,255,.90) 0 9%,rgba(255,255,255,.40) 17%,transparent 31%),
    radial-gradient(ellipse at 50% 92%,rgba(255,255,255,.33) 0 13%,transparent 34%),
    linear-gradient(180deg,#168eea 0%,#22a7ed 48%,#69cdf1 100%);
  transition:opacity .34s ease,visibility 0s linear .34s;
  will-change:opacity;
}
html.ii-site-pages-js .ii-homepage-studio-scene-host[data-ii-homepage-load-state="ready"]::after,
html.ii-site-pages-js .ii-homepage-studio-scene-host[data-ii-homepage-load-state="degraded"]::after{
  opacity:0;
  visibility:hidden;
}
@media (prefers-reduced-motion:reduce){
  html.ii-site-pages-js .ii-homepage-studio-scene-host[data-ii-homepage-load-gate="1"]::after{
    transition:none;
  }
}


/* 0.9.233 Homepage awards: quieter credibility lockup.
   Desktop/tablet keep the awards in the low-conflict upper-left corner, with
   the Winner badge as the primary mark and the two supporting awards below it.
   Mobile becomes a compact three-badge strip so the awards do not dominate the
   hero or compete with the Play Now CTA. */
/* 0.9.238 - PRE-MIGRATION FALLBACK ONLY.
   Studio 2.7.0-dev.168 promotes the three award badges into ordinary
   studio.custom.site.homepage.image.* components with authored per-breakpoint
   geometry. Once HomepageAwardsMigration reports complete, SharedShell stops
   emitting .ii-homepage-awards entirely and every rule below stops matching.

   The block is retained deliberately rather than deleted: if the migration has
   not run, or could not run, the awards still render in their original
   positions instead of vanishing. Do not add rules here for the migrated
   components -- their geometry is authored in Studio.

   Note for anyone reading these values as a source of truth: they are clamp()
   on vw units, so they track the VIEWPORT while every Studio object tracks the
   canvas transform. That mismatch is exactly why the awards drifted relative to
   authored objects, and why the migration seeds from MEASURED rendered
   positions rather than from these declarations. */
.ii-homepage-studio-scene-host[data-ii-studio-scene-host="1"] > .ii-homepage-awards{
  position:absolute!important;
  left:clamp(34px,2.35vw,46px)!important;
  top:clamp(24px,1.75vw,34px)!important;
  z-index:2147479000!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  justify-items:center!important;
  align-items:start!important;
  gap:clamp(7px,.55vw,10px)!important;
  width:clamp(194px,12.2vw,228px)!important;
  height:auto!important;
  max-width:228px!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  pointer-events:none!important;
}
.ii-homepage-awards .ii-homepage-award{
  display:block!important;
  height:auto!important;
  max-width:100%!important;
  object-fit:contain!important;
  filter:drop-shadow(0 2px 3px rgba(0,29,61,.16));
}
.ii-homepage-awards .ii-homepage-award-winner{
  order:1!important;
  width:clamp(154px,9.8vw,182px)!important;
  max-width:182px!important;
  aspect-ratio:1/1!important;
  justify-self:center!important;
}
.ii-homepage-awards .ii-homepage-awards-secondary{
  order:2!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  align-items:center!important;
  justify-items:center!important;
  gap:clamp(8px,.6vw,11px)!important;
  width:100%!important;
  min-width:0!important;
}
.ii-homepage-awards .ii-homepage-award-web-game{
  width:100%!important;
}
.ii-homepage-awards .ii-homepage-award-mobile-games{
  width:100%!important;
}

/* Tablet landscape / compact desktop: reduce visual weight before the hero
   begins to crowd the upper-left corner. */
@media (max-width:1180px){
  .ii-homepage-studio-scene-host[data-ii-studio-scene-host="1"] > .ii-homepage-awards{
    left:24px!important;
    top:22px!important;
    width:196px!important;
    max-width:196px!important;
    gap:8px!important;
  }
  .ii-homepage-awards .ii-homepage-award-winner{
    width:150px!important;
    max-width:150px!important;
  }
  .ii-homepage-awards .ii-homepage-awards-secondary{gap:8px!important;}
}

/* Tablet portrait: same hierarchy, smaller and tucked farther into the corner. */
@media (max-width:900px){
  .ii-homepage-studio-scene-host[data-ii-studio-scene-host="1"] > .ii-homepage-awards{
    left:18px!important;
    top:18px!important;
    width:174px!important;
    max-width:174px!important;
    gap:7px!important;
  }
  .ii-homepage-awards .ii-homepage-award-winner{
    width:132px!important;
    max-width:132px!important;
  }
  .ii-homepage-awards .ii-homepage-awards-secondary{gap:7px!important;}
}

/* Phone: one compact horizontal award strip. The Winner badge remains the
   focal mark in the middle while the two supporting awards sit either side. */
@media (max-width:767px){
  .ii-homepage-studio-scene-host[data-ii-studio-scene-host="1"] > .ii-homepage-awards{
    left:50%!important;
    right:auto!important;
    top:12px!important;
    width:auto!important;
    max-width:calc(100% - 24px)!important;
    grid-template-columns:68px 76px 74px!important;
    align-items:center!important;
    justify-items:center!important;
    gap:8px!important;
    transform:translateX(-50%)!important;
  }
  .ii-homepage-awards .ii-homepage-awards-secondary{
    display:contents!important;
  }
  .ii-homepage-awards .ii-homepage-award{
    width:100%!important;
    max-width:100%!important;
    max-height:76px!important;
    align-self:center!important;
  }
  .ii-homepage-awards .ii-homepage-award-web-game{
    grid-column:1!important;
    grid-row:1!important;
  }
  .ii-homepage-awards .ii-homepage-award-winner{
    grid-column:2!important;
    grid-row:1!important;
    width:76px!important;
    max-width:76px!important;
    aspect-ratio:1/1!important;
  }
  .ii-homepage-awards .ii-homepage-award-mobile-games{
    grid-column:3!important;
    grid-row:1!important;
  }
}
@media (max-width:420px){
  .ii-homepage-studio-scene-host[data-ii-studio-scene-host="1"] > .ii-homepage-awards{
    top:10px!important;
    grid-template-columns:60px 70px 66px!important;
    gap:6px!important;
    max-width:calc(100% - 16px)!important;
  }
  .ii-homepage-awards .ii-homepage-award-winner{
    width:70px!important;
    max-width:70px!important;
  }
}

/* 0.9.171 - Homepage/Footer literal-cut seam contract.
   The Homepage and Footer continuation artwork are authored from matching-width
   source files. A cover fit cannot preserve their shared cut line because it
   crops source pixels whenever the scene aspect ratio differs from the image.
   Preserve every source column/row in the Homepage paint box so its literal
   bottom edge meets the Footer continuation's literal top edge. */
/* 0.9.237: the fill/center-top half of the 0.9.171 seam contract is retired.
   Preserving every source column by stretching cost the artwork's aspect ratio
   on every portrait view (measured distortion 0.262 on Mobile). The seam is now
   held by an aspect-preserving cover with the focal point anchored to the
   bottom edge, so the literal final source row still meets the Footer.
   The footer-side rules below are unrelated and are retained. */
.ii-site-footer[data-ii-homepage-footer-seam-lock="1"]{
  margin-top:0!important;
}
.ii-site-footer[data-ii-homepage-footer-seam-lock="1"]>.ii-site-footer-background{
  display:block!important;
  left:0!important;
  top:0!important;
  width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:center top!important;
}

/* 0.9.176 - Play Now CTA launch polish.
   The header artwork and the actual image inside the Homepage Studio button
   pulse continuously. A short LED-like highlight races around a tight capsule
   path that matches the rendered artwork aspect ratio. */
@keyframes iiPlayNowBreathe{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 4px rgba(224,255,126,.24)) drop-shadow(0 4px 8px rgba(24,132,26,.10));}
  50%{transform:scale(1.035);filter:drop-shadow(0 0 10px rgba(241,255,169,.66)) drop-shadow(0 0 19px rgba(89,233,44,.28)) drop-shadow(0 5px 10px rgba(20,113,28,.14));}
}
@keyframes iiPlayNowPress{
  0%{transform:scale(1);}
  45%{transform:scale(.955);}
  100%{transform:scale(1);}
}
@keyframes iiPlayNowPerimeterChase{to{stroke-dashoffset:-100;}}
html:not(.ii-site-pages-authoring-preview) .ii-site-play-image,
html:not(.ii-site-pages-authoring-preview) [data-ii-name="Main Play Button"] img{
  animation:iiPlayNowBreathe 2.65s ease-in-out infinite!important;
  -webkit-animation:iiPlayNowBreathe 2.65s ease-in-out infinite!important;
  transform-origin:center center!important;
  -webkit-transform-origin:center center!important;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  will-change:transform,filter;
}
html:not(.ii-site-pages-authoring-preview) .ii-site-play:hover .ii-site-play-image,
html:not(.ii-site-pages-authoring-preview) .ii-site-play:focus-visible .ii-site-play-image,
html:not(.ii-site-pages-authoring-preview) [data-ii-name="Main Play Button"]:hover>img,
html:not(.ii-site-pages-authoring-preview) [data-ii-name="Main Play Button"]:focus-visible>img{
  filter:drop-shadow(0 0 12px rgba(248,255,194,.88)) drop-shadow(0 0 23px rgba(87,238,43,.40)) drop-shadow(0 6px 11px rgba(20,113,28,.16));
}
html:not(.ii-site-pages-authoring-preview) .ii-site-play-image.ii-play-activated,
html:not(.ii-site-pages-authoring-preview) [data-ii-name="Main Play Button"] img.ii-play-activated{
  animation:iiPlayNowPress .24s ease-out 1,iiPlayNowBreathe 2.65s ease-in-out .24s infinite!important;
  -webkit-animation:iiPlayNowPress .24s ease-out 1,iiPlayNowBreathe 2.65s ease-in-out .24s infinite!important;
}
.ii-play-orbit{
  position:fixed;
  z-index:2147478000;
  pointer-events:none;
  overflow:visible;
  contain:layout style paint;
}
.ii-play-orbit-svg{display:block;width:100%;height:100%;overflow:visible;}
.ii-play-orbit-chase{
  fill:none;
  stroke:rgba(255,255,238,.98);
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:9 91;
  stroke-dashoffset:0;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.98)) drop-shadow(0 0 5px rgba(193,255,112,.94)) drop-shadow(0 0 9px rgba(84,235,44,.58));
  animation:iiPlayNowPerimeterChase 1.45s linear infinite;
  -webkit-animation:iiPlayNowPerimeterChase 1.45s linear infinite;
  will-change:stroke-dashoffset;
}
@media (prefers-reduced-motion:reduce){
  html:not(.ii-site-pages-authoring-preview) .ii-site-play-image,
  html:not(.ii-site-pages-authoring-preview) [data-ii-name="Main Play Button"] img{animation:none!important;transform:none!important;}
  html:not(.ii-site-pages-authoring-preview) .ii-site-play-image.ii-play-activated,
  html:not(.ii-site-pages-authoring-preview) [data-ii-name="Main Play Button"] img.ii-play-activated{animation:none!important;}
  .ii-play-orbit{display:none!important;}
}



/* 0.9.240: the Homepage orbit is retired, so its two tuning rules are removed.
   The Universal Header orbit is unaffected and keeps its own styling above.
   Original 0.9.178 note, kept for history:
   Homepage orbit follows the transformed artwork rect in JS, so the
   overlay itself must not also scale. Keep the LED tight and compact. */


/* 0.9.223 — iOS/mobile CTA animation parity. WebKit can rasterize transformed
   transparent PNG/SVG layers into a static snapshot on touch layouts unless the
   animated artwork owns a compositor layer. Keep the same authored motion, but
   make the animated descendant and SVG chase compositing explicit. */
@supports (-webkit-touch-callout:none){
  html:not(.ii-site-pages-authoring-preview) .ii-site-play-image,
  html:not(.ii-site-pages-authoring-preview) [data-ii-name="Main Play Button"] img{
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
  }
  .ii-play-orbit,.ii-play-orbit-svg,.ii-play-orbit-chase{
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
  }
}

/* 0.9.181 — iPhone edge-to-edge shared header.
   viewport-fit=cover is installed synchronously in wp_head. The Header paints
   beneath the status area while its interactive content remains below the
   safe-area inset. Non-notched devices resolve the inset to zero. */
html.ii-site-edge-to-edge,
html.ii-site-edge-to-edge body{
  background:#139fe8;
}
html.ii-site-edge-to-edge .ii-site-header{
  box-sizing:border-box;
  padding-top:calc(6px + env(safe-area-inset-top, 0px));
}
@media (max-width:1024px){
  html.ii-site-edge-to-edge .ii-site-header{
    padding-top:calc(7px + env(safe-area-inset-top, 0px));
  }
}
@media (max-width:767px){
  html.ii-site-edge-to-edge .ii-site-header{
    padding-top:calc(6px + env(safe-area-inset-top, 0px));
  }
}

/* 0.9.234 - Homepage/Footer literal seam + desktop footer composition polish.
   BG11 and footer11 are authored as a literal horizontal cut. The Homepage
   background must therefore consume the scene host's exact height. Runtime's
   --ii-bg-logical-paint-height can be slightly taller than the scene and causes
   the footer to arrive before the final rows of the Homepage source image have
   painted. Pinning the Page Background to 100% of the authored scene restores
   the source-file cut without changing any foreground Studio geometry. */
/* 0.9.237: retired in full. Pinning the paint box to 100% of the authored
   scene was superseded by the 0.9.236 content-boundary height below, and the
   fill/center-top pair is replaced by aspect-preserving cover + focal. */

/* The cloud artwork is light, so keep the display headings bright but use a
   deeper readable blue for the explanatory copy and Explore links. This also
   gives the column an intentional heading/body hierarchy instead of one block
   of identical outlined white lettering. */
.ii-site-footer-description,
.ii-site-footer-explore a{
  color:#075a96!important;
  -webkit-text-fill-color:#075a96!important;
  -webkit-text-stroke:0!important;
  text-shadow:0 1px 0 rgba(255,255,255,.96),0 2px 5px rgba(255,255,255,.46)!important;
}
.ii-site-footer-explore a:hover,
.ii-site-footer-explore a:focus-visible{
  color:#033f72!important;
  -webkit-text-fill-color:#033f72!important;
  -webkit-text-stroke:0!important;
  text-shadow:0 1px 0 rgba(255,255,255,.98),0 2px 6px rgba(255,255,255,.52)!important;
}

/* Desktop: the three visual columns share one common baseline. Brand copy,
   Events, and the ESRB badge all terminate on that line. The social badge is
   intentionally a little quieter than before so it supports, rather than owns,
   the footer. Tablet/mobile keep the already-approved centered stack. */
@media (min-width:1025px){
  .ii-site-footer-frame{
    align-items:stretch!important;
  }
  .ii-site-footer-brand,
  .ii-site-footer-explore,
  .ii-site-footer-social{
    box-sizing:border-box!important;
    height:clamp(300px,15vw,312px)!important;
    min-height:clamp(300px,15vw,312px)!important;
    max-height:clamp(300px,15vw,312px)!important;
    align-self:start!important;
  }
  .ii-site-footer-brand{
    justify-content:flex-start!important;
  }
  .ii-site-footer-brand .ii-site-footer-description{
    margin-top:auto!important;
    margin-bottom:0!important;
  }
  .ii-site-footer-explore{
    justify-content:space-between!important;
    gap:0!important;
  }
  .ii-site-footer-explore strong{
    margin-bottom:0!important;
  }
  .ii-site-footer-social{
    justify-content:flex-start!important;
  }
  .ii-site-footer-social .ii-site-footer-social-icons{
    margin-top:8px!important;
    margin-bottom:0!important;
  }
  .ii-site-footer-social .ii-site-footer-esrb{
    width:clamp(108px,7.2vw,132px)!important;
    margin:0 auto!important;
    margin-top:auto!important;
    align-self:center!important;
  }
}

/* Keep the hierarchy deliberate on the stacked views too. */
@media (max-width:1024px){
  .ii-site-footer-description,
  .ii-site-footer-explore a{
    color:#075a96!important;
    -webkit-text-fill-color:#075a96!important;
    -webkit-text-stroke:0!important;
  }
}


/* 0.9.235 - Homepage/Footer visual-edge lock + smaller ESRB.
   The Homepage Studio canvas can visually extend a few pixels beyond its flow
   host because its inner canvas is transformed. That meant the Footer could
   start before the literal bottom row of BG11 was actually painted, even though
   BG11 and footer11 are pixel-matched source files. shared-shell.js measures the
   rendered Page Background edge and writes this single flow offset so footer row
   0 always begins after the actual rendered BG bottom edge. */
.ii-site-footer[data-ii-homepage-footer-seam-lock="1"]{
  margin-top:var(--ii-homepage-footer-seam-shift,0px)!important;
}

/* ESRB supports the social block instead of dominating it. Desktop is roughly
   30% smaller than 0.9.234; tablet/mobile scale down with it. */
@media (min-width:1025px){
  .ii-site-footer[data-ii-homepage-footer-seam-lock="1"] .ii-site-footer-social .ii-site-footer-esrb{
    width:clamp(76px,5vw,92px)!important;
    max-height:none!important;
  }
}
@media (min-width:768px) and (max-width:1024px){
  .ii-site-footer[data-ii-homepage-footer-seam-lock="1"] .ii-site-footer-esrb{
    width:86px!important;
    max-height:none!important;
    margin-top:18px!important;
  }
}
@media (max-width:767px){
  .ii-site-footer[data-ii-homepage-footer-seam-lock="1"] .ii-site-footer-esrb{
    width:78px!important;
    max-height:none!important;
    margin-top:18px!important;
  }
}


/* 0.9.236 - Homepage/Footer seam contract: content boundary, never rect chasing.
   Studio exposes two different logical heights on some Homepage snapshots:
   --ii-bg-logical-paint-height can follow the Page Background component's own
   published box, while --ii-studio-page-content-bottom is the actual logical
   boundary where the Homepage scene hands off to the external Footer. When the
   former is taller, the scene clips the image before its source bottom row. The
   old 0.9.235 rect-chasing fix then moved the Footer down to the invisible part
   of that clipped image and produced a white spacer.

   Paint the background to the content handoff itself. 0.9.237 keeps that paint
   box but reaches the seam proportionally instead: an aspect-preserving cover
   with --ii-bg-focal-y anchored to the bottom keeps BG11's final source row on
   the boundary while cropping left/right off-screen on narrow views. Footer
   flow remains at zero margin on every breakpoint; no script may move it. */
/* 0.9.237: the PAINT BOX half of the 0.9.236 seam contract is correct and is
   retained -- painting to the content handoff is exactly what puts the bottom
   of the artwork on the Footer boundary. Only the non-proportional fill is
   removed. object-fit and object-position are deliberately absent here: they
   belong to Studio's published critical CSS, which resolves
   cover + var(--ii-bg-focal-x/y) from the authored per-breakpoint geometry. */
.ii-homepage-studio-scene-host[data-ii-studio-scene-host="1"]
  >.ii-studio-custom-component-root[data-ii-studio-custom-root="site.homepage"]
  >.ii-studio-custom-component.is-page-background{
  left:0!important;
  top:0!important;
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  height:var(--ii-studio-page-content-bottom,100%)!important;
  min-height:var(--ii-studio-page-content-bottom,100%)!important;
  max-height:var(--ii-studio-page-content-bottom,100%)!important;
  transform:none!important;
  translate:none!important;
  scale:none!important;
  rotate:none!important;
}
.ii-site-footer[data-ii-homepage-footer-seam-lock="1"]{
  --ii-homepage-footer-seam-shift:0px!important;
  margin-top:0!important;
}