/* Megapari Zambia — site styles.
   Built on tokens.css. Rules from MEGAPARI_BRAND_GUIDE_AI.md:
   dark #000413 canvas, Druk display + Gilroy UI, pill controls #1A5DCE,
   sport = blue dominant, casino = red+gold accent, 3D as a single accent. */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--mp-blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--text);
}

h1,
h2,
h3 {
  text-wrap: balance;
}

.wrap {
  width: var(--wrap);
  margin-inline: auto;
}

.skip {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip:focus {
  position: fixed;
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
  z-index: 100;
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--space-3) var(--space-5);
  overflow: visible;
  clip-path: none;
  border-radius: var(--radius-pill);
  background: var(--ui-blue);
  color: var(--text-on-accent);
  font-weight: 500;
  text-decoration: none;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ---------- Buttons (§6.1 — pill, #1A5DCE, four states) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3rem;
  padding: 0 var(--space-6);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--button);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}

/* Label is --text, not --text-on-accent. The brand guide names #D6DCEC for
   labels on blue, but on #1A5DCE that measures 4.37:1 — under the 4.5:1 AA
   floor, and these labels are 19px/500, so the 3:1 large-text allowance does
   not apply. #EFF1F8 is still a brand token and measures 5.32:1. */
.btn-primary {
  background: var(--ui-blue);
  color: var(--text);
}

.btn-primary:hover {
  background: var(--btn-hover);
  color: #fff;
  transform: translateY(-1px);
}

.btn-primary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px #000, 0 0 0 3px var(--ui-blue);
}

.btn-primary:active {
  transform: translateY(0) scale(0.99);
}

.btn-primary[disabled],
.btn-primary[aria-disabled='true'] {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.3);
  cursor: not-allowed;
  transform: none;
}

/* Ghost = chip-style outline (§6.2) */
.btn-ghost {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--ui-blue-bright);
}

.btn-ghost:hover {
  background: rgba(32, 102, 218, 0.14);
  color: var(--text);
  transform: translateY(-1px);
}

.btn-lg {
  min-height: 3.5rem;
  padding: 0 var(--space-7);
  font-size: var(--body-lg);
}

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: rgba(0, 4, 19, 0.82);
  backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--hairline);
}

