/*******************************************************
 * BRINK XR v2 - BRINK TRAVELER PAGE STYLES
 *******************************************************/





/************************
 * TYPOGRAPHY OVERRIDES *
 ************************/
 @font-face {
  font-display: swap;
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  src: url('/assets/fonts/spacegrotesk-var.woff2') format('woff2');
}

:root {
  --font-title: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
html[lang="ja"] {
  --font-title: 'Space Grotesk', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
  --font-body:  'Inter', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
}
html[lang="ko"] {
  --font-title: 'Space Grotesk', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
  --font-body:  'Inter', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
}
html[lang="zh"] {
  --font-title: 'Space Grotesk', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --font-body:  'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
}

h1, h2{
  font-weight: 700;
  overflow-wrap: break-word;
}
h3 {
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
}





/*******************
 * LANGUAGE PICKER *
 *******************/
.lang {
  position: relative;
  margin-left: auto;
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5625rem 0.875rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-s);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  backdrop-filter: blur(14px);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.lang-toggle:hover {
  border-color: var(--gold-line);
  color: var(--gold);
}

.lang-code {
  font-size: var(--fs-body-xs);
  font-weight: 600;   /* 600, not 700: Inter ships 400/500/600 here */
  color: var(--gold);
}

.lang-label {
  font-size: var(--fs-body-lg);
}

.lang-caret {
  width: 14px;
  height: 14px;
  opacity: 0.7;
  transition: transform 0.2s var(--ease);
}
.lang.open .lang-caret {
  transform: rotate(0deg);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 128px;
  padding: 6px;
  background: rgba(14, 14, 17, 0.92);
  border: 1px solid var(--border-s);
  border-radius: var(--radius);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(18px);
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5625rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  color: var(--text);
  transition: background 0.2s var(--ease);
}
.lang-option:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
}
.lang-option.active {
  color: var(--gold);
}

.lang-option-code {
  width: 20px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-dim);
}
.lang-option.active .lang-option-code {
  color: var(--gold);
}





/***************
 * HERO SPLASH *
 ***************/

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--border-s);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

#hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 70vh;
  background: var(--bg);
}

/* Ken-Burns slideshow */
.hero-slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: transform, opacity;
  animation: heroKen 45s infinite;
  animation-play-state: paused;
}

.hero-slides.loaded .hero-slide {
  animation-play-state: running;
}

.hero-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Pan origin + stagger per slide.
   Each slide holds for 9s (20% of the cycle) and cross-fades over 2.25s (5%).
   Slide 1 starts at -2.25s so it opens already at full opacity - it pans first,
   then fades out - and the rest follow 9s apart in source order. */
.hero-slide:nth-child(1) { transform-origin: 30% 40%; animation-delay: -2.25s; }
.hero-slide:nth-child(2) { transform-origin: 70% 30%; animation-delay:  6.75s; }
.hero-slide:nth-child(3) { transform-origin: 50% 60%; animation-delay: 15.75s; }
.hero-slide:nth-child(4) { transform-origin: 25% 65%; animation-delay: 24.75s; }
.hero-slide:nth-child(5) { transform-origin: 75% 55%; animation-delay: 33.75s; }

@keyframes heroKen {
  0%   { opacity: 0; transform: scale(1.06); }
  5%   { opacity: 1; }
  20%  { opacity: 1; }
  25%  { opacity: 0; transform: scale(1.16); }
  100% { opacity: 0; transform: scale(1.16); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation: none; }
  .hero-slide:nth-child(1) { opacity: 1; transform: scale(1.06); }

  /* Featured quotes keep the light-up on hover, not the drift */
  .review-hero::before,
  .review-hero:hover::before { transform: none; }
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(125% 105% at 30% 45%,
      rgba(8, 8, 10, 0.42) 0%,
      rgba(8, 8, 10, 0.60) 48%,
      rgba(8, 8, 10, 0.84) 100%),
    rgba(8, 8, 10, 0.34);
}

.hero-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--bg, #08080a);
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.hero-slides.loaded ~ .hero-cover {
  opacity: 0;
}

.hero-inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-top: calc(70px + 2.125rem);
  padding-bottom: 3.5rem;
}

/* Hero body */
.hero-copy {
  text-shadow: var(--shadow-text);
}

