/* The public page of rytmi.ru. It shares the palette of the app and of the
   privacy/support pages, but keeps its own file: those two are legal text in a
   narrow column, this one is a wide marketing layout with screenshots.

   Deliberately static: no inline style, no script and no external asset, so the
   page keeps the strict Content-Security-Policy that Caddy gives the public
   paths. That policy also forbids `style` attributes, so every visual decision
   lives here. */

:root {
  color-scheme: light dark;

  --bg: #f6f3fd;
  --card: #ffffff;
  --ink: #201b2d;
  --muted: #635c73;
  --line: #e8e2f5;
  --primary: #5b45a8;
  --primary-soft: #efeaff;
  --warm: #8f6512;
  --warm-soft: #fbf1d9;
  --teal: #24756e;
  --teal-soft: #dcf0ed;
  --bar-bg: rgba(255, 255, 255, 0.86);
  --device-bezel: linear-gradient(160deg, #ffffff, #efeafb);
  --device-edge: rgba(74, 52, 140, 0.1);
  --shadow-card: 0 1px 2px rgba(46, 30, 92, 0.04),
    0 8px 24px -16px rgba(46, 30, 92, 0.18);
  --shadow-float: 0 32px 60px -28px rgba(46, 30, 92, 0.45);
  --radius-lg: 28px;
  --radius-md: 20px;

  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui,
    sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
}

/* Nothing on this page is meant to scroll sideways, yet the glow behind the
   hero phone is wider than a phone screen on purpose. `clip` cuts it without
   making body a scroll container - `hidden` on both html and body would, and
   the install bar listens to the window's scroll. Older engines keep `hidden`,
   which still reaches the viewport because html stays `visible`. */
body {
  margin: 0;
  line-height: 1.55;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* Two soft lights behind the page: lilac over the hero, warm on the right.
   Fixed, so scrolling never drags a visible gradient edge across the text. */
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(
      68vw 52vh at 12% -6%,
      rgba(146, 118, 232, 0.28),
      transparent 62%
    ),
    radial-gradient(
      52vw 42vh at 94% 2%,
      rgba(240, 189, 126, 0.26),
      transparent 60%
    );
}

main {
  width: min(1080px, calc(100% - 40px));
  margin: 0 auto;
  padding: 24px 0 80px;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0 4px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand img {
  width: 32px;
  height: 32px;
}

/* Navigation reads as navigation by where it sits, so it drops the underline
   the body links keep; hover and keyboard focus bring the emphasis back. */
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: 15px;
}

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

.nav-links a:hover {
  color: var(--ink);
  text-decoration: underline;
}

a {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 6px;
}

h1 {
  margin: 0 0 20px;
  font-size: clamp(36px, 4.5vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

h2 {
  margin: 0 0 14px;
  font-size: clamp(25px, 2.8vw, 34px);
  line-height: 1.16;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h3 {
  margin: 0 0 6px;
  font-size: 17.5px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 14px;
  font-size: 17px;
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

.lead {
  max-width: 30em;
  font-size: clamp(18px, 1.9vw, 21px);
  line-height: 1.5;
}

.lead,
.muted {
  color: var(--muted);
}

.small {
  font-size: 14.5px;
  line-height: 1.5;
}

/* Hero */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding: clamp(40px, 6vw, 80px) 0 clamp(48px, 6vw, 88px);
}

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 30px 0 14px;
}

/* Store badges
   =========================================================================
   Every call to action on the page, the fixed bar included, is one row of
   badges, so a second store needs no second design.

   The App Store badge is Apple's own file - the Russian localisation of
   Download_on_the_App_Store_Badge, black and white, both vector - served from
   /img/ because the public paths run under a Content-Security-Policy that
   allows same-origin assets only. RuStore's official badge takes the same
   footprint, so the two stay aligned. The English page uses Apple's US-UK
   file (appstore-badge-en-black.svg, from developer.apple.com); its white
   twin is that file with the exact swap Apple's own Russian pair shows -
   black border, white face, black lettering, the white-variant logo. */

.stores {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Apple ships this badge as finished artwork and asks that it not be redrawn,
   recoloured or reshaped. So it gets no border, no radius and no background of
   ours - only a height. The light and dark versions are Apple's own two files,
   switched by <picture> rather than by a filter. */
.badge {
  display: inline-flex;
  text-decoration: none;
}

.badge img {
  display: block;
  width: auto;
  height: 52px;
}

.store {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}

.store--rustore:focus-visible,
.badge:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 10px;
}

/* RuStore's official badge is 111 x 40, and squeezed into Apple's footprint it
   was stretched sideways and kept its own corners and a white face beside
   Apple's black one. rustore-badge-black.svg and -white.svg are Apple's own
   119.66407 x 40 outline, border and colours with RuStore's logo and lettering
   centred inside at their own proportions, so the two read as one pair and
   switch themes the same way. Nothing here reshapes them: only a size. */
.store--badge {
  width: 155.56px;
  height: 52px;
}

.store--badge picture {
  display: block;
}

.store--badge img {
  display: block;
  width: 155.56px;
  height: 52px;
}

/* Which badges exist at all is decided by data-stores on <html>; which of them
   a given visitor sees is decided by the platform they are holding.

   The show and hide rules below have the same specificity on purpose, so the
   order alone decides and the platform rules, being last, win. An earlier
   version showed RuStore with a heavier selector, and iPhones got both
   badges although the platform rule was right there. */
.store[data-store="rustore"] {
  display: none;
}

html[data-stores~="rustore"] .store {
  display: inline-flex;
}

/* На телефоне показываем только его собственный магазин: в чужой человек с
   этого устройства всё равно не попадёт, а вторая кнопка рядом с нужной лишь
   отнимает у неё внимание.

   На десктопе платформа установки неизвестна - смотреть могут и за себя, и за
   партнёра, - поэтому там оба. */
html[data-platform="ios"] [data-store="rustore"] {
  display: none;
}

html[data-platform="android"] .badge[data-store="ios"] {
  display: none;
}

/* A page whose only store is the App Store - the English one: the Android app
   is published in RuStore alone, which does not serve those countries - must
   not leave an Android visitor with nothing to press and no word about why.
   They get a line instead of a badge they cannot use, and no install bar. */
.store-note {
  display: none;
}

html[data-platform="android"]:not([data-stores~="rustore"]) .store-note {
  display: block;
}

html[data-platform="android"]:not([data-stores~="rustore"]) .installbar,
html[data-platform="android"]:not([data-stores~="rustore"]) .cta {
  display: none;
}

.stores--compact .badge img {
  height: 44px;
}

.stores--compact .store--badge {
  width: 131.63px;
  height: 44px;
}

.stores--compact .store--badge img {
  width: 131.63px;
  height: 44px;
}

/* The install bar
   =========================================================================
   Fixed to the bottom on a phone, a floating pill on a wide screen. It is the
   only element that follows the scroll, so the page never has two competing
   bars. Without script it simply stays visible; landing.js hides it while the
   hero button is still on screen, which is the only moment it would be a
   duplicate. */

.installbar {
  position: fixed;
  z-index: 20;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  padding-bottom: calc(11px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--bar-bg);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  transition:
    translate 0.28s ease,
    opacity 0.28s ease;
}

.installbar-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  box-shadow: 0 0 0 1px rgba(74, 52, 140, 0.1);
}

.installbar-text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  line-height: 1.25;
}

.installbar-text strong {
  overflow: hidden;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.installbar-text span {
  color: var(--muted);
  font-size: 13px;
}

/* Only a scripted page hides the bar, and it has to be hidden before the
   first paint - otherwise it appears over the hero and slides away, which
   reads as a glitch. landing.js sets .js in the head for exactly that. */
html.js .installbar {
  translate: 0 150%;
  opacity: 0;
  pointer-events: none;
}

html.js.show-install .installbar {
  translate: 0 0;
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .installbar {
    transition: none;
  }
}

/* The bar covers the end of the page, so the page has to end above it. */
main {
  padding-bottom: calc(104px + env(safe-area-inset-bottom));
}

@media (min-width: 901px) {
  .installbar {
    right: auto;
    bottom: 22px;
    left: 50%;
    width: min(620px, calc(100% - 40px));
    transform: translateX(-50%);
    padding: 10px 10px 10px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: var(--shadow-float);
  }

  main {
    padding-bottom: 120px;
  }
}

/* On a narrow phone the bar has room for the badge or for the wording, not
   for both, and the badge is the part that does the work. Pinned to the right
   it left a hole in the middle of the bar; centred in the width the wording
   gave up, the row reads evenly with one badge or two. */
@media (max-width: 430px) {
  .installbar-text {
    display: none;
  }

  .stores--compact {
    flex: 1;
    justify-content: center;
  }
}

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}

/* A calm glow behind the phone so the screenshot does not float on nothing. */
.hero-visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 4%;
  left: 50%;
  width: 118%;
  height: 92%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(151, 124, 236, 0.34),
    transparent
  );
}

