/* ==========================================================================
   Aiutante — aiutante.kz
   Design tokens mirror lib/theme/elms_tokens.dart in the Flutter app, so the
   site and the product read as one thing.
   ========================================================================== */

@import url("../fonts/fonts.css?v=27594f5c7a");

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* Brand — eucalyptus */
  --primary: #4C8079;
  --primary-deep: #2F5A54;
  --primary-soft: #D6E6E2;

  /* Accent — honey gold */
  --accent: #C8964A;
  --accent-deep: #A9792F;
  --accent-soft: #EBDDC2;

  /* Surfaces */
  --bg: #F6F2E9;
  --surface: #FFFFFF;
  --surface-2: #EFEADC;

  /* Ink & lines */
  --ink: #283228;
  --ink-soft: #4C564B;
  --muted: #75806F;
  --line: #E5DFCF;

  /* On-dark ink, for the eucalyptus bands */
  --on-dark: #FFFFFF;
  --on-dark-soft: rgba(255, 255, 255, .82);
  --on-dark-faint: rgba(255, 255, 255, .16);

  --hero-gradient: linear-gradient(165deg, #4C8079 0%, #2F5A54 100%);

  --radius: 22px;
  --radius-sm: 15px;
  --radius-lg: 32px;

  --shadow-sm: 0 1px 2px rgba(40, 50, 40, .04);
  --shadow: 0 1px 2px rgba(40, 50, 40, .04), 0 12px 28px -12px rgba(40, 50, 40, .18);
  --shadow-lg: 0 2px 4px rgba(40, 50, 40, .04), 0 32px 64px -24px rgba(40, 50, 40, .28);

  --sans: 'AiutanteSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          Helvetica, Arial, sans-serif;

  --shell: 1140px;
  --gutter: clamp(20px, 5vw, 40px);
  --section-y: clamp(64px, 9vw, 116px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #7FB3AA;
    --primary-deep: #A8CFC7;
    --primary-soft: #24352F;

    --accent: #DBAF6A;
    --accent-deep: #E5C48D;
    --accent-soft: #3A2E16;

    --bg: #161C19;
    --surface: #1E2622;
    --surface-2: #232C28;

    --ink: #E8E4D8;
    --ink-soft: #C8C4B6;
    --muted: #9BA697;
    --line: #313B35;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 28px -12px rgba(0, 0, 0, .6);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 32px 64px -24px rgba(0, 0, 0, .7);
  }
}

/* --- Reset -------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -.03em; font-weight: 800; }
p { margin: 0; }
ul, ol { margin: 0; }

a { color: var(--primary-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--surface); color: var(--ink);
  padding: 10px 18px; border-radius: 10px; box-shadow: var(--shadow);
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Layout ------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow { max-width: 780px; }

section { padding-block: var(--section-y); }

.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-deep); margin-bottom: 14px;
}
.eyebrow--on-dark { color: var(--accent-soft); }

.section-head { max-width: 46ch; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head h2 { font-size: clamp(28px, 4.2vw, 42px); }
.section-head p { margin-top: 16px; color: var(--muted); font-size: clamp(17px, 1.6vw, 19px); }

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 24px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-weight: 700; font-size: 16px; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-deep); }
@media (prefers-color-scheme: dark) { .btn--primary { color: #10201C; } }
.btn--ghost { border-color: var(--line); color: var(--ink); background: var(--surface); }
.btn--ghost:hover { border-color: var(--primary); }
.btn--on-dark { background: #fff; color: var(--primary-deep); }
.btn--on-dark:hover { background: var(--accent-soft); }
@media (prefers-color-scheme: dark) {
  .btn--on-dark { background: #fff; color: #2F5A54; }
}

/* --- Store badges ------------------------------------------------------- */

