/* RusPaw Website, Home V1. Values from Figma "03 Visual Design" (24:6 desktop, 24:7 mobile). */
:root {
  /* RusPaw canonical palette */
  --bg: #E8EEF5;
  --soft: #E8EEF5;
  --blue: #3F72AF;
  --navy: #112D4E;
  --ink: #1B2433;
  --muted: #64708A;
  /* Preview: white page, same blue, light blue chips, red accent, gold highlight about 15%. */
  --red: #E14434;
  --gold: #F2B84B;
  --line: rgba(17, 45, 78, .2);
  --line-strong: rgba(17, 45, 78, .45);
  --ok: #13734F;
  --ok-bg: #E9F7F0;
  --white: #FFFFFF;
  /* Soft separation instead of outlines */
  --hair: rgba(17, 45, 78, .09);
  --lift: 0 1px 2px rgba(17, 45, 78, .06), 0 14px 32px -18px rgba(17, 45, 78, .3);
  /* Icon tile accents. Violet, sky and teal were requested by the owner (2026-09-30) and are not in the brand colour chapter yet: open question. */
  --cat-blue: #3D72E8;
  --cat-deep: #163A93;
  --cat-red: #F05A67;
  --cat-green: #22B07D;
  --cat-gold: #E7B95E;
  --cat-violet: #7A5CF0;
  --cat-sky: #1EA7E1;
  --cat-teal: #19B5A5;
  --pad: clamp(20px, 8.34vw, 120px);
  --sec-y: 112px;
  --font: "Nunito Sans", system-ui, sans-serif;
  --ru: "Noto Sans", "Nunito Sans", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 16px/26px var(--font); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
p, h1, h2, h3, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
[lang="ru"] { font-family: var(--ru); }
.ms { font-family: "Material Symbols Rounded"; font-weight: 700; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; display: inline-block; overflow: hidden; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--white); padding: 8px 12px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.only-mobile, .br-m { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Type */
.h2 { font-size: 44px; line-height: 52px; font-weight: 700; letter-spacing: -0.5px; }
.h3 { font-size: 20px; line-height: 28px; font-weight: 700; }
.lead { font-size: 18px; line-height: 29px; }
.lead--muted { color: var(--muted); }
.small { font-size: 14px; line-height: 22px; }
.caption { font-size: 14px; line-height: 22px; }
.eyebrow { color: var(--blue); font-size: 15px; font-weight: 700; }
.link { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.link--navy { color: var(--navy); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 14px; font: 700 16px/24px var(--font); text-decoration: none; cursor: pointer; transition: background-color .2s ease, translate .2s ease; }
.btn--primary { background: color-mix(in srgb, var(--red) 95%, var(--navy)); color: var(--white); }
.btn--primary:hover { background: var(--navy); translate: 0 -1px; }
.btn--header { padding: 10px 18px; }
.btn--lg { padding: 16px 28px; }

/* Logo: icon + wordmark artwork and localized live tagline; header uses the icon only. */
.logo { display: block; text-decoration: none; }
.logo img { width: 100%; }
.logo__tagline { display: block; margin-top: 18px; color: var(--blue); font: 500 clamp(14px, 1.5vw, 21px)/1.5 "Be Vietnam Pro", var(--font); text-align: center; text-wrap: balance; }
.logo--header { width: 44px; }
.logo--hero { position: relative; width: min(700px, 100%); }
.logo--footer .logo__tagline { font-size: 10px; line-height: 1.6; margin-top: 10px; }
html:lang(ja) .logo__tagline { font-family: var(--font); }
.logo--footer { width: 135px; }

/* Flat tricolour bubbles sit in section gutters, behind the content. */
:is(.mascots, .teach, .writing, .faq) { position: relative; isolation: isolate; }
:is(.mascots, .teach, .writing, .faq)::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 12px; right: calc(var(--pad) + 1.4em);
  font-size: clamp(20px, 4vw, 44px); width: 1em; height: 1em; border-radius: 50%;
  background: var(--red);
  box-shadow: 1.25em .2em 0 -.18em var(--blue), .65em .7em 0 -.2em var(--white), .65em .7em 0 -.16em var(--gold);
}

/* 00 Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--hair); }
.site-header__inner { height: 80px; padding: 0 var(--pad); display: flex; align-items: center; justify-content: space-between; }
.nav { display: flex; align-items: center; gap: 36px; }
.nav__links { display: flex; gap: 32px; }
.nav__links a { font-weight: 600; text-decoration: none; line-height: normal; }
.nav__links a:hover { color: var(--blue); }
.menu-btn { display: none; }

/* Language selector: menu button with links to the same page in each language */
.lang { position: relative; }
.lang__btn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 10px 0 12px; border: 1px solid var(--hair); border-radius: 12px; background: var(--white); color: var(--navy); font: 700 14px/1 var(--font); letter-spacing: .3px; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
.lang__btn:hover, .lang__btn[aria-expanded="true"] { background: var(--soft); border-color: transparent; }
.lang__chev { width: 12px; height: 12px; transition: rotate .2s ease; }
.lang__btn[aria-expanded="true"] .lang__chev { rotate: 180deg; }
.flag { flex: none; width: 21px; height: 14px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(17, 45, 78, .12), 0 1px 2px rgba(17, 45, 78, .2); }
.lang__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 200px; padding: 6px; border: 1px solid var(--hair); border-radius: 14px; background: var(--white); box-shadow: var(--lift); animation: lang-in .16s ease-out; }
.lang__menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--ink); font-size: 15px; line-height: 20px; text-decoration: none; }
.lang__menu a:hover, .lang__menu a:focus-visible { background: var(--soft); }
.lang__menu a:focus-visible { outline-offset: -2px; }
.lang__menu b { width: 22px; color: var(--navy); font-size: 13px; letter-spacing: .3px; }
.lang__menu a[aria-current] { color: var(--navy); font-weight: 700; }
.lang__check { width: 16px; height: 16px; margin-left: auto; color: var(--blue); }
.lang__menu a:not([aria-current]) .lang__check { visibility: hidden; }
@keyframes lang-in { from { opacity: 0; translate: 0 -4px; } }
html:lang(ja) { --font: "Nunito Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif; }
html:lang(ja) :is(h1, h2, h3, .btn) { word-break: auto-phrase; }
html:lang(de) .hero__text { min-width: 0; }

/* 01 Hero */
.hero { background: var(--white); display: flex; align-items: center; gap: 40px; padding: 72px var(--pad); min-height: 760px; }
.hero__text { flex: 1 1 44%; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.hero__title { font-size: 56px; line-height: 64px; font-weight: 700; letter-spacing: -1.2px; }
.hero__lead { max-width: 520px; }
.hero__ctas { display: flex; align-items: center; gap: 28px; }
.hero__stage { position: relative; flex: 1 1 56%; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 24px 0; }

/* 02 Meet Gia Huy and Gia Han */
.mascots { padding: var(--sec-y) var(--pad); }
.mascots__head { text-align: center; margin-bottom: 28px; }
.mascots__controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-bottom: 32px; }
.mascots__controls[hidden], .mascots__card[hidden] { display: none; }
.mascots__controls button { min-height: 44px; min-width: 44px; padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--white); color: var(--navy); font: 700 16px/22px var(--font); cursor: pointer; }
.mascots__controls button:hover { background: var(--soft); }
.mascots__pick[aria-pressed="true"] { background: var(--navy); color: var(--white); border-color: var(--navy); }
.mascots__pick[aria-pressed="true"]:hover { background: var(--navy); }
.mascots .jerry { padding: 0; }
.mascots__card { animation: mascot-in .2s ease-out; }
.mascots__card + .mascots__card { margin-top: 40px; }
.mascots__card[hidden] + .mascots__card { margin-top: 0; }
.mascots__controls:not([hidden]) ~ .mascots__card { margin-top: 0; }
.mascots__card--han .jerry__flag { transform: rotate(5deg); }
.mascots__card--han .jerry__img { top: 85px; left: 75px; width: 370px; height: 340px; }
.mascots .name-tag { white-space: normal; max-width: calc(100% - 32px); flex-wrap: wrap; }
@keyframes mascot-in { from { opacity: .4; translate: 12px 0; } }
@media (prefers-reduced-motion: reduce) { .mascots__card { animation: none; } }
.jerry { background: var(--white); display: flex; align-items: center; justify-content: center; gap: 80px; padding: var(--sec-y) var(--pad); }
.jerry__stage::before, .jerry__stage::after { content: ""; position: absolute; border-radius: 50%; }
.jerry__stage::before { width: 100px; height: 100px; background: var(--red); left: 0; top: 12px; }
.jerry__stage::after { width: 65px; height: 65px; background: var(--gold); right: 8px; bottom: 30px; }
.jerry__stage { position: relative; flex: 0 0 520px; height: 520px; }
.jerry__flag { position: absolute; left: 24px; top: 90px; width: 472px; height: 300px; border-radius: 12px 40px 16px 32px; box-shadow: 0 16px 40px -24px rgba(17, 45, 78, .3); background: linear-gradient(var(--white) 33.4%, var(--blue) 0 66.7%, var(--red) 0); transform: rotate(-5deg); }
.jerry__img { position: absolute; left: 105px; top: 130px; width: 320px; height: 292px; object-fit: contain; }
@keyframes flag-wave { 50% { transform: skewY(-2deg) scaleX(.98); } }
@keyframes jerry-float { 50% { translate: 0 -6px; } }
.bubble { position: absolute; right: 10px; top: 28px; background: var(--white); box-shadow: var(--lift); border-radius: 18px 18px 18px 4px; padding: 14px 20px; white-space: nowrap; }
.bubble__ru { color: var(--navy); font-size: 22px; line-height: normal; font-weight: 700; }
.bubble__en { color: var(--muted); font-size: 15px; line-height: normal; margin-top: 2px; }
.name-tag { position: absolute; left: 24px; top: 437px; display: flex; align-items: center; gap: 8px; background: var(--navy); border-radius: 999px; padding: 10px 18px; line-height: normal; white-space: nowrap; }
.name-tag strong { color: var(--white); font-size: 17px; font-weight: 800; }
.name-tag span { color: var(--white); font-size: 13px; font-weight: 600; }
.jerry__copy { flex: 0 1 600px; display: flex; flex-direction: column; gap: 20px; }
.traits { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.trait { display: flex; align-items: center; gap: 14px; padding: 12px 0; background: transparent; }
.trait__pose { position: relative; flex: 0 0 64px; height: 64px; border-radius: 32px; background: var(--blue); overflow: hidden; }
.trait:nth-child(2) .trait__pose, .trait:nth-child(3) .trait__pose { background: var(--red); }
.trait:nth-child(4) .trait__pose { background: var(--gold); }
.trait__pose img { position: absolute; left: 3px; top: 5px; width: 58px; height: 58px; object-fit: contain; }
.trait__text { display: flex; flex-direction: column; gap: 2px; }
.trait__text strong { font-size: 17px; line-height: normal; }
.trait__text span { color: var(--muted); font-size: 15px; line-height: 22px; }

/* 03 How RusPaw helps you learn (one phone, tabs switch the lesson screen) */
.section-head { display: flex; flex-direction: column; gap: 14px; position: relative; }
.section-head--center { align-items: center; text-align: center; max-width: 640px; }
.section-head--wide { max-width: 800px; gap: 16px; }
.section-head--wide .lead { max-width: 640px; }
.teach { padding: var(--sec-y) var(--pad); overflow-x: clip; overflow-anchor: none; }
.learn { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "tabs" "cap" "stage"; gap: 32px; max-width: 1200px; margin: 0 auto; align-items: start; }
.learn__head { grid-area: head; max-width: 800px; margin: 0 auto; text-align: center; }
.teach .h2::after { content: ""; display: block; width: 48px; height: 6px; margin: 14px auto 0; border-radius: 999px; background: var(--gold); }
.learn__tabs { display: none; }
.learn__tab { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; padding: 14px 8px; border: 0; border-radius: 20px; background: var(--bg); color: var(--navy); font: 800 17px/22px var(--font); text-align: center; cursor: pointer; transition: background-color .2s, box-shadow .2s; }
/* Illustrated icon sprite (assets/img/ruspaw-icons.svg) */
.ico { display: block; flex: none; width: 24px; height: 24px; }
/* App-icon tiles: white pictogram on a soft-gradient rounded square, one accent per category (picked from the icon href) */
.ico { --c: var(--cat-blue); --cd: color-mix(in srgb, var(--c) 72%, #0B1633); }
.ico:has(use[href$="-grammar"], use[href$="-start"]) { --c: var(--cat-violet); }
.ico:has(use[href$="-listen"]) { --c: var(--cat-sky); }
.ico:has(use[href$="-write"]) { --c: var(--cat-teal); }
.ico:has(use[href$="-path"]) { --c: var(--red); --c1: #FF8A7A; }
.learn__callout[data-session="learn-path"].learn__callout--2 .ico { --c: var(--blue); --c1: #8FB4E0; }
.learn__callout[data-session="learn-path"].learn__callout--3 .ico { --c: var(--cat-green); --c1: #8EE0C4; }
.ico:has(use[href$="-food"], use[href$="-live"]) { --c: var(--cat-red); --c1: #FF9A6B; }
.ico:has(use[href$="-etiquette"], use[href$="-retry"]) { --c: var(--cat-green); }
.ico:has(use[href$="-celebrate"]) { --c: var(--red); --c1: #9B7BFF; }
:is(.learn__tab, .tile--ill, .speak__points li, .pth__acts span) > .ico { padding: var(--ip, 8px); border-radius: 30%; background: linear-gradient(155deg, color-mix(in srgb, var(--c1, var(--c)) 62%, #fff), var(--c) 72%); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .35), 0 6px 14px -7px color-mix(in srgb, var(--c) 75%, transparent); }
.learn__tab > .ico { display: none; }
.learn__tab small { display: block; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 20px; }
.learn__tab:hover { background: var(--bg); }
.learn__tab[aria-selected="true"] { background: #EEF3FF; box-shadow: var(--lift); }
.learn__tab[aria-selected="true"] > .ico { scale: 1; }
/* Icon hop + idle loop on hover or selection (the loop lives in ruspaw-icons.svg and reads --ico-play) */
:is(.learn__tab:hover, .learn__tab[aria-selected="true"], .benefit:hover, .speak__points li:hover) .ico { --ico-play: running; animation: ico-hop .5s ease; }
@keyframes ico-hop { 40% { translate: 0 -3px; rotate: -6deg; } 70% { translate: 0 1px; rotate: 3deg; } }
.learn__cap { grid-area: cap; max-width: 640px; margin: 0 auto; text-align: center; }
.learn__cap > div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.learn__cap > div[hidden] { display: none; }
.learn__cap p { color: var(--muted); }
.learn__stage { grid-area: stage; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 352px minmax(0, 1fr); grid-template-rows: repeat(3, 1fr); align-items: center; gap: 17px; padding: 16px 0 32px; }
.learn__device > .phone { grid-column: 2; grid-row: 1 / 4; zoom: .9; }
.learn__stage { touch-action: pan-y pinch-zoom; }
.phone { touch-action: none; user-select: none; }
.scr { overscroll-behavior: contain; }
.learn__stage.is-dragging { cursor: grabbing; user-select: none; }
.learn__swipe-hint { display: none; }
.learn__finger { position: absolute; z-index: 5; top: 46%; left: 58%; font-size: 48px; color: var(--navy); pointer-events: none; opacity: 0; filter: drop-shadow(0 8px 10px rgba(17, 45, 78, .28)); }
.scr.is-peek { position: absolute; z-index: 2; right: 0; left: 0; bottom: 0; display: flex !important; background: var(--white); }
.phone.is-nudging { animation: none; }
.learn .scr { animation: none; }
.phone.is-nudging .scr:not(.is-peek):not([hidden]) { animation: learn-drag 2.4s ease-in-out infinite; }
.phone.is-nudging .scr.is-peek { animation: learn-peek 2.4s ease-in-out infinite; }
.phone.is-nudging .learn__finger { animation: learn-finger 2.4s ease-in-out infinite; }
@keyframes learn-drag {
  0%, 14% { transform: translateX(0); }
  46%, 64% { transform: translateX(-25%); }
  100% { transform: translateX(0); }
}
@keyframes learn-peek {
  0%, 14% { transform: translateX(100%); }
  46%, 64% { transform: translateX(75%); }
  100% { transform: translateX(100%); }
}
@keyframes learn-finger {
  0%, 10% { transform: translateX(16px); opacity: 0; }
  22% { opacity: 1; }
  46%, 60% { transform: translateX(-140px); opacity: 1; }
  76%, 100% { transform: translateX(-140px); opacity: 0; }
}
.learn__callout { display: flex; align-items: flex-start; gap: 16px; padding: 24px; border-radius: 22px; background: var(--white); box-shadow: var(--lift); min-width: 0; }
.learn__callout h3 { font-size: 21px; line-height: 1.35; color: var(--navy); margin-bottom: 6px; overflow-wrap: anywhere; }
.learn__callout p { font-size: 18px; line-height: 1.5; color: var(--muted); }
.learn__callout .ico { width: 50px; height: 50px; --ip: 10px; }
.learn__callout--1 { grid-column: 1; grid-row: 1; align-self: center; }
.learn__callout--2 { grid-column: 3; grid-row: 2; align-self: center; }
.learn__callout--3 { grid-column: 1; grid-row: 3; align-self: center; }
.learn__callout[hidden] { display: none; }
.learn__stage::before { content: ""; position: absolute; inset: 60px -10px 40px; border-radius: 50%; background: radial-gradient(closest-side, #FFF3D6, rgba(255, 243, 214, 0)); z-index: -1; }
.learn__stage::after { content: ""; position: absolute; left: -6%; right: -6%; bottom: 0; height: calc(724px * .9); background: url("img/ruspaw-learn-russian-moscow-skyline.svg") center bottom / contain no-repeat; opacity: .28; pointer-events: none; z-index: -1; }

/* Phone frame: one device, the screen inside changes per tab */
.phone { position: relative; width: 352px; height: 724px; padding: 8px; border-radius: 50px; background: var(--ink); box-shadow: inset 0 0 0 2px #64708A, 0 32px 65px -28px rgba(17, 45, 78, .4); }
.phone::before, .phone::after { content: ""; position: absolute; width: 4px; border-radius: 2px; background: var(--ink); }
.phone::before { left: -3px; top: 150px; height: 60px; }
.phone::after { right: -3px; top: 180px; height: 90px; }
.phone__screen { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: 44px; background: var(--white); overflow: hidden; }
.phone__screen::before { content: ""; position: absolute; top: 11px; left: 50%; width: 96px; height: 28px; margin-left: -48px; border-radius: 14px; background: var(--ink); }
.phone__screen::after { content: ""; position: absolute; bottom: 8px; left: 50%; width: 120px; height: 5px; margin-left: -60px; border-radius: 3px; background: var(--ink); opacity: .85; }
.phone__status { display: flex; align-items: center; gap: 4px; margin: 0; padding: 15px 26px 12px 34px; color: var(--ink); font-size: 14px; font-weight: 800; line-height: 20px; }
.phone__status span:first-child { margin-right: auto; }
.phone__status .ms { font-size: 17px; }

/* Screens */
.scr { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 4px 18px 26px; animation: scr-in .35s ease both; }
.scr[hidden], .grm__sheet[hidden] { display: none; }
.scr:focus-visible { outline-offset: -4px; }
.scr__body { flex: 1; display: flex; flex-direction: column; gap: 12px; }
@keyframes scr-in { from { opacity: 0; translate: 0 8px; } }
.scr p, .scr dl, .scr ol { margin: 0; }
.scr__bar { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.scr__bar .ms { font-size: 22px; }
.scr__prog { flex: 1; height: 8px; border-radius: 4px; background: var(--soft); overflow: hidden; }
.scr__prog i { display: block; width: 45%; height: 100%; border-radius: 4px; background: var(--gold); }
.scr__kicker { color: var(--muted); font-size: 13px; font-weight: 800; line-height: 18px; letter-spacing: .06em; text-transform: uppercase; }
.scr__q { color: var(--navy); font-size: 20px; font-weight: 800; line-height: 26px; }
.scr__cta { display: block; margin-top: auto; padding: 13px; border-radius: 14px; background: var(--blue); box-shadow: var(--lift); color: var(--white); font-weight: 800; text-align: center; }
.wave { display: flex; align-items: center; gap: 3px; height: 26px; }
.wave i { width: 3px; height: 40%; border-radius: 2px; background: currentColor; }
.wave i:nth-child(3n) { height: 90%; }
.wave i:nth-child(3n+1) { height: 60%; }
.wave i:nth-child(4n) { height: 30%; }
.wave i:nth-child(5n+2) { height: 100%; }

/* Speak */
.spk__cue { display: flex; align-items: flex-end; gap: 10px; }
.spk__cue img { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--soft); }
.spk__bubble { display: flex; flex-direction: column; padding: 10px 14px; border: 1.5px solid var(--gold); border-radius: 18px 18px 18px 4px; font-size: 14px; line-height: 20px; background: #FFFDF6; }
.spk__bubble b { color: var(--navy); font-size: 17px; line-height: 24px; }
.spk__bubble span { color: var(--muted); }
.spk__hint { display: flex; align-items: center; gap: 6px; align-self: flex-start; padding: 6px 12px 6px 8px; border-radius: 999px; background: #FFF6E0; color: var(--navy); font-size: 13px; line-height: 18px; }
.spk__hint .ms { font-size: 18px; color: var(--blue); }
.spk__you { align-self: flex-end; display: flex; flex-direction: column; gap: 6px; width: 86%; padding: 10px 12px 12px; border-radius: 18px 18px 4px 18px; background: var(--navy); color: var(--white); }
.spk__rec { display: flex; align-items: center; gap: 8px; color: var(--soft); font-size: 12px; font-weight: 700; }
.spk__rec .ms { flex: 0 0 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--white); color: var(--navy); font-size: 20px; }
.spk__rec .wave { flex: 1; height: 20px; gap: 2px; }
.spk__said { font-size: 17px; line-height: 24px; }
.spk__err { color: #FF9AA3; text-decoration: underline wavy; text-underline-offset: 4px; }
.spk__fix { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 14px; background: #FDF0F1; font-size: 14px; line-height: 20px; }
.spk__fix b { color: var(--red); }
.spk__word { display: flex; align-items: center; gap: 8px; font-size: 18px; line-height: 26px; }
.spk__word s { color: var(--muted); }
.spk__word .ms { font-size: 18px; color: var(--muted); }
.spk__word em { color: var(--red); font-style: normal; font-weight: 800; }
.spk__ctl { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; margin-top: auto; color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; }
.spk__ctl > span { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.spk__btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1.5px solid var(--line); border-radius: 50%; color: var(--navy); font-size: 22px; }
.spk__mic { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 8px #FFF0F1; color: var(--white); font-size: 32px; }
.spk__ctl > span:nth-child(2) { color: var(--red); gap: 14px; }

/* Grammar */
.grm__sent { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; color: var(--navy); font-size: 28px; line-height: 44px; }
.grm__tok { padding: 0 8px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-decoration: underline dotted var(--line-strong); text-underline-offset: 7px; cursor: pointer; transition: background-color .2s, color .2s; }
.grm__tok:hover { background: var(--bg); }
.grm__tok--ans { color: var(--ok); text-decoration-color: var(--ok); }
.grm__tok[aria-pressed="true"] { background: var(--navy); color: var(--white); text-decoration: none; }
.grm__tok--ans[aria-pressed="true"] { background: var(--ok); }
.grm__tok b, .grm__opts b { color: var(--red); }
.grm__tok[aria-pressed="true"] b { color: #E7B95E; }
.grm__opts .is-on b { color: inherit; text-decoration: underline 2px; text-underline-offset: 3px; }
.grm__opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.grm__opts > span { display: flex; align-items: center; justify-content: center; padding: 8px 2px; border: 1.5px solid var(--line); border-radius: 12px; color: var(--muted); font-size: 15px; font-weight: 700; }
.grm__opts .is-on { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.grm__opts .ms { margin-left: 2px; font-size: 16px; }
.grm__ok { display: flex; align-items: center; gap: 6px; color: var(--ok); font-size: 14px; font-weight: 800; }
.grm__ok .ms { font-size: 18px; }
.grm__sheet { position: relative; margin: auto -18px -26px; padding: 22px 18px 30px; border-radius: 24px 24px 0 0; background: var(--white); box-shadow: 0 -1px 0 var(--line), 0 -12px 32px rgba(17, 45, 78, .12); animation: scr-in .3s ease both; }
.grm__sheet::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--soft); }
.grm__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px !important; }
.grm__head b { color: var(--navy); font-size: 24px; line-height: 32px; }
.grm__head span { padding: 3px 10px; border-radius: 999px; background: var(--gold); color: var(--navy); font-size: 12px; font-weight: 800; line-height: 18px; }
.grm__dl > div { display: grid; grid-template-columns: 112px 1fr; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; }
.grm__dl dt { color: var(--muted); font-weight: 700; }
.grm__dl dd { margin: 0; color: var(--ink); font-weight: 700; }
.grm__dl dd[lang="ru"] { font-size: 16px; }
.grm__dl b { color: var(--red); }

/* Listen */
.lsn__audio { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 16px 14px; border: 0; border-radius: 20px; background: #E7F2FF; }
.lsn__play { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 8px var(--soft); color: var(--white); font-size: 34px; }
.lsn__audio .wave { margin-top: 6px; color: var(--blue); }
.lsn__ctl { display: flex; gap: 8px; }
.lsn__ctl > span { display: flex; align-items: center; gap: 4px; padding: 5px 12px 5px 8px; border-radius: 999px; background: var(--bg); color: var(--navy); font-size: 13px; font-weight: 800; }
.lsn__ctl .ms { font-size: 18px; }
.lsn__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lsn__opts > span { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 11px 4px; border: 1.5px solid var(--line); border-radius: 14px; box-shadow: 0 3px 10px rgba(17, 45, 78, .06); color: var(--navy); font-size: 15px; font-weight: 700; }
.lsn__opts .is-on { border-color: var(--ok); background: var(--ok-bg); box-shadow: none; color: var(--ok); }
.lsn__opts .ms { font-size: 18px; }
.lsn__res { display: flex; flex-direction: column; gap: 2px; margin: auto -18px -26px; padding: 16px 18px 30px; border-radius: 24px 24px 0 0; background: var(--ok-bg); }
.lsn__ok { display: flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 800; }
.lsn__ok .ms { font-size: 20px; }
.lsn__word { color: var(--navy); font-size: 22px; line-height: 30px; font-weight: 600; }
.lsn__word s { color: var(--muted); opacity: .6; }
.lsn__note { color: var(--ink); font-size: 14px; line-height: 20px; margin-bottom: 12px !important; }
.lsn__res .scr__cta { margin-top: 0; background: var(--ok); box-shadow: var(--lift); }

/* Write */
.wrt__pair { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 4px 12px; padding: 12px 16px; border-radius: 18px; background: var(--bg); }
.wrt__print { color: var(--navy); font-size: 44px; line-height: 52px; font-weight: 600; }
.wrt__pair > .ms { color: var(--muted); font-size: 20px; }
.wrt__pair svg { width: 100%; max-width: 110px; height: auto; }
.wrt__note { grid-column: 1 / -1; color: var(--muted); font-size: 13px; line-height: 18px; }
.wrt__pad { padding: 8px; border: 1.5px solid #F0D48A; border-radius: 20px; background: #FFF6E0; }
.wrt__pad svg { display: block; width: 100%; height: auto; max-height: 150px; }
.wrt__guide { fill: none; stroke: var(--line); stroke-width: .8; stroke-dasharray: 2 2; }
.wrt__ink { fill: none; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wrt__ghost { fill: none; stroke: var(--soft); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.wrt__done { fill: none; stroke: var(--blue); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.wrt__now { fill: none; stroke: var(--red); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: .45; animation: wrt-draw 2.4s ease-in-out infinite alternate; }
.wrt__start { fill: var(--red); stroke: var(--white); stroke-width: 1.2; }
@keyframes wrt-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.wrt__steps { display: flex; justify-content: center; gap: 28px; padding: 0; list-style: none; }
.wrt__steps li { width: 30px; height: 30px; display: grid; place-items: center; border: 1.5px solid var(--line); border-radius: 50%; color: var(--muted); font-size: 14px; font-weight: 800; }
.wrt__steps .is-done { border-color: var(--blue); background: var(--blue); color: var(--white); }
.wrt__steps .ms { font-size: 18px; }
.wrt__steps .is-on { border-color: var(--red); color: var(--red); box-shadow: 0 0 0 4px #FFF0F1; }
.wrt__step { color: var(--muted); font-size: 13px; line-height: 18px; text-align: center; }

/* Path */
.pth__unit { display: flex; flex-direction: column; padding: 14px 16px; border-radius: 18px; background: var(--navy); color: var(--white); }
.pth__unit span { color: var(--soft); font-size: 12px; font-weight: 800; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; }
.pth__unit b { font-size: 20px; line-height: 28px; }
.pth { position: relative; flex: none; height: 440px; }
.pth__track { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #F2B84B; stroke-width: 14; stroke-linecap: round; }
.pth__track .pth__done { stroke: var(--blue); }
.pth__track .pth__dash { display: none; }
.pth ol { list-style: none; padding: 0; }
.pth__n { position: absolute; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 15px; font-weight: 700; line-height: 20px; }
.pth small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 16px; }
/* Nodes: soft-depth discs in the same tile language as the icons */
.pth__dot { --c: #AFC0E4; position: relative; flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(160deg, color-mix(in srgb, var(--c1, var(--c)) 60%, #fff), var(--c) 70%); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .4), 0 6px 12px -6px color-mix(in srgb, var(--c) 80%, transparent); }
.pth__dot .ico { --c: inherit; --cd: color-mix(in srgb, var(--c) 60%, #0B1633); width: 22px; height: 22px; }
.pth__n--1 { top: 4px; left: 36px; }
.pth__n--2 { top: 64px; right: 62px; flex-direction: row-reverse; text-align: right; }
.pth__n--3 { top: 122px; left: 0; right: 0; flex-direction: column; gap: 12px; }
.pth__n--4 { top: 336px; left: 52px; }
.pth__n--5 { top: 390px; right: 48px; flex-direction: row-reverse; text-align: right; }
.pth :is(.is-done, .is-on, .is-mile) { color: var(--navy); }
.pth .is-done .pth__dot { --c: var(--red); --c1: #FF8A7A; }
.pth__n--2.is-done .pth__dot { --c: var(--blue); --c1: #8FB4E0; }
.pth .is-done .pth__dot .ico { animation: paw-arrive .65s ease-out; }
@keyframes paw-arrive { 0% { scale: .7; rotate: -12deg; } 65% { scale: 1.12; } 100% { scale: 1; rotate: 0deg; } }
.pth .is-done .pth__dot .ico { width: 18px; height: 18px; }
.pth .is-on .pth__dot { --c: var(--cat-red); --c1: #FF9A6B; width: 56px; height: 56px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 0 0 7px #FFE9EB, 0 10px 18px -6px rgba(240, 90, 103, .6); }
.pth .is-on .pth__dot .ico { width: 32px; height: 32px; }
.pth .is-on .pth__dot::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(240, 90, 103, .3); }
@keyframes pth-ping { from { scale: .85; opacity: 1; } to { scale: 1.3; opacity: 0; } }
.pth .is-mile .pth__dot { --c: #D9A441; --c1: #FFD98A; width: 48px; height: 48px; }
.pth .is-mile .pth__dot .ico { width: 28px; height: 28px; }
.pth__card { position: relative; align-self: stretch; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 18px; background: var(--white); box-shadow: 0 0 0 1px var(--hair), 0 16px 30px -16px rgba(17, 45, 78, .4); font-size: 17px; font-weight: 800; }
.pth__card::before { content: ""; position: absolute; top: -6px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 3px 0 0 0; background: var(--white); box-shadow: -1px -1px 0 var(--hair); rotate: 45deg; }
.pth__acts { display: flex; gap: 8px; }
.pth__acts > span { position: relative; display: grid; }
.pth__acts .ico { width: 40px; height: 40px; --ip: 8px; }
.pth__acts .is-done::after { content: "\2713"; position: absolute; right: -4px; bottom: -4px; width: 13px; height: 13px; border-radius: 50%; background: #22B07D; color: var(--white); font: 900 9px/13px var(--font); text-align: center; box-shadow: 0 0 0 2px var(--white); }
.pth__acts .is-next { border-radius: 13px; box-shadow: 0 0 0 2.5px var(--white), 0 0 0 4.5px #22B07D; }
.pth__meta { color: var(--muted); font-size: 12px; font-weight: 700; line-height: 16px; }

/* Grammar Explanation in Detail */
.gdemo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; gap: 56px; max-width: 1440px; margin: 0 auto; padding: 0 var(--pad) var(--sec-y); }
.gdemo__head { position: sticky; top: 104px; }
.gdemo__note { color: var(--navy); font-weight: 700; }
.gdemo__card { display: flex; flex-direction: column; gap: 20px; padding: 32px; border-radius: 24px; background: #EEF3FF; }
.gdemo__q, .gdemo__solved { display: flex; flex-direction: column; gap: 20px; }
.gdemo__solved { gap: 16px; }
.gdemo__q[hidden], .gdemo__solved[hidden], .gpane[hidden], .gdemo__detail[hidden], .gdemo__explain[hidden], .gdemo__reset[hidden] { display: none; }
.gdemo__label { color: var(--blue); font-size: 14px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.gdemo__sentence { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; color: var(--navy); font-size: 34px; line-height: 48px; font-weight: 700; }
.gdemo__blank { display: inline-block; width: 150px; height: 36px; margin-right: -10px; border-bottom: 3px solid var(--navy); }
.gdemo__options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gdemo__opt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 10px 14px; border: 2px solid var(--blue); border-radius: 16px; background: var(--white); color: var(--navy); font: 700 20px/28px var(--ru); cursor: pointer; box-shadow: 0 4px 0 color-mix(in srgb, var(--blue) 32%, #fff); transition: translate .15s, box-shadow .15s, background-color .15s; }
.gdemo__opt::before { content: "touch_app"; font-family: "Material Symbols Rounded"; font-weight: 700; font-size: 22px; line-height: 1; font-feature-settings: "liga"; color: var(--blue); }
.gdemo__options:not(:has([aria-pressed="true"])) .gdemo__opt:first-child { animation: gdemo-tap 1.5s ease-in-out infinite; }
@keyframes gdemo-tap { 50% { translate: 0 -4px; } }
.gdemo__opt:hover { translate: 0 -2px; box-shadow: 0 6px 0 color-mix(in srgb, var(--blue) 32%, #fff); background: var(--white); }
.gdemo__opt:active { translate: 0 3px; box-shadow: 0 1px 0 color-mix(in srgb, var(--blue) 32%, #fff); }
.gdemo__opt:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.gdemo__opt[aria-pressed="true"] { border: 2px solid var(--red); background: var(--white); box-shadow: none; animation: none; }
.gdemo__opt[aria-pressed="true"]::before { content: "close"; color: var(--red); }
.gdemo__opt[aria-pressed="true"][data-correct] { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.gdemo__opt[aria-pressed="true"][data-correct]::before { content: "check"; color: var(--ok); }
.gdemo__status { min-height: 26px; color: var(--ink); font-weight: 700; }
.gdemo__status.is-ok { color: var(--ok); font-size: 18px; }
.gdemo__status:empty { display: none; }
/* Sentence tokens: every word is a real button */
.gdemo__tokens { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 10px; }
.gdemo__tok { min-height: 56px; padding: 4px 16px; border: 2px dashed var(--blue); border-radius: 16px; background: var(--white); color: var(--navy); font: 700 30px/44px var(--ru); cursor: pointer; box-shadow: 0 3px 0 color-mix(in srgb, var(--blue) 28%, #fff); transition: background-color .2s, color .2s, border-color .2s, translate .15s; }
.gdemo__tok:hover { border-style: solid; background: #F4F7FB; }
.gdemo__tok:active { translate: 0 3px; box-shadow: 0 1px 0 color-mix(in srgb, var(--blue) 28%, #fff); }
.gdemo__tok:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.gdemo__tok[aria-pressed="true"] { border-style: solid; border-color: var(--blue); background: var(--blue); color: var(--white); box-shadow: 0 5px 14px rgba(17, 45, 78, .14); }
.gdemo__dot { margin-left: -6px; color: var(--navy); font: 700 30px/44px var(--ru); }
.gdemo__panel { padding: 20px; border-radius: 18px; background: var(--bg); }
.gpane { display: flex; flex-direction: column; gap: 8px; }
.gpane p { font-size: 16px; line-height: 24px; }
.gpane__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gpane__word { padding: 2px 12px; border-radius: 10px; background: var(--blue); color: var(--white); font: 700 22px/32px var(--ru); }
.gpane__tag { padding: 3px 10px; border-radius: 999px; background: #E6ECF8; color: var(--navy); font-size: 13px; line-height: 18px; font-weight: 700; }
.gpane__tag--case { background: var(--navy); color: var(--white); }
.gpane .gpane__base { color: var(--muted); font-size: 15px; }
.gpane__base span { color: var(--navy); font-weight: 700; }
.gpane__h { margin-top: 10px; color: var(--navy); font-size: 13px; line-height: 18px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.gpane__flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gpane .gpane__flow span:not(.ms) { padding: 4px 12px; border-radius: 999px; background: var(--navy); color: var(--white); font-size: 15px; line-height: 22px; font-weight: 700; }
.gpane__flow .ms, .gpane__form .ms { color: var(--navy); font-size: 22px; }
.gpane .gpane__form { display: flex; align-items: center; gap: 10px; color: var(--navy); font: 700 26px/34px var(--ru); }
.gpane__form b, .gpane__end { color: var(--red); }
.gdemo__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.gdemo__actions:not(:has(> :not([hidden]))) { display: none; }
.gdemo__explain { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; border: 0; border-radius: 999px; background: var(--navy); color: var(--white); font: 700 15px/22px var(--font); cursor: pointer; }
.gdemo__explain:hover, .gdemo__explain[aria-expanded="true"] { background: var(--blue); }
.gdemo__explain .ms { font-size: 20px; }
.gdemo__detail { padding: 20px; border-radius: 16px; background: var(--navy); color: var(--white); }
.gdemo__detail-title { margin-bottom: 12px; font-size: 24px; line-height: 32px; font-weight: 800; }
.gdemo__detail-sub { margin: -6px 0 12px; color: rgba(255, 255, 255, .8); font-size: 14px; line-height: 20px; }
.gdemo__table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 20px; }
.gdemo__table th, .gdemo__table td { padding: 8px 6px; border-top: 1px solid rgba(255, 255, 255, .2); text-align: left; vertical-align: top; }
.gdemo__table thead th { border-top: 0; color: rgba(255, 255, 255, .7); font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.gdemo__table tbody th { font-weight: 700; }
.gdemo__table td:last-child { font-weight: 700; }
.gdemo__table small { display: block; color: rgba(255, 255, 255, .7); font-size: 12px; font-weight: 400; }
.gdemo__table .is-here > * { background: rgba(255, 255, 255, .14); }
.gdemo__table .is-here th { box-shadow: inset 4px 0 0 #E7B95E; }
.gdemo__table .is-here small { color: #E7B95E; font-weight: 700; }
.gdemo__table .is-picked th { box-shadow: inset 4px 0 0 var(--red); }
.gdemo__table .is-picked th::after { content: "your answer"; display: block; color: rgba(255, 255, 255, .8); font-size: 12px; font-weight: 400; }
.gdemo__use-title { margin: 20px 0 8px; font-size: 18px; line-height: 26px; font-weight: 800; }
.gdemo__use { display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 22px; }
.gdemo__use li { position: relative; padding-left: 18px; }
.gdemo__use li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: #E7B95E; }
.gdemo__reset { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border: 1.5px solid var(--soft); border-radius: 999px; background: var(--white); color: var(--navy); font: 700 15px/22px var(--font); cursor: pointer; }
.gdemo__reset:hover { background: var(--bg); }
.gdemo__reset .ms { font-size: 20px; }

/* 05 Culture */
.culture { background: var(--white); display: flex; flex-direction: column; align-items: center; gap: 40px; padding: var(--sec-y) var(--pad); }
.benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; width: 100%; max-width: 1200px; }
.benefit { display: flex; align-items: center; gap: 12px; }
.benefit__copy { display: flex; flex-direction: column; gap: 2px; }
.benefit__copy strong { line-height: 24px; }
.benefit__copy > span { color: var(--muted); font-size: 14px; line-height: 22px; }
.tile { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: #EEF3FF; color: var(--navy); }
.tile .ms { font-size: 26px; }
.tile--blue { background: var(--blue); color: var(--white); }
.tile--red { background: var(--red); color: var(--white); }
.tile--navy { background: var(--navy); color: var(--white); }
.tile--ill { width: auto; height: auto; background: none; }
.tile--ill .ico { width: 52px; height: 52px; --ip: 11px; }
.tile--sm { width: 44px; height: 44px; border-radius: 12px; }
.tile--sm .ms { font-size: 24px; }
.tile--round { width: 32px; height: 32px; border-radius: 16px; }
.tile--round .ms { font-size: 18px; }
.tile--ink { color: var(--ink); }
.tile--round40 { width: 40px; height: 40px; border-radius: 20px; color: var(--ink); }
.tile--round40 .ms { font-size: 22px; }
.culture__story { width: 1202px; max-width: 100%; }
.culture__feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding: 0 0 40px; }
.culture__scene { position: relative; align-self: start; aspect-ratio: 1080 / 830; overflow: hidden; border-radius: 20px; margin-top: 102px; }
.culture__scene img { position: absolute; width: 222.6%; max-width: none; left: -4.63%; top: -32.4%; }
.culture__exercises { min-width: 0; }
.culture__tags { display: flex; align-items: center; gap: 8px; color: var(--navy); font-weight: 700; }
.culture__tags > span { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 12px; border-radius: 14px; background: var(--bg); }
.culture__tags > span:first-child .ms { color: var(--red); }
.culture__tags .ms { font-size: 18px; }
.culture__exercises h3 { margin-top: 20px; font-size: 32px; line-height: 40px; }
.culture__intro { color: var(--muted); font-size: 15px; }
.culture__slides { margin-top: 24px; min-width: 0; touch-action: pan-y; }
.culture__slide { height: 382px; display: flex; flex-direction: column; gap: 14px; border-radius: 20px; padding: 20px; background: var(--bg); }
.culture__slide[hidden] { display: none; }
.culture__slide-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.culture__slide-head strong { display: inline-flex; align-items: center; gap: 8px; color: var(--navy); font-size: 16px; }
.culture__slide-head .ms { color: var(--blue); font-size: 20px; }
.culture__slide-head > span { color: var(--muted); white-space: nowrap; }
.culture__prompt { font-size: 18px; line-height: 26px; font-weight: 700; }
.culture__sentence { box-shadow: 0 0 0 1px var(--hair); border-radius: 12px; padding: 12px; background: var(--white); font-size: 18px; font-weight: 700; }
.culture__choices { display: flex; flex-direction: column; gap: 10px; }
.culture__choices span { display: block; border: 1.5px solid var(--hair); border-radius: 13px; padding: 8.5px 13.5px; background: var(--white); font-size: 17px; font-weight: 700; }
.culture__choices .is-selected { border: 2px solid var(--blue); padding: 8px 13px; background: var(--blue); color: var(--white); }
.culture__choices--words { flex-direction: row; flex-wrap: wrap; }
.culture__check { display: block; margin-top: auto; border-radius: 999px; padding: 10px; background: var(--blue); color: var(--white); text-align: center; font-weight: 700; }
.culture__controls { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.culture__dots, .culture__arrows { display: flex; align-items: center; gap: 8px; }
.culture__dots button { width: 9px; height: 9px; border: 0; border-radius: 999px; padding: 0; background: var(--line-strong); cursor: pointer; transition: width .3s ease, background-color .3s ease; }
.culture__dots button[aria-pressed="true"] { width: 20px; background: var(--blue); }
.culture__arrows button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 1px var(--hair), 0 6px 14px -8px rgba(17, 45, 78, .4); color: var(--navy); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.culture__arrows button:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.culture__arrows button + button { background: var(--blue); color: var(--white); border-color: var(--blue); }
.culture__counter { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Culture corner: swipeable card rail. Red Square and the other cards are their own pictures. */
.corner { margin: 0; padding-top: 24px; }
.corner__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.corner__title { color: var(--navy); font-size: 22px; line-height: 30px; font-weight: 800; }
.corner__intro { color: var(--muted); font-size: 15px; }
.corner__arrows button[aria-disabled="true"] { opacity: .35; cursor: default; pointer-events: none; }
.corner__rail { display: flex; gap: 16px; padding: 4px 0 8px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
.corner__rail::-webkit-scrollbar { display: none; }
.corner__rail.is-end { -webkit-mask-image: none; mask-image: none; }
.corner__rail:focus-visible { outline-offset: -3px; }
.corner__card { flex: 0 0 44%; scroll-snap-align: start; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: var(--white); }
.corner__art { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 550 / 300; overflow: hidden; background: var(--soft); }
.corner__dots { justify-content: center; margin-top: 12px; }
.corner__dots:empty { display: none; }
.corner__dots button { position: relative; }
.corner__dots button::after { content: ""; position: absolute; inset: -14px -4px; }
.corner__art img { position: absolute; max-width: none; width: 437.1%; top: -523.4%; }
.corner__art--1 img { left: -9.09%; }
.corner__art--2 img { left: -115.27%; }
.corner__art--pic img { position: static; width: 100%; height: 100%; object-fit: cover; }
.corner__copy { display: grid; gap: 4px; padding: 16px 18px 20px; }
.corner__word { color: var(--navy); font-size: 20px; line-height: 28px; font-weight: 800; }
.corner__en { color: var(--blue); font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.corner__note { margin-top: 4px; color: var(--ink); font-size: 15px; line-height: 22px; }

/* 06 Speak */
.speak { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: var(--sec-y) var(--pad); background: var(--blue); color: var(--white); }
.speak__head { max-width: 760px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.speak__head .lead { color: var(--white); }
.speak__live { display: inline-flex; align-items: center; gap: 10px; padding: 7px 17px 7px 15px; border-radius: 999px; background: #EEF3FF; color: var(--navy); font-size: 13px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.speak__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(225, 68, 52, .55); animation: speak-ping 1.8s ease-out infinite; }
.speak__stage { position: relative; isolation: isolate; width: 100%; max-width: 1000px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "chat" "hero" "turn"; align-items: start; gap: 24px; padding: 32px 0 0; color: var(--navy); }
.speak__chat { grid-area: chat; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; width: min(720px, 100%); justify-self: center; }
.speak__msg { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 18px 22px; border-radius: 24px; background: var(--white); color: var(--navy); overflow-wrap: anywhere; }
.speak__msg::after { content: ""; position: absolute; top: 100%; left: 32%; border: 14px solid transparent; border-top-color: var(--white); border-bottom: 0; }
.speak__msg--han::after { left: 64%; }
.speak__who { display: flex; align-items: center; gap: 8px; color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.speak__ru { font-family: var(--ru); font-size: 22px; line-height: 30px; font-weight: 700; }
.speak__en { color: var(--muted); font-size: 15px; line-height: 22px; }
.speak__hero { grid-area: hero; position: relative; width: min(720px, 100%); aspect-ratio: 720 / 470; justify-self: center; }
.speak__glow { position: absolute; left: 19.4%; top: 0; width: 61.1%; aspect-ratio: 1; border-radius: 50%; background: var(--white); }
.speak__glow::before, .speak__glow::after { content: ""; position: absolute; border-radius: 50%; }
.speak__glow::before { width: 43%; aspect-ratio: 1; left: -7%; bottom: -3%; background: var(--red); }
.speak__glow::after { width: 25%; aspect-ratio: 1; right: -6%; top: -4%; background: var(--white); }
.speak__pole { position: absolute; left: 71.5%; top: 8%; width: .97%; height: 51%; border-radius: 4px; background: #AFC0E4; transform-origin: 50% 100%; rotate: 9deg; }
.speak__pole::before { content: ""; position: absolute; left: 50%; top: -12px; width: 14px; height: 14px; translate: -50% 0; border-radius: 50%; background: #AFC0E4; }
.speak__flag { position: absolute; left: 100%; top: 2px; width: 1886%; height: 36.7%; border-radius: 3px 10px 10px 3px; box-shadow: 0 0 0 1px var(--hair), 0 12px 24px -12px rgba(17, 45, 78, .45); background: linear-gradient(var(--white) 33.4%, var(--blue) 0 66.7%, var(--red) 0); transform-origin: left center; animation: flag-wave 5s ease-in-out infinite; }
.speak__jerry, .speak__han { position: absolute; bottom: 0; width: 62.222%; height: auto; }
.speak__jerry { left: 0; }
.speak__han { right: 0; }
.speak__turn { grid-area: turn; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 14px; width: min(500px, 100%); justify-self: center; padding: 20px; border-radius: 24px; background: var(--navy); color: var(--white); }
.speak__mic { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: var(--white); box-shadow: 0 0 0 6px rgba(225, 68, 52, .3); }
.speak__turn p { display: flex; flex-direction: column; gap: 2px; font-size: 16px; line-height: 22px; font-weight: 600; }
.speak__turn strong { color: var(--soft); font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.speak__wave { grid-column: 1 / -1; display: flex; align-items: center; gap: 5px; height: 26px; }
.speak__wave i { width: 4px; height: 100%; border-radius: 2px; background: var(--white); animation: speak-wave 1.2s ease-in-out infinite; }
.speak__wave i:nth-child(odd) { height: 55%; animation-delay: -.4s; }
.speak__wave i:nth-child(3n) { height: 80%; animation-delay: -.8s; }
.speak__points { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 1200px; }
.speak__points li { display: inline-flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; border-radius: 999px; background: var(--white); box-shadow: 0 0 0 1px var(--hair), var(--lift); color: var(--navy); font-size: 16px; font-weight: 700; }
.speak__points .ico { width: 36px; height: 36px; --ip: 7px; }
@keyframes speak-ping { 70%, 100% { box-shadow: 0 0 0 9px rgba(215, 62, 75, 0); } }
@keyframes speak-pulse { from { scale: .72; opacity: 1; } to { scale: 1.12; opacity: 0; } }
@keyframes speak-wave { 50% { scale: 1 .35; } }
.bullets { display: flex; flex-direction: column; gap: 14px; }
.bullets li { display: flex; align-items: flex-start; gap: 12px; }
.bullets--center { gap: 12px; }
.bullets--center li { align-items: center; gap: 14px; }

/* 07 Writing */
.writing { display: flex; flex-direction: column; gap: 48px; padding: var(--sec-y) var(--pad); }
.writing__head { display: flex; gap: 114px; }
.writing__head .h2 { flex: 0 0 600px; }
.writing__copy { flex: 0 1 486px; display: flex; flex-direction: column; gap: 20px; }
.writing__task img { width: 100%; }
.writing .caption { margin-top: 0; }

/* 02b Who RusPaw is for: big swipeable slides (rail logic shared with the culture corner) */
.who { display: flex; flex-direction: column; gap: 40px; padding: var(--sec-y) var(--pad); background: var(--white); }
.who__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; width: 100%; max-width: 1200px; margin: 0 auto; }
.who__arrows button[aria-disabled="true"] { opacity: .35; cursor: default; pointer-events: none; }
.corner__rail, .who__rail { cursor: grab; }
.corner__rail.is-dragging, .who__rail.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.corner__rail img, .who__rail img { -webkit-user-drag: none; }
.who__rail { display: flex; gap: 24px; width: 100%; max-width: 1200px; margin: 0 auto; padding: 4px 0 8px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.who__rail::-webkit-scrollbar { display: none; }
.who__rail:focus-visible { outline-offset: -3px; }
.who__slide { --c: var(--blue); flex: 0 0 min(860px, 82%); scroll-snap-align: start; display: grid; grid-template-columns: 11fr 10fr; overflow: hidden; border-radius: 28px; background: var(--white); box-shadow: 0 0 0 1px var(--hair), 0 24px 48px -30px rgba(17, 45, 78, .4); }
.who__slide:nth-child(2) { --c: var(--navy); }
.who__slide:nth-child(4) { --c: var(--red); }
.who__slide img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 440 / 300; }
.who__copy { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 40px; background: var(--white); }
.who__title { color: var(--navy); font-size: 32px; line-height: 40px; font-weight: 800; }
.who__title::before { content: ""; display: block; width: 36px; height: 6px; margin-bottom: 10px; border-radius: 3px; background: var(--gold); }
.who__copy p { color: var(--ink); font-size: 18px; line-height: 28px; }
.who__dots { justify-content: center; }
.who__dots:empty { display: none; }
.who__dots button { position: relative; }
.who__dots button::after { content: ""; position: absolute; inset: -14px -4px; }

/* 08 Founder story: official icon as a faint backdrop, portrait never cropped or covered by text */
.founder { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(32px, 6vw, 96px); padding: var(--sec-y) var(--pad); background: var(--white); }
.founder__media { position: relative; display: grid; place-items: end center; max-width: 520px; width: 100%; justify-self: center; }
.founder__logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; transform: translateY(-9%) scale(1.22); transform-origin: 50% 75%; }
.founder__photo { position: relative; width: min(100%, 420px); height: auto; }
.founder__copy { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.founder__welcome { color: var(--red); font-size: 20px; line-height: 26px; font-weight: 800; }
.founder__sub { color: var(--blue); font-size: 18px; line-height: 28px; font-weight: 700; }
.founder__copy p:not([class]) { font-size: 18px; line-height: 30px; }
.founder__by { margin-top: 8px; color: var(--muted); font-weight: 700; }

/* 09 Educators */
.edu { background: var(--blue); color: var(--white); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 40px var(--pad); }
.edu__copy { display: flex; align-items: center; gap: 14px; font-size: 20px; line-height: 28px; font-weight: 700; }
.edu__copy .ms { font-size: 28px; }
.edu .link { color: var(--white); }
.edu :focus-visible { outline-color: var(--white); }

/* 10 FAQ */
.faq { display: flex; gap: 24px; padding: var(--sec-y) var(--pad); }
.faq .h2 { flex: 0 0 384px; }
.faq__list { flex: 0 1 792px; }
.faq details { border-bottom: 1px solid var(--hair); padding: 22px 0; }
.faq details:first-child { border-top: 1px solid var(--hair); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 20px; line-height: 28px; font-weight: 700; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq__toggle { flex: 0 0 32px; height: 32px; border-radius: 16px; background: #EEF3FF; color: var(--navy); display: inline-flex; align-items: center; justify-content: center; font-family: "Material Symbols Rounded"; font-weight: 700; font-size: 20px; line-height: 1; font-feature-settings: "liga"; }
.faq__toggle::before { content: "add"; }
.faq__toggle { transition: background-color .2s ease, color .2s ease; }
.faq details[open] .faq__toggle { background: var(--red); color: var(--white); }
.faq details[open] .faq__toggle::before { content: "remove"; }
.faq details p { margin-top: 10px; }

/* 11 Final CTA and waitlist form */
.cta { position: relative; background: var(--cat-deep); color: var(--white); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 28px 60px; padding: 88px var(--pad); }
.cta :focus-visible, .cta .wl__input:focus-within { outline-color: var(--white); }
.cta__title { color: var(--white); font-size: clamp(36px, 4.2vw, 64px); line-height: 1.08; text-wrap: balance; }
.wl { width: 560px; max-width: 100%; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.wl__label { color: var(--navy); font-size: 14px; font-weight: 700; }
.wl__row { display: flex; gap: 12px; }
.wl__input { flex: 1 1 auto; height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 16px; background: var(--white); border: 2px solid var(--white); border-radius: 14px; color: var(--muted); }
.wl__input .ms { font-size: 20px; }
.wl__input input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 16px/normal var(--font); color: var(--ink); }
.wl__input input::placeholder { color: var(--muted); }
.wl__input:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; }
.wl__err-icon { display: none; color: var(--red); }
.wl__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 24px; border: 0; border-radius: 14px; background: var(--blue); color: var(--white); font: 700 16px/24px var(--font); cursor: pointer; white-space: nowrap; transition: background-color .2s ease; }
.wl__btn:hover { background: var(--white); color: var(--navy); }
.wl__spinner { display: none; font-size: 20px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.wl__error, .wl__alert, .wl__success { display: none; }
.wl__error { align-items: flex-start; gap: 6px; color: var(--navy); font-size: 14px; line-height: 20px; font-weight: 700; }
.wl__error .ms { font-size: 18px; }
.wl__alert { align-items: flex-start; gap: 10px; background: var(--bg); color: var(--ink); border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 20px; font-weight: 600; }
.wl__alert .ms { font-size: 20px; color: var(--red); }
.wl__success { align-items: flex-start; gap: 14px; background: var(--ok-bg); border-radius: 14px; padding: 18px 20px 18px 18px; }
.wl__success .ms { font-size: 28px; color: var(--ok); }
.wl__success-title { color: var(--ok); font-size: 18px; font-weight: 700; line-height: normal; }
.wl__success-body { color: var(--ink); font-size: 15px; line-height: 22px; margin-top: 4px; }
.wl__helper { color: var(--navy); font-size: 14px; line-height: 22px; }
.wl__consent { color: var(--navy); font-size: 13px; line-height: 20px; }
.wl[data-state="invalid"] .wl__input { border-color: var(--red); }
.wl[data-state="invalid"] .wl__err-icon { display: inline-block; }
.wl[data-state="invalid"] .wl__error { display: flex; }
.wl[data-state="submitting"] .wl__input { opacity: .75; }
.wl[data-state="submitting"] .wl__spinner { display: inline-block; }
.wl[data-state="submitting"] .wl__btn { cursor: progress; }
.wl[data-state="error"] .wl__alert { display: flex; }
.wl[data-state="success"] > :not(.wl__success) { display: none; }
.wl[data-state="success"] .wl__success { display: flex; }

.cta .wl__label, .cta .wl__helper, .cta .wl__consent, .cta .wl__error { color: var(--white); }
.cta .wl__btn { background: var(--red); }
.cta .wl__btn:hover { background: var(--white); color: var(--navy); }
.cta__art::before, .cta__art::after { content: ""; position: absolute; border-radius: 50%; }
.cta__art::before { width: 76%; aspect-ratio: 1; background: var(--blue); top: 10%; right: 4%; }
.cta__art::after { width: 65px; height: 65px; background: var(--red); right: 0; top: 4%; }
.cta__art img { position: relative; z-index: 1; }
.corner__category { color: var(--blue); font-size: 13px; font-weight: 800; margin-bottom: 4px; }
.cta__copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; overflow-wrap: anywhere; }
.cta__soon { font-weight: 800; font-size: 16px; }
.cta .wl { grid-column: 1; width: 100%; }
.cta__art { grid-column: 2; grid-row: 1 / 3; align-self: center; position: relative; padding: 40px 0; }
.cta__art img { width: 100%; max-height: 440px; object-fit: contain; transform: rotate(5deg); }
.cta__hello, .cta__word { position: absolute; z-index: 1; padding: 14px 22px; border-radius: 24px 24px 4px 24px; background: var(--white); font-size: clamp(22px, 3vw, 38px); font-weight: 800; }
.cta__hello { top: 0; left: 0; transform: rotate(-8deg); color: var(--navy); }
.cta__word { bottom: 12px; right: 0; transform: rotate(6deg); background: var(--red); color: var(--white); }
.level { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; gap: 48px; padding: 64px var(--pad); background: var(--soft); color: var(--navy); }
.level > div:first-child { display: grid; justify-items: start; gap: 20px; }
.level__letters { display: flex; justify-content: center; align-items: center; padding: 24px 0; }
.level__letters span { display: grid; place-items: center; width: clamp(70px, 8vw, 120px); aspect-ratio: 1; border-radius: 28%; font: 800 clamp(40px, 5vw, 72px)/1 var(--ru); background: var(--white); transform: rotate(-12deg); }
.level__letters span:nth-child(2) { background: var(--blue); color: var(--white); transform: translateY(-28px) rotate(8deg); }
.level__letters span:nth-child(3) { background: var(--red); color: var(--white); transform: rotate(14deg); }
.logo--footer .logo__tagline { font-size: 10px; margin-top: 8px; }
.flag { border-radius: 5px 5px 7px 3px; box-shadow: 0 2px 4px var(--hair); }
.lang__btn:hover .flag { transform: rotate(-6deg); }
.lang__check use { stroke: var(--blue); }

/* 12 Contact */
.contact { background: var(--white); display: flex; gap: 80px; padding: 96px var(--pad); }
.contact__copy { flex: 0 1 520px; display: flex; flex-direction: column; gap: 14px; }
.contact__form { flex: 0 1 600px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; background: var(--white); border-radius: 20px; box-shadow: 0 0 0 1px var(--hair), 0 24px 48px -30px rgba(17, 45, 78, .4); padding: 28px; }
.field { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; line-height: normal; }
.field input, .field textarea { width: 100%; border: 1.5px solid var(--muted); border-radius: 12px; padding: 14px 16px; font: 400 16px/normal var(--font); color: var(--ink); background: var(--white); }
.field textarea { height: 140px; resize: vertical; }
.field ::placeholder { color: var(--muted); }
.btn--send { padding: 14px 28px; }
.contact__status { font-size: 14px; line-height: 22px; color: var(--muted); }
.contact__status:empty { display: none; }

/* 13 Footer */
.site-footer { border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: 56px; padding: 72px var(--pad) 40px; }
.site-footer__cols { display: flex; gap: 24px; }
.site-footer__brand { flex: 0 1 384px; display: flex; flex-direction: column; gap: 16px; }
.site-footer__brand > p:not(.small) { max-width: 320px; }
.site-footer__col { flex: 0 1 250px; display: flex; flex-direction: column; gap: 14px; }
.site-footer__h { font-weight: 700; line-height: normal; }
.site-footer__col a, .site-footer__legal a { text-decoration: none; }
.site-footer__col a:hover, .site-footer__legal a:hover { color: var(--blue); }
.site-footer__legal { display: flex; gap: 28px; padding-top: 24px; border-top: 1px solid var(--hair); font-size: 14px; line-height: 22px; }
.site-footer__legal div { display: flex; gap: 28px; }
.site-footer__badges { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ssl-badge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: 100px; height: 20px; background: var(--blue); color: var(--white); font: 700 10px/1 Arial, sans-serif; white-space: nowrap; }

@media (min-width: 768px) and (max-width: 1100px) {
  .site-header__inner { padding-inline: 24px; }
  .nav, .nav__links { gap: 16px; }
  .cta { column-gap: 24px; }
  .wl__row { flex-wrap: wrap; }
  .wl__input { min-width: 180px; }
}

/* Between the 1440 desktop and 390 mobile references */
@media (max-width: 1279px) {
  .hero__title { font-size: 48px; line-height: 56px; }
  .jerry { flex-wrap: wrap; }
  .jerry__copy { flex-basis: 100%; max-width: 720px; }
  .speak__stage { max-width: 880px; padding: 32px 32px 36px; }
  .writing__head { gap: 48px; }
  .writing__head .h2 { flex-basis: 45%; }
  .faq .h2 { flex-basis: 30%; }
  .site-footer__col { flex-basis: 200px; }
  .site-footer__brand { flex-basis: 300px; }
}
@media (max-width: 1023px) {
  .nav__links { gap: 20px; }
  .benefits { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .teach { padding-block: 28px calc(20px + 15vh); }
  .learn { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "cap" "stage"; grid-template-rows: auto auto auto; align-items: start; row-gap: 16px; max-width: 680px; }
  .learn__head, .learn__tabs, .learn__cap { max-width: none; }
  .teach::before { content: none; }
  .learn__head.section-head { gap: 4px; }
  .learn__head .lead { font-size: 16px; line-height: 24px; }
  .learn__stage { height: auto; padding: 8px 0 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; align-items: center; gap: 12px; }
  .learn__callout,
  .learn__callout--1,
  .learn__callout--2,
  .learn__callout--3 { grid-column: 1; grid-row: auto; width: 100%; }
  .learn__device { display: contents; }
  .learn__device > .phone { grid-column: 1; grid-row: 1; justify-self: center; align-self: start; zoom: .9; }
  .learn__stage::before { top: 8px; right: 8%; bottom: auto; left: 8%; height: calc(724px * .9); }
  .learn__stage::after { top: 8px; right: -4%; bottom: auto; left: -4%; height: calc(724px * .9); }
  .learn__tabs { position: static; gap: 6px; padding-block: 0; background: none; }
  .learn__tab { gap: 4px; padding: 4px 2px; font-size: 13px; line-height: 16px; }
  .learn__tab > .ico { flex: 0 0 24px; width: 24px; height: 24px; --ip: 4px; }
  .learn__tab small { display: none; }
  .gdemo { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .gdemo__head { position: static; max-width: 640px; }
  .writing__head { flex-direction: column; }
  .faq { flex-direction: column; }
  .who__copy { padding: 28px; }
  .who__title { font-size: 26px; line-height: 34px; }
  .contact { flex-direction: column; gap: 32px; }
  .contact__copy, .contact__form, .writing__copy, .faq__list { flex-basis: auto; }
  .founder { grid-template-columns: minmax(0, 1fr); }
  .founder__media { max-width: 420px; }
  .site-footer__cols { flex-wrap: wrap; row-gap: 32px; }
}

/* The full link row no longer fits below ~1120px (VI, DE and JA labels are long), so the menu button takes over */
@media (max-width: 1119px) {
  .nav { gap: 12px; }
  .menu-btn { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 44px; padding: 6px; border: 0; border-radius: 12px; background: none; color: var(--ink); cursor: pointer; }
  .nav__links { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--white); box-shadow: 0 16px 24px -16px rgba(17, 45, 78, .25); padding: 8px 24px 16px; }
  .nav__links.is-open { display: flex; }
  .nav__links a { display: block; padding: 12px 4px; font-size: 18px; }
}

/* Mobile (Figma 390 frame) */
@media (max-width: 767px) {
  :root { --sec-y: 56px; }
  html { scroll-padding-top: 64px; }
  .only-desktop, .br-d { display: none; }
  .br-m { display: inline; }
  .only-mobile { display: inline; }
  .h2 { font-size: 30px; line-height: 38px; letter-spacing: -0.3px; }
  .h3 { font-size: 18px; line-height: 26px; }

  .site-header__inner { height: 64px; padding: 0 16px; }
  .logo--header { width: 36px; flex: none; }
  .nav { gap: 6px; min-width: 0; margin-left: 8px; }
  .lang__btn { gap: 5px; height: 41px; padding: 0 8px; }
  .lang__chev { display: none; }
  .btn--header { min-width: 0; padding: 8px 9px; font-size: 13px; line-height: 18px; text-align: center; overflow-wrap: anywhere; }
  .nav__links { padding-inline: 16px; }

  .hero { flex-direction: column; align-items: stretch; gap: 32px; min-height: 0; padding: 32px 0 48px; }
  .hero__text { flex: none; gap: 20px; padding: 0 20px; }
  .hero__title { font-size: 40px; line-height: 46px; letter-spacing: -0.8px; max-width: 350px; }
  .hero__ctas { flex-direction: column; align-items: stretch; gap: 20px; width: 100%; }
  .hero__ctas .btn--lg { padding: 16px 24px; }
  .hero__ctas .link { align-self: center; }
  .hero__stage { flex: none; width: 100%; margin: 0; padding: 16px 24px; }
  .logo--hero { width: min(520px, 100%); }

  .jerry { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 28px; }
  .jerry__stage { flex: none; align-self: center; width: 350px; height: 340px; }
  .jerry__flag { left: 25px; top: 56px; width: 300px; height: 200px; }
  .jerry__img { left: 70px; top: 80px; width: 210px; height: 192px; }
  .mascots__card--han .jerry__img { top: 45px; left: 55px; width: 240px; height: 230px; }
  .mascots__controls { gap: 6px; }
  .mascots__controls button { padding-inline: 9px; font-size: 14px; }
  .bubble { right: 4px; top: 6px; padding: 10px 14px; }
  .bubble__ru { font-size: 17px; }
  .bubble__en { font-size: 13px; }
  .name-tag { left: 4px; top: auto; bottom: 14px; padding: 8px 14px; }
  .name-tag strong { font-size: 15px; }
  .name-tag span { font-size: 12px; }
  .jerry__copy { gap: 16px; }
  .jerry__copy .lead { font-size: 16px; line-height: 26px; }
  .traits { grid-template-columns: 1fr; gap: 12px; }
  .trait { padding: 14px; }
  .trait__text strong { font-size: 16px; }
  .trait__text span { font-size: 14px; line-height: 20px; }

  .teach { height: auto; }
  .learn { row-gap: 6px; }
  .gdemo { gap: 24px; }
  .gdemo__card { gap: 16px; padding: 20px; }
  .gdemo__sentence { font-size: 26px; line-height: 40px; }
  .gdemo__blank { width: 110px; height: 28px; }
  .gdemo__options { grid-template-columns: 1fr; gap: 8px; }
  .gdemo__opt { padding: 10px 14px; font-size: 18px; }
  .gdemo__tok { font-size: 26px; line-height: 40px; }
  .gdemo__panel, .gdemo__detail { padding: 16px; }
  .gdemo__table { font-size: 14px; }
  .gdemo__table th, .gdemo__table td { padding: 7px 4px; }

  .culture { align-items: stretch; gap: 24px; }
  .culture .section-head { align-items: flex-start; text-align: left; }
  .benefits { grid-template-columns: 1fr 1fr; gap: 20px 12px; }
  .benefit { flex-direction: column; align-items: flex-start; }
  .culture__story { width: 100%; }
  .culture__feature { display: flex; flex-direction: column; gap: 0; min-height: 0; padding: 16px; }
  .culture__scene { width: 100%; margin: 0 0 20px; }
  .culture__exercises h3 { margin-top: 18px; font-size: 26px; line-height: 34px; }
  .culture__intro { line-height: 24px; }
  .culture__slides { margin-top: 18px; }
  .culture__slide { height: 373px; padding: 16px; }
  .culture__prompt { font-size: 17px; line-height: 24px; }
  .culture__choices span { font-size: 16px; }
  .corner { margin: 0 16px 16px; }
  .corner__head { align-items: center; flex-wrap: wrap; }
  .corner__card { flex-basis: 78%; }

  .speak { gap: 24px; }
  .speak__head { gap: 12px; }
  .speak__head .lead { font-size: 16px; line-height: 26px; }
  .speak__stage { gap: 24px; padding: 16px 0 20px; }
  .speak__chat { gap: 12px; }
  .speak__msg { padding: 12px; border-radius: 18px; }
  .speak__ru { font-size: 18px; line-height: 25px; }
  .speak__en { font-size: 13px; line-height: 20px; }
  .speak__points { justify-content: flex-start; gap: 8px; }
  .speak__points li { font-size: 14px; padding: 5px 14px 5px 5px; }

  .writing { gap: 20px; }
  .writing__head { gap: 20px; }
  .writing__head .h2 { flex: none; }
  .writing__head .h2 br { display: none; }
  .writing__copy .lead { font-size: 16px; line-height: 26px; }


  .edu { flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px 20px; }
  .edu__copy { gap: 10px; font-size: 18px; line-height: 26px; align-items: flex-start; }
  .edu__copy .ms { font-size: 24px; }

  .faq { gap: 20px; }
  .who { gap: 20px; }
  .who__arrows { display: none; }
  .who__rail { gap: 12px; }
  .who__slide { flex-basis: 86%; grid-template-columns: 1fr; border-radius: 22px; }
  .who__slide img { height: auto; object-fit: contain; }
  .who__copy { gap: 8px; padding: 18px 20px 22px; }
  .who__title { font-size: 22px; line-height: 30px; }
  .who__title::before { margin-bottom: 10px; }
  .who__copy p { font-size: 16px; line-height: 24px; }
  .faq .h2 { flex: none; }
  .faq summary { font-size: 17px; line-height: 24px; }
  .faq details { padding: 18px 0; }

  .cta { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 56px 20px; }
  .cta__art { grid-column: 1; grid-row: auto; width: min(300px, 100%); justify-self: center; }
  .cta .wl { grid-row: 2; }
  .level { grid-template-columns: minmax(0, 1fr); padding: 48px 20px; gap: 24px; }
  .level__letters { order: -1; }
  .level__letters span { width: 80px; }
  .wl { width: 100%; }
  .wl__row { flex-direction: column; }
  .wl__btn { width: 100%; }

  .contact { gap: 20px; padding: 56px 20px; }
  .contact__copy .lead { font-size: 16px; line-height: 26px; }
  .founder { gap: 28px; }
  .founder__media { max-width: 320px; }
  .founder__logo { transform: translateY(-9%) scale(1.1); }
  .founder__copy p:not([class]) { font-size: 16px; line-height: 26px; }
  .founder__welcome { font-size: 18px; line-height: 24px; }
  .contact__form { padding: 20px; }
  .btn--send { width: 100%; }

  .site-footer { gap: 32px; padding: 48px 20px 32px; }
  .site-footer__cols { flex-direction: column; gap: 32px; }
  .site-footer__brand { flex: none; gap: 12px; }
  .logo--footer { width: 118px; }
  .site-footer__col { flex: none; gap: 12px; }
  .site-footer__legal { flex-direction: column; gap: 10px; padding-top: 20px; }
  .site-footer__legal div { gap: 20px; }
}

/* Desktop: title stays the site h2. The block under the header is one viewport. */
@media (min-width: 1024px) {
  .teach { height: auto; padding-block: 56px calc(40px + 15vh); }
  .teach::before { content: none; }
  .learn__device { display: contents; }
  .learn { gap: 20px; max-width: 1120px; align-items: start; grid-template-areas: "head" "cap" "stage"; grid-template-rows: auto auto auto; }
  .learn__head { text-align: center; }
  .learn__head.section-head { gap: 6px; }
  .learn__head .h2 { max-width: 16em; margin-inline: auto; text-wrap: balance; }
  .learn__head .lead { max-width: 920px; margin-inline: auto; }
  .teach .h2::after { margin-top: 8px; }
  .learn__tabs { display: none; }
  .learn__tab { flex-direction: column; align-items: center; gap: 4px; padding: 4px 6px 6px; border-radius: 14px; background: transparent; font-size: 15px; line-height: 20px; }
  .learn__tab small { display: none; }
  .learn__tab:hover { background: #F7F9FC; }
  .learn__tab[aria-selected="true"] { background: #F3F6FB; box-shadow: 0 0 0 1px var(--hair); }
  .learn__tab > .ico.ico { flex: 0 0 32px; width: 32px; height: 32px; --ip: 6px; border-radius: 10px; box-shadow: none; }
  .learn__cap { max-width: 640px; }
  .learn__cap > div { gap: 0; }
  .learn__stage { height: auto; min-height: calc(724px * .9); padding: 8px 0 0; grid-template-columns: minmax(0, 1fr) calc(352px * .9) minmax(0, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); align-items: center; }
  .learn__callout--1 { grid-column: 1; grid-row: 1; }
  .learn__callout--2 { grid-column: 3; grid-row: 2; }
  .learn__callout--3 { grid-column: 1; grid-row: 3; }
  .learn__device > .phone { grid-column: 2; grid-row: 1 / 4; justify-self: center; align-self: end; zoom: .9; }
  .learn__stage::before { inset: auto 18% 0; height: calc(724px * .9); background: radial-gradient(closest-side, #FFF3D6 12%, rgba(255, 243, 214, .7) 42%, rgba(255, 243, 214, 0) 74%); }
  .learn__callout { align-self: center; gap: 10px; padding: 12px 14px; border-radius: 16px; box-shadow: 0 0 0 1px var(--hair); }
  .learn__callout .tile--ill > .ico { flex: 0 0 32px; width: 32px; height: 32px; --ip: 6px; border-radius: 10px; box-shadow: none; }
  .learn__callout h3 { font-size: 16px; line-height: 22px; margin-bottom: 2px; }
  .learn__callout p { font-size: 14px; line-height: 20px; }
}
.legal { max-width: 792px; padding: 72px var(--pad) 96px; box-sizing: content-box; }
.legal h1 { font-size: 44px; line-height: 52px; font-weight: 700; letter-spacing: -0.5px; }
.legal .updated { margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 22px; }
.legal h2 { margin-top: 40px; font-size: 20px; line-height: 28px; font-weight: 700; }
.legal p { margin-top: 12px; }
.legal .back { display: inline-block; margin-top: 48px; }
@media (max-width: 767px) {
  .legal { padding: 48px 20px 64px; }
  .legal h1 { font-size: 30px; line-height: 38px; }
}
/* Narrow phones: scale the 350px Jerry stage down instead of overflowing */
@media (max-width: 374px) {
  .jerry__stage { zoom: .8; }
  .gdemo__sentence { font-size: 22px; }
  .gdemo__blank { width: 80px; }
  .gdemo__card { padding: 16px; }
  .gdemo__tok { padding: 4px 10px; font-size: 24px; }
  .gdemo__panel, .gdemo__detail { padding: 12px; }
  .gpane .gpane__form { font-size: 22px; }
  .learn__tab { padding: 8px 2px; font-size: 12px; }
  .gdemo__table { font-size: 13px; }
  .gdemo__table th, .gdemo__table td { padding: 6px 3px; }
  .gdemo__table tbody th { hyphens: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .phone.is-nudging, .phone.is-nudging .scr, .phone.is-nudging .learn__finger { animation: none !important; }
  .wl__spinner, .jerry__flag, .jerry__img, .speak__dot, .speak__glow::after, .speak__flag, .speak__jerry, .speak__wave i, .scr, .grm__sheet, .wrt__now, .pth__dot::after, .ico, .learn__swipe-hint { animation: none !important; }
  *, *::before, *::after { transition: none !important; }
  .learn__callout { animation: none !important; }
  .btn--primary:hover, .gdemo__tok:active, .gdemo__opt:active, .gdemo__opt { translate: none; animation: none; }
  .lang__menu { animation: none; }
}

.form-hp { position: absolute; left: -9999px; }