.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.25rem;
  align-items: center;
  flex: 1;
  padding: 2.5rem 0;
}

.hero-copy h1 {
  margin-bottom: 1.5rem;
  /* Let the browser even out the three lines instead of hand-placed breaks;
     older browsers just wrap normally. */
  text-wrap: balance;
}
.hero-copy h1 em{
  font-style: normal;
}
.hero-lede,
.hero-rated {
  max-width: 600px;
  font-size: var(--fs-body-lg);
  color: var(--text-mid);
}
.hero-lede  { margin-bottom: 1.25rem; }
.hero-rated { margin-bottom: 3rem; }

/* 600 rather than the browser's 700 - it is the heaviest Inter here */
.hero-rated b { font-weight: 600; }

.hero-available {
  margin-bottom: 0.5rem !important;
  font-family: var(--font-title);
  font-size: var(--fs-body-lg);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold);
}

/* Store links */
.store-list {
  display: flex;
  list-style: none;
  flex-direction: column;
  gap: 1rem;
  max-width: 360px;
}

.store-link {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.5rem;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius);
  color: #0A0A0A;
  backdrop-filter: blur(14px);
  transition: transform 0.15s var(--ease), background 0.3s var(--ease),
              border-color 0.3s var(--ease), color 0.3s var(--ease);

  /* The one thing inside .hero-copy with a light background of its own. The
     shadow the copy inherits from .hero-copy would sit under this near-black
     label on near-white as a smudge, so it stops here. */
  text-shadow: none;
}

.store-link:hover,
.store-link.flash {
  transform: translateY(-2px);
  background: var(--gold);
  border-color: var(--gold);
  color: #0A0A0A;
}

.store-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  background-color: currentColor;
  mask: var(--icon) center / 30px 30px no-repeat;
}

.store-text {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.store-name {
  font-family: var(--font-title);
  font-size: var(--fs-body-lg);
  font-weight: 600;
  line-height: 1.2;
}

.store-sub {
  font-size: var(--fs-body-xs);
  color: rgba(10, 10, 10, 0.60);
  transition: color 0.3s var(--ease);
}
.store-link:hover .store-sub,
.store-link.flash .store-sub {
  color: rgba(10, 10, 10, 0.65);
}

.store-arrow {
  width: 20px;
  height: 20px;
}





/***********
 * RATINGS *
 ***********/
#ratings {
  padding: 8rem 0;
  background: #1A1A20;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}
.stat {
  padding: 0.625rem 1.875rem;
}
.stat + .stat {
  border-left: 1px solid var(--border-m);
}
.stat-value {
  margin-bottom: 0;
  font-family: var(--font-title);
  font-size: var(--fs-title-md);
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
}
.stat-star {
  font-size: 0.7em;
  vertical-align: 0.1em;
  margin-left: 2px;
}
.stat-name {
  margin-top: 0.75rem;
  margin-bottom: 0;
  font-family: var(--font-title);
  font-size: var(--fs-body-lg);
  font-weight: 600;
  color: var(--text);
}
.stat-note {
  color: var(--text-dim);
}


.review-heroes {
  max-width: 1400px;
  margin: 3.5rem auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.review-hero {
  position: relative;
  text-shadow: var(--shadow-text);
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem;
  background: var(--gold-dim);
  border-color: var(--gold-border);
}
.review-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--photo);
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  transform: scale(1.04);
  transition: opacity 0.45s var(--ease), transform 0.6s var(--ease);
  mask-image: linear-gradient(155deg, #000 0%, rgba(0, 0, 0, 0.85) 55%, transparent 92%);
}
.review-hero:hover { 
  border-color: var(--gold-line); 
}
.review-hero:hover::before { 
  opacity: 0.32; transform: scale(1.09); 
}
.review-hero:nth-child(2) {
  transition: opacity 0.75s var(--ease-out) 0.12s, transform 0.75s var(--ease-out) 0.12s;
}
.review-hero:nth-child(3) {
  transition: opacity 0.75s var(--ease-out) 0.24s, transform 0.75s var(--ease-out) 0.24s;
}

.review-hero .review-stars {
  font-size: var(--fs-body-md);
  letter-spacing: 0.18em;
}
.review-hero .review-quote {
  font-size: var(--fs-body-lg);
  font-weight: 500;
  line-height: 1.55;
}
.review-hero .review-source {
  font-size: var(--fs-body-sm);
}

/* Review marquee */
.reviews-marquee {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.reviews-marquee .marquee-track-left  { animation: marqueeLeft 200s linear infinite; }
.reviews-marquee:hover .marquee-track { animation-play-state: paused; }

.review-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 360px;
  gap: 1rem;
  width: 360px;
  margin-right: 1rem;
  padding: 0.25rem 1.25rem;
  background: none;
  border: none;
  border-left: 1px solid var(--border-s);
  border-radius: 0;
}
.review-card:hover {
  background: none;
  border-left-color: var(--gold-border);
}
.review-stars {
  font-size: var(--fs-body-sm);
  letter-spacing: 0.12em;
  color: var(--gold);
}
.review-quote {
  flex: 1;
  color: var(--text);
}
.review-card .review-quote {
  font-size: var(--fs-body-sm);
  color: var(--text);
}
.review-source {
  font-family: var(--font-title);
  font-size: var(--fs-body-xs);
  letter-spacing: 0.04em;
  color: var(--text-dim);
}




/************
 * FEATURES *
 ************/
#features {
  padding: 8rem 0;
  background: #111114;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(250px, 1fr);
  gap: 1rem;
}