/* Screenshots are shown as a phone: light bezel, deep soft shadow, real corner
   radius. A bare PNG behind a hairline border reads as an upload, not an app. */
.device {
  padding: 9px;
  border-radius: 46px;
  background: var(--device-bezel);
  box-shadow:
    var(--shadow-float),
    0 0 0 1px var(--device-edge);
}

.device picture {
  display: block;
}

.device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 38px;
}

/* A slight tilt keeps the first phone from reading as a flat upload. */
.device-hero {
  width: min(300px, 100%);
  transform: rotate(-1.6deg);
}

/* A zero-height element is an unreliable observer target, so give the marker
   a pixel and take it back from the flow. */
.hero-end {
  height: 1px;
  margin-top: -1px;
}

/* Quick facts */

/* Four facts, so the row count has to divide four. auto-fit chose three
   columns on a laptop and left the fourth card alone on its own row, which
   reads as a mistake rather than a layout. */
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: clamp(56px, 8vw, 96px);
}

.fact {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--card);
  box-shadow: var(--shadow-card);
}

/* Each icon sits on the tint of the section it belongs to further down:
   sleep and family in lilac, feeding in teal, the offline note in amber. */
.fact svg {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary);
}

.fact:nth-child(2) svg {
  background: var(--teal-soft);
  color: var(--teal);
}