.nav-inner {
  width: var(--wrap);
  margin-inline: auto;
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.brand {
  flex: none;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.brand img {
  height: 1.75rem;
  width: auto;
}

.nav-links {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links a {
  color: var(--text-muted);
  font-size: var(--body-sm);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.nav-links a:hover,
.nav-links a[aria-current='page'] {
  color: var(--text);
}

.nav-links a[aria-current='page'] {
  position: relative;
}

.nav-links a[aria-current='page']::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: -0.5rem;
  height: 2px;
  border-radius: 2px;
  background: var(--ui-blue-bright);
}

/* ---------- Submenu (Sports > Football) ----------
   Desktop: a dropdown on hover and on :focus-within, so the keyboard reaches
   it with no JS. The panel's own top padding forms the visual gap, keeping it
   hover-contiguous with the parent — a margin there opens a dead strip that
   closes the menu as the pointer crosses it. */

/* Every item measures the same way. A flex .has-sub sized itself to the
   link's content box while its block siblings sized to their line box, which
   left Sports sitting two pixels below the rest of the row. */
.nav-links li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.nav-links .has-sub {
  position: relative;
}

/* The caret sits on the <li>, not the link: a[aria-current] already owns the
   link's ::after for the active underline. */
.nav-links .has-sub::after {
  content: '';
  width: 0.3rem;
  height: 0.3rem;
  border-inline-end: 1.5px solid var(--text-muted);
  border-block-end: 1.5px solid var(--text-muted);
  rotate: 45deg;
  translate: 0 -0.1rem;
  transition: border-color var(--dur) var(--ease);
}

.nav-links .has-sub:hover::after,
.nav-links .has-sub:focus-within::after,
.nav-links .is-ancestor::after {
  border-color: var(--text);
}

.nav-links .is-ancestor > a {
  color: var(--text);
}

.nav-links .subnav {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: -0.875rem;
  z-index: 30;
  display: grid;
  gap: var(--space-3);
  min-width: 9rem;
  margin: 0;
  padding: 1.375rem 0.875rem 0.75rem;
  list-style: none;
  background: linear-gradient(transparent 0.625rem, var(--surface-2) 0.625rem);
  border-radius: var(--radius-card);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}

.nav-links .subnav::before {
  content: '';
  position: absolute;
  inset: 0.625rem 0 0;
  border-radius: var(--radius-card);
  box-shadow: inset 0 0 0 1px var(--hairline);
  pointer-events: none;
}

.nav-links .has-sub:hover .subnav,
.nav-links .has-sub:focus-within .subnav {
  opacity: 1;
  visibility: visible;
}

.nav-links .subnav a {
  display: block;
  white-space: nowrap;
}

/* Mobile panel: no dropdown. The child is listed inline under its parent and
   indented, so the hierarchy reads on a phone too. */
.nav-panel .subnav {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: 0 0 0 var(--space-4);
  list-style: none;
  border-inline-start: 1px solid var(--hairline);
}

.nav-panel .subnav a {
  font-size: var(--body);
  color: var(--text-muted);
}

.nav-panel .subnav a[aria-current='page'] {
  color: var(--text);
}

/* Seven items do not fit at the narrow end of the desktop range: Partners
   dropped to a second row at 1024px. The gap tightens before the row breaks,
   which costs nothing visually and keeps the bar a single line down to the
   point where the mobile panel takes over. */
@media (max-width: 78rem) {
  .nav-links {
    gap: var(--space-4);
  }
}

@media (max-width: 68rem) {
  .nav-links {
    gap: 0.85rem;
  }

  .nav-links a {
    font-size: var(--caption);
  }
}

.nav-cta {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nav-cta .btn {
  min-height: 2.625rem;
  padding: 0 var(--space-5);
  font-size: var(--body-sm);
}

.nav-toggle {
  display: none;
  min-height: 2.625rem;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ui-blue-bright);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--body-sm);
  font-weight: 500;
  cursor: pointer;
}

.nav-panel {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5) 1.25rem var(--space-6);
  border-block-start: 1px solid var(--hairline);
}

/* `display: grid` would otherwise beat the browser's [hidden] rule. */
.nav-panel[hidden] {
  display: none;
}

.nav-panel ul {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* :not(.btn) for the same specificity reason as .prose a — the panel holds a
   .btn-primary, and a descendant-a rule outranks a single-class button rule. */
.nav-panel a:not(.btn) {
  color: var(--text);
  font-size: var(--body-lg);
  font-weight: 500;
  text-decoration: none;
}

/* ---------- Hero (§12.1 — full-bleed Option A, copy on the quiet left) ---------- */

/* Compact on purpose: a shorter field than 100svh keeps the next section
   peeking above the fold, and it scales the photo down with it. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  --hero-h: clamp(25rem, 68svh, 38rem);
  min-height: var(--hero-h);
  padding-block: var(--space-6);
  background: var(--bg);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--sport-glow);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: var(--wrap);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 0.46fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
}

.hero-copy {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
}

.eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem var(--space-4);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--ui-blue-bright);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--caption);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw + 0.5rem, 3.5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.hero-lede {
  margin: 0;
  max-width: 34ch;
  color: var(--text-muted);
  font-size: var(--body-lg);
  line-height: 1.45;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* One quiet entrance, not a scroll-reveal system. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * {
    animation: hero-rise 620ms var(--ease) backwards;
  }

  .hero-copy > :nth-child(1) { animation-delay: 40ms; }
  .hero-copy > :nth-child(2) { animation-delay: 110ms; }
  .hero-copy > :nth-child(3) { animation-delay: 180ms; }
  .hero-copy > :nth-child(4) { animation-delay: 250ms; }
  .hero-copy > :nth-child(5) { animation-delay: 320ms; }
}

@keyframes hero-rise {
  from {
    opacity: 0;
    translate: 0 0.75rem;
  }
}

/* Right-hand field, not full-bleed. The frame stays narrower than the
   photo's own 3:2, so `cover` scales by height: the subject is never cut
   at the top or bottom, and it reads smaller than a full-width crop.
   Only the photo's own dark left margin is trimmed. */
/* Width is capped at 1.5x the hero height — the photo's own 3:2 — so the
   frame never becomes wider than the picture and `cover` always scales by
   height. That keeps the vertical crop at zero on any screen width. */
.hero-visual {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(63%, calc(var(--hero-h) * 1.5));
  z-index: 0;
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
}

/* Portrait only: edges dissolve so the page canvas and sport glow
   show through. The 3D ball sits on top and is not masked. */
.hero-photo {
  position: absolute;
  inset: 0;
  display: block;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 36%, #000 90%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 12%, #000 80%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 36%, #000 90%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 12%, #000 80%, transparent 100%);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-composite: intersect;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 82% center;
}

/* Official brand 3D fallback if the generated files are missing. */
.hero-visual--3d {
  background:
    radial-gradient(56% 56% at 62% 52%, rgba(32, 102, 218, 0.55) 0%, rgba(0, 31, 82, 0) 74%),
    radial-gradient(38% 38% at 82% 30%, rgba(230, 53, 43, 0.3) 0%, rgba(0, 4, 19, 0) 76%),
    linear-gradient(180deg, #041027 0%, #01060f 100%);
}

.hero-visual--3d .hero-art {
  position: absolute;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

/* Sport is the dominant object, casino the secondary one — roughly 2:1
   in area, so the hierarchy from guide §3.2 is unmistakable. */
.hero-art--sport {
  inset-block-end: 5%;
  inset-inline-start: 5%;
  max-width: 62%;
  max-height: 74%;
  filter: drop-shadow(0 26px 32px rgba(0, 0, 0, 0.6));
}

.hero-art--casino {
  inset-block-start: 6%;
  inset-inline-end: 4%;
  max-width: 40%;
  max-height: 44%;
  opacity: 0.9;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.55));
}

@media (prefers-reduced-motion: no-preference) {
  .hero-art--sport {
    animation: hero-float 6.5s ease-in-out infinite;
  }

  .hero-art--casino {
    animation: hero-float 7.5s ease-in-out -2.5s infinite;
  }
}

@keyframes hero-float {
  0%, 100% { translate: 0 -0.35rem; }
  50% { translate: 0 0.35rem; }
}

@media (max-width: 40rem) {

  /* Photo on top, copy below it — no overlap at all. Relying on the dark
     zone of the portrait only works while the crop cooperates; stacking is
     deterministic. */
  .hero {
    display: grid;
    grid-template-rows: auto auto;
    align-items: start;
    min-height: 0;
    padding-block: 0 var(--space-6);
  }

  .hero-copy {
    gap: var(--space-3);
  }

  .hero h1 {
    font-size: clamp(1.75rem, 8vw, 2.4rem);
  }

  .hero-lede {
    font-size: var(--body);
  }

  .hero-visual {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 4 / 5;
    max-height: 36svh;
  }

  /* fade the bottom of the photo into the page, so the copy below it starts
     on clean ground instead of a hard edge */
  .hero-photo {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
  }

  /* 55% keeps the face near the middle of the crop and shows more of the
     flag (measured: 13% flag-green in frame vs 11% at 22%). */
  .hero-photo img {
    object-position: center 55%;
  }

  .hero-inner {
    margin-block-start: var(--space-2);
  }



  /* Logo + flag + Menu must fit 390px: the SVG logo scales by its own
     aspect ratio, so it needs a smaller cap here. */
  .nav-inner {
    gap: var(--space-4);
  }

  .brand img {
    height: 1.375rem;
  }



  .nav-toggle {
    padding: 0 var(--space-4);
  }

  .hero-art--sport {
    max-width: 62%;
    max-height: 66%;
  }

  .hero-art--casino {
    max-width: 50%;
  }
}

/* ---------- Stat row (welcome numbers, sport-first) ---------- */

.stats {
  width: var(--wrap);
  margin: var(--space-7) auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.stat {
  position: relative;
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

.stat::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
}

.stat--sport::before {
  background: var(--grad-blue);
}

.stat--casino::before {
  background: var(--grad-red);
}

.stat--promo::before {
  background: var(--grad-gold);
}

.stat b {
  display: block;
  font-family: var(--font-accent);
  font-size: clamp(1.4rem, 2vw + 0.6rem, 2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
}

.stat--sport b {
  color: var(--mp-blue);
}

.stat--casino b {
  color: var(--mp-red);
}

.stat--promo b {
  color: var(--mp-yellow);
}

.stat span {
  display: block;
  margin-block-start: var(--space-2);
  color: var(--text-muted);
  font-size: var(--body-sm);
}

/* ---------- Page head (inner pages) ---------- */

.page-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-7) var(--space-6);
  border-block-end: 1px solid var(--hairline);
}

.page-head::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sport-glow);
}

