/* GameRange design system.
   One light look, deliberately: no prefers-color-scheme variant, and
   color-scheme: light so browser chrome follows. The game's own interface is
   dark neon, so the page stays white and lets the screenshots be the colour —
   helped along by the game's own balls, scattered through the hero and the
   closing band. */

:root {
  --paper: #ffffff;
  --tint: #fafafb;
  --ink: #16181c;
  --muted: #6b7280;
  --line: #e9e9ee;
  --wash: rgba(22, 24, 28, 0.04);
  --accent: #1f42cc;
  /* the pink of "Game", sampled from the wordmark. 3.77:1 on white, so it is
     for display type only; --brand-deep is the same hue taken to 4.55:1 and is
     what carries buttons and any small text. */
  --brand: #f8277d;
  --brand-deep: #df2370;
  --brand-dark: #c31a5f;
  /* the aubergine the wordmark was actually drawn on, sampled from the
     original artwork — the pairing the logo was designed as */
  --masthead: #3a0a3e;
  /* the peach of "Range", sampled from the wordmark, so the bar is one palette */
  --masthead-ink: #fbd5bc;

  color-scheme: light;

  --display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --page: 1230px;
  /* Ширина текстовой колонки на страницах, которые читают сверху вниз. Её
     делят разделы и вводка над ними: разойдись они, правый край выглядит
     рваным. Задана не в знаках, а в постоянных единицах нарочно — у вводки
     кегль крупнее, и одни и те же 88 знаков дали бы у неё лишние полсотни
     пикселей. Здесь это те же примерно 88 знаков основного текста. */
  --measure: 56rem;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 14px;
  /* Shadows here stay short and dense rather than long and faint: a wide blur
     spreads the same ink over so much ground that it stops reading as a
     shadow at all. */
  --lift:
    0 0 0 1px rgba(22, 24, 28, 0.09),
    0 1px 3px rgba(22, 24, 28, 0.24),
    0 4px 10px rgba(22, 24, 28, 0.34);
}

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

html {
  /* 17px base rather than the browser's 16. A percentage, not a pixel value,
     so a visitor who has raised their own default still gets it scaled up from
     there. Spacing is in px and does not follow; the headings are clamped
     against vw and barely move, so this lands almost entirely on the small
     text, which is where it was wanted. */
  font-size: 106.25%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.6 var(--body);
  font-synthesis-weight: none;
  /* the footer carries a tint now, so on the short inner pages it has to sit
     at the bottom of the viewport rather than halfway up it */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

/* height:auto matters as much as max-width here: every img carries width and
   height attributes to reserve its space, and without it a scaled-down image
   keeps the attribute's height and stretches. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

svg { display: block; }

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

.wrap {
  max-width: var(--page);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

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

.skip { position: absolute; left: -9999px; }

.skip:focus {
  left: var(--gutter);
  top: 8px;
  z-index: 10;
  background: var(--paper);
  padding: 8px 14px;
  border: 1px solid var(--ink);
}

/* ---------- masthead ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 8;
  background: var(--masthead);  /* fallback for browsers without color-mix */
  background: color-mix(in srgb, var(--masthead) 92%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.masthead-inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 70px;
  display: flex;
  align-items: center;
  gap: 28px;
}

/* The wordmark keeps its drawn colours; the dark bar is the ground it needs. */
.wordmark {
  margin-right: auto;
  flex-shrink: 0;        /* flex would squeeze the wordmark out of proportion */
  display: flex;
  align-items: center;
  line-height: 0;
}

.wordmark img {
  height: 36px;
  width: auto;
  max-width: none;       /* overrides the global img rule, which also squeezes */
}

.masthead-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 0.97rem;
}

.masthead-nav a {
  text-decoration: none;
  color: var(--masthead-ink);
  padding: 4px 0;
  white-space: nowrap;
}

.masthead-nav a:hover {
  color: #fff;
  box-shadow: inset 0 -1px 0 #fff;
}

/* the language switch is a control, not another nav destination */
.masthead-nav .lang {
  border: 1px solid color-mix(in srgb, var(--masthead-ink) 40%, transparent);
  border-radius: 7px;
  padding: 5px 10px;
  margin-left: 4px;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
}

.masthead-nav .lang:hover {
  border-color: var(--masthead-ink);
  background: color-mix(in srgb, var(--masthead-ink) 12%, transparent);
  box-shadow: none;
}

