/* ============================================================================
   Google Play — QuickTV app detail page replica
   All colors / sizes / spacing transcribed from live-site measurements
   (see extraction-report.md for the per-value evidence trail).
   ========================================================================= */

@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/google-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/google-sans-500.woff2") format("woff2");
}
/* The live page references "Google Sans Display" without shipping an
   @font-face for it, so it resolves through the same Google Sans file. */
@font-face {
  font-family: "Google Sans Display";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/google-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/roboto-400.woff2") format("woff2");
}
@font-face {
  font-family: "Google Material Icons";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/google-material-icons.woff2") format("woff2");
}
@font-face {
  font-family: "Material Icons Extended";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/material-icons-extended.woff2") format("woff2");
}

:root {
  --gp-green: #01875f;
  --gp-green-dark: #056449;
  --gp-green-soft: #e6f3ef;
  --gp-ink: #202124;
  --gp-ink-alt: #1f1f1f;
  --gp-muted: #5f6368;
  --gp-divider: #dadce0;
  --gp-divider-strong: #c4c7c5;
  --gp-track: #e8eaed;
  --gp-blue: #0b57d0;
  --font-sans: "Google Sans", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Google Sans Display", "Google Sans", Roboto, Arial, sans-serif;
  --font-body: Roboto, Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: #fff;
  color: var(--gp-ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 14px;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

img {
  display: block;
}

/* Material icon ligature helper ------------------------------------------- */
.mi {
  font-family: "Google Material Icons";
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  color: var(--gp-muted);
  -webkit-user-select: none;
  user-select: none;
}
.mi--mie {
  font-family: "Material Icons Extended";
}

/* =========================================================================
   Top bar
   ========================================================================= */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 32px 0 24px;
  background: #fff;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-right: 6px;
}
.brand__mark {
  width: 40px;
  height: 40px;
  display: block;
}
.brand__word {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 28px;
  font-weight: 500;
  color: var(--gp-muted);
  white-space: nowrap;
}

.tabs {
  display: flex;
  align-items: stretch;
  height: 64px;
}
.tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 0 16px;
  font-size: 14px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.25px;
  color: var(--gp-muted);
  white-space: nowrap;
}
.tab:hover {
  color: var(--gp-ink);
}
.tab--active {
  color: var(--gp-green);
}
.tab--active::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--gp-green);
}

.topbar__spacer {
  flex: 1 1 auto;
}

.icon-button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.icon-button:hover {
  background: rgba(60, 64, 67, 0.08);
}
.icon-button .mi {
  font-size: 24px;
}
.topbar__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-left: 12px;
}

/* =========================================================================
   Page shell
   ========================================================================= */
.page {
  padding: 64px 72px 0;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 364px;
  column-gap: 72px;
  padding-bottom: 40px;
}

.app-title {
  margin: 48px 0 0;
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 64px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--gp-ink);
  max-width: 800px;
}

.developer {
  display: inline-block;
  margin-top: 18px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0.1px;
  color: var(--gp-green);
}

.tag-row {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 3px;
  color: var(--gp-muted);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.3px;
}
.tag-row__sep {
  margin: 0 6px;
  color: var(--gp-muted);
}

.stats {
  display: flex;
  align-items: stretch;
  margin-top: 29px;
  height: 44px;
}
.stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.stat + .stat {
  border-left: 1px solid var(--gp-divider);
  padding-left: 24px;
  margin-left: 16px;
}
.stat__value {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.25px;
  color: var(--gp-ink);
  height: 24px;
}
.stat__value .mi {
  font-size: 12px;
  color: var(--gp-ink);
}
.stat__label {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.3px;
  color: var(--gp-muted);
}

.actions {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 36px;
}

