/* EatadakiMass marketing site.
   The desktop look is carried by the inline styles in index.html (straight from
   the design). This file adds only what inline styles cannot express: the ~20
   layout containers media queries need to reach, :hover/:focus states, and the
   photo placeholders. */

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

html {
  scroll-behavior: smooth;
  /* The header is sticky; keep anchor targets clear of it. */
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #0a0c10;
  color: #f5f6f8;
  /* Emoji faces sit before the generic `sans-serif`, which always matches and
     would otherwise end the fallback chain: the design uses emoji in the
     logging chips and the streak pills, and Outfit has no glyphs for them. */
  font-family: Outfit, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: #30D158; text-decoration: none; }
a:hover { color: #7CE49A; }

img, svg { max-width: 100%; }

button { font-family: inherit; }

/* applyState() toggles [hidden]; several of these elements carry an inline
   display:flex/grid, which would otherwise win over the UA's [hidden] rule. */
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid #30D158;
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Layout containers ------------------------------------------------------
   Vertical and horizontal padding are separate longhands so .wrap and .sec can
   be combined on one element without either clobbering the other. */

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  /* env() keeps the gutter clear of the notch in landscape; it resolves to
     0px everywhere else, so max() is what holds the design's 32px. */
  padding-left: max(32px, env(safe-area-inset-left));
  padding-right: max(32px, env(safe-area-inset-right));
}

.head-inner {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.hero-inner { padding-top: 96px; padding-bottom: 84px; }
.sec { padding-top: 104px; padding-bottom: 104px; }
.sec-s { padding-top: 96px; padding-bottom: 96px; }
.sec-cta { padding-top: 0; padding-bottom: 104px; }

.trust-inner {
  padding-top: 22px;
  padding-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

/* The four logging methods. An inline `gap: 30px` on this row was outranking
   the mobile rule below, so the strip wrapped 3 + 1 with a stranded fourth. */
.trust-items { display: flex; flex-wrap: wrap; gap: 30px; }
.trust-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: #c7ccd4;
}

.split {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 72px;
  align-items: center;
}

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-3.gap-20 { gap: 20px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }

.sec-head { margin-bottom: 54px; }

.foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
.foot-top { padding-top: 56px; padding-bottom: 40px; }
.foot-bot {
  padding-top: 22px;
  padding-bottom: 44px;
  border-top: 1px solid rgba(255,255,255,0.05);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #5d626a;
}
.foot-col { display: flex; flex-direction: column; gap: 12px; }
.foot-col a { font-size: 14px; color: #8a8f98; }
.foot-col a:hover { color: #f5f6f8; }
.foot-h { font-size: 13px; font-weight: 700; color: #f5f6f8; letter-spacing: 0.08em; }

/* --- Type ------------------------------------------------------------------ */

.h1 { font-size: 68px; }
.h2 { font-size: 44px; }
.h2s { font-size: 38px; }
.h2c { font-size: 46px; }
.lede { font-size: 21px; }
.sub { font-size: 19px; }
.sub2 { font-size: 18px; }
.eyebrow { font-size: 13px; font-weight: 700; color: #30D158; letter-spacing: 0.16em; }

/* Short enough to never need breaking, and it reads as a single word. */
.ja { white-space: nowrap; }

/* Inline accents produced by the {g}/{gb}/{m}/{a} tokens in SITE_I18N. */
.i18n-g { color: #30D158; }
.i18n-gb { color: #30D158; font-weight: 700; }
.i18n-muted { color: #8a8f98; font-weight: 500; }
.i18n-a { color: #30D158; font-weight: 600; }

/* --- Buttons (the design's style-hover attributes, as real rules) ----------
   Sizing lives here rather than inline for the reason the whole file exists: a
   media query cannot reach an inline style, and the action column has to
   restack, stretch and shrink at three breakpoints. */

.btn-primary { background: #30D158; color: #08130c; transition: background .16s ease, transform .12s ease; }
.btn-primary:hover { background: #3ee066; color: #08130c; }

.btn-ghost {
  border: 1px solid rgba(255,255,255,0.14);
  color: #f5f6f8;
  transition: border-color .16s ease, color .16s ease, background .16s ease, transform .12s ease;
}
.btn-ghost:hover { border-color: rgba(255,255,255,0.3); color: #ffffff; background: rgba(255,255,255,0.03); }

/* The two hero actions. A shared min-height rather than symmetric padding, so
   the pair stays the same height when one of them wraps to two lines — which
   the Russian secondary label does at the narrow end. */
.btn-lg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 28px;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.btn-ghost.btn-lg { font-weight: 600; padding-left: 24px; padding-right: 24px; }

.btn-store {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  min-height: 52px;
  padding: 12px 14px;
  border-radius: 13px;
  cursor: pointer;
  color: #dfe3e9;
  background: #14171c;
  border: 1px solid rgba(255,255,255,0.1);
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .12s ease;
}
.btn-store:hover { border-color: rgba(255,255,255,0.28); background: #191d23; color: #ffffff; }
.btn-store svg { width: 19px; height: 19px; flex: none; }
.btn-store-label { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.btn-store--cta { background: rgba(255,255,255,0.04); }
.btn-store--cta:hover { border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.08); }

/* Touch has no hover to confirm a tap with, and iOS Safari's default grey
   flash lands on the whole button box a beat after the finger lifts. */
.btn-lg, .btn-store, .lang, .faq-q, .wl-submit, .modal-close {
  -webkit-tap-highlight-color: transparent;
}
.btn-lg:active, .btn-store:active { transform: scale(0.985); }

/* Declared here rather than inline, because the <=1100px rule below has to be
   able to hide it — an inline `display: flex` outranks any stylesheet rule,
   media query or not. */
.topnav {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 15px;
  font-weight: 500;
}
.topnav a { transition: color .16s ease; white-space: nowrap; }
.topnav a:hover { color: #f5f6f8; }

.nav-cta { white-space: nowrap; }

/* --- Hero action column -----------------------------------------------------
   The four blocks under the lede are one ranked column, not four siblings of
   equal weight: primary action, secondary action, the not-yet-shipped native
   apps, then the reassurances. Every layout property here used to be an inline
   style, which is why the mobile rules below were silently no-ops — an inline
   `align-items: center` outranks any stylesheet rule, so the facts rendered
   centred inside a shrink-wrapped column while the media query set
   `flex-start` and lost. Nothing in this column may go back inline. */

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  width: 100%;
}

.hero-badge {
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: 100%;
  background: rgba(48,209,88,0.09);
  border: 1px solid rgba(48,209,88,0.22);
  border-radius: 999px;
  padding: 8px 16px 8px 13px;
}
.hero-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #30D158; flex: none; }
.hero-badge .ja {
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #30D158;
  letter-spacing: 0.22em;
}
.hero-badge-label { font-size: 13px; font-weight: 500; color: #8a8f98; letter-spacing: 0.02em; }

.hero-actions { display: flex; align-items: stretch; gap: 14px; flex-wrap: wrap; }

/* The store buttons are capped to roughly the width of the action row above
   them, so the column has one right edge on desktop instead of a paragraph-wide
   pair of buttons floating under two compact ones. */
.store-block { display: flex; flex-direction: column; gap: 11px; width: 100%; max-width: 430px; }

/* Both store buttons open a waiting-list form. Unlabelled they read as store
   badges — a download that does not exist — so the row says what it is. */
.store-note {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: #7f858e;
  text-wrap: pretty;
}

/* A grid, not a wrapping flex row: the two labels are different lengths in both
   languages, and equal columns are what stop "Google Play" from overflowing the
   viewport at 360px, where `flex: 1 1 auto` sized it from its content. */
.store-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  color: #8a8f98;
}
.hero-facts li { display: flex; align-items: center; gap: 8px; }
.tick-glyph {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: #30D158;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Language toggle ------------------------------------------------------- */

/* Two links, not two buttons: each locale is its own document now, so the pill
   navigates. `a:hover` from the reset would otherwise repaint the inactive one
   green, and the active state moved from aria-pressed (a button state) to
   aria-current (a navigation one). */
.lang {
  border: 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  background: transparent;
  color: #8a8f98;
  text-decoration: none;
  transition: color .16s ease, background .16s ease;
}
.lang:hover { color: #f5f6f8; }
.lang[aria-current="page"] { background: rgba(48,209,88,0.14); color: #30D158; }

/* --- Hero device -------------------------------------------------------------
   iPhone proportions. The screen is 19.5:9, so the frame is sized by an
   aspect-ratio on its border box rather than by a height — the mockup then
   scales by width alone at every breakpoint and cannot drift out of shape.
   The radii live here, not inline, because a media query cannot reach an
   inline style (which is why the old inline `border-radius` on .phone made
   the mobile override below a no-op). */

/* min-height:0 waives the flex item's automatic minimum size: without it a
   very narrow viewport lets the screen's content stretch the frame past the
   aspect ratio, and the mockup stops being iPhone-shaped. Content that no
   longer fits is clipped at the tab bar, which reads as a scrolled list.

   The frame is a flex container and the screen a stretching item, so the screen
   fills the frame's *used* content box with no percentage to resolve. It filled
   it with an inline `height: 100%` before, and the two engines disagreed about
   what that was 100% of: Blink used the frame's content box, WebKit the border
   box — the aspect-ratio height with the 11px padding still in it. On Safari the
   screen was therefore 22px too tall, hung past the frame's rounded bottom, and
   pushed the tab bar clean outside the phone, because the surplus landed in
   #panel-dash's `flex: 1`. Nothing here may reintroduce a percentage height. */
.phone { width: 342px; aspect-ratio: 342 / 716; min-height: 0; border-radius: 56px; display: flex; }
.phone-screen { flex: 1; min-width: 0; min-height: 0; border-radius: 45px; }

/* The Dynamic Island is an overlay so it takes no part in the screen's column
   layout; .phone-status is tall enough to clear it, as on the device. */
.phone-island {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 98px;
  height: 28px;
  border-radius: 999px;
  background: #000;
  z-index: 2;
}
.phone-status {
  flex: none;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 24px 0;
  color: #f5f6f8;
}
.phone-time { font-size: 13px; font-weight: 700; }
.phone-signals { display: flex; align-items: center; gap: 5px; }

.phone-tabs {
  flex: none;
  display: flex;
  justify-content: space-around;
  gap: 4px;
  /* The bottom padding is the home-indicator inset the indicator sits in. */
  padding: 9px 8px 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(15,17,21,0.92);
}
.phone-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  color: #6d727a;
}
.phone-tab.is-active { color: #30D158; }
.phone-home {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 108px;
  height: 4.5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.3);
}

/* --- Cards ----------------------------------------------------------------- */

.feat {
  background: #14171c;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feat-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(48,209,88,0.12);
  display: grid;
  place-items: center;
  margin-bottom: 4px;
}

.tick { display: flex; gap: 11px; align-items: flex-start; font-size: 16px; color: #e6e9ee; }
.tick-mark { color: #30D158; font-weight: 700; flex: none; }

.chip {
  background: #14171c;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 9px 15px;
  font-size: 14px;
  font-weight: 600;
  color: #c7ccd4;
}

.legend {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #8a8f98;
  font-weight: 500;
}

/* --- FAQ ------------------------------------------------------------------- */

.faq-item {
  background: #14171c;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  overflow: hidden;
}
.faq-q {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 17px;
  font-weight: 600;
  color: #f5f6f8;
}
.faq-icon {
  color: #30D158;
  font-size: 21px;
  font-weight: 400;
  flex: none;
  line-height: 1;
  transition: transform .18s ease;
}
.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-a { margin: 0; padding: 0 22px 22px; font-size: 15px; line-height: 1.6; color: #8a8f98; }

/* --- Closing CTA ----------------------------------------------------------- */

.cta-box {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: radial-gradient(120% 130% at 82% 18%, #17281e 0%, #10141a 55%, #0d1014 100%);
  border: 1px solid rgba(255,255,255,0.07);
  padding: 72px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}
.cta-mark {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 240px;
  height: 240px;
}
.cta-mark svg { width: 100%; height: auto; max-width: 216px; }

/* --- Waiting-list modal ---------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(6,8,11,0.72);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
}
.modal-card {
  width: 100%;
  max-width: 460px;
  background: #14171c;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 22px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.modal-close {
  cursor: pointer;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: #8a8f98;
  font-size: 17px;
  line-height: 1;
  transition: color .16s ease, border-color .16s ease;
}
.modal-close:hover { color: #f5f6f8; border-color: rgba(255,255,255,0.28); }

.wl-input {
  width: 100%;
  background: #0f1115;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 16px;
  color: #f5f6f8;
  outline: none;
  transition: border-color .16s ease;
}
.wl-input::placeholder { color: #5e646d; }
.wl-input:focus { border-color: #30D158; }

/* The design drove the submit button's colours from {{ submitBg }}/
   {{ submitColor }}; :disabled expresses the same two states without JS
   having to paint them. */
.wl-submit {
  cursor: pointer;
  border: 0;
  border-radius: 12px;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  background: #30D158;
  color: #08130c;
  transition: background .16s ease, color .16s ease;
}
.wl-submit:hover:not(:disabled) { background: #3ee066; }
.wl-submit:disabled { background: #22262c; color: #5e646d; cursor: not-allowed; }

.wl-error { margin: 0; font-size: 13px; line-height: 1.5; color: #FF6B84; }

/* --- Photo placeholders ----------------------------------------------------
   The four empty <image-slot> elements in the design. Dropping a real photo in
   later is one background-image per slot. */

.photo-slot {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(120% 120% at 22% 12%, rgba(48,209,88,0.10) 0%, rgba(48,209,88,0) 58%),
    linear-gradient(142deg, #1c222a 0%, #242c36 48%, #1b2a21 100%);
  color: rgba(245,246,248,0.32);
  background-size: cover;
  background-position: center;
}
.photo-glyph { width: 46%; max-width: 44px; height: auto; }
.photo-slot--xs .photo-glyph { width: 62%; max-width: 22px; }

/* --- Breakpoints ----------------------------------------------------------- */

@media (max-width: 1024px) {
  .cta-box { padding: 56px 44px; }
  .split { gap: 48px; }
}

/* Russian nav labels ("Как это работает", "Мини-приложение") are ~40% wider
   than the English ones, so the row runs out of space well above the layout
   breakpoint. Collapse to logo + language + CTA before it can wrap. */
@media (max-width: 1100px) {
  .topnav { display: none; }
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 52px; justify-items: center; }
  .hero-copy { width: 100%; max-width: 660px; }
  .hero-device { width: 100%; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; gap: 44px; }
  .foot { grid-template-columns: 1fr 1fr; gap: 36px; }
  .cta-box { flex-direction: column; align-items: flex-start; padding: 48px 36px; gap: 32px; }
  .cta-mark { align-self: center; width: 190px; height: 190px; }
  .ma-macros { flex-direction: column; align-items: flex-start; }
  .h1 { font-size: 52px; }
  .h2 { font-size: 36px; }
  .h2s { font-size: 32px; }
  .h2c { font-size: 38px; }
  .hero-inner { padding-top: 72px; padding-bottom: 64px; }
  .sec { padding-top: 80px; padding-bottom: 80px; }
  .sec-s { padding-top: 80px; padding-bottom: 80px; }
  .sec-cta { padding-bottom: 80px; }
  .sec-head { margin-bottom: 40px; }
}

@media (max-width: 600px) {
  .wrap {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  .grid-3, .grid-3.gap-20 { grid-template-columns: 1fr; gap: 16px; }
  .h1 { font-size: 40px; }
  .h2 { font-size: 30px; }
  .h2s { font-size: 27px; }
  .h2c { font-size: 31px; }
  .lede { font-size: 18px; }
  .sub { font-size: 17px; }
  .sub2 { font-size: 17px; }
  .hero-inner { padding-top: 52px; padding-bottom: 52px; }
  .sec { padding-top: 64px; padding-bottom: 64px; }
  .sec-s { padding-top: 64px; padding-bottom: 64px; }
  .sec-cta { padding-bottom: 64px; }
  .trust-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  /* Four items never fit one line here; a 2x2 grid beats 3 + a stranded 1. */
  .trust-items { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
  /* One column edge for the whole action stack. Side by side, the two actions
     no longer fit at this width and wrap into a ragged pair of content-sized
     buttons; full width also puts both inside the thumb's arc. */
  .hero-copy { gap: 24px; }
  .hero-badge { padding: 7px 14px 7px 11px; gap: 9px; }
  .hero-badge .ja { font-size: 12px; letter-spacing: 0.16em; }
  .hero-badge-label { font-size: 12px; }
  .hero-actions { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }
  /* The cap above keeps the store row from outrunning a content-sized action
     row; once the actions are full width it would do the opposite. */
  .store-block { max-width: none; }
  .btn-lg { min-height: 54px; font-size: 16px; padding-left: 20px; padding-right: 20px; }
  /* Stacked, these read as a list rather than a sentence; one per line keeps
     the ticks in a column the eye can run down. */
  .hero-facts { flex-direction: column; align-items: flex-start; gap: 9px; }
  .head-inner { gap: 12px; }
  .nav-cta { font-size: 14px; padding: 10px 15px; }
  /* Width only — aspect-ratio carries the height. */
  .phone { width: min(330px, calc(100vw - 44px)); border-radius: 52px; }
  .phone-screen { border-radius: 42px; }
  .cta-box { padding: 36px 24px; border-radius: 22px; }
  /* Same one-column edge as the hero: the closing CTA's button and the store
     row under it are the same action group. */
  .cta-box .btn-lg { width: 100%; }
  .cta-mark { width: 150px; height: 150px; }
  .ma-cards { flex-direction: column; }
  .faq-q { padding: 17px 18px; font-size: 16px; }
  .faq-a { padding: 0 18px 18px; }
  .modal { padding: 16px; }
  .modal-card { padding: 24px; border-radius: 18px; }
  .foot-top { padding-top: 44px; padding-bottom: 32px; }
}

/* Below this the header row — mark, wordmark, language pill, CTA — cannot fit
   the Russian CTA, and the button is what the header is *for*. The mark stays;
   the wordmark is the part a 375px screen can spare. */
@media (max-width: 460px) {
  .wordmark { display: none; }
  .nav-cta { font-size: 14px; padding: 10px 13px; }
  .lang { padding: 5px 9px; }
  .head-inner { gap: 10px; }
}

@media (max-width: 420px) {
  /* A 19.5:9 frame is short of screen for its width, so at this size the phone
     claims the gutter the wider breakpoint spends on margin rather than losing
     rows off the bottom of its own screen. */
  .phone { width: min(330px, calc(100vw - 24px)); }
  .foot { grid-template-columns: 1fr; gap: 28px; }
  .h1 { font-size: 34px; }
  .h2 { font-size: 27px; }
  .h2c { font-size: 28px; }
  .wordmark { font-size: 16px; }
  /* Two equal store columns leave ~134px each here; trim the button's own
     padding rather than let the label decide the width and overflow. */
  .btn-store { padding-left: 10px; padding-right: 10px; gap: 8px; }
  .btn-store-label { font-size: 14px; }
  .store-row { gap: 10px; }
}

/* The header's own row runs out of width before the layout does: mark +
   language pill + CTA is ~332px in English and wider again in Russian, so on a
   320px screen the button — the only thing the header is there for — hung off
   the right edge. Tighten the chrome around it rather than shrink the button
   below a comfortable tap target. */
@media (max-width: 390px) {
  .head-inner { gap: 8px; }
  .nav-cta { font-size: 13px; padding: 10px 11px; }
  .lang { font-size: 12px; padding: 4px 8px; }
}

/* Russian's "Открыть в Telegram" is ~20px wider than the English label, which
   is the last 20px a 320px screen has. */
@media (max-width: 360px) {
  /* 16px is the platform gutter at this size anyway, and the 8px it returns is
     what puts the Russian header CTA back inside the screen. */
  .wrap {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .head-inner { gap: 5px; }
  .nav-cta { font-size: 12px; padding: 10px 7px; letter-spacing: -0.01em; }
  .lang { font-size: 11px; padding: 4px 6px; }
}


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* The weight-trend delta is the {g} token inside maWeightVal; the design set
   it a step smaller than the figure it trails. */
.ma-cards .i18n-g { font-size: 13px; }