/* ---------- shared type ---------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}

.display {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 0.97;
  letter-spacing: -0.035em;
  margin: 0;
}

.section-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  letter-spacing: -0.03em;
  margin: 0 0 20px;
}

.lede {
  max-width: 46ch;
  font-size: 1.06rem;
  color: var(--muted);
  margin: 20px 0 0;
}

.meta {
  font-family: var(--mono);
  font-size: 0.83rem;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.prose { max-width: 62ch; color: var(--muted); }
.prose p { margin: 0 0 1em; }
.prose p:last-child { margin-bottom: 0; }
.prose a { text-underline-offset: 3px; }

.lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); max-width: 64ch; }

/* Sections sit about 40px apart, which is the rhythm of the reference layout:
   these are bands of content, not chapters, and wider gaps pulled the page to
   nearly twice the height it should be. */
.block { padding-block: clamp(16px, 1.6vw, 20px); }

/* ---------- the download button ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  background: var(--brand-deep);
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.02rem;
  box-shadow: 0 6px 18px rgba(223, 35, 112, 0.32);
}

.button:hover { background: var(--brand-dark); }
/* The Mac download sits under the Android one: same shape, ink instead of
   brand pink, so the page keeps a single loud call to action. */
.button-mac { background: #1d1f24; box-shadow: 0 6px 18px rgba(20, 22, 28, 0.25); }
.button-mac:hover { background: #000; }
/* Play in the browser leads in brand pink; the downloads below it are ink. */
.button-dark { background: #1d1f24; box-shadow: 0 6px 18px rgba(20, 22, 28, 0.25); }
.button-dark:hover { background: #000; }
.button-ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.button-ghost:hover { background: var(--wash); }
.hero-action .button + .button, .cta-action .button + .button { margin-top: 12px; }
.button svg { width: 19px; height: 19px; fill: currentColor; }
.button svg[fill="none"] { fill: none; }

/* ---------- balls ---------- */

/* The game's own renders, scattered behind the hero and the closing band.
   Decoration only: the layer is aria-hidden and never intercepts a click. */
.decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.decor img {
  position: absolute;
  width: var(--size);
  height: auto;
  max-width: none;
}

/* the far ones sit out of focus, which is what puts the near ones in front */
.decor .far { filter: blur(7px); opacity: 0.75; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(70% 80% at 12% 4%, #ffffff 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(112deg, #f7f2fb 0%, #fceef6 46%, #f2edfd 100%);
  border-bottom: 1px solid var(--line);
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(26px, 3.2vw, 40px) var(--gutter) clamp(20px, 2.5vw, 32px);
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.hero-head {
  display: flex;
  align-items: center;
  gap: 18px;
}

.hero-icon {
  width: clamp(64px, 7vw, 90px);
  height: auto;
  border-radius: 22%;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(22, 24, 28, 0.18);
}

.hero-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.2rem, 4.3vw, 3.45rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
  margin: 0;
}

/* large display type, so the brand pink clears the 3:1 it has to clear */
.hero-title span {
  display: block;
  color: var(--brand);
}

.hero-tagline {
  margin: 24px 0 0;
  max-width: 40ch;
  font-size: 1.06rem;
  color: var(--muted);
}

/* four facts in two fixed columns: auto-fit would leave an orphan cell that
   shows the lattice background through */
.facts {
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.facts div {
  background: var(--paper);
  padding: 11px 15px 12px;
}

.facts dt {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.facts dd {
  margin: 4px 0 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
}

.hero-action { margin: 20px 0 0; text-align: center; }
.hero-action .button { width: min(100%, 330px); }
.cta-action .button { width: min(100%, 330px); }

.hero-status {
  margin: 10px 0 0;
  text-align: center;
  font-size: 0.93rem;
  color: var(--muted);
}

.hero-frame {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;   /* Safari otherwise paints video past the radius */
  /* Darker ink than the page's --ink, and a touch of the band's own plum in
     it: on this lavender ground a neutral grey shadow greys out before it
     reads as depth. */
  box-shadow:
    0 0 0 1px rgba(12, 8, 22, 0.18),
    0 2px 5px rgba(12, 8, 22, 0.44),
    0 8px 18px rgba(12, 8, 22, 0.64);
}

.hero-frame img,
.hero-frame video { width: 100%; height: auto; display: block; }

/* ---------- about, with the three highlights ---------- */

.about {
  display: grid;
  /* the three headings need the width: at the larger base size "Endlessly
     challenging" breaks over two lines in anything narrower */
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 3.6vw, 48px);
  align-items: start;   /* the icons line up with the heading, not the middle */
}

.highlights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
  text-align: center;
}

.highlights svg {
  width: 28px;
  height: 28px;
  margin: 4px auto 12px;
  color: var(--accent);
}

.highlights h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.04rem;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

.highlights p { margin: 0; font-size: 1rem; color: var(--muted); }

/* ---------- how to play ---------- */

.rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
}

.rule {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 17px 19px 19px;
}

.rule-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 9px;
}

.rule-number {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ede9fe;
  color: #5b21b6;
  font-family: var(--mono);
  font-size: 0.87rem;
  display: grid;
  place-items: center;
}

.rule h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  margin: 0;
}

.rule p { margin: 0; font-size: 1rem; color: var(--muted); }

/* ---------- scoring ---------- */

.scoring {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.scoring-note { margin: 0; color: var(--muted); }

.scores {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
}

.score {
  border-radius: 12px;
  padding: 13px 16px 15px;
  background: var(--tone);
}

.score-label {
  margin: 0;
  font-size: 0.96rem;
  color: var(--muted);
}

.score-value {
  margin: 4px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.7rem;
  letter-spacing: -0.03em;
}

/* the pip: a square on its corner, one per card in that card's own colour */
.score-value i {
  width: 8px;
  height: 8px;
  background: var(--pip);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* ---------- screenshots ---------- */

.shots-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.shots-head .section-title { margin: 0; }

.shots-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

.shots-tools .meta { white-space: nowrap; }

.shots-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.shots-arrow:hover { border-color: var(--ink); }
.shots-arrow svg { width: 16px; height: 16px; }

.shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * clamp(14px, 1.8vw, 22px)) / 3);
  gap: clamp(14px, 1.8vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.shots::-webkit-scrollbar { display: none; }

.shot {
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  cursor: zoom-in;
  display: block;
  scroll-snap-align: start;
  box-shadow: var(--lift);
}

.shot img { width: 100%; height: auto; }
.shot:hover img { opacity: 0.9; }

.lightbox {
  border: 0;
  padding: 0;
  background: none;
  max-width: 92vw;
  max-height: 92vh;
}

.lightbox::backdrop { background: rgba(10, 11, 13, 0.86); }
.lightbox img { max-height: 88vh; width: auto; cursor: zoom-out; border-radius: var(--radius); }

/* ---------- where to play ---------- */

.platforms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
}

.platform {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 14px 14px;
  display: flex;
  gap: 11px;
}

.platform svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.platform h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.04rem;
  letter-spacing: -0.02em;
  margin: 0 0 3px;
}
.platform p { margin: 0; font-size: 0.92rem; color: var(--muted); line-height: 1.45; }

/* ---------- closing band ---------- */

.closing { padding-block: clamp(16px, 1.6vw, 20px) clamp(20px, 2vw, 26px); }

.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(108deg, #2f0a44 0%, #4c1152 52%, #6a1a63 100%);
  color: #fff;
  padding: clamp(24px, 2.8vw, 34px) clamp(22px, 3.2vw, 44px);
}

.cta-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.cta h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  letter-spacing: -0.03em;
  margin: 0 0 8px;
}