.btn-install {
  width: 200px;
  height: 44px;
  border-radius: 8px;
  background: var(--gp-green);
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0.1px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-install:hover {
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.15px;
  color: var(--gp-green);
}
.btn-text:hover {
  background: rgba(1, 135, 95, 0.06);
}
.btn-text .mi {
  font-size: 18px;
  color: var(--gp-green);
}
.actions__share {
  margin-left: 8px;
}
.actions__wishlist {
  margin-left: 8px;
}

.hero__icon {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
.app-icon {
  width: 240px;
  height: 240px;
  margin-top: 48px;
  border-radius: 20%;
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

/* =========================================================================
   Two-column body
   ========================================================================= */
.columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 364px;
  column-gap: 72px;
  align-items: start;
}

.col-main {
  min-width: 0;
}
.col-side {
  min-width: 0;
}

/* ---- Screenshot carousel ------------------------------------------------ */
.carousel {
  position: relative;
}
.carousel__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar {
  display: none;
}
.shot {
  flex: 0 0 166px;
}
.shot img {
  width: 166px;
  height: 296px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--gp-track);
}

.carousel__arrow {
  position: absolute;
  top: 50%;
  right: -28px;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.carousel__arrow[hidden] {
  display: none;
}
.carousel__arrow .mi {
  font-size: 24px;
  color: var(--gp-ink);
}

/* ---- Section headings --------------------------------------------------- */
.section {
  margin-top: 44px;
}
.section__head {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 28px;
}
.section__title {
  margin: 0;
  font-size: 22px;
  line-height: 28px;
  font-weight: 500;
  color: var(--gp-ink);
}
.section__title .mi {
  font-size: 20px;
  vertical-align: -4px;
  margin-left: 16px;
}

/* ---- About this app ---------------------------------------------------- */
.about__body {
  margin-top: 20px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.2px;
  color: var(--gp-muted);
}
.about__body.is-clamped {
  max-height: 120px;
  overflow: hidden;
}
.about__body p {
  margin: 0;
}
.about__body p + p {
  margin-top: 20px;
}

.about__meta {
  margin-top: 20px;
}
.about__meta-label {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.25px;
  color: var(--gp-ink);
}
.about__meta-value {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.2px;
  color: var(--gp-muted);
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 16px;
  margin-top: 12px;
  border: 1px solid var(--gp-divider);
  border-radius: 16px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.15px;
  color: var(--gp-muted);
}
.chip:hover {
  background: rgba(60, 64, 67, 0.04);
}

/* ---- Data safety ------------------------------------------------------- */
.safety__intro {
  margin-top: 20px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.2px;
  color: var(--gp-muted);
}
.safety__card {
  margin-top: 20px;
  border: 1px solid var(--gp-divider);
  border-radius: 8px;
  padding: 20px 20px 0;
}
.safety__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.safety__item {
  display: flex;
  gap: 20px;
  padding-bottom: 20px;
}
.safety__item + .safety__item {
  padding-top: 0;
}
.safety__icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-top: 2px;
}
.safety__text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.2px;
  color: var(--gp-muted);
}
.safety__sub {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.3px;
  color: var(--gp-muted);
}
.safety__more {
  padding-bottom: 12px;
}

/* ---- Ratings and reviews ---------------------------------------------- */
.rr__verified {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 14px;
  line-height: 28px;
  letter-spacing: 0.15px;
  color: var(--gp-muted);
}
.rr__verified .mi {
  font-size: 16px;
}

.rr__devices {
  display: flex;
  align-items: center;
  height: 38px;
  margin-top: 30px;
}
.rr__device {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  margin-right: 12px;
  border-radius: 9999px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0.25px;
  color: var(--gp-muted);
}
.rr__device .mi {
  font-size: 16px;
}
.rr__device--active {
  background: var(--gp-green-soft);
  color: var(--gp-green-dark);
}
.rr__device--active .mi {
  color: var(--gp-green-dark);
}