.badges { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.badges a {
  display: block; border-radius: 10px;
  transition: transform .15s ease, opacity .15s ease;
}
.badges a:hover { transform: translateY(-2px); }
.badges img { height: 54px; width: auto; }
/* Google's artwork ships with its own transparent margin; Apple's does not.
   Nudge the Apple badge so the two optically match. */
.badges .badge--apple img { height: 54px; padding: 4px 0; }
.badges .badge--google img { height: 62px; margin: -4px -8px; }

.badges--sm img { height: 44px; }
.badges--sm .badge--google img { height: 52px; }

.store-note { margin-top: 16px; font-size: 14.5px; color: var(--muted); }
.store-note--on-dark { color: var(--on-dark-soft); }

/* --- Header ------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
.site-header.is-stuck { border-bottom-color: var(--line); }

.site-header .shell {
  display: flex; align-items: center; gap: 20px;
  min-height: 72px;
}

.wordmark {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--ink);
  font-weight: 800; font-size: 19px; letter-spacing: -.03em;
  flex: 0 0 auto;
}
.wordmark img { width: 34px; height: 34px; border-radius: 9px; box-shadow: var(--shadow-sm); }
/* The mark is drawn, not set: 5.5em wide against the nominal type size is the
   same ratio AiutanteBranding.wordmark uses in the app, so the two agree at
   any size. It fills with currentColor, which is what carries it through the
   dark-scheme flip of --ink. */
.wordmark-mark { width: 5.5em; height: auto; display: block; }

.site-nav { margin-inline-start: auto; }
.site-nav ul {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 28px);
  list-style: none; padding: 0;
}
.site-nav a {
  text-decoration: none; color: var(--ink-soft); font-weight: 600; font-size: 15.5px;
  padding: 6px 2px; white-space: nowrap;
}
.site-nav a:hover { color: var(--primary-deep); }

.header-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink); cursor: pointer;
}

/* --- Language switcher (no JS; native <details>) ------------------------ */

.lang { position: relative; }
.lang > summary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 14.5px; font-weight: 700; color: var(--ink-soft);
  cursor: pointer; list-style: none; user-select: none;
}
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease;
}
.lang[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.lang > summary:hover { border-color: var(--primary); }

.lang-menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px);
  min-width: 190px; padding: 8px; margin: 0; list-style: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow);
}
.lang-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: 10px;
  text-decoration: none; color: var(--ink); font-size: 15px; font-weight: 600;
}
.lang-menu a:hover { background: var(--surface-2); }
.lang-menu a[aria-current="true"] { color: var(--primary-deep); }
.lang-menu a[aria-current="true"]::after { content: "✓"; font-weight: 800; }

/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--hero-gradient);
  color: var(--on-dark);
  padding-block: clamp(52px, 7vw, 88px) 0;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 120px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}
