/* moymenu.com homepage v2 (2026-10-14, src/seo/intl.ts), in the MoyMenu brand kit (ink #1A1418, cream #FFF8F0,
   menu blue #2459C7, heart pink #C2274F): a calm white page in the owner-approved moymenyu.com
   style; built SVG pictures (src/seo/intl-art.ts) animated by /seo/home.js. Every rule that hides something
   for motion is scoped to html.m, which only home.js sets: without it the page is whole and still.
   2026-10-14 — moymenyu.com's homepage is the same page (src/seo/myu-home.ts, body.home-myu): what differs
   there (its logo, the language switch) is styled only under its own classes, so nothing on moymenu.com's
   page changes. The MoyMate section and its drawing are on both pages (moymenu.com's since the owner asked
   for it to be the same as moymenyu.com's), and so is the header that keeps its five links for the footer
   below 960 px. */
@font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/seo/fonts/inter-latin-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/seo/fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/seo/fonts/inter-cyrillic-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  --ink: #1A1418;
  --text: #3E3438;
  --muted: #6B5A61;
  --line: #EADFD6;
  --surface: #FFF8F0;
  --blue: #2459C7;
  --blue-dark: #1D47A0;
  --blue-tint: #EEF3FC;
  --heart: #C2274F;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --wrap: 1200px;
  --pad: clamp(20px, 4vw, 40px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px;
  border-radius: 12px; background: var(--blue); color: #fff; font-size: 16px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 8px 20px -10px rgba(36, 89, 199, 0.7);
  transition: background-color .2s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { background: var(--blue-dark); transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(36, 89, 199, 0.75); }
.btn:active { transform: translateY(0) scale(.98); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn .i-arrow { transition: transform .3s var(--ease); }
.btn:hover .i-arrow { transform: translateX(3px); }
.btn-sm { height: 42px; padding: 0 18px; font-size: 15px; }
.btn-line { height: 46px; padding: 0 18px; background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: none; font-size: 15px; }
.btn-line:hover { background: #FFFBF7; border-color: #DCCFC6; box-shadow: 0 8px 18px -12px rgba(26, 20, 24, .25); }
.btn-line svg { color: var(--blue); }

/* Header */
.bar { padding: 18px 0; }
.bar-row { display: flex; align-items: center; gap: 40px; }
.logo img { width: 152px; height: 45px; }
.nav { display: flex; gap: 30px; font-size: 15px; font-weight: 500; color: var(--text); }
.nav a, .nav-link { transition: color .2s var(--ease); }
.nav a:hover, .nav-link:hover { color: var(--blue); }
.bar-end { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 15px; font-weight: 500; }
/* moymenyu.com's header (2026-10-14; src/seo/myu-home.ts): its own orange logo, public/brand/lockup-onlight.webp
   (563 × 120, as components/BrandLogo.tsx draws it), and the AZ RU EN switch at the start of .bar-end with the
   page's own language marked. Each link is its own touch target and its pill is drawn inside it. Where the row
   runs short the logo gives way (it scales down, never the words), so nothing runs off a phone. */
body.home-myu .logo { flex: 0 1 auto; min-width: 0; }
body.home-myu .logo img { width: auto; height: 32px; max-width: 100%; object-fit: contain; object-position: left center; }
.langs { display: flex; align-items: center; }
.langs a { position: relative; isolation: isolate; display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 7px; font-size: 13px; font-weight: 650; letter-spacing: .04em; color: var(--muted); transition: color .2s var(--ease); }
.langs a::before { content: ""; position: absolute; inset: 5px 2px; z-index: -1; border-radius: 999px; transition: background-color .2s var(--ease); }
.langs a:hover { color: var(--ink); }
.langs a:hover::before { background: var(--surface); }
.langs a[aria-current="page"] { color: var(--blue); }
.langs a[aria-current="page"]::before { background: var(--blue-tint); }
.langs a:focus-visible { outline-offset: -3px; border-radius: 999px; }
/* moymenyu.com's header button carries two labels (src/seo/intl.ts): the full one, and the app's short phone
   label, shown below 440 px (2026-10-14 review: "Подключиться" and "Get started" shrank the logo there). */
.cta-short { display: none; }

/* Hero */
.hero { padding: clamp(24px, 4vw, 56px) 0 clamp(40px, 5vw, 72px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.hero h1 { font-size: clamp(2.5rem, 1.5rem + 2.6vw, 3.6rem); line-height: 1.04; letter-spacing: -0.035em; font-weight: 650; color: var(--ink); text-wrap: balance; }
.hero-sub { margin-top: 22px; font-size: 19px; line-height: 1.5; color: var(--muted); max-width: 32ch; }
.hero-actions { margin-top: 32px; display: grid; gap: 12px; justify-items: start; }
.hero-demos { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-note { margin-top: 18px; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.hero-note svg { width: 16px; height: 16px; fill: none; stroke: #16a34a; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hero-art { position: relative; }
.art { width: 100%; height: auto; overflow: visible; }
/* The hero picture runs a little past the column, never past the page edge. */
@media (min-width: 961px) { .hero-art .art { width: calc(100% + min(72px, var(--pad))); margin-right: calc(-1 * min(72px, var(--pad))); } }

/* The illustration's own type and moving parts */
.art text { font-family: var(--font); }
.t-h { font-size: 19px; font-weight: 700; fill: #1A1418; letter-spacing: -0.01em; }
.t-s { font-size: 11.5px; fill: #6B5A61; }
.t-st { font-size: 11.5px; font-weight: 600; }
.t-name { font-size: 19px; font-weight: 700; fill: #1A1418; letter-spacing: -0.015em; }
.t-amt { font-size: 13.5px; font-weight: 650; fill: #4A3F45; }
.t-toast { font-size: 12.5px; font-weight: 600; fill: #ffffff; }
.t-ticket { font-size: 12px; font-weight: 650; fill: #1A1418; }
.p-h { font-size: 14.5px; font-weight: 700; fill: #1A1418; }
.p-s { font-size: 11.5px; fill: #6B5A61; }
.p-chip { font-size: 12px; font-weight: 600; fill: #4A3F45; text-anchor: middle; }
.p-chip.on { fill: #ffffff; }
.t-amt.new { fill: #183B85; }
.p-name { font-size: 13px; font-weight: 650; fill: #1A1418; }
.p-price { font-size: 12.5px; font-weight: 600; fill: #5A4D53; }
.p-count { font-size: 12.5px; font-weight: 700; fill: #ffffff; text-anchor: middle; }
.p-cart { font-size: 13px; font-weight: 650; fill: #ffffff; text-anchor: middle; }
.a-pos, .a-phone-in, .a-phone-float, .ticket, .cart, .toast, .add, .add-count, .tap, .t4-ring, .t4-new, .t4-free { transform-box: fill-box; transform-origin: center; }
/* Without script: the finished moment (the order arrived), no flying ticket, no taps. */
.cart-sent, .tap, .ticket, .t4-ring { opacity: 0; }
/* With script: the start of the story; home.js plays it. */
.m .toast, .m .t4-new, .m .add-count { opacity: 0; }
.m .cart { transform: translateY(70px); }
.m .art:not(.go) .a-pos, .m .art:not(.go) .a-phone-in { opacity: 0; }

/* Benefits */
.benefits { padding: 8px 0 clamp(64px, 8vw, 112px); }
.benefit-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.benefit { display: flex; align-items: center; gap: 16px; padding: 22px; border-radius: 18px; background: var(--surface); transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease); }
.benefit:hover { transform: translateY(-3px); background: #fff; box-shadow: 0 18px 40px -22px rgba(26, 20, 24, .28); }
.b-icon { flex: none; width: 50px; height: 50px; border-radius: 14px; background: #fff; display: grid; place-items: center; color: var(--blue); }
.b-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.benefit h2 { font-size: 17px; font-weight: 650; color: var(--ink); letter-spacing: -0.01em; }
.benefit p { font-size: 15px; color: var(--muted); margin-top: 2px; }

/* Product sections: a pill, a heading, one line, three checks, a link; the illustration on a soft stage */
.feature { padding: clamp(56px, 7vw, 104px) 0; }
.feature-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.feature.flip .feature-text { order: 2; }
.feature.flip .feature-art { order: 1; }
.pill { display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 999px; background: var(--blue-tint); color: var(--blue); font-size: 13px; font-weight: 600; }
.feature h2 { margin-top: 16px; font-size: clamp(1.9rem, 1.2rem + 1.9vw, 2.7rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: 650; color: var(--ink); text-wrap: balance; }
.feature-lead { margin-top: 14px; font-size: 18px; color: var(--muted); max-width: 34ch; }
.checks { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.checks li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--text); }
.ck { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--blue-tint); display: grid; place-items: center; }
.ck svg { width: 14px; height: 14px; fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.more { margin-top: 28px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--blue); }
.more svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.more:hover svg { transform: translateX(4px); }
.feature-art { background: var(--surface); border-radius: 28px; padding: clamp(16px, 2.4vw, 32px); }

/* The illustrations' own type */
.w-h { font-size: 20px; font-weight: 700; fill: #1A1418; letter-spacing: -0.01em; }
.w-s { font-size: 12px; fill: #6B5A61; }
.w-chip { font-size: 12px; font-weight: 600; fill: #2459C7; text-anchor: middle; }
.w-tile { font-size: 12px; font-weight: 600; fill: #1A1418; }
.w-bt { font-size: 14px; font-weight: 700; fill: #1A1418; }
.w-row { font-size: 14px; font-weight: 550; fill: #1A1418; }
.w-q { font-size: 13px; fill: #6B5A61; }
.w-rp { font-size: 14px; font-weight: 650; fill: #1A1418; text-anchor: end; }
.w-tl { font-size: 14px; font-weight: 600; fill: #5A4D53; }
.w-ta { font-size: 21px; font-weight: 750; fill: #1A1418; text-anchor: end; letter-spacing: -0.01em; }
.w-btn { font-size: 14px; font-weight: 650; fill: #ffffff; text-anchor: middle; }
.w-btn-l { font-size: 14px; font-weight: 650; fill: #1A1418; text-anchor: middle; }
.r-h { font-size: 12px; font-weight: 700; fill: #1A1418; text-anchor: middle; }
.r-s { font-size: 10.5px; fill: #6B5A61; text-anchor: middle; }
.r-t { font-size: 12px; font-weight: 700; fill: #1A1418; text-anchor: middle; }
.q-h { font-size: 15px; font-weight: 700; fill: #1A1418; text-anchor: middle; }
.q-s { font-size: 12px; fill: #6B5A61; text-anchor: middle; }
.q-c { font-size: 12.5px; font-weight: 600; fill: #4A3F45; text-anchor: middle; }
.g-h { font-size: 19px; font-weight: 700; fill: #1A1418; text-anchor: middle; }
.g-s { font-size: 12px; fill: #6B5A61; text-anchor: middle; }
.g-name { font-size: 13px; font-weight: 700; fill: #ffffff; text-anchor: middle; }
.g-name.dark { fill: #1A1418; }
.g-res { font-size: 13.5px; font-weight: 700; fill: #ffffff; text-anchor: middle; }
.g-btn { font-size: 15px; font-weight: 650; fill: #ffffff; text-anchor: middle; }
.m-h { font-size: 19px; font-weight: 700; fill: #1A1418; }
.m-s { font-size: 12px; fill: #6B5A61; }
.m-big { font-size: 31px; font-weight: 750; fill: #1A1418; letter-spacing: -0.02em; }
.m-r { font-size: 13.5px; font-weight: 550; fill: #4A3F45; }
.m-chip { font-size: 11.5px; font-weight: 650; fill: #15803d; text-anchor: middle; }
.m-rv { font-size: 14px; font-weight: 700; fill: #1A1418; text-anchor: end; }
.n-h { font-size: 14px; font-weight: 700; fill: #1A1418; }
.n-s { font-size: 12.5px; fill: #5A4D53; }
.n-t { font-size: 11.5px; fill: #A3949A; text-anchor: end; }
.pa-row, .pa-paper, .pa-print, .pa-led, .qa-wheel, .qa-result, .qa-spin, .qa-beam, .ma-note, .ma-dot, .ma-area { transform-box: fill-box; transform-origin: center; }
/* The wheel rests on Omar (its 135° slice under the pointer), script or not. */
.qa-wheel { transform: rotate(225deg); }
/* With script: the start of each story. */
.m .pa-row { opacity: 0; }
.m .pa-paper { transform: translateY(176px); }
.m .qa-result, .m .qa-beam { opacity: 0; }
.m .ma-note { opacity: 0; transform: translateX(-24px); }
.m .ma-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.m .ma-area, .m .ma-dot { opacity: 0; }

/* MoyMate (both homepages, 2026-10-14; src/seo/mate-art.ts): the moymenyu app's People screen and the
   chat a hello opens. The section is a .feature like the others; these are its drawing's own type and parts. */
.mt-app { font-size: 19px; font-weight: 750; fill: #1A1418; letter-spacing: -0.02em; }
.mt-seg { font-size: 12px; font-weight: 650; fill: #1A1418; text-anchor: middle; }
.mt-seg.off { font-weight: 600; fill: #6B5A61; }
.mt-badge-t { font-size: 9.5px; font-weight: 700; fill: #ffffff; text-anchor: middle; }
.mt-chip { font-size: 11px; font-weight: 600; fill: #2459C7; }
.mt-ini { font-size: 15px; font-weight: 700; text-anchor: middle; }
.mt-name { font-size: 14px; font-weight: 700; fill: #1A1418; letter-spacing: -0.01em; }
.mt-sub { font-size: 11px; fill: #6B5A61; }
.mt-int { font-size: 10.5px; font-weight: 600; fill: #2459C7; }
.mt-int.off { fill: #6B5A61; }
.mt-sent-l { font-size: 13px; font-weight: 650; fill: #2459C7; }
.mt-b { font-size: 12px; font-weight: 500; fill: #ffffff; }
.mt-b.in { fill: #1A1418; }
.mt-cap { font-size: 10.5px; fill: #6B5A61; }
.mt-acc-l { font-size: 11.5px; font-weight: 650; fill: #15803d; }
.mt-ph { font-size: 12px; fill: #A3949A; }
.mt-chat, .mt-btn, .mt-say, .mt-sent, .mt-fly, .mt-acc, .mt-composer, .mt-badge { transform-box: fill-box; transform-origin: center; }
/* Bubbles grow from their tails. */
.mt-hello { transform-box: fill-box; transform-origin: right bottom; }
.mt-reply { transform-box: fill-box; transform-origin: left bottom; }
/* Without script: the last moment (the hello sent and accepted, the first reply in), no flying hello, no
   waiting line. Leyla's button says "Hello sent", as it does when the reply arrives in the story, not "Say
   hello" beside a chat that has already begun. */
.mt-say, .mt-fly, .mt-wait { opacity: 0; }
/* With script: the start of the story; home.js plays it. */
.m .mt-chat { opacity: 0; transform: translateX(-24px); }
.m .mt-hello, .m .mt-acc, .m .mt-reply, .m .mt-composer, .m .mt-badge, .m .mt-sent { opacity: 0; }
.m .mt-say { opacity: 1; }
/* The small print under its checks: free, 18 and older, Android. */
.mate-note { margin-top: 18px; font-size: 14px; color: var(--muted); }

/* Pricing */
.pricing { padding: clamp(56px, 7vw, 104px) 0; background: var(--surface); }
.sec-title { text-align: center; font-size: clamp(1.9rem, 1.2rem + 1.9vw, 2.7rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: 650; color: var(--ink); }
.sec-sub { margin-top: 12px; text-align: center; font-size: 17px; color: var(--muted); }
.plans { margin: 44px auto 0; max-width: 1000px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: 22px; background: #fff; border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.plan:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(26, 20, 24, .35); }
.plan.is-pop { border: 2px solid var(--blue); box-shadow: 0 24px 48px -30px rgba(36, 89, 199, .55); }
.pop { position: absolute; top: -13px; left: 28px; height: 26px; padding: 0 12px; border-radius: 999px; background: var(--heart); color: #fff; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; }
.plan h3 { font-size: 20px; font-weight: 650; color: var(--ink); letter-spacing: -0.01em; }
.plan-tag { margin-top: 2px; font-size: 14px; color: var(--muted); }
.plan-price { margin-top: 18px; display: flex; align-items: baseline; gap: 4px; color: var(--ink); }
.plan-price b { font-size: 44px; font-weight: 750; letter-spacing: -0.03em; line-height: 1; }
.plan-price span { font-size: 16px; color: var(--muted); }
.plan .checks { margin: 22px 0 26px; gap: 10px; flex: 1; align-content: start; }
.plan .checks li { font-size: 15px; }
.btn-block { width: 100%; }
.plans-note { margin-top: 26px; text-align: center; font-size: 14px; color: var(--muted); }
.plans-note a { color: var(--blue); font-weight: 600; }

/* Questions band */
.band-wrap { padding: clamp(56px, 7vw, 96px) 0; }
.band { display: flex; align-items: center; gap: 28px; padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px); border-radius: 26px; background: var(--ink); color: #fff; }
.band h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); font-weight: 650; letter-spacing: -0.02em; margin-right: auto; }
.band-mail { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; color: #EADFD6; transition: color .2s var(--ease); }
.band-mail:hover { color: #fff; }
.band-mail svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.btn-light { background: #fff; color: var(--ink); box-shadow: none; }
.btn-light:hover { background: #EEF3FC; box-shadow: none; }
/* moymenyu.com's band (2026-10-14) also carries the business phone: the phone and the address are one block
   (src/seo/intl.ts .band-contacts), each kept on one line with its icon at full size, and below 1180 px the
   heading takes a row of its own, where the Russian words beside both contacts and the button were squeezed
   onto three lines. A two-line heading keeps its lines together, and balances them: the approved headings
   back since 2026-10-14 ("Sualınız var? Zəng edin, kömək edək.") left one word alone on the second line. */
.band-contacts { display: grid; gap: 10px; }
.band-contacts .band-mail { white-space: nowrap; }
.band-contacts .band-mail svg { flex: none; }
body.home-myu .band h2 { line-height: 1.2; text-wrap: balance; }
@media (max-width: 1180px) {
  body.home-myu .band { flex-wrap: wrap; }
  body.home-myu .band h2 { width: 100%; }
}

/* Footer */
.foot { padding: 8px 0 32px; border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 32px; padding-top: 40px; padding-bottom: 32px; }
.foot-brand p { margin-top: 14px; font-size: 14px; color: var(--muted); max-width: 28ch; }
.foot-title { font-size: 13px; font-weight: 650; color: var(--ink); margin-bottom: 10px; }
.foot-grid nav, .foot-grid > div:last-child { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.foot a { color: var(--text); transition: color .2s var(--ease); }
.foot a:hover { color: var(--blue); }
.foot-langs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.foot-countries { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding-top: 18px; padding-bottom: 18px; border-top: 1px solid var(--line); font-size: 14px; }
.foot-countries .foot-title { margin: 0; }
.foot-bottom { font-size: 13px; color: var(--muted); padding-top: 4px; }

/* Motion: entrances (scoped to html.m) */
.m [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0ms); }
.m [data-reveal].in { opacity: 1; transform: none; }
.m [data-words] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.m [data-words] .wi { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); transition-delay: var(--d, 0ms); }
.m [data-words].in .wi { transform: none; }
.m .b-icon svg > * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease); transition-delay: calc(var(--d, 0ms) + 250ms); }
.m .benefit.in .b-icon svg > * { stroke-dashoffset: 0; }

/* The loading screen (2026-10-14): the brand kit's QR heart, the app's own (src/components/BrandLoader.tsx;
   intl.ts draws it here), over the page from its first paint until home.js has seen the page load, and at
   least long enough for the mark to draw in; then it fades and the hero plays. Only with motion on (html.m),
   and it goes on its own after 4.5 s should the script stop. The kit's loop starts .4 s in. */
.mm-boot { display: none; }
.m .mm-boot { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: var(--surface); transition: opacity .42s var(--ease), visibility 0s linear .42s; animation: mm-boot-gone .42s var(--ease) 4.5s forwards; }
.m .mm-boot.out { opacity: 0; visibility: hidden; pointer-events: none; }
.mm-boot .mm-loader-art { width: clamp(72px, 18vw, 96px); height: auto; overflow: visible; transition: transform .42s var(--ease); }
.mm-boot.out .mm-loader-art { transform: scale(.94); }
.mm-boot .mm-f { fill: none; stroke: var(--ink); stroke-width: 12; stroke-dasharray: 208; stroke-dashoffset: 208; animation: mm-draw 2.8s cubic-bezier(.6, 0, .2, 1) infinite; }
.mm-boot .mm-f0 { animation-delay: -.4s; } .mm-boot .mm-f1 { animation-delay: -.28s; } .mm-boot .mm-f2 { animation-delay: -.16s; }
.mm-boot .mm-d, .mm-boot .mm-m, .mm-boot .mm-h { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.mm-boot .mm-d, .mm-boot .mm-m { fill: var(--ink); animation: mm-pop 2.8s cubic-bezier(.3, 1.6, .5, 1) infinite; }
.mm-boot .mm-d0 { animation-delay: -.05s; } .mm-boot .mm-d1 { animation-delay: .05s; } .mm-boot .mm-d2 { animation-delay: .15s; }
.mm-boot .mm-m0 { animation-delay: .15s; } .mm-boot .mm-m1 { animation-delay: .21s; } .mm-boot .mm-m2 { animation-delay: .27s; } .mm-boot .mm-m3 { animation-delay: .33s; }
.mm-boot .mm-m4 { animation-delay: .39s; } .mm-boot .mm-m5 { animation-delay: .45s; } .mm-boot .mm-m6 { animation-delay: .51s; }
.mm-boot .mm-h { fill: var(--heart); animation: mm-beat 2.8s ease-in-out infinite; animation-delay: .65s; }
@keyframes mm-draw { 0% { stroke-dashoffset: 208; } 30% { stroke-dashoffset: 0; } 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes mm-pop { 0% { transform: scale(0); } 14% { transform: scale(1); } 80% { transform: scale(1); opacity: 1; } 95%, 100% { transform: scale(1); opacity: 0; } }
@keyframes mm-beat { 0% { transform: scale(0); } 12% { transform: scale(1.15); } 18% { transform: scale(.95); } 24% { transform: scale(1.12); } 32%, 62% { transform: scale(1); } 72%, 100% { transform: scale(1); opacity: 0; } }
@keyframes mm-boot-gone { to { opacity: 0; visibility: hidden; } }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-text { max-width: 640px; }
  .benefit-row { grid-template-columns: minmax(0, 1fr); }
  .feature-grid { grid-template-columns: minmax(0, 1fr); }
  .feature.flip .feature-text { order: 1; }
  .feature.flip .feature-art { order: 2; }
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
  .band { flex-wrap: wrap; }
  .band h2 { width: 100%; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .nav, .nav-link { display: none; }
  .bar-row { gap: 16px; }
  .hero h1 { font-size: clamp(2.2rem, 9.6vw, 2.8rem); }
  .hero-sub { font-size: 17px; }
  .hero-actions .btn:not(.btn-line) { width: 100%; }
  .hero-demos { width: 100%; }
  .hero-demos .btn-line { flex: 1; }
  .hero-art .art { margin: 0 -8px; width: calc(100% + 16px); }
  .feature-art { margin: 0 calc(var(--pad) * -1); border-radius: 0; padding: 14px 6px; }
  .feature-art .art { margin: 0; width: 100%; }
  .feature { padding: 48px 0; }
}
/* Both headers carry five links (MoyMate's is the fifth; on moymenu.com since 2026-10-14) and keep them for
   the footer below 960 px, where five no longer fit beside the buttons. moymenyu.com's also carries the
   language switch and longer words: it tightens below 1100 px, and on phones the switch's links are 44 px
   tall beside a smaller logo. */
@media (max-width: 1100px) {
  body.home-myu .bar-row { gap: 24px; }
  body.home-myu .nav { gap: 20px; }
  body.home-myu .bar-end { gap: 14px; }
}
@media (max-width: 960px) {
  .nav { display: none; }
}
@media (max-width: 720px) {
  body.home-myu .bar-row { gap: 12px; }
  body.home-myu .bar-end { gap: 6px; }
  body.home-myu .logo img { height: 28px; }
  body.home-myu .bar-end .btn-sm { padding: 0 14px; }
  .langs a { min-width: 34px; height: 44px; padding: 0 2px; }
  .langs a::before { inset: 8px 1px; }
}
/* Phones (2026-10-14 review): the footer's two link columns share the row equally and the contacts take a
   row of their own. The e-mail address had widened the first column and pushed «Конфиденциальность» to
   2 px from a 360 px phone's edge. */
@media (max-width: 720px) {
  body.home-myu .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.home-myu .foot-grid > div:last-child { grid-column: 1 / -1; }
}
/* "Подключиться" needs 432 px beside the full-size logo and the switch. */
@media (max-width: 440px) {
  body.home-myu .bar-end .btn-sm .cta-full { display: none; }
  body.home-myu .bar-end .btn-sm .cta-short { display: inline; }
}
@media (max-width: 420px) {
  body.home-myu .bar-row { gap: 8px; }
  body.home-myu .bar-end .btn-sm { padding: 0 12px; font-size: 14px; }
  .langs a { min-width: 32px; }
  body.home-myu .foot-grid { column-gap: 20px; }
}
/* The smallest phones: the header stays one row, the logo beside the switch, and leaves sign-up to the
   hero's full-width button right below it (2026-10-14 review: the switch on a row of its own made the
   header 114 px tall); the footer is one column. */
@media (max-width: 359px) {
  body.home-myu .bar-end .btn-sm { display: none; }
  body.home-myu .foot-grid { grid-template-columns: minmax(0, 1fr); }
  body.home-myu .band .btn { height: auto; min-height: 52px; padding: 12px 20px; white-space: normal; text-align: center; }
  /* The address on one line still fits the band's 232 px on a 320 px phone. */
  body.home-myu .band-contacts .band-mail { font-size: 15px; }
  /* "Управляйте бизнесом отовсюду" took three lines at 320 px; at 28 px every section heading takes two. */
  body.home-myu .feature h2 { font-size: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .m .mm-boot { display: none; }
  .m [data-reveal], .m [data-words] .wi { opacity: 1; transform: none; }
  .m .b-icon svg > * { stroke-dashoffset: 0; }
  /* Still pictures at the end of each story. */
  .m .toast, .m .t4-new, .m .add-count, .m .pa-row, .m .qa-result, .m .ma-note, .m .ma-area, .m .ma-dot { opacity: 1; transform: none; }
  .m .cart, .m .pa-paper { transform: none; }
  .m .ma-line { stroke-dashoffset: 0; }
  .m .mt-chat, .m .mt-hello, .m .mt-acc, .m .mt-reply, .m .mt-composer, .m .mt-badge, .m .mt-sent { opacity: 1; transform: none; }
  .m .mt-say { opacity: 0; }
}