.fact:nth-child(4) svg {
  background: var(--warm-soft);
  color: var(--warm);
}

.fact p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.45;
}

.fact strong {
  display: block;
  margin-bottom: 3px;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.fact span {
  color: var(--muted);
}

@media (max-width: 1080px) {
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fact {
    flex-direction: row;
    align-items: flex-start;
  }
}

/* Four cards stacked on a phone took a whole screen before the first real
   section. One card with four rows says the same in half the height. */
@media (max-width: 560px) {
  .facts {
    grid-template-columns: 1fr;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--card);
    box-shadow: var(--shadow-card);
  }

  .fact {
    gap: 14px;
    padding: 16px 18px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .fact + .fact {
    border-top: 1px solid var(--line);
  }

  .fact svg {
    width: 36px;
    height: 36px;
    padding: 8px;
    border-radius: 11px;
  }
}

/* Feature rows
   =========================================================================
   The phone rises out of the bottom edge of the card. A whole phone next to
   three lines of text made a 600-pixel row of voids; a phone squeezed to the
   text's height became a stubby device with its content cut mid-card. Cut by
   the card's own edge instead, the frame reads as deliberate, shows the top of
   the screen where the section's subject is, and hides the floating button at
   the bottom of every screenshot. */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  align-items: center;
  column-gap: clamp(32px, 6vw, 88px);
  margin-bottom: clamp(20px, 3vw, 32px);
  padding: 0 clamp(28px, 5vw, 72px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-card);
}

.feature.reverse {
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
}

.feature.reverse .feature-text {
  order: 2;
}

.feature-text {
  padding-block: clamp(36px, 5vw, 64px);
}

.feature-text p {
  max-width: 32em;
  color: var(--muted);
}

.feature .device {
  align-self: end;
  height: clamp(380px, 38vw, 460px);
  margin-top: clamp(36px, 4vw, 56px);
  padding-bottom: 0;
  overflow: hidden;
  border-radius: 46px 46px 0 0;
  box-shadow:
    0 0 0 1px var(--device-edge),
    0 -6px 40px -18px rgba(46, 30, 92, 0.35);
}

.feature .device img {
  border-radius: 38px 38px 0 0;
}