.page-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--h1);
  font-weight: 700;
  line-height: 1.06;
  text-transform: uppercase;
}

.page-head p {
  margin: var(--space-4) 0 0;
  max-width: 52ch;
  color: var(--text-muted);
  font-size: var(--body-lg);
}

/* ---------- Promo ticket (§3.3 gold = promo / rewards) ---------- */

/* Not a grey plate on the dark ground: a lit field. The gold hairline and
   the ambient wash carry it, so it belongs to the page instead of sitting
   on top of it. */
.promo {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-card);
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 88% 0%, rgba(237, 159, 2, 0.16) 0%, rgba(0, 4, 19, 0) 62%),
    radial-gradient(90% 120% at 8% 100%, rgba(32, 102, 218, 0.18) 0%, rgba(0, 4, 19, 0) 60%),
    linear-gradient(180deg, #0a1226 0%, #050c1c 100%);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.promo::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--grad-gold);
}

.promo h2,
.promo h3 {
  margin: 0;
  font-family: var(--font-accent);
  font-size: var(--h3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

.promo > p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--body-sm);
}

/* ---------- Promo ticket: the whole card is the copy button ---------- */

.ticket {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'code icon'
    'hint icon';
  align-items: center;
  gap: 0.15rem var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border: 0;
  border-radius: var(--radius-control);
  background: var(--bg);
  box-shadow: inset 0 0 0 1.5px rgba(237, 159, 2, 0.45);
  color: var(--text);
  font-family: var(--font-ui);
  text-align: start;
  cursor: pointer;
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.ticket:hover {
  background: rgba(237, 159, 2, 0.07);
  box-shadow: inset 0 0 0 1.5px var(--mp-yellow);
  transform: translateY(-1px);
}

.ticket:active {
  transform: translateY(0);
}

.ticket:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.ticket-label {
  grid-area: label;
  color: var(--text-muted);
  font-size: var(--caption);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ticket-code {
  grid-area: code;
  font-family: var(--font-accent);
  font-size: clamp(1.35rem, 1.4vw + 0.8rem, 1.7rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.06em;
  color: var(--mp-yellow);
}

.ticket-hint {
  grid-area: hint;
  color: var(--text-muted);
  font-size: var(--caption);
  font-weight: 500;
}

.ticket-icon {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-control);
  background: rgba(237, 159, 2, 0.12);
  color: var(--mp-yellow);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.ticket-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.ticket:hover .ticket-icon {
  background: var(--mp-yellow);
  color: #1a1200;
}

.ticket[data-state='ok'] {
  box-shadow: inset 0 0 0 1.5px var(--mp-yellow);
  background: rgba(237, 159, 2, 0.12);
}

.ticket[data-state='ok'] .ticket-hint {
  color: var(--mp-yellow);
}

.ticket[data-state='ok'] .ticket-icon {
  background: var(--mp-yellow);
  color: #1a1200;
}

.ticket[data-state='err'] {
  box-shadow: inset 0 0 0 1.5px var(--mp-red);
}

.ticket[data-state='err'] .ticket-hint {
  color: var(--mp-red);
}

.promo .btn {
  justify-self: start;
}

/* Offer title as a composition, not a sentence: small kicker, one large
   Druk figure, quiet qualifier. Keeps the narrow column from reading as a
   block of text while the h2 semantics stay intact. */
.promo-title {
  display: grid;
  gap: 0.1rem;
}

.promo-kicker {
  font-family: var(--font-ui);
  font-size: var(--caption);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.promo-figure {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 3.6vw + 1rem, 4rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--mp-yellow);
}

.promo-with {
  font-family: var(--font-ui);
  font-size: var(--body-sm);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

/* Prose + offer column. The aside sticks, so a long text column never
   leaves it stranded in white space — it travels with the reading instead. */
.with-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem);
  gap: var(--space-6) var(--space-7);
  align-items: start;
}

.with-aside .prose {
  max-width: 62ch;
}

.promo--aside {
  position: sticky;
  inset-block-start: calc(var(--nav-h) + var(--space-4));
  gap: var(--space-6);
  padding: 2.5rem var(--space-6);
}

.promo--aside .promo-copy {
  display: grid;
  gap: var(--space-3);
}

.promo--aside h2,
.promo--aside h3 {
  font-size: var(--h3);
}

.promo--aside > p {
  font-size: var(--body-sm);
}

.promo--aside .promo-action {
  display: grid;
  gap: var(--space-4);
}

.promo--aside .ticket {
  padding: var(--space-3) var(--space-4);
}

.promo--aside .btn {
  justify-self: stretch;
}

@media (max-width: 62rem) {
  .with-aside {
    grid-template-columns: 1fr;
  }

  .promo--aside {
    position: static;
  }
}

/* Wide promo band — copy left, code and CTA right. No dead column. */
.promo--band {
  grid-template-columns: minmax(0, 1fr) minmax(21rem, 26rem);
  align-items: center;
  gap: var(--space-6) var(--space-7);
  padding: 2.5rem var(--space-6);
}

.promo--band .promo-copy {
  display: grid;
  gap: var(--space-3);
}

.promo--band .promo-figure {
  font-size: clamp(2.2rem, 2.6vw + 1rem, 3.2rem);
}

.promo--band .promo-copy p {
  margin: 0;
  max-width: 48ch;
  color: var(--text-muted);
  font-size: var(--body-sm);
}

.promo--band .promo-action {
  display: grid;
  gap: var(--space-3);
}

.promo--band .promo-action .btn {
  justify-self: stretch;
}

@media (max-width: 62rem) {
  .promo--band {
    grid-template-columns: 1fr;
    padding: var(--space-6) var(--space-5);
  }
}

/* The terms line under a money figure. Quieter than the offer itself, but it
   has to stay readable: it is the one place the page says the bonus has
   conditions, and the content review asked for it next to the CTA rather than
   only in the footer. Muted colour, not a smaller size than the body-sm around
   it — 12px legal text on a phone is a dark pattern. */
.promo-terms {
  margin: 0;
  max-width: 52ch;
  color: var(--text-muted);
  font-size: var(--body-sm);
}

.promo-terms a {
  color: inherit;
  text-underline-offset: 0.18em;
}

/* ---------- Directions: Sport (blue) vs Casino (red+gold) — §3.2 ---------- */

.directions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.direction {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--space-5);
  padding: 2.5rem var(--space-6);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

.direction::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.9;
}

/* Official brand 3D object as a single accent (guide §7), never a collage. */
.direction-art {
  position: absolute;
  z-index: -1;
  inset-block-start: 50%;
  inset-inline-end: -1.5rem;
  translate: 0 -50%;
  width: clamp(7rem, 12vw, 11rem);
  height: auto;
  opacity: 0.5;
  pointer-events: none;
}

@media (max-width: 62rem) {
  .direction-art {
    inset-block-start: auto;
    inset-block-end: -1rem;
    translate: none;
    width: 7rem;
    opacity: 0.38;
  }
}

.direction--sport::before {
  background: var(--sport-glow);
}

.direction--casino::before {
  background: var(--casino-glow);
}

/* Label reads first, the number carries the direction colour. */
.direction h3 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--caption);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.direction h3::before {
  content: '';
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
}

