/* Scoped to the approved six-language comparison matrix. */
.ps-cmp:has(.cmp-upgrade-table) {
  width: min(940px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
}
.ps-cmp .cmp-upgrade-intro {
  margin: 4px 0 16px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
}
.cmp-upgrade-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.ps-cmp .cmp-upgrade-table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  line-height: 1.5;
}
.ps-cmp .cmp-upgrade-table .cmp-upgrade-feature {
  width: 190px;
  color: var(--text-2);
  font-size: 12px;
}
.ps-cmp .cmp-upgrade-table thead th {
  padding: 11px 12px 13px;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}
.ps-cmp .cmp-upgrade-table .ps-cmp-code {
  font-size: 16px;
  font-weight: 800;
}
.ps-cmp .cmp-upgrade-table .ps-opt-tag {
  max-width: 100%;
  margin-top: 6px;
  white-space: normal;
  line-height: 1.35;
}
.ps-cmp .cmp-upgrade-table tbody .cmp-upgrade-label {
  padding: 14px 12px;
  background: var(--bg-alt, #f0f3f6);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.45;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.ps-cmp .cmp-upgrade-table tbody td {
  padding: 14px 12px;
  color: var(--text);
  font-size: 13px;
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  border-bottom: 1px solid var(--border);
}
.ps-cmp .cmp-upgrade-table tbody td + td {
  border-left: 1px solid var(--border-2);
}
.ps-cmp .cmp-upgrade-row--profile td[data-method="p3"] {
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}
.ps-cmp .cmp-upgrade-row--profile td[data-method="p3"] strong {
  color: var(--text);
  font-weight: 800;
}
.ps-cmp .cmp-upgrade-table .cmp-upgrade-row--price th,
.ps-cmp .cmp-upgrade-table .cmp-upgrade-row--price td {
  padding-top: 17px;
  padding-bottom: 17px;
  border-bottom: 0;
}
.ps-cmp .cmp-upgrade-table .cmp-upgrade-row--price td {
  font-size: 15px;
  font-weight: 800;
}
@media (max-width: 700px) {
  .ps-cmp:has(.cmp-upgrade-table) {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
  }
  .ps-cmp:has(.cmp-upgrade-table) .ps-cmp-head {
    padding: 16px 12px 10px;
  }
  .ps-cmp:has(.cmp-upgrade-table) .ps-cmp-body {
    padding: 0 10px 16px;
  }
  .ps-cmp .cmp-upgrade-intro {
    margin: 2px 2px 13px;
    font-size: 12.5px;
  }
  /* Keep all available methods visible. The row header occupies its own line
     while cells stay in the same P1–P4 columns. Explicit table roles in the
     markup retain the row/column relationship when the visual layout is grid. */
  .ps-cmp .cmp-upgrade-table {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .ps-cmp .cmp-upgrade-table thead {
    display: block;
    position: sticky;
    top: var(--ps-cmp-head, 64px);
    z-index: 2;
    background: var(--surface);
  }
  .ps-cmp .cmp-upgrade-table tbody {
    display: block;
  }
  .ps-cmp .cmp-upgrade-table tr {
    display: grid;
    grid-template-columns: repeat(var(--cmp-upgrade-cols), minmax(0, 1fr));
  }
  .ps-cmp .cmp-upgrade-table thead th.cmp-upgrade-feature {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .ps-cmp .cmp-upgrade-table thead th.cmp-upgrade-method {
    position: static;
    min-width: 0;
    padding: 10px 5px 12px;
    font-size: 11px;
    box-shadow: none;
    border-bottom: 1px solid var(--border);
  }
  .ps-cmp .cmp-upgrade-table .ps-cmp-code {
    font-size: 15px;
  }
  .ps-cmp .cmp-upgrade-table thead .ps-opt-tag {
    display: block;
    padding: 0;
    font-size: 10px;
    line-height: 1.35;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  .ps-cmp .cmp-upgrade-table tbody th.cmp-upgrade-label {
    grid-column: 1 / -1;
    padding: 9px 8px;
    margin: 0;
    min-width: 0;
    font-size: 12px;
    line-height: 1.4;
    border-top: 1px solid var(--border);
    border-bottom: 0;
  }
  .ps-cmp .cmp-upgrade-table tbody td {
    min-width: 0;
    padding: 10px 5px 13px;
    font-size: 11.5px;
    line-height: 1.45;
    border-bottom: 0;
    overflow-wrap: anywhere;
  }
  .ps-cmp .cmp-upgrade-table .cmp-upgrade-row--price th {
    padding-top: 9px;
    padding-bottom: 9px;
  }
  .ps-cmp .cmp-upgrade-table .cmp-upgrade-row--price td {
    padding-top: 11px;
    padding-bottom: 12px;
    font-size: 12px;
  }
}
@media (max-width: 359px) {
  .ps-cmp:has(.cmp-upgrade-table) .ps-cmp-body {
    padding-left: 8px;
    padding-right: 8px;
  }
  .ps-cmp .cmp-upgrade-table tbody td {
    padding-left: 4px;
    padding-right: 4px;
    font-size: 11px;
  }
  .ps-cmp .cmp-upgrade-table .ps-opt-tag {
    font-size: 9.5px;
  }
}
/* Native situation block: same tiles and hierarchy, compact on small screens. */
.cu-collections .zpk-tile:focus-visible,
.cu-game:focus-visible,.cu-more:focus-visible{outline:3px solid var(--accent,#0a84ff);outline-offset:3px}
.cu-collections .zpk-tile-t{min-width:0}
.cu-more{display:none}

/* Only the verified game lists on native collection landing pages. */
.cu-collection-page .cu-games.cu-games{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;
  list-style:none;margin:18px 0 24px;padding:0;columns:auto;scroll-margin-top:110px;
}
.cu-collection-page .cu-games>li{display:block;margin:0;padding:0;border:0;min-width:0;break-inside:avoid}
.cu-game{
  display:flex;gap:12px;align-items:center;min-height:112px;height:100%;padding:12px;
  border:1px solid var(--border-2,#e6e9ef);border-radius:14px;
  background:var(--surface,#fff);color:var(--text,#111);text-decoration:none!important;
  box-sizing:border-box;transition:border-color .15s;
}
.cu-game:hover{border-color:var(--accent,#0a84ff)}
.cu-game-art{display:flex;align-items:center;justify-content:center;flex:0 0 88px;width:88px;height:74px;border-radius:9px;overflow:hidden;background:var(--card-2,#eef2f7)}
.cu-game-art img{display:block;width:100%;height:100%;object-fit:cover}
.cu-art-fallback{font-size:10px;letter-spacing:.06em;font-weight:800;color:var(--text-2,#69707d)}
.cu-game-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.cu-game-body>b{font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.cu-game-status.pre{align-self:flex-start;display:inline-block;padding:2px 7px;border-radius:6px;background:var(--chip,#eaf2ff);color:var(--accent-ink,#075dad);font-size:11px;line-height:1.35;font-weight:750}
.cu-game-description{font-size:12px;line-height:1.35;color:var(--text-2,#69707d)}
.cu-game-choice{font-size:12px;line-height:1.3;color:var(--accent-ink,#0870d8);font-weight:650}
.cu-scope-note{font-size:13px;line-height:1.55;color:var(--text-2,#69707d);margin:12px 0}
.cu-page-nav{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;margin:16px 0 8px;font-size:13px}
.cu-page-nav>a{display:inline-flex;align-items:center;min-height:40px;color:var(--accent-ink,#0870d8);font-weight:650}
.cu-page-nav>span{margin-left:auto;color:var(--text-2,#69707d)}

/* Only the couch landing, and only after its validated list is in place.
   Native widgets remain connected so their core can still render safely. */
.cu-couch-ready .cu-couch-native-catalog,
.cu-couch-ready #psShowcase,
.cu-couch-ready #gamesTabs,
.cu-couch-ready #gamesBody,
.cu-couch-ready #gamesHead .pe,
.cu-couch-ready #gamesHead .ps-since{display:none!important}
.cu-couch-ready #gamesHead{padding:24px 22px 0!important}
.cu-couch-ready #gamesHead>.wrap{max-width:1000px;text-align:left!important}
.cu-couch-ready #gamesHead h1{font-size:clamp(1.5rem,3.5vw,2.1rem)!important;margin:0 0 8px!important}
.cu-couch-ready #gamesHead .psub{font-size:14px;line-height:1.5;margin:0}
.cu-couch-ready .cu-couch-content{padding:0 22px 30px}
.cu-couch-ready .cu-couch-content>.wrap{max-width:1000px}
.cu-couch-ready .cu-couch-content .cu-page-nav{margin:8px 0 4px}
.cu-couch-seo{border-top:1px solid var(--border-2,#e6e9ef);margin-top:24px;padding-top:8px;color:var(--text-2,#69707d);font-size:13px;line-height:1.6}
.cu-couch-seo>summary{min-height:44px;padding:10px 0;cursor:pointer;font-weight:650;color:var(--text,#111);box-sizing:border-box}
.cu-couch-seo>summary:focus-visible{outline:3px solid var(--accent,#0a84ff);outline-offset:3px}
.cu-couch-seo .sec{padding:8px 0!important}
.cu-couch-seo .wrap{padding:0}
.cu-couch-seo p{text-align:left!important;margin:8px 0!important;max-width:none!important}
.cu-couch-seo h2{font-size:16px!important;margin:14px 0 8px}

@media(max-width:640px){
  .cu-collections.zpk-sec ul.cu-tiles{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
    overflow:visible;scroll-snap-type:none;padding:0;
  }
  .cu-collections.zpk-sec .cu-tiles>li{min-width:0;flex:none;scroll-snap-align:none}
  .cu-collections .cu-tiles:not(.cu-expanded)>li:nth-child(n+7){display:none}
  .cu-more{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:10px 0 0;padding:8px 16px;border:1px solid var(--border,#d6dde8);border-radius:10px;background:var(--surface,#fff);color:var(--accent-ink,#0870d8);font:inherit;font-size:13px;font-weight:650;cursor:pointer}
  .cu-collections .zpk-tile{flex-direction:row;gap:8px;padding:10px;min-height:96px;border-radius:12px;align-items:flex-start}
  .cu-collections .zpk-covers{flex:0 0 32px;width:32px;height:44px;margin-top:2px;overflow:hidden}
  .cu-collections .zpk-covers img{width:32px;height:44px;min-width:32px;border:0;border-radius:5px;object-fit:cover}
  .cu-collections .zpk-covers img+img{display:none}
  .cu-collections .zpk-tile-t{gap:3px;flex:1}
  .cu-collections .zpk-tile-t>b{font-size:12.5px;line-height:1.25;overflow-wrap:anywhere}
  .cu-collections .zpk-tile-t>small{display:block;font-size:11px;line-height:1.3;-webkit-line-clamp:unset;overflow:visible;overflow-wrap:anywhere}
  .cu-collections .zpk-n{font-size:11px;line-height:1.3}
  .cu-collection-page .cu-games.cu-games{grid-template-columns:1fr;gap:8px;margin:14px 0 20px}
  .cu-game{min-height:90px;padding:10px;gap:10px}
  .cu-game-art{flex-basis:72px;width:72px;height:64px}
  .cu-game-body>b{font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){.cu-game{transition:none}}
/* The old homepage stays intact. All presentation changes live in this dialog. */
html.qu-lock { overflow: hidden; }
dialog.qu-dialog {
  width: min(760px, calc(100vw - 40px));
  height: min(760px, calc(100vh - 64px));
  height: min(760px, calc(100dvh - 64px));
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 64px);
  max-height: calc(100dvh - 64px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 24px;
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 28px 90px rgba(0,0,0,.25);
  overflow: hidden;
}
dialog.qu-dialog[open] { display: flex; flex-direction: column; }
dialog.qu-dialog::backdrop { background: rgba(14,20,28,.58); backdrop-filter: blur(5px); }
.qu-backdrop { position: fixed; inset: 0; z-index: 100000; background: rgba(14,20,28,.58); backdrop-filter: blur(5px); }
dialog.qu-dialog.qu-fallback { position: fixed; inset: 0; z-index: 100001; }
.qu-dialog * { box-sizing: border-box; }
.qu-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 26px 17px; border-bottom: 1px solid var(--border-2);
  background: var(--surface);
}
.qu-brand { display: block; margin-bottom: 5px; color: var(--text-2); font-size: 11px; font-weight: 600; letter-spacing: .035em; }
.qu-head h1 { margin: 0; font-size: 23px; line-height: 1.2; letter-spacing: -.03em; }
.qu-dialog button { font: inherit; cursor: pointer; }
.qu-close {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 11px;
  flex-shrink: 0; border: 1px solid var(--border); border-radius: 11px;
  background: var(--surface); color: var(--text); font-size: 12px !important; font-weight: 600 !important;
}
.qu-close span { font-size: 21px; line-height: 1; }
.qu-content {
  flex: 1 1 auto; min-height: 0; padding: 25px 26px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
}
.qu-content h2 { margin: 0; font-size: 28px; line-height: 1.2; letter-spacing: -.03em; }
.qu-content [data-qu-heading]:focus { outline: none; }
.qu-content .qu-hint { margin: 10px 0 20px; color: var(--text-2); font-size: 13px; line-height: 1.6; }
.qu-eyebrow { margin: 0 0 10px; color: var(--accent-ink); font-size: 12px; line-height: 1.4; font-weight: 700; }
.qu-intro { padding: 18px 0 8px; }
.qu-intro > p:not(.qu-eyebrow) { margin: 17px 0 0; max-width: 570px; color: var(--text-2); font-size: 14px; line-height: 1.7; }
.qu-intro-route { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 30px 0 22px; padding: 19px 17px; border-radius: 15px; background: var(--bg-alt); font-size: 13px; font-weight: 650; line-height: 1.5; }
.qu-intro-route > [aria-hidden] { color: var(--accent-ink); }
.qu-source-note { margin: 18px 0 0; color: var(--text-2); font-size: 11.5px; line-height: 1.65; }
.qu-load { margin-top: 20px !important; font-size: 12px !important; }
.qu-progress { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 10px; color: var(--text-2); font-size: 11.5px; font-weight: 600; }
.qu-progress-bars { display: grid; grid-template-columns: repeat(var(--qu-steps,4),minmax(0,1fr)); gap: 5px; margin-bottom: 26px; }
.qu-progress-bars i { height: 4px; border-radius: 10px; background: var(--border); }
.qu-progress-bars i.is-done { background: var(--accent); }
.qu-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.qu-option {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 6px; min-height: 88px; padding: 17px 39px 17px 16px;
  text-align: left; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 15px;
  transition: border-color .15s ease, background .15s ease;
}
.qu-option-title { font-size: 14px; font-weight: 700; line-height: 1.4; }
.qu-option small { font-size: 11.5px; line-height: 1.5; color: var(--text-2); }
.qu-platform-row { display: flex; align-items: center; gap: 9px; min-width: 0; width: 100%; }
.qu-platform-mark { display: inline-flex; flex: 0 0 28px; width: 28px; height: 28px; }
.qu-platform-mark .pl-ico { width: 28px; height: 28px; margin: 0; font-size: 17.5px; border-radius: 8px; }
.qu-platform-mark .pl-ico svg { width: 18px; height: 18px; }
.qu-grid-mark { --c1: #77869b; --c2: #3d4c62; }
.qu-platform-option .qu-check { top: 8px; transform: none; }
.qu-option:hover { border-color: var(--accent); }
.qu-option.is-selected { border: 2px solid var(--accent); padding: 16px 38px 16px 15px; background: color-mix(in srgb,var(--accent) 7%,var(--surface)); }
.qu-check { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); display: none; width: 21px; height: 21px; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; }
.qu-option.is-selected .qu-check { display: grid; }
.qu-footer {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 16px 26px 20px; border-top: 1px solid var(--border-2); background: var(--surface);
}
.qu-footer button, .qu-secondary, .qu-pagination button { min-height: 44px; padding: 11px 16px; border-radius: 12px; font-size: 13px !important; font-weight: 650 !important; line-height: 1.4; }
.qu-primary { border: 1px solid var(--accent); color: #fff; background: var(--accent); }
.qu-primary:hover:not(:disabled) { filter: brightness(.94); }
.qu-back { padding-left: 0 !important; border: 0; background: transparent; color: var(--text); }
.qu-skip { border: 0; background: transparent; color: var(--text-2); font-weight: 500 !important; }
.qu-start { width: 100%; }
.qu-secondary { color: var(--accent-ink); background: var(--surface); border: 1px solid var(--border); }
.qu-dialog button:disabled { opacity: .42; cursor: default; }
.qu-dialog :is(button,a):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.qu-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 13px; padding: 0; list-style: none; }
.qu-summary li { padding: 5px 8px; font-size: 11px; line-height: 1.35; border-radius: 7px; color: var(--text); background: var(--bg-alt); border: 1px solid var(--border-2); }
.qu-result-count { margin: 12px 0; color: var(--text-2); font-size: 11px; }
.qu-results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; padding: 0; margin: 0; list-style: none; }
.qu-results > li { min-width: 0; }
.qu-card { display: grid; grid-template-columns: 68px minmax(0,1fr); gap: 12px; height: 100%; min-height: 130px; padding: 11px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .15s ease; }
.qu-card:hover { border-color: var(--accent); }
.qu-art { width: 68px; height: 96px; overflow: hidden; border-radius: 9px; background: var(--bg-alt); }
.qu-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qu-art-fallback { display: grid; place-items: center; height: 100%; color: var(--text-2); font-size: 11px; }
.qu-card-body { display: flex; flex-direction: column; min-width: 0; gap: 6px; }
.qu-card h3 { margin: 0; font-size: 13.5px; line-height: 1.4; letter-spacing: -.015em; }
.qu-platforms { font-size: 10px; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }
.qu-reasons { display: flex; flex-wrap: wrap; gap: 4px; }
.qu-reasons > span { padding: 3px 5px; border-radius: 5px; font-size: 9px; line-height: 1.4; background: color-mix(in srgb,var(--accent) 7%,var(--surface)); color: var(--accent-ink); }
.qu-card-link { margin-top: auto; padding-top: 3px; font-size: 10.5px; font-weight: 650; line-height: 1.4; color: var(--accent-ink); }
.qu-empty { padding: 21px; margin: 20px 0; border-radius: 15px; background: var(--bg-alt); }
.qu-empty p { margin: 0 0 15px; font-size: 13px; line-height: 1.6; color: var(--text-2); }
.qu-empty p:last-child { margin-bottom: 0; }
.qu-pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.qu-pagination button { padding: 8px 10px; min-height: 40px; color: var(--text); background: var(--surface); border: 1px solid var(--border); font-size: 11px !important; }
@media (min-width: 601px) {
  /* Intro fits its content; questions and results keep a stable scrollable frame. */
  dialog.qu-dialog:has(.qu-intro) { height: min(520px, calc(100vh - 64px)); height: min(520px, calc(100dvh - 64px)); }
}
@media (max-width: 600px) {
  dialog.qu-dialog { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .qu-head { padding: calc(13px + env(safe-area-inset-top,0px)) 17px 12px; gap: 10px; }
  .qu-brand { font-size: 9.5px; margin-bottom: 4px; }
  .qu-head h1 { font-size: 19px; }
  .qu-close { min-height: 41px; padding: 8px 10px; font-size: 11px !important; }
  .qu-content { padding: 21px 17px; scrollbar-gutter: auto; }
  .qu-content h2 { font-size: 25px; }
  .qu-content .qu-hint { margin-bottom: 17px; font-size: 12px; }
  .qu-intro { padding-top: 24px; }
  .qu-intro > p:not(.qu-eyebrow) { font-size: 13px; }
  .qu-intro-route { gap: 7px; font-size: 11px; padding: 16px 13px; }
  .qu-options { gap: 9px; }
  .qu-option { min-height: 87px; padding: 14px 27px 14px 12px; border-radius: 13px; }
  .qu-option.is-selected { padding: 13px 26px 13px 11px; }
  .qu-option.qu-platform-option { padding-right: 12px; }
  .qu-option.qu-platform-option.is-selected { padding-right: 11px; }
  .qu-platform-row { gap: 8px; }
  .qu-option-title { font-size: 13px; }
  .qu-option small { font-size: 10.5px; }
  .qu-check { width: 17px; height: 17px; right: 7px; font-size: 10px; }
  .qu-footer { padding: 13px 17px calc(13px + env(safe-area-inset-bottom,0px)); gap: 5px; }
  .qu-footer button { padding: 11px 12px; min-height: 46px; font-size: 12px !important; }
  .qu-footer .qu-skip { padding-inline: 3px; font-size: 11px !important; }
  .qu-progress-bars { margin-bottom: 24px; }
  .qu-results { grid-template-columns: minmax(0,1fr); gap: 9px; }
  .qu-card { grid-template-columns: 61px minmax(0,1fr); min-height: 111px; padding: 9px; gap: 11px; border-radius: 13px; }
  .qu-art { width: 61px; height: 88px; border-radius: 8px; }
  .qu-card-body { gap: 5px; }
  .qu-card h3 { font-size: 13px; line-height: 1.3; }
  .qu-platforms { font-size: 9.5px; }
  .qu-reasons > span { font-size: 9px; padding: 2px 5px; }
  .qu-card-link { padding-top: 1px; font-size: 10.5px; }
  .qu-empty { padding: 17px; }
}
@media (max-width: 359px) {
  .qu-head { padding-inline: 13px; }
  .qu-content { padding-inline: 13px; }
  .qu-head h1 { font-size: 18px; }
  .qu-content h2 { font-size: 23px; }
  .qu-option-title { font-size: 12px; }
  .qu-option small { font-size: 10px; }
  .qu-footer { padding-inline: 13px; }
  .qu-footer button { padding-inline: 9px; font-size: 11.5px !important; }
  .qu-results { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .qu-dialog * { transition: none !important; }
}
/* One introduction, native search and three catalog-backed product columns. */
body.ou-upgrade #heroStatic { position:relative; z-index:2; overflow:visible; }
body.ou-upgrade :is(#heroStatic,#startChooser) .hero-band {
  position:relative; z-index:2; isolation:isolate; display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,1fr); align-items:center;
  gap:clamp(24px,3vw,44px); padding:clamp(28px,3.8vw,44px); border-radius:26px;
  overflow:visible; text-align:left; color:#fff; border:1px solid #ffffff18;
  background:radial-gradient(ellipse at 95% 90%,#2a4774 0%,transparent 65%),linear-gradient(135deg,#101c39,#162b4b);
  box-shadow:0 18px 45px -32px #08132b90;
}
/* Original wire geometry is decorative; it cannot clip search or receive focus. */
body.ou-upgrade :is(#heroStatic,#startChooser) .hero-band::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='470' height='420' viewBox='0 0 470 420' fill='none'%3E%3Cg stroke='%239fc5ff' stroke-opacity='.18'%3E%3Cpath d='M334 16 448 82 448 214 334 280 220 214 220 82Z'/%3E%3Cpath d='M334 16V148M220 82 334 148 448 82M334 148V280M278 49 392 115 392 247M278 247V115L392 49'/%3E%3Cpath d='M88 250 146 216 204 250V318L146 352 88 318ZM146 216V284M88 250 146 284 204 250M146 284V352'/%3E%3C/g%3E%3C/svg%3E") right top/470px auto no-repeat;
}
body.ou-upgrade :is(#heroStatic,#startChooser) .hero-band::after { content:none; }
body.ou-upgrade :is(#heroStatic,#startChooser) .hero-copy { position:relative; z-index:2; min-width:0; }
body.ou-upgrade :is(#heroStatic,#startChooser) .hero-band h1 {
  max-width:17ch; margin:0 0 16px; font-size:clamp(32px,3.7vw,50px); line-height:1.08;
  font-weight:800; letter-spacing:-.04em; color:#fff; text-align:left; overflow-wrap:break-word;
}
body.ou-upgrade :is(#heroStatic,#startChooser) .hero-copy > p {
  max-width:44ch; margin:0 0 23px; color:#c8d4e9; font-size:clamp(14px,1.4vw,17px); line-height:1.6;
}
body.ou-upgrade :is(#heroStatic,#startChooser) .hero-trust {
  display:flex; flex-wrap:wrap; gap:7px 15px; margin-top:18px; font-size:12px; line-height:1.5; color:#c8d4e9;
}
body.ou-upgrade :is(#heroStatic,#startChooser) .hero-trust span+span::before { margin-right:8px; }
/* The form owns its stacking layer; only the art windows crop decoration. */
body.ou-upgrade :is(#heroStatic,#startChooser) .ou-search-banner {
  position:relative; z-index:3; width:100%; min-width:0; margin:0 0 18px; padding:21px 25px;
  border:1px solid #bad2ff26; border-radius:22px; background:linear-gradient(120deg,#111f3d,#1d3559);
  color:#fff; box-shadow:0 12px 30px -23px #08132b90;
}
body.ou-upgrade :is(#heroStatic,#startChooser) .ou-search-banner .hs-search {
  position:relative; z-index:5; display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:stretch; gap:10px 0; max-width:none; margin:0; padding:0; overflow:visible;
}
/* A single light field contains the text input, clear control and Find action. */
body.ou-upgrade :is(#heroStatic,#startChooser) .hs-search::before {
  content:""; grid-column:1/-1; grid-row:2; z-index:0; min-width:0; pointer-events:none;
  border:2px solid #b6d4ff; border-radius:16px; background:#fff;
  box-shadow:0 0 0 4px #90bdff19,0 8px 24px #061b3933;
}
body.ou-upgrade :is(#heroStatic,#startChooser) .hs-search:focus-within::before {
  border-color:#77b7ff; box-shadow:0 0 0 4px #90bdff38,0 8px 24px #061b3933;
}
body.ou-upgrade :is(#heroStatic,#startChooser) .hs-search-label {
  grid-column:1/-1; grid-row:1; margin:0; color:#eef4ff; font-size:15px; font-weight:700; line-height:1.4;
}
body.ou-upgrade :is(#heroStatic,#startChooser) .hs-search input {
  position:relative; z-index:1; grid-column:1; grid-row:2; width:100%; min-width:0; height:66px; min-height:66px;
  padding:0 46px 0 44px; border:0; border-radius:16px; background:transparent;
  color:#1b2b44; font:inherit; font-size:16px; cursor:text; box-shadow:none;
}
body.ou-upgrade :is(#heroStatic,#startChooser) .hs-search input:placeholder-shown { padding-right:12px; }
body.ou-upgrade :is(#heroStatic,#startChooser) .hs-search input::placeholder { color:#61718a; opacity:1; }
body.ou-upgrade :is(#heroStatic,#startChooser) .hs-search .ou-search-icon {
  position:relative; z-index:2; grid-column:1; grid-row:2; justify-self:start; align-self:center;
  width:20px; height:20px; margin-left:15px; pointer-events:none; color:#536e8f;
}
body.ou-upgrade :is(#heroStatic,#startChooser) .ou-search-icon::before {
  content:""; position:absolute; width:13px; height:13px; inset:1px auto auto 1px;
  border:2px solid currentColor; border-radius:50%;
}
body.ou-upgrade :is(#heroStatic,#startChooser) .ou-search-icon::after {
  content:""; position:absolute; width:8px; height:2px; inset:15px auto auto 13px;
  border-radius:2px; background:currentColor; transform:rotate(45deg); transform-origin:left center;
}
body.ou-upgrade :is(#heroStatic,#startChooser) .hs-search > button:not(.ou-search-clear) {
  position:relative; z-index:1; grid-column:2; grid-row:2; min-width:84px; min-height:52px; height:auto; margin:7px 7px 7px 0; padding:10px 17px;
  border:1px solid #0966c7; border-radius:10px; background:#0869d7; color:#fff; font:inherit; font-weight:700; font-size:15px;
}
body.ou-upgrade :is(#heroStatic,#startChooser) .hs-search > button:not(.ou-search-clear):hover { background:#075ab9; }
body.ou-upgrade :is(#heroStatic,#startChooser) .hs-search .ou-search-clear {
  grid-column:1; grid-row:2; justify-self:end; align-self:center; z-index:2;
  width:44px; min-width:44px; height:46px; min-height:44px; margin:0 2px 0 0; padding:0;
  border:0; border-radius:10px; background:transparent; color:#314967; font-size:25px; line-height:1;
}
body.ou-upgrade :is(#heroStatic,#startChooser) .hs-search .ou-search-clear:hover { background:#e9eff8; }
body.ou-upgrade :is(#heroStatic,#startChooser) .hs-search :is(input,button):focus-visible,
body.ou-upgrade :is(#heroStatic,#startChooser) .hero-ai-guide :is(a,button,summary):focus-visible {
  outline:3px solid #b6dcff; outline-offset:3px;
}
.hs-search .ou-search-examples {
  grid-column:1/-1; grid-row:3; display:flex; flex-wrap:wrap; gap:7px; min-width:0;
}
body.ou-upgrade :is(#heroStatic,#startChooser) .hs-search .ou-search-examples button {
  display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; height:auto; margin:0; padding:9px 12px;
  border:1px solid #bfd4f257; border-radius:24px; background:#ffffff0c; color:#e7f0ff; font:inherit; font-size:12px; font-weight:600; line-height:1.4;
}
body.ou-upgrade :is(#heroStatic,#startChooser) .hs-search .ou-search-examples button:hover { background:#ffffff20; border-color:#d9e9ff99; }
.hs-search .ou-search-hint { grid-column:1/-1; grid-row:4; max-width:none; margin:0; color:#c4d2e8; font-size:12px; line-height:1.5; }
.ou-search-suggestions {
  position:absolute; z-index:20; top:calc(100% + 8px); inset-inline:0; min-width:0;
  padding:7px; border:1px solid var(--border,#d9e4ef); border-radius:14px;
  background:var(--surface,#fff); color:var(--text,#172335); box-shadow:0 18px 38px #05152f40;
  max-height:var(--ou-search-panel-height,none); overflow-y:auto; overscroll-behavior:contain;
}
.ou-search-suggestions[data-placement="above"] { top:auto; bottom:calc(100% + 8px); }
.ou-search-suggestions[hidden],body.ou-upgrade :is(#heroStatic,#startChooser) .hs-search [hidden],
body.ou-upgrade :is(#heroStatic,#startChooser) .hero-ai-guide [hidden] { display:none; }
.ou-search-suggestions [role=listbox] { max-height:var(--ou-search-list-height,min(365px,50svh)); overflow:auto; overscroll-behavior:contain; }
.ou-search-result { display:flex; align-items:center; gap:12px; min-height:65px; padding:7px 10px; border-radius:10px; color:inherit; text-decoration:none; }
.ou-search-result:hover,.ou-search-result[aria-selected=true] { background:var(--surface-2,#eaf0f8); }
.ou-search-result:focus-visible { outline:3px solid #137b60; outline-offset:-3px; }
.ou-search-thumb { width:40px; height:52px; flex:0 0 40px; overflow:hidden; border-radius:7px; display:grid; place-items:center; background:var(--surface-2,#eaf0f8); }
.ou-search-thumb img { width:100%; height:100%; object-fit:cover; }
.ou-search-service .ou-search-thumb img { object-fit:contain; padding:4px; }
.ou-search-copy { min-width:0; flex:1; }
.ou-search-copy strong { display:block; font-size:14px; font-weight:700; line-height:1.35; overflow-wrap:anywhere; }
.ou-search-copy small { display:block; margin-top:3px; font-size:11px; line-height:1.4; color:var(--text-2,#65748b); }
.ou-search-copy .ou-search-action { display:block; margin-top:4px; color:var(--accent-ink,#087958); font-size:12px; font-weight:700; line-height:1.4; }
.ou-search-arrow { color:var(--accent-ink,#087958); }
.ou-search-suggestions .ou-search-status { max-width:none; margin:8px 10px; color:var(--text-2,#65748b); font-size:12px; line-height:1.5; }
body.ou-upgrade :is(#heroStatic,#startChooser) .hs-search .ou-search-suggestions button {
  width:100%; min-height:44px; height:auto; margin-top:4px; padding:10px;
  border:0; border-radius:10px; background:var(--surface-2,#eaf0f8); color:var(--accent-ink,#087958); text-align:left; font-size:13px;
}
body.ou-upgrade :is(#heroStatic,#startChooser) .hero-ai-guide { position:relative; margin-top:13px; min-width:0; color:#d3e1f7; }
body.ou-upgrade :is(#heroStatic,#startChooser) .hero-ai-guide :is(button,summary) {
  display:flex; align-items:center; gap:8px; min-height:44px; max-width:100%; padding:9px 0;
  border:0; background:transparent; color:#d3e1f7; font:inherit; font-size:13px; font-weight:600; text-align:left; cursor:pointer;
}
body.ou-upgrade :is(#heroStatic,#startChooser) .hero-ai-guide :is(a,[data-ai-task]) {
  display:inline-flex; align-items:center; min-height:44px; max-width:100%; margin:6px 5px 0 0; padding:9px 12px;
  border:1px solid #c5dbff55; border-radius:10px; background:#ffffff0c; color:#f2f6ff;
  font-size:13px; line-height:1.4; text-align:left; text-decoration:none; overflow-wrap:anywhere;
}
body.ou-upgrade :is(#heroStatic,#startChooser) .hero-ai-guide :is(a,[data-ai-task]):hover { background:#ffffff1c; }
body.ou-upgrade :is(#heroStatic,#startChooser) .hero-ai-guide svg { width:20px; height:20px; flex:0 0 20px; filter:drop-shadow(0 2px 2px #0004); }
body.ou-upgrade :is(#heroStatic,#startChooser) .hero-ai-tasks { display:grid; gap:12px; padding:12px 0 2px; border-top:1px solid #c5dbff33; }
body.ou-upgrade :is(#heroStatic,#startChooser) .hero-ai-tasks section { min-width:0; }
body.ou-upgrade :is(#heroStatic,#startChooser) .hero-ai-tasks section + section { padding-top:12px; border-top:1px solid #c5dbff22; }
body.ou-upgrade :is(#heroStatic,#startChooser) .hero-ai-tasks h2 { margin:0 0 7px; color:#d3e1f7; font-size:12px; font-weight:600; line-height:1.4; letter-spacing:0; }
body.ou-upgrade :is(#heroStatic,#startChooser) .hero-ai-tasks section > div { display:flex; flex-wrap:wrap; gap:6px; }
body.ou-upgrade :is(#heroStatic,#startChooser) .hero-ai-tasks a { gap:7px; margin:0; }
body.ou-upgrade :is(#heroStatic,#startChooser) .hero-ai-tasks > p { max-width:none; margin:1px 0 0; color:#b9cbe5; font-size:12px; line-height:1.5; }
/* Reserve three shelves before the presentation module hydrates. */
body.ou-upgrade :is(#heroStatic,#startChooser) .hero-art:not(.ou-hero-art) { height:405px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
body.ou-upgrade :is(#zpkHome,#zpromo) { scroll-margin-top:calc(var(--ou-nav-offset,100px) + 16px); }

/* Three separate streams: full captions, expiry badges and proportionate logos. */
body.ou-upgrade :is(#heroStatic,#startChooser) .hero-art.ou-hero-art {
  --ou-art-gap:12px; --ou-art-half-gap:6px;
  position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 12px;
  width:100%; height:auto; max-width:none; min-width:0; margin:0; padding:0;
  overflow:visible; scroll-snap-type:none; -webkit-mask-image:none; mask-image:none;
}
.ou-hero-art .ou-art-controls { grid-column:1/-1; display:flex; justify-content:flex-end; min-width:0; }
.ou-hero-art .ou-art-toggle {
  display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:88px; min-height:44px; padding:9px 12px;
  border:1px solid #ffffff55; border-radius:24px; background:#ffffff0c; color:#e6efff; font:inherit; font-size:12px; cursor:pointer;
}
.ou-hero-art .ou-art-toggle:hover { background:#ffffff20; }
.ou-hero-art .ou-art-toggle:focus-visible { outline:3px solid #b6dcff; outline-offset:3px; }
.ou-hero-art .ou-art-toggle:disabled { cursor:default; opacity:.85; }
.ou-hero-art .ou-art-column { min-width:0; }
.ou-hero-art .ou-art-column h2 { margin:0 0 9px; color:#e8f0ff; font-size:13px; line-height:1.35; font-weight:700; text-align:center; letter-spacing:.01em; }
.ou-hero-art .ou-art-column h2 :is(a,button) { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:44px; max-width:100%; color:inherit; font:inherit; text-decoration:none; }
.ou-hero-art .ou-art-column h2 a:hover { text-decoration:underline; text-underline-offset:3px; }
.ou-hero-art .ou-art-column h2 :is(a,button):focus-visible { outline:3px solid #b6dcff; outline-offset:3px; border-radius:5px; }
.ou-hero-art .ou-art-window { position:relative; height:300px; overflow:hidden; border-radius:14px; }
.ou-hero-art .ou-art-track { display:grid; gap:var(--ou-art-gap); animation:ouArtUp var(--ou-art-duration,60s) linear infinite; will-change:transform; }
.ou-hero-art .ou-art-column-sale .ou-art-track { animation-direction:reverse; }
.ou-hero-art .ou-art-track.ou-art-still { animation:none; transform:none; will-change:auto; }
.ou-hero-art .ou-art-column:has(.ou-art-still) .ou-art-window { overflow-y:auto; scrollbar-width:thin; }
.ou-hero-art .ou-art-group { display:grid; gap:var(--ou-art-gap); }
.ou-hero-art .ou-art-entry,
body.ou-upgrade :is(#heroStatic,#startChooser) .ha-entry { display:grid; gap:0; min-width:0; }
.ou-hero-art .ou-art-price-link,
body.ou-upgrade :is(#heroStatic,#startChooser) .ha-price-link {
  display:flex; align-items:center; justify-content:center; min-height:44px; padding:4px 3px;
  color:#e5efff; font-size:11px; font-weight:600; line-height:1.25; text-align:center;
  text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere;
}
.ou-hero-art .ou-art-price-link:focus-visible,
body.ou-upgrade :is(#heroStatic,#startChooser) .ha-price-link:focus-visible { outline:3px solid #b6dcff; outline-offset:-3px; border-radius:7px; }
.ou-hero-art .ou-art-tile {
  position:relative; display:block; aspect-ratio:5/6; min-width:0; min-height:144px; max-height:220px;
  overflow:hidden; border:1px solid #ffffff14; border-radius:14px; background:#12223d;
  color:#fff; line-height:1; text-decoration:none; box-shadow:0 7px 14px -12px #000c;
}
.ou-hero-art .ou-art-tile img { display:block; width:100%; height:100%; object-fit:cover; }
.ou-hero-art .ou-art-tile :is(picture,.ou-art-picture) { display:block; width:100%; height:100%; }
.ou-hero-art .ou-art-tile:focus-visible { outline:3px solid #b6dcff; outline-offset:-3px; }
.ou-hero-art .ou-art-caption {
  position:absolute; inset:auto 0 0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  min-height:calc(2.6em + 14px); max-height:calc(2.6em + 14px); padding:7px 8px;
  overflow:hidden; background:#0a152bee; color:#fff; border-top:1px solid #ffffff17;
  font-size:12px; font-weight:650; line-height:1.3; text-align:left; overflow-wrap:anywhere;
}
.ou-hero-art .ou-art-ai { display:grid; place-items:center; background:linear-gradient(155deg,#fff,#eaf0f8); padding:16px 14px 45px; }
.ou-hero-art .ou-art-ai img { width:66%; height:66%; max-width:76px; max-height:76px; object-fit:contain; filter:drop-shadow(0 3px 3px #1829451a); }
.ou-hero-art .ou-art-name { position:absolute; inset:auto 5px 12px; color:#172b46; font-size:13px; font-weight:700; line-height:1.25; text-align:center; overflow-wrap:anywhere; }
.ou-hero-art :is(.ou-art-discount,.ou-art-new) {
  position:absolute; top:7px; left:6px; bottom:auto; max-width:calc(100% - 12px); padding:5px 6px;
  border-radius:7px; font-size:11px; font-weight:800; line-height:1.1; white-space:nowrap; box-shadow:0 2px 8px #0004;
}
.ou-hero-art .ou-art-discount { background:#d71345; color:#fff; }
.ou-hero-art .ou-art-new { background:#d8ffd2; color:#184b24; }
.ou-hero-art .ou-art-empty { margin:0; padding:18px 4px; color:#c5d4eb; font-size:12px; line-height:1.5; text-align:center; }
.ou-hero-art:is(.ou-art-browsing,.ou-art-paused,.ou-art-hidden) .ou-art-track,
.ou-hero-art .ou-art-column-paused .ou-art-track { animation-play-state:paused; }
@media (hover:hover) and (pointer:fine) { .ou-hero-art .ou-art-column:hover .ou-art-track { animation-play-state:paused; } }
/* Keyboard navigation sees all originals, never a clipped animated clone. */
.ou-hero-art:is(.ou-art-browsing,.ou-art-reduced) .ou-art-track { animation:none; transform:none; will-change:auto; }
.ou-hero-art:is(.ou-art-browsing,.ou-art-reduced) .ou-art-clone { display:none; }
.ou-hero-art:is(.ou-art-browsing,.ou-art-reduced) .ou-art-window { overflow-y:auto; scrollbar-width:thin; }
@keyframes ouArtUp { from {transform:translateY(0);} to {transform:translateY(calc(-50% - var(--ou-art-half-gap)));} }

@media (max-width:980px) {
  body.ou-upgrade :is(#heroStatic,#startChooser) .hero-band { grid-template-columns:minmax(0,1fr); padding:28px; gap:18px; }
  body.ou-upgrade :is(#heroStatic,#startChooser) .hero-band h1 { max-width:none; font-size:38px; }
  body.ou-upgrade :is(#heroStatic,#startChooser) .hero-copy > p { max-width:54ch; }
  body.ou-upgrade :is(#heroStatic,#startChooser) .hero-art:not(.ou-hero-art) { height:340px; }
  .ou-hero-art .ou-art-window { height:235px; }
  .ou-hero-art .ou-art-tile { max-height:200px; }
}
@media (max-width:767px) {
  body.ou-upgrade :is(#heroStatic,#startChooser) .hero-band { padding:22px 18px 18px; gap:14px; border-radius:22px; }
  body.ou-upgrade :is(#heroStatic,#startChooser) .hero-band h1 { margin-bottom:13px; font-size:clamp(29px,7.7vw,36px); }
  body.ou-upgrade :is(#heroStatic,#startChooser) .hero-copy > p { margin-bottom:18px; font-size:14px; line-height:1.55; }
  body.ou-upgrade :is(#heroStatic,#startChooser) .ou-search-banner { padding:17px 18px; margin-bottom:15px; border-radius:20px; }
  body.ou-upgrade :is(#heroStatic,#startChooser) .ou-search-banner .hs-search { grid-template-columns:minmax(0,1fr); gap:9px 0; }
  body.ou-upgrade :is(#heroStatic,#startChooser) .hs-search::before { grid-column:1; grid-row:2/4; }
  body.ou-upgrade :is(#heroStatic,#startChooser) .hs-search input { height:58px; min-height:58px; }
  body.ou-upgrade :is(#heroStatic,#startChooser) .hs-search > button:not(.ou-search-clear) {
    grid-column:1; grid-row:3; min-height:46px; margin:0 7px 7px; padding:10px 13px;
  }
  .hs-search .ou-search-examples { grid-row:4; gap:6px; }
  body.ou-upgrade :is(#heroStatic,#startChooser) .hs-search .ou-search-examples button { flex:1 0 auto; padding:9px 10px; }
  .hs-search .ou-search-hint { grid-row:5; }
  .ou-search-suggestions [role=listbox] { max-height:var(--ou-search-list-height,min(280px,42svh)); }
  .ou-search-result { gap:9px; padding:7px; }
  .ou-search-copy strong { font-size:13px; }
  .hs-search .ou-search-hint { font-size:11px; }
  body.ou-upgrade :is(#heroStatic,#startChooser) .hero-art.ou-hero-art { --ou-art-gap:8px; --ou-art-half-gap:4px; gap:7px 8px; }
  body.ou-upgrade :is(#heroStatic,#startChooser) .hero-art:not(.ou-hero-art) { height:calc(clamp(205px,62vw,260px) + 103px); }
  .ou-hero-art .ou-art-column h2 { margin-bottom:8px; font-size:12px; }
  .ou-hero-art .ou-art-window { height:clamp(205px,62vw,260px); border-radius:12px; }
  .ou-hero-art .ou-art-tile { min-height:118px; max-height:180px; border-radius:12px; }
  .ou-hero-art .ou-art-caption { font-size:11px; padding-inline:6px; }
  .ou-hero-art .ou-art-ai { padding:12px 9px 38px; }
  .ou-hero-art .ou-art-ai img { max-width:58px; max-height:58px; }
  .ou-hero-art .ou-art-name { inset:auto 4px 11px; font-size:11px; }
  .ou-hero-art :is(.ou-art-discount,.ou-art-new) { top:6px; left:5px; max-width:calc(100% - 10px); padding:4px 5px; font-size:10px; }
}
@media (max-width:380px) {
  body.ou-upgrade :is(#heroStatic,#startChooser) .hs-search .ou-search-examples {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body.ou-upgrade :is(#heroStatic,#startChooser) .hs-search .ou-search-examples button {
    width:100%; min-height:44px;
  }
}
@media (max-width:359px) {
  body.ou-upgrade :is(#heroStatic,#startChooser) .hero-band { padding:20px 12px 16px; gap:12px; }
  body.ou-upgrade :is(#heroStatic,#startChooser) .ou-search-banner { padding:16px 12px; }
  body.ou-upgrade :is(#heroStatic,#startChooser) .hero-band h1 { font-size:28px; }
  body.ou-upgrade :is(#heroStatic,#startChooser) .hero-copy > p { font-size:13px; }
  body.ou-upgrade :is(#heroStatic,#startChooser) .hero-ai-guide :is(button,summary,a) { font-size:12px; }
  .ou-hero-art .ou-art-column h2 { font-size:11px; letter-spacing:0; }
  .ou-hero-art .ou-art-caption { font-size:10.5px; }
  .ou-hero-art :is(.ou-art-discount,.ou-art-new) { font-size:9px; }
}
@media (prefers-reduced-motion:reduce) {
  .ou-hero-art .ou-art-track { animation:none; transform:none; will-change:auto; }
  .ou-hero-art .ou-art-clone { display:none; }
  .ou-hero-art .ou-art-window { overflow-y:auto; scrollbar-width:thin; }
}

/* Shared search is a game entry, never a platform-specific purchase choice. */
#searchOverlay .search-row[data-zm-discovery-slug] .sr-info > span { white-space:normal; overflow:visible; text-overflow:clip; line-height:1.5; }
#searchOverlay .search-row[data-zm-discovery-slug] .zm-search-price-source { display:none; }
#searchOverlay .search-row[data-zm-discovery-slug] .sr-info > span { color:var(--accent-ink); font-weight:600; }
#searchOverlay .search-row[data-zm-discovery-slug] .sr-img.game img { width:100%; height:100%; object-fit:cover; }

@media (max-width:767px) {
  /* Same icon hierarchy, without globally changing Apple or buying controls. */
  body.ou-upgrade header.gnav:has(.gnav-brand-copy) .gnav-mob > a .pl-ico { width:26px; height:26px; }
  body.ou-upgrade header.gnav:has(.gnav-brand-copy) .gnav-mob > a .pl-ico :is(svg,img) { width:18px; height:18px; }
  body.ou-upgrade #startChooser .sc-badge .pl-ico { width:32px; height:32px; }
  body.ou-upgrade #startChooser .sc-badge .pl-ico :is(svg,img) { width:22px; height:22px; }
  body.ou-upgrade #startChooser .sc-store .pl-ico { width:24px; height:24px; }
  body.ou-upgrade #startChooser .sc-store .pl-ico :is(svg,img) { width:16px; height:16px; }
  body.ou-upgrade #startChooser .sc-covers:not([data-platform-shelf]) { grid-template-columns:repeat(4,52px); gap:7px; }
  body.ou-upgrade #startChooser .sc-covers:not([data-platform-shelf]) img { width:52px; height:70px; object-fit:cover; }
  body.ou-upgrade #startChooser .sc-covers.sc-logos:not([data-platform-shelf]) img { object-fit:contain; padding:8px; }
  body.ou-upgrade #startChooser #zpromo .zpromo-stage { height:280px; min-height:280px; }
  body.ou-upgrade #startChooser #zpromo .zpromo-copy { padding:18px; gap:9px; }
  body.ou-upgrade #startChooser #zpromo .zpromo-h { font-size:clamp(26px,8vw,34px); }
  /* Stable scene height while switching; MW4 art stays above its compact copy. */
  body.ou-upgrade #startChooser #zpromo .zpromo-stage:has(.zp-mw4) { height:380px; min-height:380px; }
  body.ou-upgrade #startChooser #zpromo .zp-mw4 { align-items:flex-end; }
  body.ou-upgrade #startChooser #zpromo .zp-mw4 .zpromo-bg { top:0; left:0; width:100%; height:60%; object-position:50% 0%; transform-origin:50% 25%; }
  body.ou-upgrade #startChooser #zpromo .zp-mw4 .zpromo-shade { background:linear-gradient(0deg,#090d0b 0%,#090d0b 44%,#090d0bbf 57%,#090d0b00 78%); }
  body.ou-upgrade #startChooser #zpromo .zp-mw4 .zpromo-copy { width:100%; max-width:none; padding:20px; gap:10px; }
  body.ou-upgrade #startChooser #zpromo .zp-mw4 .zpromo-h { font-size:clamp(26px,7vw,32px); }
  body.ou-upgrade #startChooser #zpromo .zp-mw4 .zpromo-eyebrow { max-width:none; font-size:10px; line-height:1.45; letter-spacing:.06em; }
  body.ou-upgrade #startChooser #zpromo .zp-mw4 .zpromo-sub { font-size:11px; line-height:1.5; }
  body.ou-upgrade #startChooser #zpromo .zp-mw4 .zpromo-cta { min-height:44px; margin-top:4px; }
  body.ou-upgrade #zpkHome .zpk-reco .zpk-cell { align-items:flex-start; }
  body.ou-upgrade #zpkHome .zpk-reco .zpk-card { content-visibility:visible; contain-intrinsic-size:auto; padding:10px; min-height:0; height:auto; }
  body.ou-upgrade #zpkHome .zpk-reco .zpk-card h3 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; min-height:0; font-size:13px; line-height:1.35; }
  body.ou-upgrade #zpkHome .zpk-reco .zpk-card .gcard-foot { margin-top:8px; font-size:12px; }
  body.ou-upgrade #zpkHome .zpk-reco .zpk-card .gcard-foot b { font-size:14px; }
  #searchOverlay .search-row[data-zm-discovery-slug] { display:grid; grid-template-columns:52px minmax(0,1fr) 18px; gap:4px 12px; padding:13px 6px; }
  #searchOverlay .search-row[data-zm-discovery-slug] .sr-img { grid-column:1; grid-row:1 / 3; width:52px; height:70px; border-radius:10px; }
  #searchOverlay .search-row[data-zm-discovery-slug] .sr-info { grid-column:2; grid-row:1; align-self:end; }
  #searchOverlay .search-row[data-zm-discovery-slug] .sr-info h4 { font-size:15px; line-height:1.35; }
  #searchOverlay .search-row[data-zm-discovery-slug] .sr-info > span { font-size:11px; }
  #searchOverlay .search-row[data-zm-discovery-slug] .sr-price { grid-column:2; grid-row:2; align-self:start; font-size:13px; }
  #searchOverlay .search-row[data-zm-discovery-slug] .sr-arr { grid-column:3; grid-row:1 / 3; }
}
@media (max-width:359px) {
  body.ou-upgrade #startChooser .sc-covers:not([data-platform-shelf]) { grid-template-columns:repeat(4,46px); }
  body.ou-upgrade #startChooser .sc-covers:not([data-platform-shelf]) img { width:46px; height:62px; }
}

/* Approved home mascot: separate transparent art keeps ears and paws visible
   at every width; the live copy, shelves and motion controls stay native. */
body.ou-upgrade :is(#heroStatic,#startChooser) .hero-band {
  background:radial-gradient(ellipse at 78% 26%,#1555a8a3,transparent 48%),
    radial-gradient(ellipse at 53% 110%,#1463c488,transparent 58%),
    linear-gradient(125deg,#08152f,#0d2353 68%,#081830);
  padding-bottom:54px;
}
body.ou-upgrade :is(#heroStatic,#startChooser) .hero-band::before {
  background:radial-gradient(ellipse at 52% 95%,#227ee72e,transparent 65%),
    linear-gradient(0deg,#113b7338,transparent 12%);
}
body.ou-upgrade :is(#heroStatic,#startChooser) .hero-band::after {
  content:""; position:absolute; inset:auto 0 0; height:42px; z-index:-1;
  border-radius:0 0 26px 26px; pointer-events:none;
  background:url('/img/home-raccoon-paws-20261021.svg') 58% 65%/245px 34px no-repeat,
    radial-gradient(ellipse at 50% 70%,#2174d34d,transparent 72%);
}
body.ou-upgrade :is(#heroStatic,#startChooser) .hero-art.ou-hero-art .ou-art-controls {
  position:relative; min-height:170px; align-items:flex-start;
}
body.ou-upgrade :is(#heroStatic,#startChooser) .ou-art-controls::before {
  content:""; position:absolute; pointer-events:none; bottom:-10px; left:0;
  width:min(74%,340px); aspect-ratio:2/1;
  background:url('/img/home-raccoon-peek-20261021-800.webp') center/contain no-repeat;
}
body.ou-upgrade :is(#heroStatic,#startChooser) .ou-art-toggle { position:relative; z-index:1; }
/* Reserve the same space while the static shelf is being enhanced. */
body.ou-upgrade :is(#heroStatic,#startChooser) .hero-art:not(.ou-hero-art) { height:531px; }
@media (max-width:980px) {
  body.ou-upgrade :is(#heroStatic,#startChooser) .hero-band { padding-bottom:48px; }
  body.ou-upgrade :is(#heroStatic,#startChooser) .hero-art:not(.ou-hero-art) { height:466px; }
  body.ou-upgrade :is(#heroStatic,#startChooser) .ou-art-controls::before { left:12%; }
}
@media (max-width:767px) {
  body.ou-upgrade :is(#heroStatic,#startChooser) .hero-band { padding-bottom:45px; }
  body.ou-upgrade :is(#heroStatic,#startChooser) .hero-band::after { height:34px; background-size:180px 27px,auto; border-radius:0 0 22px 22px; }
  body.ou-upgrade :is(#heroStatic,#startChooser) .hero-art.ou-hero-art .ou-art-controls { min-height:118px; }
  body.ou-upgrade :is(#heroStatic,#startChooser) .ou-art-controls::before {
    left:0; bottom:-7px; width:min(73%,260px);
    background-image:url('/img/home-raccoon-peek-20261021-480.webp');
  }
  body.ou-upgrade :is(#heroStatic,#startChooser) .hero-art:not(.ou-hero-art) { height:calc(clamp(205px,62vw,260px) + 177px); }
  body.ou-upgrade :is(#heroStatic,#startChooser) .ou-art-toggle { min-width:78px; padding-inline:10px; }
}
@media (min-width:520px) and (max-width:767px) {
  body.ou-upgrade :is(#heroStatic,#startChooser) .hero-art.ou-hero-art .ou-art-controls { min-height:140px; }
  body.ou-upgrade :is(#heroStatic,#startChooser) .hero-art:not(.ou-hero-art) { height:calc(clamp(205px,62vw,260px) + 199px); }
}

.ou-search-copy .ou-search-price{display:block;font-size:13px;line-height:1.4;margin-top:4px;color:var(--text)}
.ou-search-copy .ou-search-detail{font-size:11px;line-height:1.4}

.ou-search-suggestions{top:var(--ou-search-anchor-top,calc(100% + 8px))}
.ou-search-suggestions[data-placement="above"]{top:auto;bottom:var(--ou-search-anchor-bottom,calc(100% + 8px))}