.more {
  font-weight: 600;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.eyebrow.warm {
  background: var(--warm-soft);
  color: var(--warm);
}

.eyebrow.teal {
  background: var(--teal-soft);
  color: var(--teal);
}

/* Dark bands */

.band {
  margin: clamp(40px, 6vw, 80px) 0;
  padding: clamp(30px, 5vw, 60px);
  border-radius: var(--radius-lg);
  background: linear-gradient(140deg, #4b3a90, #2d2159 70%);
  color: #f3eeff;
  box-shadow: var(--shadow-float);
}

.band h2 {
  color: #ffffff;
}

.band p {
  max-width: 44em;
  color: #d9d0f2;
}

.band a {
  color: #ffffff;
}

.band ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.band li {
  position: relative;
  padding: 12px 16px 12px 44px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: #efe9ff;
  font-size: 16px;
  line-height: 1.4;
}

/* A check drawn from two borders: no icon file, nothing the CSP has to allow. */
.band li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 18px;
  width: 12px;
  height: 7px;
  border-bottom: 2px solid #f0bd7e;
  border-left: 2px solid #f0bd7e;
  transform: translateY(-70%) rotate(-45deg);
}

/* On the main page the heading and its paragraph stand on the left and the
   list on the right, one item per line. Three columns under the paragraph
   left the fourth item alone on a second row. */
.band-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 24px clamp(32px, 6vw, 80px);
}

.band-split ul {
  grid-template-columns: 1fr;
  margin: 0;
}

/* Справочные страницы
   =========================================================================
   Статья в одну колонку на той же палитре, что и главная: те же карточки,
   тот же тёмный блок, те же бейджи магазина в конце. Отдельного файла нет
   намеренно — разъезжающиеся темы у двух публичных страниц одного сайта
   стоят дороже, чем несколько правил здесь. */

.guide {
  max-width: 46em;
  margin: 0 auto;
  padding-top: clamp(24px, 4vw, 44px);
}

.guide h1 {
  font-size: clamp(30px, 4.2vw, 44px);
}

.guide h2 {
  margin-top: clamp(34px, 5vw, 52px);
}

.guide p {
  color: var(--muted);
}

/* The dark band keeps its own light text inside the guide. .guide p is as
   specific as .band p and comes later, so the paragraph in «Откуда эти числа»
   was grey on violet and next to unreadable on both guides. */
.guide .band p {
  color: #d9d0f2;
}

.guide .lead {
  max-width: none;
}

/* Калькулятор */

.calc-card {
  margin: clamp(26px, 4vw, 38px) 0;
  padding: clamp(22px, 3.5vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-card);
}

.calc-card h2 {
  margin-top: 0;
  font-size: 21px;
}

.calc-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin: 18px 0 20px;
}

.calc-form label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 650;
}

.calc-form input {
  min-height: 50px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 14px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.calc-form input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.calc-result {
  display: grid;
  gap: 14px;
  padding: 18px 0 4px;
  border-top: 1px solid var(--line);
}

.calc-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
  color: var(--muted);
  font-size: 15.5px;
}

.calc-line strong {
  color: var(--ink);
  font-size: 27px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

/* Разброс важнее середины: он говорит, что ребёнок вне точного числа - это
   по-прежнему норма. */
.calc-spread {
  font-size: 14px;
}

/* Таблицы */

/* Три колонки чисел на узком телефоне шире экрана, и строка должна уезжать
   внутри своей рамки, а не тащить за собой всю страницу. */
.table-scroll {
  overflow-x: auto;
  margin: 18px 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--card);
}

.guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
}

.guide-table th,
.guide-table td {
  padding: 12px 16px;
  text-align: left;
  white-space: nowrap;
}