.feature-card {
  --card-img: none;
  --card-radius: var(--radius-lg);

  position: relative;
  isolation: isolate;   /* pins the clip layers behind this card's own copy */
  overflow: hidden;     /* backstop under the per-layer rounding */
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 4rem 1.5rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);

  background-color: #27272C;
  text-shadow: var(--shadow-text);

  transition: border-color 0.5s var(--ease);
}

.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -3;
  border-radius: var(--card-radius);
  background: var(--card-img) 100% 0% / cover no-repeat;
}

.feature-card.gold {
  border-color: var(--gold-line);
  background-color: #38311E;
}

.feature-card.wide { grid-column: span 2; }
.feature-card.tall { grid-row: span 2; padding: 3.125rem 2rem 1.5rem; }


/* ---- Feature reel ----------------------------------------------------
   Most cards carry a short muted clip that traveler.js runs one card after
   another once the grid is on screen. It stacks up as three positioned
   layers:

     -3  ::before   the photo
     -2  the clip, which crossfades over it
     -1  ::after    the scrim, held flat over whichever is showing

   All negative, so they sit inside the card's own stacking context above
   its border and below its copy, and the copy never has to claim a layer
   of its own to stay on top. Only the clip moves; a card without one is
   the same two layers it always was.
   The 1s matches FADE in traveler.js - change them together. */

.feature-video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* A video is handed to the compositor as a layer of its own, and an
     ancestor's overflow clip is the one thing that does not reliably follow
     it there - the clip goes on being rectangular and the corners stay
     square, poking out past the card's curve where the scrim, which is
     clipped properly, cannot reach them. Rounding the element itself clips
     its own replaced content, which does hold. */
  border-radius: var(--card-radius);

  opacity: 0;
  transition: opacity 1s linear;
  pointer-events: none;   /* the hover belongs to the card, not the clip */
}

/* The scrim that keeps the copy legible, laid once over whichever of the two
   is showing. It does not fade with the clip and it never did have any
   business doing so: fading it in over a clip that was itself fading in left
   the footage only half covered through the middle of the transition, so the
   backdrop appeared to wash out and come back on every card. Held flat, the
   photo simply dissolves into the clip underneath it and nothing else moves. */
.feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--card-radius);
  pointer-events: none;
  background: radial-gradient(130% 120% at 100% 0%, rgba(35, 35, 40, 0) 30%, rgba(35, 35, 40, 0.95) 85%);
}
.feature-card.gold::after {
  background: radial-gradient(130% 120% at 100% 0%, rgba(50, 42, 25, 0) 30%, rgba(50, 42, 25, 0.95) 85%);
}

.feature-card.reel-on .feature-video {
  opacity: 1;
}