.direction--sport h3::before {
  background: var(--mp-blue);
}

.direction--casino h3::before {
  background: var(--mp-red);
}

.direction .amount {
  margin: 0;
  font-family: var(--font-accent);
  font-size: clamp(1.5rem, 2vw + 0.7rem, 2.1rem);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}

.direction--sport .amount {
  color: var(--mp-blue);
}

.direction--casino .amount {
  color: var(--mp-yellow);
}

.direction p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--body-sm);
  line-height: 1.6;
  max-width: 44ch;
}

.direction .btn {
  justify-self: start;
  margin-block-start: var(--space-2);
}

/* ---------- Content sections: readable prose + full-width figures ---------- */

/* Vertical rhythm scales with the viewport: 3rem on a phone up to 6rem on a
   desktop, so large image sections get real separation instead of a flat gap. */
.section {
  padding-block: clamp(2.75rem, 4.5vw, 4.75rem);
}

.section + .section {
  padding-block-start: 0;
}

.section-head {
  margin-block-end: var(--space-6);
}

.section-head {
  display: grid;
  gap: var(--space-4);
  margin-block-end: var(--space-6);
}

.section h2 {
  margin: 0;
  font-family: var(--font-accent);
  font-size: var(--h2);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.section h2 + p {
  margin: 0;
}

/* Prose column — one measure, start-aligned, never a half-empty card. */
.prose {
  max-width: var(--measure);
  display: grid;
  gap: var(--space-5);
}

.prose p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--body);
  line-height: 1.65;
}