.guide-table th {
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.guide-table tbody tr + tr td {
  border-top: 1px solid var(--line);
}

.guide-table td:nth-child(2) {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.guide-table td:last-child {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.guide .band,
.guide .closing {
  margin-top: clamp(34px, 5vw, 52px);
}

/* Колонка статьи слишком узкая для текста и двух бейджей рядом: абзац
   сжимался в полосу по два-три слова. Здесь карточка всегда стопкой. */
.guide .closing {
  grid-template-columns: 1fr;
  gap: 22px;
  text-align: center;
}

.guide .closing .lead {
  margin-inline: auto;
  text-wrap: balance;
}

/* FAQ and closing */

.faq {
  max-width: 44em;
  margin: 0 auto clamp(40px, 6vw, 72px);
}

.faq h2 {
  margin-bottom: 22px;
  text-align: center;
}

.faq-item {
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--line);
}

.faq-item p {
  margin: 0;
  color: var(--muted);
}

/* The closing card is as wide as the page. Centred inside it, the two lines of
   text sat in a narrow column with a third of the card empty on either side,
   which read as a mistake rather than as a design. The card instead carries the
   wording across it and puts the badge at the end of the line, where the eye
   arrives last. */
.closing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(26px, 4vw, 60px);
  padding: clamp(32px, 5vw, 52px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-card);
}

.closing h2 {
  margin-bottom: 8px;
}

.closing .lead {
  max-width: 34em;
}

.closing .cta {
  justify-content: center;
  margin: 0 0 10px;
}

.closing .stores {
  justify-content: center;
}

.closing-action {
  text-align: center;
}

.closing p {
  color: var(--muted);
}

/* Stacked, the badge has the row to itself, so the whole card centres rather
   than leaving the button hanging under a left-aligned paragraph. */
@media (max-width: 760px) {
  .closing {
    grid-template-columns: 1fr;
    gap: 22px;
    text-align: center;
  }

  .closing .lead {
    margin-inline: auto;
    max-width: 30em;
    text-wrap: balance;
  }

  .closing .small {
    text-wrap: balance;
  }
}

/* Channels
   =========================================================================
   After the last call to install and before the fine print: someone who read
   this far and is not ready for the app can still follow the videos, and the
   store button stays the last thing the page asks for. */

.social {
  margin-top: clamp(40px, 6vw, 64px);
  text-align: center;
}

/* Two classes, so the guide's spacing for its own headings stays out. */
.social .social-title {
  margin: 0 0 16px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 17px 9px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

.social-links a:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.social-links svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--primary);
}

.disclaimer {
  max-width: 46em;
  margin: 28px auto 0;
  text-align: center;
  text-wrap: balance;
}

footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 15px;
}

/* Below this width the page margin is narrower than the glow's overhang, and
   the overhang became a sideways scroll. */
@media (max-width: 1180px) {
  .hero-visual::before {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding-bottom: 44px;
  }

  .device-hero {
    width: min(260px, 70vw);
  }

  /* Both selectors are needed: the swapped-column rule is the more specific
     one and would otherwise survive on a phone. */
  .feature,
  .feature.reverse {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 0 clamp(22px, 5vw, 44px);
  }

  .feature.reverse .feature-text {
    order: 0;
  }

  .feature-text {
    justify-self: stretch;
    padding: clamp(28px, 5vw, 40px) 0 0;
  }

  .feature .device {
    width: min(290px, 78vw);
    height: clamp(300px, 86vw, 400px);
    margin-top: 28px;
  }

  .band-split {
    grid-template-columns: 1fr;
  }
}

/* On a phone the header has room for one link. The second one is a click away
   in the footer, and stacking both under the logo looked like a mistake. */
@media (max-width: 560px) {
  .nav-links {
    gap: 14px;
    font-size: 14.5px;
  }

  .nav-secondary {
    display: none;
  }

  .hero {
    padding-top: 32px;
  }

  /* At the desktop minimum the heading took five lines on a 320-pixel phone. */
  h1 {
    font-size: clamp(32px, 9.4vw, 36px);
  }

  .cta {
    margin-top: 26px;
  }

  .band {
    padding: 28px 22px;
  }

  .band li {
    font-size: 15.5px;
  }

  footer {
    justify-content: flex-start;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #100e16;
    --card: #1a1722;
    --ink: #f3eff9;
    --muted: #a9a2b8;
    --line: #322c3f;
    --primary: #bdadff;
    --primary-soft: #2a2340;
    --warm: #e7bf76;
    --warm-soft: #342a18;
    --teal: #8ad6cb;
    --teal-soft: #17312e;
    --bar-bg: rgba(22, 19, 30, 0.86);
    --device-bezel: linear-gradient(160deg, #2b2536, #191522);
    --device-edge: rgba(255, 255, 255, 0.08);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-float: 0 32px 60px -28px rgba(0, 0, 0, 0.85);
  }

  body::before {
    background:
      radial-gradient(
        68vw 52vh at 12% -6%,
        rgba(110, 86, 207, 0.3),
        transparent 62%
      ),
      radial-gradient(
        52vw 42vh at 94% 2%,
        rgba(186, 136, 74, 0.18),
        transparent 60%
      );
  }

  .installbar-icon {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
  }

  .band {
    background: linear-gradient(140deg, #2f2560, #1b1533 70%);
  }
}