/* Whichever card holds the reel brings its border up out of the background, so
   the clip that is playing is the one the eye is drawn to. Hover is the same
   state by hand, and it covers the two tiles that carry no clip and never take
   a turn - guarded to pointing devices, since a tap leaves :hover stuck on a
   touchscreen, the same reason traveler.js does not hand it the reel.
   0.3 rather than --border-s: the ladder tops out at 0.15, which holds against
   the section behind the card but disappears into the brighter photos. */
.feature-card.reel-on      { border-color: rgba(255, 255, 255, 0.3); }
.feature-card.gold.reel-on { border-color: var(--gold); }

@media (hover: hover) {
  .feature-card:hover      { border-color: rgba(255, 255, 255, 0.3); }
  .feature-card.gold:hover { border-color: var(--gold); }
}

.feature-icon {
  margin-bottom: 0.4375rem;
  color: var(--gold);
}
.feature-icon img {
  width: 36px;
  height: 36px;
}
.feature-card.tall .feature-icon {
  margin-bottom: 1.125rem;
}
.feature-card.tall .feature-icon img {
  width: 48px;
  height: 48px;
}

/* Followed by the card's body copy, so it drops global.css's flow margin */
.feature-stat {
  margin-bottom: 0;
  font-family: var(--font-title);
  font-size: var(--fs-title-lg);
  font-weight: 700;
  line-height: 0.95;
  color: var(--gold);
}

/* Card label, not a document heading - matches .location-name */
.feature-name {
  display: block;
  margin: 0 0 0.375rem;
  font-family: var(--font-title);
  font-size: var(--fs-body-lg);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text);
}
.feature-card.tall .feature-name {
  margin: 0.5rem 0;
  font-weight: 700;
}





/*************
 * LOCATIONS *
 *************/
#locations {
  padding: 8rem 0;
  background: #1A1A20;
}

/* Emphasised opening sentence of the lede */
.lead-in {
  color: var(--text);
}

.locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 1rem;
}

.location-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  background-color: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: left;
}

.location-photo {
  position: absolute;
  inset: 0;
  background-image: var(--photo);
  background-size: cover;
  background-position: center;
  transition: transform 0.5s var(--ease);
}
.location-card:hover .location-photo {
  transform: scale(1.07);
}

.location-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.78) 100%);
}

.location-text {
  position: absolute;
  left: 1.125rem;
  right: 1.125rem;
  bottom: 1rem;
  text-shadow: var(--shadow-text);
}

.location-name {
  display: block;
  font-family: var(--font-title);
  font-size: var(--fs-body-lg);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text);
}

.location-region {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  margin-top: 0.25rem;
  font-size: var(--fs-body-md);
  color: var(--gold);
}

.locations-note {
  margin-top: 2.5rem;
  font-family: var(--font-title);
  font-size: var(--fs-body-lg);
  font-weight: 600;
  text-align: center;
  color: var(--text-mid);
}




/**************
 * COMPARISON *
 **************/
#compare {
  padding: 8rem 0;
}

/* Photo backdrop behind this section only */
.compare-bg {
  position: absolute;
  inset: 0;
  background: url('/assets/images/backgrounds/bg_landpeak.webp') center / cover no-repeat;
}
.compare-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 12, 8, 0.75), rgba(15, 12, 8, 0.80));
}

/* Keeps "(6DoF)" / "(3DoF)" from breaking off their titles */
.nowrap {
  white-space: nowrap;
}

.compare {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 1080px;
  margin: 0 auto;
}

.compare-head,
.compare-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border: 1px solid var(--border-s);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.compare-head {
  background: #2C2C36;
}

.compare-row {
  min-height: 150px;
  background: #22222A;
}

.compare-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  padding: 1.375rem 1.875rem;
  text-align: center;
}
.compare-cell.brink {
  background: rgba(250, 190, 0, 0.07);
}
.compare-cell.other {
  border-left: 1px solid var(--border-m);
}

.compare-cell.brink { padding-right: 5rem; }
.compare-cell.other { padding-left:  5rem; }

.compare-head .compare-cell {
  justify-content: flex-end;
  gap: 0.8125rem;
  padding-top: 1.875rem;
}

.compare-icon {
  width: 72px;
  height: 72px;
}

/* Followed by .compare-note, so it drops global.css's 1.2rem flow margin */
.compare-title {
  margin-bottom: 0;
  font-family: var(--font-title);
  font-size: var(--fs-body-lg);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text);
}

