/*
 * GameTracker V4 — native product layer.
 * NOT WIRED TO PRODUCTION.
 *
 * Rules:
 * - no dependency on legacy .juego-card geometry;
 * - same component system 320→1920;
 * - touch targets >=44px;
 * - no chip soup;
 * - Game Pass access is one composed fact;
 * - temporal/editorial rails have purpose-specific cards.
 */

:root {
  --gtv4-bg: #05080d;
  --gtv4-bg-soft: #080d14;
  --gtv4-panel: #0d141d;
  --gtv4-panel-2: #111a25;
  --gtv4-panel-3: #141f2b;
  --gtv4-line: #21303f;
  --gtv4-line-soft: rgba(148, 166, 186, .13);
  --gtv4-text: #f7fafc;
  --gtv4-muted: #93a3b5;
  --gtv4-muted-2: #667789;
  --gtv4-cyan: #16d9ff;
  --gtv4-green: #6ce8a0;
  --gtv4-amber: #f7c760;
  --gtv4-red: #ff6872;
  --gtv4-violet: #b99cff;
  --gtv4-blue: #73a7ff;
  --gtv4-r: 18px;
  --gtv4-r-sm: 12px;
  --gtv4-ease: cubic-bezier(.22, 1, .36, 1);
}

.gtv4-shell,
.gtv4-quickview {
  color: var(--gtv4-text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.gtv4-shell {
  max-width: 1480px;
  margin: 0 auto;
  padding: clamp(18px, 2.5vw, 34px) clamp(14px, 2.5vw, 34px) calc(110px + env(safe-area-inset-bottom));
}

.gtv4-shell * { box-sizing: border-box; }

.gtv4-eyebrow {
  margin: 0 0 5px;
  color: var(--gtv4-cyan);
  font: 800 11px/1.1 Inter, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.gtv4-title {
  margin: 0;
  color: var(--gtv4-text);
  font-size: clamp(30px, 5vw, 48px);
  line-height: .98;
  letter-spacing: -.035em;
}

.gtv4-subtitle {
  margin: 10px 0 0;
  max-width: 680px;
  color: var(--gtv4-muted);
  font-size: clamp(12px, 2vw, 15px);
  line-height: 1.5;
}

.gtv4-section {
  margin-top: clamp(26px, 4vw, 44px);
}

.gtv4-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.gtv4-section__title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: clamp(12px, 2.5vw, 15px);
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.gtv4-section__title svg { width: 19px; height: 19px; color: var(--gtv4-cyan); }

.gtv4-section__link {
  color: var(--gtv4-cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
}

.gtv4-section__link:focus-visible,
.gtv4-card__main:focus-visible,
.gtv4-card__action:focus-visible,
.gtv4-action:focus-visible {
  outline: 2px solid var(--gtv4-cyan);
  outline-offset: 3px;
}

/* ── Today summary ─────────────────────────────────────────────────────── */

.gtv4-today {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid var(--gtv4-line);
  border-radius: var(--gtv4-r);
  background: var(--gtv4-line);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .24);
}

.gtv4-today__item {
  min-height: 88px;
  padding: 16px;
  background:
    radial-gradient(circle at 0 0, rgba(22, 217, 255, .07), transparent 58%),
    var(--gtv4-panel);
}

.gtv4-today__n {
  display: block;
  font-size: clamp(25px, 4vw, 36px);
  font-weight: 850;
  line-height: 1;
  letter-spacing: -.05em;
}

.gtv4-today__label {
  display: block;
  margin-top: 8px;
  color: var(--gtv4-muted);
  font-size: 11px;
  font-weight: 700;
}

.gtv4-today__item.is-urgent .gtv4-today__n { color: var(--gtv4-red); }
.gtv4-today__item.is-personal .gtv4-today__n { color: var(--gtv4-cyan); }
.gtv4-today__item.is-good .gtv4-today__n { color: var(--gtv4-green); }

/* ── Rails ─────────────────────────────────────────────────────────────── */

.gtv4-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(270px, 36%);
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
  padding: 2px 1px 8px;
  -webkit-overflow-scrolling: touch;
}

.gtv4-rail::-webkit-scrollbar { display: none; }
.gtv4-rail > * { scroll-snap-align: start; }

.gtv4-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

/* ── V4 card anatomy ───────────────────────────────────────────────────── */

.gtv4-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--gtv4-line);
  border-radius: var(--gtv4-r);
  background:
    linear-gradient(180deg, rgba(255,255,255,.012), transparent 32%),
    var(--gtv4-panel);
  box-shadow: 0 16px 48px rgba(0,0,0,.16);
  transform: translateZ(0);
  transition: transform 180ms var(--gtv4-ease), border-color 180ms ease, box-shadow 180ms ease;
}