.rr__summary {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  column-gap: 47px;
  margin-top: 42px;
}
.rr__score {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 64px;
  font-weight: 400;
  color: var(--gp-ink);
}
.rr__score-count {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.3px;
  color: var(--gp-muted);
  margin-top: 30px;
}
.rr__bars {
  padding-top: 0;
}
.rr__bar-row {
  display: grid;
  grid-template-columns: 23px 718px;
  column-gap: 0;
  align-items: center;
  height: 16px;
}
.rr__bar-row + .rr__bar-row {
  margin-top: 0;
}
.rr__bar-label {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.3px;
  color: var(--gp-muted);
}
.rr__bar {
  height: 10px;
  border-radius: 9999px;
  background: var(--gp-track);
  overflow: hidden;
}
.rr__bar-fill {
  height: 10px;
  border-radius: 9999px;
  background: var(--gp-green);
}

/* ---- Review cards ------------------------------------------------------ */
.review {
  padding-top: 32px;
}

.review__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.review__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex: 0 0 32px;
  object-fit: cover;
}
.review__author {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.2px;
  color: var(--gp-ink);
}
.review__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 21px;
}
.review__stars {
  display: flex;
  align-items: center;
}
.review__star {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
}
.review__date {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.3px;
  color: var(--gp-muted);
}
.review__more {
  margin-left: auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -12px;
}
.review__more:hover {
  background: rgba(60, 64, 67, 0.08);
}
.review__more .mi--mie {
  font-size: 24px;
}
.review__body {
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.2px;
  color: var(--gp-muted);
}
.review__helpful {
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.3px;
  color: var(--gp-muted);
}
.review__ask {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.3px;
  color: var(--gp-muted);
}
.vote-chip {
  height: 24px;
  padding: 0 12px;
  border: 1px solid var(--gp-divider);
  border-radius: 9999px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  line-height: 10px;
  font-weight: 500;
  letter-spacing: 0.25px;
  color: var(--gp-muted);
}
.vote-chip:hover {
  background: rgba(60, 64, 67, 0.04);
}

.outline-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin-top: 12px;
  padding: 0 24px;
  border: 1px solid var(--gp-divider);
  border-radius: 4px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.25px;
  color: var(--gp-green);
}
.outline-button:hover {
  background: rgba(1, 135, 95, 0.06);
}

.flag-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  margin-top: 16px;
  padding: 0 12px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.15px;
  color: var(--gp-muted);
}
.flag-row:hover {
  background: rgba(60, 64, 67, 0.04);
}
.flag-row .mi {
  font-size: 18px;
}

/* ---- Right column sidebar --------------------------------------------- */
.side-card {
  margin-top: 40px;
  border: 1px solid var(--gp-divider-strong);
  border-radius: 16px;
  padding: 16px 20px 20px;
  display: flex;
  gap: 16px;
}
.side-card__badge {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  margin-top: 2px;
}
.side-card__title {
  font-size: 22px;
  line-height: 36px;
  font-weight: 400;
  color: var(--gp-ink-alt);
}
.side-card__line {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 32px;
  color: var(--gp-ink-alt);
}
.side-card__link {
  display: inline-block;
  font-size: 14px;
  line-height: 20px;
  color: var(--gp-blue);
}

.side-section {
  margin-top: 44px;
}
.side-section__head {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 28px;
}
.side-section__title {
  margin: 0;
  font-size: 22px;
  line-height: 28px;
  font-weight: 500;
  color: var(--gp-ink);
}
.side-section__more {
  margin-left: auto;
  width: 48px;
  height: 48px;
  margin-right: -12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.side-section__more:hover {
  background: rgba(60, 64, 67, 0.08);
}
.side-section__more .mi {
  font-size: 20px;
}

.app-list {
  margin-top: 24px;
}
.app-row {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 96px;
}
.app-row + .app-row {
  border-top: 1px solid rgba(218, 220, 224, 0.6);
}
.app-row__icon {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 12px;
  object-fit: cover;
}
.app-row__title {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--gp-ink);
}
.app-row__dev {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--gp-ink);
}
.app-row__rating {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 20px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--gp-muted);
}
.app-row__rating .mi {
  font-size: 12px;
}

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer {
  padding: 0 65px 48px;
}
.footer__rule {
  height: 1px;
  background: var(--gp-divider);
  margin-top: 36px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 266px minmax(0, 1fr);
  column-gap: 24px;
  padding-top: 36px;
}
.footer__group-label {
  display: block;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  color: var(--gp-muted);
}
.footer__links {
  margin-top: 7px;
}
.footer__link {
  display: block;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  color: #000;
}
.footer__link:hover {
  text-decoration: underline;
}
.footer__bottom {
  display: flex;
  align-items: center;
  margin-top: 28px;
  border-top: 1px solid var(--gp-divider);
}
.footer__legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.footer__legal a {
  display: flex;
  align-items: center;
  height: 48px;
  padding-right: 32px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.3px;
  color: var(--gp-muted);
}
.footer__legal a:hover {
  text-decoration: underline;
}
.footer__region {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.3px;
  color: var(--gp-muted);
}
.footer__region img {
  width: 24px;
  height: 18px;
}