.compare-note {
  margin-top: 0.25rem;
  color: var(--text-mid);
}

/* The "other apps" column reads one step quieter throughout */
.compare-cell.other .compare-title { color: var(--text-mid); }
.compare-cell.other .compare-note  { color: var(--text-dim); }

.compare-brand {
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--gold);
}
.compare-cell.other .compare-brand {
  font-weight: 600;
  color: var(--text-mid);
}

.compare-cover {
  width: 110px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--gold-border);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}

/* Fanned stack of rival app thumbnails */
.compare-stack {
  display: flex;
  align-items: center;
  height: 62px;
  perspective: 480px;
  transform-style: preserve-3d;
}
.compare-stack img {
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border: 1px solid var(--border-s);
  border-radius: 8px;
}
.compare-stack img:nth-child(1) {
  width: 74px;
  transform: rotateY(-20deg);
  opacity: 0.85;
  filter: saturate(0.7) brightness(0.95) drop-shadow(7px 3px 6px rgba(0, 0, 0, 0.65));
}
.compare-stack img:nth-child(2) {
  width: 72px;
  margin-left: -32px;
  transform: rotateY(-26deg) scale(0.95);
  opacity: 0.62;
  filter: saturate(0.6) brightness(0.82) drop-shadow(7px 3px 6px rgba(0, 0, 0, 0.6));
}
.compare-stack img:nth-child(3) {
  width: 70px;
  margin-left: -31px;
  transform: rotateY(-32deg) scale(0.89);
  opacity: 0.4;
  filter: saturate(0.5) brightness(0.7);
}

/* Centre badge - lifted out of the grid so the columns stay even */
.compare-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 130px;
}

.compare-badge-label {
  font-size: var(--fs-body-xs);
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gold);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.compare-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--border-s);
  border-radius: 50%;
  background: #15151A;
  color: var(--text-mid);
}
.compare-badge-icon img {
  width: 22px;
  height: 22px;
}




/*******
 * CTA *
 *******/
#cta {
  padding: 8rem 0;
  background: #111114;
}

.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.625rem;
  max-width: var(--max-text);
  margin: 0 auto;
  text-align: center;
  color: inherit;
}
.cta:hover {
  color: inherit;
}

.cta-art {
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.55);
  -webkit-box-reflect: below 5px linear-gradient(transparent 62%, rgba(255, 255, 255, 0.35));
}

.cta h3 {
  margin: 1.5rem 0 -0.875rem;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.cta p {
  max-width: 600px;
  font-size: var(--fs-body-lg);
}

.cta:hover .button {
  background: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px var(--gold-border);
}





/*******************
 * LOCATIONS MODAL *
 *******************/
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(4, 4, 6, 0.78);
  backdrop-filter: blur(6px);
  animation: modalFade 0.24s var(--ease) both;
}

.modal-dialog {
  position: relative;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow: auto;
  background: #121217;
  border: 1px solid var(--border-m);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
  animation: modalRise 0.36s var(--ease-pop) both;
}

@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalRise {
  from { opacity: 0; transform: translateY(26px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-hero {
  position: relative;
  height: 260px;
}

.modal-photo {
  position: absolute;
  inset: 0;
  background-image: var(--photo);
  background-size: cover;
  background-position: center;
}

.modal-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 18, 23, 0) 38%, rgba(18, 18, 23, 0.96) 100%);
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-s);
  border-radius: 50%;
  background: rgba(8, 8, 10, 0.55);
  color: var(--text);
  font-size: var(--fs-body-md);
  backdrop-filter: blur(6px);
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease),
              color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.modal-close:hover {
  transform: translateY(-2px);
  color: var(--gold);
  border-color: var(--gold-line);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

.modal-heading {
  position: absolute;
  left: 1.75rem;
  right: 1.75rem;
  bottom: 1.375rem;
  text-shadow: var(--shadow-text);
}

.modal-region {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  margin-bottom: 0.5625rem;
  font-family: var(--font-title);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.04em;
  color: var(--gold);
}
.modal-region .flag {
  width: 22px;
  height: 15px;
}

.modal-heading h3 {
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--text);
}

.modal-body {
  padding: 1.5rem 1.75rem 1.75rem;
}