.gtv4-card__main {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  color: inherit;
  text-decoration: none;
}

.gtv4-card__art {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0b1016;
}

.gtv4-card__art::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 52%;
  background: linear-gradient(180deg, transparent, rgba(4, 8, 12, .76));
  pointer-events: none;
}

.gtv4-card__art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 220ms var(--gtv4-ease), filter 220ms ease;
}

.gtv4-card__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.26);
  font: 800 10px/1 Inter, sans-serif;
  letter-spacing: .12em;
}

/* reserved anchors — never overlap */
.gtv4-card__personal,
.gtv4-card__score,
.gtv4-card__event {
  position: absolute;
  z-index: 2;
}

.gtv4-card__personal {
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  background: rgba(5, 8, 13, .82);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.gtv4-card__personal svg { width: 14px; height: 14px; }
.gtv4-card__personal--pendiente { border-color: rgba(22,217,255,.55); color: #a9efff; }
.gtv4-card__personal--jugando { border-color: rgba(108,232,160,.55); color: #a8f5c5; }
.gtv4-card__personal--terminado { border-color: rgba(185,156,255,.55); color: #d1c0ff; }
.gtv4-card__personal--abandonado { border-color: rgba(255,104,114,.48); color: #ffadb3; }

.gtv4-card__score {
  top: 12px;
  right: 12px;
  min-width: 44px;
  padding: 7px 8px;
  border: 1px solid rgba(247,199,96,.42);
  border-radius: 10px;
  background: rgba(19,16,7,.82);
  color: var(--gtv4-amber);
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  backdrop-filter: blur(10px);
}

.gtv4-card__event {
  left: 12px;
  bottom: 12px;
  max-width: calc(100% - 24px);
  min-height: 28px;
  padding: 6px 9px;
  border-radius: 9px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gtv4-card__event--urgent {
  background: var(--gtv4-red);
  color: #180609;
  box-shadow: 0 8px 22px rgba(255,104,114,.24);
}

.gtv4-card__event--dayone {
  border: 1px solid rgba(247,199,96,.5);
  background: rgba(20,17,7,.85);
  color: var(--gtv4-amber);
}

.gtv4-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
}

.gtv4-card__title {
  margin: 0;
  color: var(--gtv4-text);
  font-size: clamp(14px, 1.7vw, 18px);
  line-height: 1.18;
  letter-spacing: -.015em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gtv4-card__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 18px;
  color: var(--gtv4-muted);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gtv4-card__status-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--gtv4-muted-2);
  box-shadow: 0 0 0 4px rgba(102,119,137,.07);
}

.gtv4-card__status--available { color: var(--gtv4-green); }
.gtv4-card__status--available .gtv4-card__status-dot { background: var(--gtv4-green); box-shadow: 0 0 0 4px rgba(108,232,160,.08); }
.gtv4-card__status--cyan { color: var(--gtv4-cyan); }
.gtv4-card__status--cyan .gtv4-card__status-dot { background: var(--gtv4-cyan); box-shadow: 0 0 0 4px rgba(22,217,255,.08); }
.gtv4-card__status--urgent { color: var(--gtv4-red); }
.gtv4-card__status--urgent .gtv4-card__status-dot { background: var(--gtv4-red); box-shadow: 0 0 0 4px rgba(255,104,114,.08); }

.gtv4-card__decision-line {
  display: flex;
  min-height: 20px;
  align-items: center;
  gap: 10px;
  color: var(--gtv4-muted);
  font-size: 10px;
  font-weight: 650;
}

.gtv4-card__decision-line > span { display: inline-flex; align-items: center; gap: 5px; }
.gtv4-card__decision-line svg { width: 14px; height: 14px; color: var(--gtv4-amber); }

.gtv4-card__decision {
  display: grid;
  grid-template-columns: 20px auto;
  grid-template-areas: "icon strong" "icon sub";
  gap: 1px 8px;
  margin-top: 2px;
  padding: 10px 11px;
  border: 1px solid rgba(247,199,96,.24);
  border-radius: 12px;
  background: rgba(247,199,96,.07);
}

.gtv4-card__decision svg { grid-area: icon; width: 18px; height: 18px; margin-top: 2px; color: var(--gtv4-amber); }
.gtv4-card__decision strong { grid-area: strong; color: var(--gtv4-amber); font-size: 13px; }
.gtv4-card__decision span { grid-area: sub; color: var(--gtv4-muted); font-size: 9px; }

.gtv4-card__seal {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--gtv4-amber);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gtv4-card__seal svg { width: 16px; height: 16px; }

.gtv4-card__reason {
  margin: 0;
  color: #d4dce5;
  font-size: 11px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Game Pass access plate ────────────────────────────────────────────── */

.gtv4-access {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid var(--gtv4-line-soft);
}

.gtv4-access__plans {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 8px;
}

.gtv4-access__eyebrow {
  flex: none;
  padding-top: 5px;
  color: var(--gtv4-green);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.gtv4-access__plan-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.gtv4-plan-chip {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 0 6px;
  border-radius: 6px;
  border: 1px solid rgba(229,237,245,.18);
  background: rgba(229,237,245,.035);
  color: #c7d0d9;
  font: 650 8.4px/1 'Barlow Condensed',Inter,sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.gtv4-plan-chip[data-plan="ultimate"] { color:#6fe7ff; border-color:rgba(0,212,255,.44); background:rgba(0,212,255,.11); }
.gtv4-plan-chip[data-plan="premium"] { color:#dec9ff; border-color:rgba(183,148,255,.44); background:rgba(183,148,255,.11); }
.gtv4-plan-chip[data-plan="pc-game-pass"] { color:#ffd46e; border-color:rgba(255,176,32,.44); background:rgba(255,176,32,.10); }
.gtv4-plan-chip[data-plan="essential"] { color:#e5edf5; border-color:rgba(229,237,245,.30); background:rgba(229,237,245,.07); }

.gtv4-access__capabilities {
  display: flex;
  min-height: 24px;
  align-items: center;
  gap: 10px;
  color: var(--gtv4-muted);
}

.gtv4-access__capabilities > span { display: inline-flex; align-items: center; gap: 6px; }
.gtv4-access__capabilities svg { width: 18px; height: 18px; }

.gtv4-access__play-anywhere {
  margin-left: auto;
  color: var(--gtv4-blue);
  font-size: 9px;
  white-space: nowrap;
}

.gtv4-access__play-anywhere svg {
  animation: gtv4-transfer 2.4s var(--gtv4-ease) infinite;
}

.gtv4-card__action {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: none;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid rgba(22,217,255,.34);
  border-radius: 13px;
  background: rgba(6,17,22,.9);
  color: var(--gtv4-cyan);
  font: 780 10px/1 Inter, sans-serif;
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.gtv4-card__action svg { width: 19px; height: 19px; }

/* card action is outside the main link semantically; show on hover/focus devices */
@media (hover:hover) and (pointer:fine) {
  .gtv4-card:hover { transform: translateY(-2px); border-color: rgba(22,217,255,.3); box-shadow: 0 22px 55px rgba(0,0,0,.28); }
  .gtv4-card:hover .gtv4-card__art img { transform: scale(1.025); }
  .gtv4-card:hover .gtv4-card__action,
  .gtv4-card:focus-within .gtv4-card__action { display: inline-flex; }
}

/* touch cards keep a dedicated action row rather than a floating mystery icon */
@media (hover:none), (pointer:coarse) {
  .gtv4-card { padding-bottom: 54px; }
  .gtv4-card__action { display: inline-flex; left: 12px; right: 12px; width: auto; }
}

/* ── Purpose-specific variants ────────────────────────────────────────── */

.gtv4-card--urgent {
  display: grid;
  grid-template-columns: minmax(120px, 36%) 1fr;
  min-height: 190px;
  border-color: rgba(255,104,114,.28);
  background:
    radial-gradient(circle at 0 0, rgba(255,104,114,.08), transparent 46%),
    var(--gtv4-panel);
}

.gtv4-card--urgent .gtv4-card__main { display: contents; }
.gtv4-card--urgent .gtv4-card__art { aspect-ratio: auto; min-height: 190px; }
.gtv4-card--urgent .gtv4-card__body { padding: 18px; }
.gtv4-card--urgent .gtv4-card__title { font-size: clamp(18px, 2.1vw, 26px); }
.gtv4-card--urgent .gtv4-access { padding-right: 126px; }
.gtv4-card--urgent .gtv4-card__action { display: inline-flex; }

.gtv4-card--rail {
  min-height: 260px;
}

.gtv4-card--hidden-gem {
  border-color: rgba(247,199,96,.25);
  background:
    radial-gradient(circle at 100% 0, rgba(247,199,96,.08), transparent 48%),
    var(--gtv4-panel);
}

/* ── Quick View shell ─────────────────────────────────────────────────── */

.gtv4-quickview {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: end center;
  background: rgba(2,5,9,.66);
  backdrop-filter: blur(12px);
}

.gtv4-qv {
  position: relative;
  width: min(1180px, 100%);
  max-height: min(900px, 100dvh);
  overflow: hidden auto;
  border: 1px solid var(--gtv4-line);
  border-radius: 24px 24px 0 0;
  background: var(--gtv4-bg-soft);
  box-shadow: 0 -24px 80px rgba(0,0,0,.5);
}

.gtv4-qv__topbar {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--gtv4-line);
  background: rgba(5,8,13,.92);
  backdrop-filter: blur(14px);
}

.gtv4-qv__topbar-title {
  color: var(--gtv4-muted);
  font-size: 11px;
  font-weight: 750;
}

.gtv4-qv__close {
  width: 44px;
  height: 44px;
  border: 1px solid var(--gtv4-line);
  border-radius: 14px;
  background: var(--gtv4-panel);
  color: var(--gtv4-text);
}

.gtv4-qv__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr);
  gap: 22px;
  padding: 22px;
}

.gtv4-qv__hero,
.gtv4-qv__decision,
.gtv4-qv__editorial,
.gtv4-qv__media {
  border: 1px solid var(--gtv4-line);
  border-radius: var(--gtv4-r);
  background: var(--gtv4-panel);
}

.gtv4-qv__hero {
  position: relative;
  min-height: 320px;
  overflow: hidden;
}

.gtv4-qv__hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gtv4-qv__hero::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 20%, rgba(3,7,11,.9) 88%);
}

.gtv4-qv__hero-copy {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 22px;
  bottom: 20px;
}

.gtv4-qv__title {
  margin: 0;
  max-width: 780px;
  font-size: clamp(30px, 4vw, 56px);
  line-height: .96;
  letter-spacing: -.04em;
}

.gtv4-qv__decision {
  padding: 18px;
}

.gtv4-qv__decision-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--gtv4-line);
  border-radius: 14px;
  background: var(--gtv4-line);
}

.gtv4-qv__metric {
  min-height: 84px;
  padding: 14px;
  background: var(--gtv4-panel-2);
}

.gtv4-qv__metric strong {
  display: block;
  font-size: clamp(18px, 3vw, 28px);
  line-height: 1;
}

.gtv4-qv__metric span {
  display: block;
  margin-top: 8px;
  color: var(--gtv4-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gtv4-qv__metric.is-pace strong { color: var(--gtv4-amber); }

.gtv4-qv__access {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(108,232,160,.22);
  border-radius: 14px;
  background: rgba(108,232,160,.04);
}

.gtv4-qv__editorial {
  margin-top: 14px;
  padding: 14px;
  border-color: rgba(247,199,96,.23);
  background: rgba(247,199,96,.045);
}

.gtv4-qv__media {
  overflow: hidden;
  min-height: 220px;
  max-height: 320px;
}

.gtv4-qv__media img { width:100%; height:100%; object-fit:cover; display:block; }

.gtv4-qv__footer {
  position: sticky;
  bottom: 0;
  z-index: 7;
  display: grid;
  grid-template-columns: minmax(160px, .75fr) minmax(200px, 1fr);
  gap: 10px;
  padding: 12px 22px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--gtv4-line);
  background: rgba(5,8,13,.94);
  backdrop-filter: blur(14px);
}

.gtv4-action {
  min-height: 48px;
  border: 1px solid var(--gtv4-line);
  border-radius: 14px;
  background: var(--gtv4-panel);
  color: var(--gtv4-text);
  font: 780 12px/1.1 Inter, sans-serif;
}

.gtv4-action--primary {
  border-color: transparent;
  background: var(--gtv4-cyan);
  color: #041116;
}

/* ── animation ─────────────────────────────────────────────────────────── */

@keyframes gtv4-transfer {
  0%, 70%, 100% { transform: translateX(0); opacity: 1; }
  80% { transform: translateX(2px); opacity: .75; }
  90% { transform: translateX(-2px); opacity: .9; }
}

@keyframes gtv4-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.gtv4-is-ready .gtv4-card {
  animation: gtv4-card-in 260ms var(--gtv4-ease) both;
}

.gtv4-is-ready .gtv4-card:nth-child(2) { animation-delay: 30ms; }
.gtv4-is-ready .gtv4-card:nth-child(3) { animation-delay: 55ms; }
.gtv4-is-ready .gtv4-card:nth-child(4) { animation-delay: 80ms; }

/* ── responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .gtv4-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .gtv4-rail { grid-auto-columns: minmax(280px, 48%); }
}

@media (max-width: 820px) {
  .gtv4-shell { padding-inline: 16px; }
  .gtv4-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .gtv4-rail { margin-inline: -16px; padding-inline: 16px; grid-auto-columns: minmax(280px, 82vw); }
  .gtv4-today { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .gtv4-card--urgent { grid-template-columns: 130px 1fr; }
  .gtv4-qv { max-height: 100dvh; border-radius: 0; }
  .gtv4-qv__grid { grid-template-columns: 1fr; gap: 14px; padding: 14px 14px 100px; }
  .gtv4-qv__hero { min-height: clamp(180px, 48vw, 230px); }
  .gtv4-qv__title { font-size: clamp(28px, 9vw, 42px); }
  .gtv4-qv__media { min-height: 150px; max-height: 190px; }
  .gtv4-qv__footer { grid-template-columns: .8fr 1.2fr; padding-inline: 14px; }
}

@media (max-width: 430px) {
  .gtv4-shell { padding-inline: 14px; }
  .gtv4-section { margin-top: 28px; }
  .gtv4-grid { gap: 10px; }
  .gtv4-card { border-radius: 15px; }
  .gtv4-card__body { gap: 8px; padding: 12px; }
  .gtv4-card__title { font-size: 14px; }
  .gtv4-card__personal { top: 9px; left: 9px; padding: 5px 7px; min-height: 28px; font-size: 8px; }
  .gtv4-card__score { top: 9px; right: 9px; padding: 6px 7px; }
  .gtv4-card__event { left: 9px; bottom: 9px; }
  .gtv4-access__plans { display: block; }
  .gtv4-access__eyebrow { display: block; margin-bottom: 3px; }
  .gtv4-access__capabilities { gap: 8px; }
  .gtv4-access__play-anywhere b { display: none; }
  .gtv4-card--urgent { grid-template-columns: 116px 1fr; min-height: 180px; }
  .gtv4-card--urgent .gtv4-card__art { min-height: 180px; }
  .gtv4-card--urgent .gtv4-card__body { padding: 13px; }
  .gtv4-card--urgent .gtv4-access { display: none; }
  .gtv4-qv__topbar { min-height: 56px; }
  .gtv4-qv__decision { padding: 12px; }
  .gtv4-qv__metric { min-height: 75px; padding: 11px; }
  .gtv4-qv__footer { gap: 8px; }
}

@media (max-width: 350px) {
  .gtv4-grid { grid-template-columns: 1fr; }
  .gtv4-rail { grid-auto-columns: 86vw; }
}

@media (prefers-reduced-motion: reduce) {
  .gtv4-card,
  .gtv4-card__art img,
  .gtv4-access__play-anywhere svg {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}