.prose p strong {
  color: var(--text);
  font-weight: 700;
}

/* :not(.btn) — a bare .btn-primary rule (0,1,0) loses to .prose a (0,1,1),
   so without this every button inside prose was painted link-blue on blue. */
.prose a:not(.btn) {
  color: var(--mp-blue);
}

.prose .figure {
  width: 100%;
  max-width: 36rem;
}

/* Figures keep their own aspect ratio — the art is baked into the banner,
   so it is never cropped into a narrow column. */
/* No card, no shadow: the banners are lit objects on the same #000413
   ground as the page, so they dissolve into it instead of sitting on it
   as a plate. Their own floor reflection is brighter than the page, which
   is what made the bottom edge read as a hard cut — the mask kills it. */
.figure {
  margin: 0;
  overflow: hidden;
}

.figure img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio, 16 / 9);
  object-fit: cover;
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 7%, #000 82%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 7%, #000 82%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-composite: intersect;
}

/* Figure above a single readable column — capped so a banner never
   becomes the loudest thing on the page. */
.figure figcaption {
  margin-block-start: var(--space-3);
  color: var(--text-muted);
  font-size: var(--body-sm);
  line-height: 1.5;
}

.stack {
  display: grid;
  gap: var(--space-6);
  justify-items: start;
}

.stack .figure {
  width: 100%;
  max-width: 44rem;
}

/* Two-column split: figure beside prose. Top-aligned, so a long text
   column never leaves the figure floating in the middle of dead space. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6) var(--space-7);
  align-items: start;
}

.split .prose {
  max-width: 56ch;
}

.split .promo {
  position: sticky;
  inset-block-start: calc(var(--nav-h) + var(--space-4));
}

.split--reverse .figure {
  order: 2;
}

/* ---------- App block ---------- */

.appblock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: center;
  padding: 2.5rem var(--space-6);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-float);
}

.appblock h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-accent);
  font-size: var(--h3);
  font-weight: 700;
  text-transform: uppercase;
}

.appblock p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--body-sm);
  max-width: 46ch;
}

.store-links {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.store-links img {
  height: 3.25rem;
  width: auto;
  border-radius: var(--radius-control);
}

/* ---------- CTA band ---------- */

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.75rem, 4vw, 3.5rem);
  border-block-start: 1px solid var(--hairline);
}

.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-ambient);
  opacity: 0.42;
}

.cta-band .wrap {
  display: grid;
  /* One column, and never wider than the wrap. Without minmax(0, 1fr) the
     implicit auto track takes the max-content width of the heading; the
     heading's cap is 26ch of Druk Wide, which measures 476px, so on a 390px
     phone the track was 476px and the section's overflow:hidden cut the
     title, the paragraph and the button off at the right edge. Measured at
     320, 360 and 390. */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--space-5);
  text-align: center;
}

.cta-band h2 {
  margin: 0;
  /* ch is a display-font unit here and 26 of them exceed a phone. The cap is
     for a long line on a desktop; the container wins on a narrow screen. */
  max-width: min(26ch, 100%);
  font-family: var(--font-display);
  font-size: var(--h1);
  font-weight: 700;
  line-height: 1.08;
  text-transform: uppercase;
  /* A single German compound can be wider than the screen in this face —
     "Willkommensbonus" at 34px measures about 416px. Hyphenation breaks it
     where the language allows; break-word is the backstop for a token with no
     legal break, such as a licence number. Without either, the word cannot
     wrap and the section's overflow:hidden cuts it off: measured at 127px lost
     on a 390px screen. */
  hyphens: auto;
  overflow-wrap: break-word;
}

.cta-band p {
  margin: 0;
  max-width: min(48ch, 100%);
  color: var(--text-on-accent);
}

/* Same job inside the closing band. The band sits on the accent gradient, so
   the muted token would drop below contrast here; this stays on the
   on-accent colour and steps back with opacity instead. */
.cta-band .band-terms {
  max-width: min(52ch, 100%);
  font-size: var(--body-sm);
  opacity: 0.82;
}

.cta-band .band-terms a {
  color: inherit;
  text-underline-offset: 0.18em;
}

/* ---------- Breadcrumbs ---------- */

/* A little air under the trail, otherwise it sits glued to the page head. */
.crumbs {
  padding-block: var(--space-4) var(--space-3);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--caption);
}

.crumbs li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-muted);
}

.crumbs li + li::before {
  content: '/';
  color: var(--mp-grey);
}

.crumbs a {
  color: var(--text-muted);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--text);
}

.crumbs [aria-current='page'] {
  color: var(--text);
}

/* Typographic steps: a Druk numeral does the work an icon was doing badly,
   and the single-line labels cannot wrap into an awkward second line. */
.steps {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.steps li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--hairline);
}

.steps li:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}

.steps b {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--mp-blue);
}

.steps span {
  color: var(--text);
  font-size: var(--body);
  line-height: 1.45;
}