.modal-desc {
  margin-bottom: 1.5rem;
  font-size: var(--fs-body-md);
  line-height: 1.6;
  color: var(--text);
}

.modal-desc b {
  font-weight: 600;
}
.modal-desc mark {
  background: none;
  color: var(--gold);
  font-weight: 600;
}

.modal-body .eyebrow {
  margin-bottom: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--text-dim);
}

.modal-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

.gallery-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  background-image: var(--photo);
  background-size: cover;
  background-position: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}




/**************************
 * RESPONSIVE BREAKPOINTS *
 **************************/

/* DESKTOP */
@media (max-width: 1600px) {}

/* SMALL DESKTOPS / LARGE TABLETS */
@media (max-width: 1280px) {
  /* Features */
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

/* TABLETS / PHONES */
@media (max-width: 960px) {
  /* Main Layout */
  #ratings, #compare, #locations, #features, #cta { padding: 6rem 0; }

  /* Hero - the trailer moves up above the store links once the hero is a single
     column, so the buttons stay the last thing in the stack and the thing the
     thumb lands on. .hero-copy stops generating a box, which drops its children
     into the same grid as the frame and lets order interleave the two; the grid
     gap goes with it, since that copy has always spaced itself with margins and
     would otherwise get 2.5rem on top of every one of them. */
  .hero-content { grid-template-columns: 1fr; gap: 0; padding-bottom: 1rem; }
  .hero-copy { display: contents; }
  .video-frame { order: 1; margin-bottom: 2.5rem; }
  .hero-available { order: 2; }
  .store-list { order: 3; }
  .hero-lede, .hero-rated, .store-list { max-width: none; }

  /* Ratings - three featured quotes abreast get too narrow here, and four
     stats in a row leave no width for the notes under them, so they pair off
     two by two: the dividing rules move with the layout, down the middle and
     along the break between the rows. */
  .review-heroes { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 1.25rem; }
  .stat + .stat { border-left: none; }
  .stat:nth-child(even)  { border-left: 1px solid var(--border-m); }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--border-m); padding-top: 1.75rem; }

  /* Comparison */
  .compare-head, .compare-row { grid-template-columns: 1fr; }
  .compare-row { min-height: 0; }
  .compare-cell.brink, .compare-cell.other { padding-left: 1.875rem; padding-right: 1.875rem; }
  .compare-cell.other { border-left: none; border-top: 1px solid var(--border-m); }

  /* Badge rejoins the flow as a divider between the two cells */
  .compare-badge { position: static; transform: none; flex-direction: row; justify-content: center; gap: 0.75rem; width: 100%; padding: 0.875rem 1.875rem; background: #2C2C36; border-top: 1px solid var(--border-m); }
  .compare-badge-icon { width: 38px; height: 38px; }
  .compare-badge-icon img { width: 18px; height: 18px; }
}

/* PHONES */
@media (max-width: 640px) {
  /* Hero - the rating line goes, the ratings section makes the same point a
     screen later and the stack is already long before the store buttons. The
     lede takes back the margin it was sharing with it. */
  .hero-rated { display: none; }
  .hero-lede { margin-bottom: 3rem; }

  .lang-label { display: none; }
  .store-link { padding: 0.875rem 1rem; gap: 0.75rem; }
  .store-icon { width: 32px; height: 32px; mask-size: 26px 26px; }

  /* Ratings */
  .stats { grid-template-columns: 1fr; gap: 1rem; }
  .stat + .stat { border-left: none; border-top: 1px solid var(--border-m); padding-top: 1.75rem; }
  .review-heroes { grid-template-columns: 1fr; }
  .review-hero { padding: 1.75rem 1.5rem; }
  .reviews-marquee { margin-top: 2rem; padding-top: 2rem; }
  .review-card { flex-basis: 300px; width: 300px; }

  /* Locations */
  .locations-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; }

  /* Features */
  .feature-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .feature-card.wide, .feature-card.tall { grid-column: auto; grid-row: auto; }

  /* CTA */
  .cta-art { -webkit-box-reflect: none; }

  /* Modal */
  .modal { padding: 0; }
  .modal-dialog { max-height: 100vh; border: none; border-radius: 0; }
  .modal-hero { height: 210px; }
  .modal-gallery { gap: 0.5rem; }
}