.cta > .cta-inner p { margin: 0; color: rgba(255, 255, 255, 0.76); }

.cta-action { text-align: center; }
.cta-note { margin-top: 12px !important; font-size: 0.93rem; }

/* ---------- the studio's front page: a list of games ---------- */

.home-inner { display: block; max-width: var(--page); }
.home-inner .lede { max-width: 52ch; }
.home-inner .display { max-width: 15ch; }

.games {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}

.game-card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(14px, 1.8vw, 22px);
  box-shadow: var(--lift);
}

.game-shot { display: block; border-radius: var(--radius); overflow: hidden; }
.game-shot img { width: 100%; height: auto; display: block; }
.game-shot:hover img { opacity: 0.92; }

.game-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 0;
}
.game-title a { color: inherit; text-decoration: none; }
.game-title span { display: block; color: var(--brand); }

.game-tagline { margin: 16px 0 0; color: var(--muted); max-width: 44ch; }

.game-platforms {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.game-platforms li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.9rem;
}
.game-platforms svg { width: 16px; height: 16px; }

.game-action { margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 800px) {
  .game-card { grid-template-columns: 1fr; }
}

/* ---------- footer ---------- */

.colophon {
  border-top: 1px solid var(--line);
  background: var(--tint);
}

.colophon-inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: 20px var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}