/* Download CTA on the APK page: button plus the one-line reassurance
   a user wants before installing something outside Google Play. */
.apk-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin: 0;
}

.apk-cta span {
  color: var(--text-muted);
  font-size: var(--body-sm);
}

/* Адреса в тексте. Домен и путь — это один токен без пробелов, и на
   320px `megapari.co.zm/downloads/androidclient/…` не переносится ничем:
   он растянул блок до 374px и уволок за собой всю колонку страницы APK,
   каждый заголовок и каждый абзац. Разрешаем разрыв в любом месте: адрес,
   разорванный посередине, читается, а страница с горизонтальной прокруткой
   не читается вовсе. */
code {
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.94em;
}

/* Оговорка внутри карточки контакта: про международный номер и про то, что
   времени ответа оператор не публикует. Тише основного текста карточки, но
   не мельче — это предупреждение о деньгах. */
.contact-note {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--body-sm);
}

/* ---------- Welcome offers (bonuses) ----------
   Три карточки, а не таблица. Четыре колонки прозы на 390px давали одно
   слово в строке и прятали половину за краем; здесь на узком экране они
   идут столбиком целиком, а на широком встают в ряд и сравниваются
   взглядом. Проверено на 320, 360 и 414. */

.offers {
  display: grid;
  gap: var(--space-5);
  margin-block: var(--space-5);
}