/* =========================================================================
   Narrow desktop / tablet — sidebar drops beneath the main column
   ========================================================================= */
@media (max-width: 1180px) {
  .page {
    padding: 64px 32px 0;
  }
  .hero,
  .columns {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
  }
  .hero__icon {
    justify-content: flex-start;
  }
  .app-icon {
    margin-top: 0;
  }
  .rr__summary {
    grid-template-columns: 80px minmax(0, 1fr);
    column-gap: 24px;
  }
  .rr__bar-row {
    grid-template-columns: 23px minmax(0, 1fr);
  }
  .site-footer {
    padding: 0 32px 48px;
  }
  .footer__grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   Phone layout
   Geometry transcribed from the live site at 412 x 915 (clientWidth 397):
   56px top bar, 72px icon beside a 24px title, three stat cells, a full-width
   Install button with centred Share/wishlist beneath it, and a fixed
   56px bottom tab bar carrying the sections that left the top bar.
   ========================================================================= */
@media (max-width: 960px) {
  body {
    /* clear the fixed bottom tab bar */
    padding-bottom: 56px;
  }

  /* ---- Top bar: 56px, wordmark kept, tabs move to the bottom --------- */
  .topbar {
    height: 56px;
    padding: 0 16px;
  }
  .brand__mark {
    width: 40px;
    height: 40px;
  }
  .tabs {
    display: none;
  }
  .topbar__avatar {
    margin-left: 8px;
    margin-right: 8px;
  }

  /* ---- Page gutter --------------------------------------------------- */
  .page {
    padding: 56px 24px 0;
  }

  /* ---- Hero: 72px icon on the left, title block to its right --------- */
  /* The title box deliberately overruns the right gutter (see .app-title),
     which is how the live site gets its two-line wrap. Clip that overflow
     here so it never turns into a page-level horizontal scrollbar. `clip`
     is used rather than `hidden` so no scroll container is created and the
     fixed top/bottom bars stay anchored to the viewport. */
  html,
  body {
    overflow-x: clip;
  }

  .hero {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 24px;
    row-gap: 0;
    padding-bottom: 24px;
  }
  /* Let the text wrapper's children place themselves in the hero grid,
     so the icon can sit level with the title while stats/actions span both
     columns. */
  .hero > div:first-child {
    display: contents;
  }
  .hero__icon {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: start;
    justify-content: flex-start;
    /* The title carries a 48px top margin in phones' single-column hero;
       offset the icon by the same amount plus 7px so its top edge lands
       level with the reference (icon y=111 vs title y=104). */
    margin-top: 55px;
  }
  .app-icon {
    width: 72px;
    height: 72px;
    margin-top: 0;
  }

  .app-title {
    grid-column: 2;
    grid-row: 1;
    margin-top: 48px;
    font-size: 24px;
    line-height: 32px;
    /* The original's title box overruns the 24px right gutter and lays its
       text out 292px wide (measured h1 rect [120,104,292,64]), which is what
       makes it wrap as "QuickTV - Short Drama &" / "Movies". The 253px the
       gutter alone would allow breaks one word earlier, so extend it back. */
    margin-right: -39px;
  }
  .developer {
    grid-column: 2;
    grid-row: 2;
    /* Title bottom (168) -> developer top (172) on the live site. */
    margin-top: 4px;
    font-size: 16px;
    line-height: 20px;
  }
  .tag-row {
    grid-column: 2;
    grid-row: 3;
    margin-top: 4px;
    flex-wrap: wrap;
  }

  .stats {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 24px;
  }
  .actions {
    grid-column: 1 / -1;
    grid-row: 5;
    margin-top: 24px;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 4px;
  }
  /* The Install pill spans the full gutter; Share + wishlist centre below. */
  .btn-install {
    width: 100%;
    height: 36px;
    font-size: 14px;
    line-height: 20px;
  }
  .actions__share,
  .actions__wishlist {
    margin-left: 0;
  }

  /* ---- Sections get a tighter vertical rhythm ------------------------ */
  .section {
    margin-top: 32px;
  }
  .section__title {
    font-size: 20px;
    line-height: 26px;
  }
  .section__head {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  /* ---- Carousel: 114x204 cards, gap 12, track stays inside the gutter --
     Measured on the live site: shots at [24,486,114,204] stepping +126px,
     track [24,486,349,206] with scrollWidth 999. */
  .carousel__track {
    gap: 12px;
  }
  .shot {
    flex: 0 0 114px;
  }
  .shot img {
    width: 114px;
    height: 204px;
  }
  .carousel__arrow {
    right: 8px;
    width: 48px;
    height: 48px;
  }
  .carousel__arrow .mi {
    font-size: 22px;
  }

  /* ---- Ratings summary ---------------------------------------------- */
  .rr__verified {
    margin-left: 0;
  }
  .rr__summary {
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 16px;
    margin-top: 24px;
  }
  .rr__score {
    font-size: 44px;
    line-height: 52px;
  }
  .rr__bar-row {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  /* ---- Sidebar stacks under the main column -------------------------- */
  .columns {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }
  .col-side {
    margin-top: 40px;
  }

  /* App lists collapse to a two-column grid of compact cards, as on the
     live site at phone width. Saves ~600px of vertical run. */
  .app-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 12px;
    margin-top: 16px;
  }
  .app-row {
    height: auto;
    align-items: flex-start;
    gap: 8px;
  }
  .app-row + .app-row {
    border-top: 0;
  }
  .app-row__icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 8px;
  }
  .app-row__title {
    font-size: 14px;
    line-height: 18px;
  }
  .app-row__dev {
    font-size: 12px;
    line-height: 16px;
  }
  .app-row__rating {
    height: 16px;
    font-size: 12px;
  }

  /* ---- Footer -------------------------------------------------------- */
  .site-footer {
    padding: 0 24px 32px;
  }
  .footer__bottom {
    flex-wrap: wrap;
  }
  .footer__region {
    margin-left: 0;
  }
}

/* ---- Fixed bottom tab bar (phone only) ------------------------------- */
.bottom-nav {
  display: none;
}

@media (max-width: 960px) {
  .bottom-nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 50;
    display: flex;
    align-items: stretch;
    height: 56px;
    background: #fff;
    box-shadow: 0 -1px 2px rgba(60, 64, 67, 0.3), 0 -1px 3px 1px rgba(60, 64, 67, 0.15);
  }
  .bottom-nav__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--gp-muted);
    text-align: center;
  }
  .bottom-nav__item svg {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }
  .bottom-nav__item span {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    letter-spacing: 0.25px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bottom-nav__item--active {
    color: var(--gp-green);
  }
}

/* ---- Third stat cell is phone-only in the original -------------------- */
.stat--teen {
  display: none;
}

@media (max-width: 960px) {
  .stat--teen {
    display: flex;
  }
  .stat--teen .stat__value {
    gap: 4px;
  }
  .stat--teen img {
    /* 24px so the badge slot (24) + label row (20) fills the 44px cell,
       matching the live cell box of [120,238,96,44]. */
    width: 24px;
    height: 24px;
  }
  .stat--teen .stat__label {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .stat--teen .mi {
    font-size: 14px;
  }
}