.colophon-inner img { height: 30px; width: auto; max-width: none; }

.colophon-nav {
  display: flex;
  flex-wrap: wrap;      /* the Russian labels are long enough to need it */
  gap: 10px 22px;
  justify-content: center;
  font-size: 0.96rem;
}

.colophon-nav a { color: var(--muted); text-decoration: none; }
.colophon-nav a:hover { color: var(--ink); }

.colophon-legal { text-align: right; font-size: 0.89rem; color: var(--muted); }
.colophon-legal p { margin: 0; }
.colophon-legal p + p { margin-top: 3px; }

/* ---------- inner pages ---------- */

.page-head {
  padding-block: clamp(44px, 6vw, 84px) clamp(20px, 3vw, 34px);
}

.stamp { font-size: 0.88rem; }

.columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 48px);
  padding-bottom: clamp(56px, 7vw, 96px);
}

/* Ширину ограничиваем у содержимого, а не у самой полосы: .stack — это ещё и
   .wrap с margin: 0 auto, и предел на нём центрировал бы всю колонку по окну.
   Тогда заголовок страницы стоял бы у левого поля, а текст — с отступом. */
.stack {
  display: grid;
  gap: clamp(24px, 3vw, 36px);
  padding-bottom: clamp(56px, 7vw, 96px);
}

/* Колонка шире обычной прозы: страницу читают сверху вниз одним куском, и при
   68 знаках справа оставалось поле в половину экрана. Восемьдесят восемь — ещё
   в пределах читаемого, но пустоты уже нет. Предел .prose здесь снимаем, иначе
   он ужал бы абзацы обратно до 62 знаков. */
.stack > * { max-width: var(--measure); }
.stack .prose { max-width: none; }

/* Вводка над такой колонкой равняется по ней, а не по общему правилу .lede:
   там 46 знаков, и на главной это нарочно — короткая строка рядом с крупным
   заголовком. Здесь же она встала бы вдвое уже текста. */
.page-head.measure .lede { max-width: var(--measure); }

/* ---------- narrower ---------- */

@media (max-width: 1000px) {
  .hero-inner,
  .about,
  .scoring { grid-template-columns: 1fr; }
  .rules { grid-template-columns: repeat(2, 1fr); }
  .platforms { grid-template-columns: repeat(3, 1fr); }
  .scores { grid-template-columns: repeat(5, 1fr); }
  .columns { grid-template-columns: 1fr; }
  .cta-inner { grid-template-columns: 1fr; text-align: center; }
}

@media (max-width: 700px) {
  .masthead-nav .jump { display: none; }
  /* the wordmark plus the Russian "Контакты" and the language chip are 3px too
     wide for a 375px screen at the larger base size */
  .masthead-inner { gap: 14px; }
  .wordmark img { height: 30px; }
  .rules,
  .highlights,
  .platforms { grid-template-columns: 1fr; }
  .scores { grid-template-columns: repeat(2, 1fr); }
  /* the heading and its tools stop fitting on one line well before this */
  .shots-head { flex-wrap: wrap; }
  .shots-tools { width: 100%; justify-content: space-between; }
  .shots { grid-auto-columns: 86%; }
  .colophon-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .colophon-legal { text-align: center; }
  .decor { display: none; }   /* the balls need room they do not have here */
}

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

/* ---------- Android store badges ---------- */

/* Under the download buttons: a caption and two small outlined badges, store
   name large, the store's own call to action small above it. Outlined, not
   filled, so the buttons above stay the one loud call to action. */
.stores {
  margin: 14px auto 0;
  width: min(100%, 330px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.stores-label {
  flex-basis: 100%;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
}
.store {
  flex: 1 1 0;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7px 14px 8px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px var(--ink);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.store small {
  font-family: inherit;
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.7;
}
.store:hover { background: var(--wash); }
/* On the aubergine closing band the outline and text turn white. */
.cta > .cta-inner .stores { margin: 16px auto 0; }
.cta .stores-label { color: rgba(255, 255, 255, 0.76); }
.cta .store { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85); }
.cta .store:hover { background: rgba(255, 255, 255, 0.1); }