@media (min-width: 52rem) {
  .offers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.offer {
  min-width: 0;
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.offer h3 {
  margin: 0 0 var(--space-4);
  font-size: var(--h4, 1.05rem);
}

.offer dl {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.offer dt {
  color: var(--text-muted);
  font-size: var(--body-sm);
}

.offer dd {
  margin: 0;
  font-size: var(--body-sm);
}

/* ---------- League data (Zambia Super League) ----------
   A twenty-row table with nine columns does not fit a 390px phone. Rather
   than shrink it to illegibility, the secondary columns drop out below the
   breakpoint and the essentials stay: position, club, played, difference and
   points. The table can still be scrolled sideways inside its own box if a
   long club name pushes it. */

.league {
  min-width: 0;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.league-note,
.league-caption {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--body-sm);
  line-height: 1.55;
}

.league-state {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--body-sm);
}

.league-body {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.league-cta {
  margin: 0;
}

.lg-scroll {
  min-width: 0;
  overflow-x: auto;
}

.lg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--body-sm);
  font-variant-numeric: tabular-nums;
}

.lg-table th {
  padding: 0 0 var(--space-3);
  text-align: right;
  font-family: var(--font-accent);
  font-size: var(--caption);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-block-end: 1px solid var(--hairline);
}

.lg-table td {
  padding: var(--space-3) 0;
  text-align: right;
  color: var(--text);
  border-block-end: 1px solid var(--hairline);
}

.lg-table tr:last-child td {
  border-block-end: 0;
}

.lg-table th.lg-rank,
.lg-table td.lg-rank {
  width: 2rem;
  text-align: left;
  color: var(--text-muted);
}

.lg-table th.lg-team,
.lg-table td.lg-team {
  text-align: left;
  padding-inline-end: var(--space-4);
  font-weight: 500;
}

.lg-table th.lg-pts,
.lg-table td.lg-pts {
  font-weight: 700;
  padding-inline-start: var(--space-3);
}

.lg-group h4,
.lg-results + h4 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-accent);
  font-size: var(--caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.lg-group ul,
.lg-results {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lg-group li,
.lg-results li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0 var(--space-4);
  padding: var(--space-3) 0;
  border-block-start: 1px solid var(--hairline);
}

.lg-group li:first-child,
.lg-results li:first-child {
  border-block-start: 0;
}

.lg-time,
.lg-date {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: var(--body-sm);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.lg-match {
  color: var(--text);
  font-size: var(--body-sm);
}

.lg-match i {
  font-style: normal;
  color: var(--text-muted);
}

.lg-match b {
  font-variant-numeric: tabular-nums;
}

.lg-round {
  grid-column: 2;
  color: var(--text-muted);
  font-size: var(--caption);
}

@media (max-width: 34rem) {
  .lg-wide {
    display: none;
  }

  .lg-group li,
  .lg-results li {
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 0 var(--space-3);
  }
}

/* ---------- Events module (/sports/) ----------
   Fixture rows arrive from /api/events after load. Everything that carries
   the page's meaning is in the HTML already, so this block styles a
   progressive enhancement, not the page's substance. */

.events {
  min-width: 0;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

/* Nothing to show: drop the card, the CTA and the timezone note, keep the
   tabs so the reader can still look at Live. What is left reads as a line of
   prose rather than a widget that failed to load. */
.events[data-state="empty"] {
  padding: 0;
  background: none;
  box-shadow: none;
  gap: var(--space-3);
}

.events[data-state="empty"] .events-cta,
.events[data-state="empty"] .events-note {
  display: none;
}

.events[data-state="empty"] .events-body {
  min-height: 0;
}

.events-bar {
  display: grid;
  gap: var(--space-3);
}

.events-modes,
.events-sports {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
}

.events-modes button,
.events-sports button {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.events-modes button {
  padding: 0.5rem 1.1rem;
  font-size: var(--body-sm);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.events-sports button {
  padding: 0.35rem 0.8rem;
  font-size: var(--caption);
}

.events-modes button:hover,
.events-sports button:hover {
  color: var(--text);
}

.events-modes button[aria-selected="true"] {
  background: var(--ui-blue);
  color: var(--text);
  box-shadow: none;
}

.events-sports button[aria-selected="true"] {
  background: var(--bg);
  color: var(--text);
}

.events-body {
  display: grid;
  gap: var(--space-4);
  /* holds the height of a short list so switching tabs does not jump the page */
  min-height: 9rem;
}

.events-state {
  margin: 0;
  align-self: center;
  color: var(--text-muted);
  font-size: var(--body-sm);
  line-height: 1.6;
}

.ev-group h4 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-accent);
  font-size: var(--caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ev-group ul {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ev > a,
.ev-plain {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 var(--space-4);
  padding: var(--space-3) 0;
  border-block-start: 1px solid var(--hairline);
  text-decoration: none;
  color: inherit;
}

.ev:first-child > a,
.ev:first-child .ev-plain {
  border-block-start: 0;
}

.ev > a:hover .ev-teams {
  color: var(--ui-blue-bright, var(--mp-blue));
}

.ev-time {
  grid-row: span 2;
  font-family: var(--font-accent);
  font-size: var(--body);
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.ev-teams {
  color: var(--text);
  font-size: var(--body-sm);
  font-weight: 500;
  transition: color var(--dur) var(--ease);
}

.ev-teams i {
  font-style: normal;
  color: var(--text-muted);
  font-weight: 400;
}

.ev-meta {
  grid-column: 2;
  color: var(--text-muted);
  font-size: var(--caption);
}

.ev-badges {
  grid-row: span 2;
  display: flex;
  gap: 0.35rem;
}

.ev-live,
.ev-stream {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: var(--caption);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* A solid red pill fails AA at this size: white on the brand red measures
   4.28:1 against a 4.5 threshold, and 13px/700 is not "large text". The red
   moves into a dot, which is decorative and carries no contrast duty, while
   the label stays on the card surface at 15:1. It also keeps red — the
   brand's casino colour — from dominating a sports page. */
.ev-live {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.ev-live::before {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--mp-red);
}

.ev-stream {
  color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.events-cta {
  margin: 0;
}

.events-note {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--caption);
  line-height: 1.5;
}

@media (max-width: 34rem) {
  /* the time column costs too much width on a small phone; it moves above
     the fixture instead of beside it */
  .ev > a,
  .ev-plain {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ev-time {
    grid-row: auto;
    grid-column: 1;
    font-size: var(--body-sm);
  }

  .ev-meta {
    grid-column: 1;
  }

  .ev-badges {
    grid-row: 1 / span 3;
    grid-column: 2;
    align-items: start;
  }
}

/* ---------- Device screenshots (/app/apk/) ----------
   The captures are of a light-themed app sitting on a #000413 page, so each
   one gets a hairline and a rounded crop: without an edge the white UI bleeds
   into the dark ground and reads as a hole rather than a phone screen.
   A horizontal strip keeps six tall 9:19.25 shots from turning the page into
   a column of screenshots. */

.shots {
  margin-block: var(--space-6);
  /* .prose is a grid, and a grid item defaults to min-width:auto — without
     this the flex track below sizes the column to its own content and pushes
     the whole prose column past the layout instead of scrolling, which puts
     the later screenshots off-screen and out of reach. */
  min-width: 0;
}

.shots-track {
  display: flex;
  gap: var(--space-4);
  margin: 0;
  padding: 0 var(--space-5) var(--space-4) 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  /* the strip is the only thing that scrolls sideways, never the page */
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
}

.shots-track::-webkit-scrollbar {
  height: 6px;
}

.shots-track::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--hairline);
}

.shot {
  flex: none;
  width: 11.25rem;
  scroll-snap-align: start;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--hairline), 0 0 0 1px rgb(0 0 0 / 0.4);
}

.shot p {
  margin: var(--space-3) 0 0;
  color: var(--text-muted);
  font-size: var(--caption);
  line-height: 1.45;
}

.shots-note {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--body-sm);
  line-height: 1.6;
}

/* the check date rides quietly behind the version it qualifies */
.spec-when {
  color: var(--text-muted);
  font-weight: 400;
}

/* ---------- App card (APK download) ----------
   Structure follows an app-store listing so the page is scannable, but every
   row is a verified fact; unverifiable catalogue rows are absent, not faked. */

.appcard {
  display: grid;
  gap: var(--space-5);
  padding: 2rem var(--space-5);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.appcard-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
}

.appcard-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-card);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.appcard-name {
  margin: 0;
  font-family: var(--font-accent);
  font-size: var(--h3);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text);
}

.appcard-dev {
  margin: 0.15rem 0 0;
  color: var(--text-muted);
  font-size: var(--body-sm);
}

.appcard-spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-4) var(--space-5);
  margin: 0;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--hairline);
}

.appcard-spec div {
  display: grid;
  gap: 0.15rem;
}

.appcard-spec dt {
  color: var(--text-muted);
  font-size: var(--caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.appcard-spec dd {
  margin: 0;
  color: var(--text);
  font-size: var(--body-sm);
  font-weight: 700;
}

.spec-note {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--body-sm);
  line-height: 1.6;
}

/* ---------- Contacts ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-5);
}

.contact-card {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding: 2.5rem var(--space-6);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.contact-card h2 {
  margin: 0;
  font-family: var(--font-accent);
  font-size: var(--h3);
  font-weight: 700;
  text-transform: uppercase;
}

.contact-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--body-sm);
  line-height: 1.6;
}

.contact-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Label and value on one line: reads as a contact row, not a stacked pair. */
.contact-list li {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-3);
}