.hero .shell {
  position: relative; z-index: 1;
  display: grid; gap: clamp(36px, 5vw, 64px);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .hero .shell { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}

.hero h1 {
  font-size: clamp(36px, 5.6vw, 62px);
  color: var(--on-dark);
  text-wrap: balance;
}
.hero .lede {
  margin-top: 22px; max-width: 46ch;
  font-size: clamp(17.5px, 1.9vw, 20.5px);
  color: var(--on-dark-soft);
}
.hero .badges { margin-top: 32px; }
.hero .eyebrow { color: var(--accent-soft); }

.hero-art {
  display: flex; justify-content: center; align-items: flex-end;
  padding-bottom: clamp(20px, 4vw, 40px);
}

/* --- Phone frame -------------------------------------------------------- */

.phone {
  position: relative;
  width: 100%;
  max-width: 288px;
  padding: 9px;
  background: linear-gradient(160deg, #3B443E 0%, #1B211E 55%, #2C332F 100%);
  border-radius: 46px;
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, .12);
  flex: 0 0 auto;
}
.phone img {
  width: 100%; height: auto;
  border-radius: 38px;
  background: #F6F2E9;
}
.phone--lg { max-width: 320px; }
.phone--sm { max-width: 236px; }

/* --- Trust strip -------------------------------------------------------- */

.trust { padding-block: clamp(28px, 4vw, 44px); }
.trust ul {
  display: grid; gap: 14px 28px; list-style: none; padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.trust li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 15.5px; font-weight: 600; color: var(--ink-soft);
}
.trust svg { flex: 0 0 auto; margin-top: 2px; color: var(--primary); }

/* --- Steps -------------------------------------------------------------- */

.steps {
  display: grid; gap: clamp(22px, 3vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  counter-reset: step;
}
.step {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px 28px 32px;
  box-shadow: var(--shadow-sm);
}
.step::before {
  counter-increment: step; content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-bottom: 20px;
  border-radius: 13px; background: var(--primary-soft); color: var(--primary-deep);
  font-weight: 800; font-size: 18px;
}
.step h3 { font-size: 20px; margin-bottom: 10px; }
.step p { color: var(--muted); font-size: 16.5px; }

/* --- Showcase rows ------------------------------------------------------ */

.showcase { display: grid; gap: clamp(48px, 7vw, 96px); }

.showcase-row {
  display: grid; gap: clamp(28px, 5vw, 68px);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .showcase-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .showcase-row--flip .showcase-art { order: -1; }
}
.showcase-art { display: flex; justify-content: center; }
.showcase-text h3 { font-size: clamp(25px, 3.2vw, 34px); margin-bottom: 16px; }
.showcase-text > p { color: var(--muted); font-size: 17.5px; max-width: 44ch; }

.ticks { list-style: none; padding: 0; margin-top: 22px; display: grid; gap: 11px; }
.ticks li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 16.5px; color: var(--ink-soft);
}
.ticks li::before {
  content: ""; flex: 0 0 auto; width: 21px; height: 21px; margin-top: 3px;
  border-radius: 50%; background: var(--primary-soft) no-repeat center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232F5A54' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* --- Feature cards ------------------------------------------------------ */

.cards {
  display: grid; gap: clamp(18px, 2.4vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
}
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px 28px 32px;
  box-shadow: var(--shadow-sm);
}
.card-icon {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 20px;
  border-radius: 14px; background: var(--primary-soft); color: var(--primary-deep);
}
.card-icon--accent { background: var(--accent-soft); color: var(--accent-deep); }
.card h3 { font-size: 19.5px; margin-bottom: 9px; }
.card p { color: var(--muted); font-size: 16.5px; }

/* --- Dark band ---------------------------------------------------------- */

.band { background: var(--hero-gradient); color: var(--on-dark); }
.band h2, .band h3 { color: var(--on-dark); }
.band p { color: var(--on-dark-soft); }
.band .section-head p { color: var(--on-dark-soft); }
.band .ticks li { color: var(--on-dark-soft); }
.band .ticks li::before {
  background-color: rgba(255, 255, 255, .16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.split {
  display: grid; gap: clamp(32px, 5vw, 64px); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Utilities. These exist because the Content-Security-Policy is
   `style-src 'self'` with no 'unsafe-inline' — a style="" attribute in the
   markup is silently dropped by the browser, so every rule has to live here. */
.stack-sm  { margin-top: 16px; }
.stack-md  { margin-top: 22px; }
.stack-lg  { margin-top: 26px; }
.measure   { max-width: 44ch; }
.muted     { color: var(--muted); }

/* --- Companion app ------------------------------------------------------ */

.companion {
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 56px);
  border: 1px solid var(--line);
}
.companion .split { align-items: center; }
.companion h2 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 16px; }
.companion p { color: var(--muted); font-size: 17.5px; }
.companion .badges { margin-top: 28px; }

/* --- Privacy pledge ----------------------------------------------------- */

.pledge {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(32px, 5vw, 52px);
  box-shadow: var(--shadow-sm);
}
.pledge h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 16px; }
.pledge > p { color: var(--muted); font-size: 17.5px; max-width: 60ch; }
.pledge ul {
  list-style: none; padding: 0; margin-top: 26px;
  display: grid; gap: 14px 30px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.pledge li { display: flex; gap: 11px; font-size: 16.5px; color: var(--ink-soft); }
.pledge li::before {
  content: ""; flex: 0 0 auto; width: 21px; height: 21px; margin-top: 3px;
  border-radius: 50%; background: var(--primary-soft) no-repeat center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232F5A54' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* --- Final CTA ---------------------------------------------------------- */

.cta { text-align: center; }
.cta h2 { font-size: clamp(30px, 4.4vw, 46px); margin-bottom: 18px; text-wrap: balance; }
.cta p { color: var(--on-dark-soft); font-size: clamp(17px, 1.8vw, 19.5px); max-width: 46ch; margin-inline: auto; }
.cta .badges { justify-content: center; margin-top: 34px; }
.cta-apps {
  display: grid; gap: 28px; margin-top: 40px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.cta-app {
  background: rgba(255, 255, 255, .1);
  border: 1px solid var(--on-dark-faint);
  border-radius: var(--radius); padding: 26px 24px 28px;
}
.cta-app h3 { font-size: 19px; margin-bottom: 6px; }
.cta-app p { font-size: 15.5px; margin-bottom: 20px; }
.cta-app .badges { justify-content: center; }

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

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-block: clamp(44px, 6vw, 68px) 44px;
  color: var(--muted);
  font-size: 15.5px;
}
.footer-top {
  display: grid; gap: 34px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: 40px;
}
.footer-brand p { margin-top: 14px; max-width: 34ch; }
.site-footer h4 {
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 14px; font-weight: 700;
}
.site-footer ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--primary-deep); text-decoration: underline; }

.footer-bottom {
  border-top: 1px solid var(--line); padding-top: 26px;
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between;
  font-size: 14.5px;
}
.disclaimer { max-width: 62ch; }

/* --- Legal & support pages --------------------------------------------- */

.page-head {
  background: var(--hero-gradient); color: var(--on-dark);
  padding-block: clamp(40px, 6vw, 64px);
}
.page-head h1 { font-size: clamp(30px, 5vw, 46px); color: var(--on-dark); }
.page-head .updated,
.page-head .lede { margin-top: 12px; color: var(--on-dark-soft); font-size: 17.5px; max-width: 52ch; }

.prose { padding-block: clamp(40px, 5vw, 60px) var(--section-y); }
.prose h2 {
  margin: 46px 0 12px; font-size: 23px; font-weight: 700;
  letter-spacing: -.02em; scroll-margin-top: 90px;
}
.prose h2:first-of-type { margin-top: 0; }
.prose h3 { margin: 28px 0 6px; font-size: 17.5px; font-weight: 700; }
.prose p { margin: 0 0 16px; }
.prose ul { margin: 0 0 16px; padding-inline-start: 22px; }
.prose li { margin-bottom: 8px; }

.toc {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 26px; margin-bottom: 42px;
}
.toc p {
  font-size: 13px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); font-weight: 700; margin-bottom: 12px;
}
.toc ol { margin: 0; padding-inline-start: 20px; columns: 2; column-gap: 32px; font-size: 15.5px; }
.toc li { margin-bottom: 6px; }
@media (max-width: 560px) { .toc ol { columns: 1; } }

.callout {
  background: var(--surface-2); border-inline-start: 4px solid var(--accent);
  border-radius: 12px; padding: 18px 22px; margin: 0 0 34px; font-size: 16px;
}
.callout strong { display: block; margin-bottom: 4px; }

.contact-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 28px; margin-bottom: 42px;
}
.contact-card h2 { margin: 0 0 12px; }
.contact-card .mail {
  display: inline-block; font-size: 21px; font-weight: 800;
  letter-spacing: -.02em; margin-bottom: 8px;
}
.contact-card p:last-child { margin-bottom: 0; }