@media (max-width: 22rem) {
  .contact-list li {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

.contact-list span {
  color: var(--text-muted);
  font-size: var(--caption);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.contact-list a,
.contact-list b {
  color: var(--text);
  font-size: var(--body);
  font-weight: 500;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contact-list a:hover {
  color: var(--mp-blue);
}

/* ---------- Footer ---------- */

.footer .footer-heading {
  display: flex;
  align-items: center;
  min-height: 1.75rem;
  margin: 0 0 var(--space-4);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--caption);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}



/* No top margin — the CTA band above it already closes the page. */
.footer {
  padding-block: 4rem var(--space-7);
  border-block-start: 1px solid var(--hairline);
  background: var(--surface-2);
}

/* Every column starts with a heading on the same baseline, so the four
   columns share one rhythm instead of each starting wherever its content
   does. Social links and the operator line move to a full-width bottom row —
   in a column they made one side twice as tall as the others. */
.footer-col {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.footer-brand {
  display: grid;
  align-content: start;
  gap: var(--space-4);
}

.footer .footer-brand p {
  margin: 0;
  max-width: 34ch;
}

.footer-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--hairline);
}

/* `.footer ul` is more specific than a bare class, so these inline rows must
   be scoped under .footer or they silently fall back to the column grid. */
.footer .footer-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer .footer-inline li {
  display: flex;
  align-items: center;
}

/* thin separator between inline items */
.footer .footer-inline li + li::before {
  content: '';
  width: 1px;
  height: 0.85em;
  margin-inline-end: var(--space-5);
  background: var(--hairline);
}

.footer .footer-social a:hover {
  color: var(--mp-blue);
}

.footer-operator-line {
  grid-column: 1 / -1;
  font-style: normal;
  color: var(--text-muted);
  font-size: var(--caption);
  line-height: 1.6;
}

.footer-operator-line span:first-child {
  color: var(--text);
  font-weight: 700;
}

.footer-bottom .age {
  margin: 0;
  grid-row: 1 / 3;
  grid-column: 2;
  justify-self: end;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.85fr 0.95fr 1fr;
  gap: var(--space-7) 3.5rem;
  align-items: start;
}

.footer img.footer-logo {
  height: 1.75rem;
  width: auto;
}

.footer p {
  margin: var(--space-4) 0 var(--space-4);
  color: var(--text-muted);
  font-size: var(--body-sm);
}

.footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.85rem;
}

.footer a {
  color: var(--text-muted);
  font-size: var(--body-sm);
  text-decoration: none;
}

.footer a:hover {
  color: var(--text);
}

.footer .age {
  height: 2.5rem;
  width: auto;
  margin-block-start: var(--space-5);
}

.legal {
  margin: var(--space-7) 0 0;
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--hairline);
  color: var(--text-muted);
  font-size: var(--caption);
  line-height: 1.6;
  max-width: 100ch;
}

.legal a {
  color: var(--mp-blue);
}

/* ---------- Responsive ---------- */

@media (max-width: 62rem) {
  .nav-links,
  .nav-cta {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
  }

  .hero-inner,
  .split,
  .directions,
  .appblock,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .split--reverse .figure {
    order: 0;
  }

  .hero-copy {
    max-width: 38ch;
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    gap: var(--space-6);
  }
}

@media (min-width: 62.0625rem) {
  .nav-panel {
    display: none !important;
  }
}

@media (max-width: 40rem) {
  /* Phone column: tighter gaps and no separators, so the inline rows wrap
     into two lines instead of one item per line. */
  .footer .footer-inline {
    gap: var(--space-2) var(--space-4);
    font-size: var(--body-sm);
  }

  .footer .footer-inline li + li::before {
    margin-inline-end: var(--space-4);
  }

  .footer-bottom {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-bottom .age {
    grid-row: auto;
    grid-column: 1;
    justify-self: start;
  }

  /* Phones read tighter than desktop: the same rhythm feels loose on a
     390px column, so pull the section and figure spacing in. */
  .section {
    padding-block: var(--space-6);
  }

  .split,
  .with-aside {
    gap: var(--space-5);
  }

  .section-head {
    margin-block-end: var(--space-5);
  }

  .cta-band {
    padding-block: var(--space-6);
  }

  .hero {
    align-items: start;
    padding-block: var(--space-6) var(--space-6);
  }

  .hero-photo {
    -webkit-mask-image:
      linear-gradient(180deg, transparent 0%, #000 22%, #000 72%, transparent 100%),
      linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image:
      linear-gradient(180deg, transparent 0%, #000 22%, #000 72%, transparent 100%),
      linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  }



  .hero-copy {
    max-width: none;
  }

  .promo,
  .direction,
  .appblock {
    padding: var(--space-5);
  }

  .store-links img {
    height: 2.75rem;
  }
}


/* 320px handsets are real traffic in this market: shrink the wordmark and
   strip the badge chrome, but keep the flag — it is the locale signal. */
@media (max-width: 23rem) {
  .brand img {
    height: 1.125rem;
  }



  .nav-toggle {
    padding: 0 var(--space-3);
    font-size: var(--caption);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}