details.faq {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 2px 22px; margin-bottom: 10px;
}
details.faq[open] { border-color: var(--primary); }
details.faq > summary {
  cursor: pointer; font-weight: 700; font-size: 17px; padding: 16px 0;
  list-style: none; display: flex; justify-content: space-between; gap: 16px;
  align-items: baseline;
}
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary::after {
  content: "+"; color: var(--primary); font-weight: 700; font-size: 22px;
  line-height: 1; flex: 0 0 auto;
}
details.faq[open] > summary::after { content: "–"; }
details.faq .body { padding-bottom: 18px; }
details.faq .body p:last-child { margin-bottom: 0; }

kbd {
  font: inherit; font-weight: 600; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px;
}

/* A literal to copy rather than a key to press — the MCP connector URL, so
   far. Monospace, and breakable: that URL is wider than a phone. */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px;
  overflow-wrap: anywhere;
}

/* --- Small screens ------------------------------------------------------ */

/* Russian and Kazakh labels are considerably longer than the English ones.
   Tighten the row first, then drop the header button, then collapse to the menu
   — the same three steps regardless of which locale is being served. */
@media (max-width: 1180px) {
  .site-nav ul { gap: 15px; }
  .site-nav a { font-size: 15px; }
}
@media (max-width: 1080px) {
  .header-cta { display: none; }
}

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute; inset-inline: var(--gutter); top: calc(100% + 8px);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 10px; margin: 0;
  }
  .site-nav[hidden] { display: none; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .site-nav a { display: block; padding: 11px 14px; border-radius: 10px; font-size: 16px; }
  .site-nav a:hover { background: var(--surface-2); }
  .site-header .shell { position: relative; }
  .header-actions { margin-inline-start: auto; }
}

@media (max-width: 420px) {
  .badges img { height: 46px; }
  .badges .badge--google img { height: 54px; }
}