/* Сайт Ольги Семакиной: витрина, запись и кабинет клиента.
 *
 * Макеты — 1440 и 390 точек (архив olga-semakina-site, октябрь 2026).
 * Здесь они резиновые: размеры шрифтов и отступы между секциями плавные,
 * через clamp() из таблицы ТЗ, колонки в fr, фиксированная высота — только
 * у шапки. Точки перестройки: 768, 1024, 1200.
 *
 * Инлайновых стилей нет и быть не может: CSP их запрещает, браузер молча
 * выбрасывает style="…". Всё, что в макетах стояло атрибутом, здесь — классом,
 * включая координаты листьев.
 */

@font-face {
  font-family: 'Noto Serif Display';
  src: url('/fonts/noto-serif-display-cyrillic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Noto Serif Display';
  src: url('/fonts/noto-serif-display-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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: 'Noto Serif Display';
  src: url('/fonts/noto-serif-display-rub.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20BD;
}
@font-face {
  font-family: 'Noto Serif Display';
  src: url('/fonts/noto-serif-display-italic-cyrillic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Noto Serif Display';
  src: url('/fonts/noto-serif-display-italic-latin.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  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: 'Noto Serif Display';
  src: url('/fonts/noto-serif-display-italic-rub.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  unicode-range: U+20BD;
}
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-cyrillic.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-rub.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+20BD;
}
/* Рукописный — только два слова на всём сайте: «здоровье» и «с Ольгой».
 * Файл урезан до их букв, поэтому 10 КБ, а не 90. */
@font-face {
  font-family: 'Great Vibes';
  src: url('/fonts/great-vibes-script.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #FAFBF4;
  --head: #FDFFF5;
  --lime-1: #EEF4D8;
  --lime: #DCE7B8;
  --dark: #1F2715;
  --btn: #3F5414;
  --btn-hover: #34470F;
  --accent: #4E6619;
  --ink: #1E2218;
  --ink-2: #33382B;
  --muted: #555B4A;
  --line: #C9CFB6;
  --line-2: #D5DBC3;
  --program-line: #B9C690;
  --on-dark: #EEF1E3;
  --on-dark-2: #A9B196;
  --on-dark-acc: #C4CEA2;
  --on-dark-text: #D5DBC6;
  --dark-line: #3A4530;
  --warn: #8A2F1D;
  --warn-bg: #F7E7DF;
  --ok-bg: #E4EDC6;

  --serif: 'Noto Serif Display', 'Times New Roman', serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --script: 'Great Vibes', cursive;

  --pad: clamp(20px, -2.3px + 5.71vw, 80px);
  --section: clamp(72px, 39.3px + 8.38vw, 160px);
  --max: 1280px;

  --fs-name: clamp(64px, 35.8px + 7.24vw, 140px);
  --fs-courses: clamp(76px, 48.5px + 7.05vw, 150px);
  --fs-h1: clamp(52px, 32.7px + 4.95vw, 104px);
  --fs-h2: clamp(42px, 29.4px + 3.24vw, 76px);
  --fs-card: clamp(40px, 31.1px + 2.29vw, 64px);
  --fs-dir: clamp(21px, 14.7px + 1.62vw, 38px);
  --fs-lead: clamp(23px, 19.7px + 0.86vw, 32px);
  --fs-body: clamp(15px, 13.9px + 0.29vw, 18px);
  --fs-small: clamp(13px, 12.3px + 0.19vw, 15px);
  --fs-script: clamp(48px, 36.1px + 3.05vw, 80px);

  --r-card: clamp(18px, 14px + 1.4vw, 36px);
  --r-photo: clamp(18px, 16px + 0.6vw, 24px);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 16px;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

main { flex: 1 0 auto; }

img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }

a { color: inherit; text-decoration: none; }
@media (hover: hover) {
  a:hover { color: var(--accent); }
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

.serif { font-family: var(--serif); font-weight: 300; }
em, .em { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--accent); }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--pad));
  margin-inline: auto;
  padding-inline: var(--pad);
}

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ─── Кнопки и ссылки-подчёркивания ─────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 34px;
  border: 0;
  border-radius: 999px;
  background: var(--btn);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s, color .2s, opacity .2s;
}
@media (min-width: 1024px) { .btn { min-height: 64px; padding: 0 36px; } }
@media (hover: hover) {
  .btn:hover { background: var(--btn-hover); color: var(--bg); }
}
.btn.dark { background: var(--dark); }
@media (hover: hover) { .btn.dark:hover { background: #2C3820; } }
.btn.lime { background: var(--lime); color: var(--dark); }
@media (hover: hover) { .btn.lime:hover { background: #E8F0CC; color: var(--dark); } }
.btn.ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
@media (hover: hover) { .btn.ghost:hover { background: var(--lime-1); color: var(--ink); } }
.btn.small { min-height: 44px; padding: 0 22px; font-size: 14px; }
.btn[disabled], .btn.off { opacity: .45; cursor: default; pointer-events: none; }
.btn.wide { width: 100%; }

.under-link {
  display: inline-block;
  padding: 10px 0 3px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  border-bottom: 1px solid currentColor;
  background: none;
  border-top: 0; border-left: 0; border-right: 0;
  cursor: pointer;
}
.text-link { border-bottom: 1px solid currentColor; }

/* ─── Шапка ─────────────────────────────────────────────────────────────── */

.top {
  position: relative;
  z-index: 20;
  background: var(--head);
}
.top .wrap {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
@media (min-width: 1024px) { .top .wrap { height: 96px; } }

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand img { width: 36px; height: 46px; flex: none; }
.brand .names { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.brand .n { font-family: var(--serif); font-size: 20px; line-height: 1; white-space: nowrap; }
.brand .t { font-size: 11px; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
@media (min-width: 1024px) {
  .brand { gap: 16px; }
  .brand img { width: 50px; height: 64px; }
  .brand .n { font-size: 26px; }
  .brand .t { font-size: 12px; }
}
@media (hover: hover) { .brand:hover { color: var(--ink); } }

.menu { display: none; }
.menu a { font-size: 15px; font-weight: 500; white-space: nowrap; }
.menu a.hl { color: var(--accent); }
.menu a.soft { color: var(--muted); }
.menu a.here { box-shadow: 0 1px 0 currentColor; }
.menu .cta {
  padding: 14px 26px;
  background: var(--btn);
  color: var(--bg);
  border-radius: 999px;
}
@media (hover: hover) { .menu .cta:hover { background: var(--btn-hover); color: var(--bg); } }
.menu .who { display: inline-flex; align-items: center; gap: 10px; }
.ava {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--lime);
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
}


.burger {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.burger span, .burger::before, .burger::after {
  content: '';
  display: block;
  grid-area: 1 / 1;
  width: 24px; height: 1.5px;
  background: var(--ink);
  transition: transform .25s;
}
.burger::before { transform: translateY(-4px); }
.burger::after { transform: translateY(4px); }
.burger span { opacity: 0; }
@media (min-width: 1200px) {
  .menu { display: flex; align-items: center; gap: clamp(24px, 2.8vw, 40px); }
  .top .burger { display: none; }
}

/* Меню на весь экран. Без скрипта бургер — это просто ссылка на подвал
 * с теми же пунктами; со скриптом он раскрывает этот слой. */
.sheet-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: var(--head);
  overflow-y: auto;
}
.sheet-menu[hidden] { display: none; }
.sheet-menu .bar {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 1024px) { .sheet-menu .bar { height: 96px; } }
.sheet-menu .close::before { transform: rotate(45deg); }
.sheet-menu .close::after { transform: rotate(-45deg); }
.sheet-menu nav { display: flex; flex-direction: column; padding: 16px 0 32px; }
.sheet-menu nav a {
  padding: 14px 0;
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1.2;
  border-bottom: 1px solid var(--line-2);
}
.sheet-menu nav a.hl { color: var(--accent); }
.sheet-menu .btn { margin-top: auto; margin-bottom: 32px; }
html.locked { overflow: hidden; }

/* ─── Подвал ─────────────────────────────────────────────────────────────── */

.foot {
  flex-shrink: 0;
  background: var(--dark);
  color: var(--on-dark);
  padding: clamp(56px, 30px + 6vw, 110px) 0 clamp(32px, 24px + 2vw, 48px);
}
.foot a { color: var(--on-dark); }
@media (hover: hover) { .foot a:hover { color: #fff; } }
.foot .grid {
  display: grid;
  grid-template-areas: "addr" "map" "rows" "book";
  gap: 32px;
}
.foot .addr { grid-area: addr; }
.foot .map { grid-area: map; }
.foot .reach { grid-area: rows; }
.foot .book { grid-area: book; }
@media (min-width: 768px) {
  .foot .grid { grid-template-areas: "addr" "rows" "book" "map"; gap: 40px; }
}
@media (min-width: 1024px) {
  .foot .grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "addr map" "rows map" "book map";
    column-gap: 80px;
    row-gap: 48px;
  }
  .foot .map { align-self: start; }
}
.foot .addr {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(34px, 22px + 3.4vw, 72px);
  line-height: 1.05;
}
.socials { display: grid; gap: 24px; margin-top: 28px; }
@media (min-width: 560px) { .socials { grid-template-columns: auto minmax(0, 1fr); column-gap: 48px; } }
.soc-h { margin-bottom: 12px; font-size: 14px; font-weight: 600; color: var(--on-dark-acc); }
.soc-list { display: flex; flex-wrap: wrap; gap: 8px; }
.soc-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px 0 14px;
  border: 1px solid var(--dark-line);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .2s, border-color .2s;
}
.soc-pill svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
@media (hover: hover) { .soc-pill:hover { background: rgba(255, 255, 255, .06); border-color: var(--on-dark-2); } }
.foot .reach { display: flex; flex-direction: column; }
.foot .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label act" "value act";
  align-items: baseline;
  column-gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--dark-line);
}
.foot .row:last-of-type, .foot .row.last { border-bottom: 1px solid var(--dark-line); }
.foot .row .l { grid-area: label; font-size: 14px; color: var(--on-dark-2); }
.foot .row .v { grid-area: value; font-size: 17px; }
.foot .row .a { grid-area: act; align-self: start; font-size: 15px; font-weight: 600; color: var(--on-dark-acc); }
@media (min-width: 768px) {
  .foot .row {
    grid-template-columns: 170px minmax(0, 1fr) auto;
    grid-template-areas: "label value act";
    gap: 16px;
    padding: 18px 0;
  }
  .foot .row .l { font-size: 15px; }
  .foot .row .v { font-size: 19px; }
  .foot .row .a { align-self: baseline; }
}
.foot .row.phone { border-bottom: 0; }
.foot .phone-note {
  padding: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--on-dark-2);
  border-bottom: 1px solid var(--dark-line);
}
@media (min-width: 768px) { .foot .phone-note { padding-left: 186px; } }
.foot .book { justify-self: stretch; }
@media (min-width: 768px) { .foot .book { justify-self: start; } }

.map {
  position: relative;
  display: block;
  aspect-ratio: 560 / 460;
  max-height: 460px;
  border-radius: clamp(20px, 16px + 1vw, 28px);
  overflow: hidden;
  background: #2E3822;
}
.map img { width: 100%; height: 100%; object-fit: cover; object-position: 51% 41%; }
.map .tag {
  position: absolute;
  left: 14px; bottom: 14px;
  padding: 12px 18px;
  background: var(--dark);
  color: var(--on-dark);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}
@media (min-width: 768px) { .map .tag { left: 20px; bottom: 20px; } }

.foot .legal {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: clamp(48px, 30px + 4vw, 80px);
  padding-top: 32px;
  border-top: 1px solid var(--dark-line);
}
.foot .warn-line { font-size: clamp(15px, 14px + .3vw, 17px); color: var(--on-dark-acc); line-height: 1.5; }
.foot .fine {
  display: flex;
  flex-direction: column-reverse;
  gap: 20px;
  font-size: 14px;
  color: var(--on-dark-2);
}
.foot .fine a { color: var(--on-dark-2); }
.foot .fine .left, .foot .fine .right { display: flex; flex-direction: column; gap: 6px; }
@media (min-width: 1024px) {
  .foot .fine { flex-direction: row; justify-content: space-between; gap: 48px; }
  .foot .fine .right { align-items: flex-end; }
}

/* ─── Листья ─────────────────────────────────────────────────────────────── *
 * Готовый код из макета (Home.dc.html), только координаты переехали из
 * атрибутов в классы. Двигаются transform и opacity — макет не дёргается. */

.leaf-fly {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  animation: leafFly var(--d) linear var(--dl) infinite;
  will-change: transform, opacity;
}
@keyframes leafFly {
  0% { transform: translate(0, 0); opacity: 0; }
  8% { opacity: 1; }
  35% { transform: translate(calc(var(--dx) * .33), calc(var(--dy) * .25 - 30px)); }
  65% { transform: translate(calc(var(--dx) * .66), calc(var(--dy) * .6 + 24px)); }
  92% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}
.leaf-flip {
  display: block;
  width: 100%;
  height: auto;
  animation: leafFlip var(--f) ease-in-out infinite alternate;
}
@keyframes leafFlip {
  0% { transform: perspective(500px) rotate(var(--r0)) rotateY(0deg) rotateX(25deg); }
  50% { transform: perspective(500px) rotate(calc(var(--r0) + 30deg)) rotateY(60deg) rotateX(-10deg); }
  100% { transform: perspective(500px) rotate(calc(var(--r0) + 55deg)) rotateY(-35deg) rotateX(40deg); }
}
.leaf-front {
  position: absolute;
  pointer-events: none;
  height: auto;
  animation: leafFront var(--d) ease-in-out infinite alternate;
}
@keyframes leafFront {
  from { transform: translate(0, 0) rotate(var(--r0)); }
  to { transform: translate(-16px, 12px) rotate(calc(var(--r0) + 7deg)); }
}
.leaf-shadow {
  position: absolute;
  pointer-events: none;
  color: #2B3A0E;
  fill: #2B3A0E;
  opacity: .22;
  filter: blur(5px);
  mix-blend-mode: multiply;
  animation: leafLight 9s ease-in-out infinite;
}
.leaf-a { animation: leafA 11s ease-in-out infinite; transform-origin: 660px -20px; }
.leaf-b { animation: leafB 14s ease-in-out infinite; transform-origin: 660px 140px; }
@keyframes leafA { 0%, 100% { transform: rotate(0deg) translate(0, 0); } 50% { transform: rotate(3.5deg) translate(-8px, 6px); } }
@keyframes leafB { 0%, 100% { transform: rotate(0deg) translate(0, 0); } 50% { transform: rotate(-4deg) translate(6px, -4px); } }
@keyframes leafLight { 0%, 100% { opacity: .22; } 50% { opacity: .14; } }
.script-in { animation: scriptIn 1.8s cubic-bezier(.4, 0, .2, 1) .5s both; }
@keyframes scriptIn {
  from { clip-path: inset(-40% 100% -40% -5%); }
  to { clip-path: inset(-40% -5% -40% -5%); }
}
.blur1 { filter: blur(1px); }
.blur15 { filter: blur(1.5px); }

/* Листья на телефоне: меньше, как в мобильном макете. */
.lf.desk { display: none; }
@media (min-width: 768px) { .lf.desk { display: block; } }

@media (prefers-reduced-motion: reduce) {
  .leaf-fly, .leaf-flip, .leaf-front, .leaf-shadow, .leaf-a, .leaf-b, .script-in { animation: none; }
  .leaf-fly { display: none; }
}

/* ─── Главная: первый экран ─────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--head);
}
.hero .wrap {
  position: relative;
  display: grid;
  gap: 8px;
}
.hero .photo {
  position: relative;
  height: clamp(420px, 105vw, 520px);
  margin-inline: calc(-1 * var(--pad));
}
.hero .arch {
  position: absolute;
  left: 18%;
  right: 6%;
  bottom: 0;
  height: 72%;
  background: var(--lime);
  border-radius: 999px 999px 0 0;
}
.hero .cutout {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: auto;
  height: 100%;
  max-width: none;
  transform: translateX(-50%);
  object-fit: contain;
  object-position: bottom center;
}
.hero .photo .fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  background: linear-gradient(to bottom, rgba(253, 255, 245, 0), var(--head));
}
.hero .words {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 0 0 48px;
  margin-top: -64px;
}
.hero .who { display: flex; flex-direction: column; gap: 14px; }
.hero .city { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--muted); }
.hero h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-name);
  line-height: .94;
  letter-spacing: -.025em;
}
.hero .role { font-size: clamp(17px, 14px + .9vw, 26px); color: var(--ink-2); letter-spacing: .01em; }
.hero .motto {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 18px;
  margin-top: 6px;
  color: var(--accent);
}
.hero .motto .s1 { font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 18.6px + 1.9vw, 48px); }
.hero .motto .s2 { font-family: var(--script); font-size: var(--fs-script); line-height: .9; }
.hero .acts { display: flex; flex-direction: column; gap: 24px; }
.hero .buttons { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.hero .buttons .under-link { align-self: center; }
.hero .quote { display: flex; flex-direction: column; gap: 6px; max-width: 440px; }
.hero .quote .q { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(18px, 15.6px + .6vw, 24px); line-height: 1.3; color: var(--ink); }
.hero .quote .by { font-size: 14px; color: var(--muted); }

@media (min-width: 768px) {
  .hero .wrap { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 24px; }
  .hero .photo { order: 2; height: auto; min-height: 640px; margin: 0; }
  .hero .arch { left: 5%; right: 5%; height: 75%; }
  .hero .cutout { left: 0; width: 100%; height: 97%; transform: none; object-fit: cover; object-position: top center; }
  .hero .photo .fade { display: none; }
  .hero .words { justify-content: center; gap: 56px; margin: 0; padding: 64px 0 88px; }
  .hero .buttons { flex-direction: row; align-items: center; gap: 28px; }
  .hero .city { font-family: var(--sans); font-style: normal; font-size: clamp(16px, 13px + .6vw, 22px); }
}
@media (min-width: 1024px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 32px; }
}
@media (min-width: 1200px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr) 580px; gap: 40px; }
  .hero .photo { min-height: 860px; }
  .hero .words { padding-bottom: 24px; }
}

/* Координаты листьев первого экрана (из макета, переведены в доли). */
.hero .lf1 { left: 92%; top: 14%; width: 48px; --dx: -760px; --dy: 520px; --d: 22s; --dl: -3s; }
.hero .lf2 { left: 92%; top: 44%; width: 36px; --dx: -820px; --dy: 380px; --d: 26s; --dl: -14s; }
.hero .lf3 { left: 70%; top: -7%; width: 40px; --dx: -600px; --dy: 700px; --d: 30s; --dl: -8s; }
.hero .lf4 { left: 92%; top: 70%; width: 30px; --dx: -700px; --dy: 260px; --d: 24s; --dl: -19s; }
.hero .lf5 { left: 92%; top: 5%; width: 26px; --dx: -900px; --dy: 420px; --d: 25s; --dl: -11s; }
.hero .lf6 { left: 83%; top: 29%; width: 42px; --dx: -1000px; --dy: 500px; --d: 29s; --dl: -21s; }
.hero .lf7 { left: 92%; top: 56%; width: 34px; --dx: -800px; --dy: 320px; --d: 21s; --dl: -7s; }
.hero .lf8 { left: 62%; top: -7%; width: 38px; --dx: -700px; --dy: 800px; --d: 33s; --dl: -27s; }
.hero .lf9 { left: 42%; top: -7%; width: 32px; --dx: -500px; --dy: 850px; --d: 27s; --dl: -17s; }
.hero .lf10 { left: 100%; top: 49%; width: 84px; --dx: -900px; --dy: 520px; --d: 34s; --dl: -25s; }
.hero .lf11 { left: 62%; top: -12%; width: 70px; --dx: -400px; --dy: 950px; --d: 38s; --dl: -5s; }
.hero .lf12 { left: 52%; top: -9%; width: 60px; --dx: -300px; --dy: 950px; --d: 36s; --dl: -12s; }
.hero .r1 { --r0: 10deg; --f: 4.5s; }
.hero .r2 { --r0: -20deg; --f: 3.8s; }
.hero .r3 { --r0: 40deg; --f: 5.2s; }
.hero .r4 { --r0: 0deg; --f: 4.2s; }
.hero .r5 { --r0: 60deg; --f: 4s; }
.hero .r6 { --r0: -40deg; --f: 5s; }
.hero .r7 { --r0: 15deg; --f: 4.3s; }
.hero .r8 { --r0: -60deg; --f: 5.5s; }
.hero .r9 { --r0: 20deg; --f: 4.6s; }
.hero .r10 { --r0: -15deg; --f: 6s; }
.hero .r11 { --r0: 30deg; --f: 6.5s; }
.hero .r12 { --r0: 10deg; --f: 6s; }
.hero .front1 { left: 48%; top: 86%; width: clamp(120px, 16vw, 230px); --r0: -28deg; --d: 9s; }
.hero .front2 { right: -60px; top: -40px; width: clamp(120px, 14.6vw, 210px); --r0: 150deg; --d: 11s; }
.hero .front3 { left: -40px; bottom: -40px; width: clamp(110px, 12vw, 170px); --r0: 20deg; --d: 10s; }
.hero .shadow { top: 13%; right: -60px; width: 640px; height: 600px; }
@media (max-width: 767px) {
  .hero .shadow { top: 4%; right: -260px; width: 520px; height: 480px; }
  .hero .front1 { display: none; }
}

/* ─── Секции ─────────────────────────────────────────────────────────────── */

.sec { padding-top: var(--section); }
.sec-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px 32px;
}
.h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: -.02em;
}

/* ─── Курсы ──────────────────────────────────────────────────────────────── */

.courses {
  position: relative;
  overflow: hidden;
  background: var(--dark);
  color: #fff;
  padding: clamp(64px, 40px + 6vw, 120px) 0;
}
.courses .wrap { position: relative; display: flex; flex-direction: column; gap: clamp(36px, 24px + 3vw, 64px); }
.courses .intro { display: grid; gap: 24px; align-items: end; }
@media (min-width: 1024px) { .courses .intro { grid-template-columns: minmax(0, 1fr) 420px; gap: 96px; } }
.courses h2 { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 28px; }
.courses h2 .a {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-courses);
  line-height: .9;
  letter-spacing: -.03em;
}
.courses h2 .b {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(52px, 36.7px + 3.9vw, 96px);
  line-height: 1.1;
  color: var(--lime);
}
.courses .intro p { font-size: clamp(16px, 14.8px + .3vw, 19px); line-height: 1.6; color: var(--on-dark-text); }
.courses .access { font-size: 15px; color: var(--on-dark-2); }
.courses .none {
  display: grid;
  gap: 20px;
  padding: clamp(28px, 20px + 3vw, 56px);
  background: var(--head);
  color: var(--dark);
  border-radius: var(--r-card);
}
.courses .none p { font-size: var(--fs-body); color: var(--ink-2); max-width: 640px; }
.courses .none p a { color: var(--ink); border-bottom: 1px solid currentColor; }
.courses .none .h { font-family: var(--serif); font-weight: 300; font-size: var(--fs-card); line-height: 1; }

.course {
  position: relative;
  display: grid;
  border-radius: var(--r-card);
  overflow: hidden;
  color: var(--dark);
}
@media (min-width: 1024px) { .course { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.course .main {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 16px + 1vw, 28px);
  padding: clamp(22px, 12px + 3vw, 56px);
  background: var(--head);
}
.course h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(44px, 33.3px + 2.7vw, 76px);
  line-height: .98;
  letter-spacing: -.02em;
}
.course .sum { max-width: 480px; font-size: var(--fs-body); line-height: 1.6; color: var(--ink-2); }
.course .terms { font-size: clamp(15px, 14.4px + .2vw, 17px); line-height: 1.6; color: var(--ink-2); }
.course .terms b { color: var(--ink); font-weight: 600; }
.course .acts { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.course .acts .under-link { align-self: center; color: var(--dark); }
@media (min-width: 768px) {
  .course .acts { flex-direction: row; align-items: center; gap: 28px; }
}
.course .side { display: flex; flex-direction: column; background: var(--lime); }
.course .side img { width: 100%; height: clamp(200px, 26vw, 300px); object-fit: cover; object-position: 50% 40%; }
.course .side .prog { display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 12px + 2vw, 36px) clamp(22px, 12px + 3vw, 56px) clamp(28px, 20px + 2vw, 48px); }
.course .prog .h { font-size: 16px; font-weight: 600; color: var(--btn); }
.course .prog ol li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--program-line);
  font-size: clamp(15px, 14.4px + .2vw, 17px);
  line-height: 1.4;
}
.course .prog ol li:first-child { border-top-color: var(--dark); }
.course .prog ol li .n { font-family: var(--serif); font-size: 17px; color: var(--accent); }
@media (min-width: 768px) {
  .course .prog ol li { grid-template-columns: 56px minmax(0, 1fr); }
  .course .prog ol li .n { font-size: 22px; }
}
.course .desc { font-size: clamp(15px, 14.4px + .2vw, 17px); line-height: 1.6; white-space: pre-line; }

.courses .c-lf1 { left: 100%; top: 4%; width: 40px; --dx: -900px; --dy: 420px; --d: 30s; --dl: -6s; }
.courses .c-lf2 { left: 100%; top: 25%; width: 30px; --dx: -700px; --dy: 500px; --d: 36s; --dl: -20s; }
.courses .c-lf3 { left: 76%; top: -5%; width: 34px; --dx: -600px; --dy: 700px; --d: 40s; --dl: -31s; }
.courses .cr1 { --r0: 20deg; --f: 5s; }
.courses .cr2 { --r0: -30deg; --f: 4.4s; }
.courses .cr3 { --r0: 60deg; --f: 5.5s; }
.courses .c-front1 { right: -70px; top: -50px; width: clamp(140px, 18vw, 260px); opacity: .85; --r0: 150deg; --d: 11s; }
.courses .c-front2 { left: -60px; bottom: 120px; width: clamp(120px, 14vw, 200px); opacity: .7; --r0: -20deg; --d: 9s; }

/* ─── Обо мне и документы ───────────────────────────────────────────────── */

.about-grid { display: grid; gap: 32px; }
.about-grid .ph { display: flex; flex-direction: column; gap: 32px; }
.about-grid .ph img {
  width: 100%;
  aspect-ratio: 460 / 640;
  max-height: 640px;
  object-fit: cover;
  object-position: 50% 0%;
  border-radius: var(--r-photo);
}
.about-grid .text { display: flex; flex-direction: column; gap: 40px; }
.about-grid .words { display: flex; flex-direction: column; gap: 22px; max-width: 680px; }
.about-grid .lead { font-family: var(--serif); font-weight: 300; font-size: var(--fs-lead); line-height: 1.35; }
.about-grid .words p:not(.lead) { line-height: 1.7; color: var(--ink-2); }
@media (min-width: 768px) and (max-width: 1023px) {
  .about-grid .ph img { aspect-ratio: 4 / 3; object-position: 50% 15%; }
}
@media (min-width: 1024px) {
  .about-grid { grid-template-columns: minmax(0, .75fr) minmax(0, 1fr); gap: 48px; }
  .about-grid .text { padding-top: 86px; gap: 48px; }
  .about-grid .ph img { margin-top: 16px; }
}
.facts { display: flex; flex-direction: column; }
.facts div {
  display: grid;
  gap: 4px;
  padding: 16px 0;
  border-top: 1px solid var(--line-2);
}
.facts div:first-child { border-top-color: var(--ink); }
.facts div:last-child { border-bottom: 1px solid var(--line-2); }
.facts dt { font-size: var(--fs-small); color: var(--muted); }
.facts dd { font-size: var(--fs-body); line-height: 1.5; }
@media (min-width: 1200px) {
  .about-grid { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 96px; }
}
@media (min-width: 768px) {
  .facts div { grid-template-columns: minmax(120px, 30%) minmax(0, 1fr); gap: 24px; padding: 20px 0; }
  .facts dt { padding-top: 2px; }
}

.docs { display: flex; flex-direction: column; gap: 28px; padding-top: clamp(64px, 40px + 5vw, 110px); }
.docs h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 18.6px + 1.9vw, 48px); letter-spacing: -.01em; }
.docs .total { font-size: var(--fs-small); color: var(--muted); }
.docs .group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 24px;
  border-top: 1px solid var(--ink);
}
.docs .group-head .t { font-family: var(--serif); font-size: clamp(20px, 16.6px + .9vw, 30px); }
.docs .group-head .n { font-size: 14px; color: var(--muted); }
.docs .group-head .n .w { display: none; }
@media (min-width: 768px) { .docs .group-head .n .w { display: inline; } }
.docs .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
.docs .grid + .group-head { margin-top: 24px; }
@media (min-width: 768px) { .docs .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; } }
@media (min-width: 1200px) {
  .docs .grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
  .docs .grid.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 32px; }
}
.cert { display: flex; flex-direction: column; gap: 10px; color: var(--ink); }
.cert .frame {
  display: grid;
  place-items: center;
  aspect-ratio: 1.15;
  padding: 8px;
  overflow: hidden;
  background: #EEF1E3;
}
.cert .frame img { width: 100%; height: 100%; object-fit: contain; }
.cert .name { font-size: clamp(14px, 13.2px + .2vw, 16px); font-weight: 500; line-height: 1.35; }
.cert .cap { font-size: 13px; line-height: 1.45; color: var(--muted); }
.cert .cap.long { display: none; }
@media (min-width: 1200px) {
  .cert .frame { padding: 0; background: none; border: 1px solid var(--line-2); }
  .cert.land .frame { aspect-ratio: 1.414; }
  .cert.land .frame img { object-fit: cover; }
  .cert.port .frame { aspect-ratio: .707; }
  .cert.port .frame img { object-fit: cover; }
  .cert.port.in-land .frame { aspect-ratio: 1.414; background: #EEF1E3; }
  .cert.port.in-land .frame img { object-fit: contain; }
  .cert .cap { font-size: 14px; }
  .cert .cap.long { display: block; }
  .cert .cap.short { display: none; }
}
@media (hover: hover) {
  .cert:hover { color: var(--accent); }
  .cert:hover .frame { outline: 1px solid var(--accent); }
}

/* Просмотр документа по нажатию. */
.viewer {
  width: min(96vw, 1100px);
  max-height: 94vh;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--head);
  overflow: hidden;
}
.viewer::backdrop { background: rgba(31, 39, 21, .78); }
.viewer img { width: 100%; height: auto; max-height: calc(94vh - 64px); object-fit: contain; background: #fff; }
.viewer .bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 10px 10px 20px; }
.viewer .cap { font-size: 15px; font-weight: 500; line-height: 1.35; }
.viewer .x {
  flex: none;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--lime-1);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* ─── Услуги и цены на главной ──────────────────────────────────────────── *
 * Строки прайса без фотографий: название и что внутри слева, цена справа.
 * На компьютере — в две колонки. */

.dirs { margin-top: clamp(28px, 20px + 2vw, 48px); }
.dirs .list { display: grid; grid-template-columns: minmax(0, 1fr); }
.dir {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name price" "sub count";
  align-items: baseline;
  column-gap: 16px;
  row-gap: 8px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.dir:first-child { border-top: 1px solid var(--line); }
.dir .name { grid-area: name; font-family: var(--serif); font-weight: 300; font-size: var(--fs-dir); line-height: 1.05; transition: color .25s; }
.dir .sub { grid-area: sub; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.dir .meta { display: contents; }
.dir .price { grid-area: price; justify-self: end; font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 17px + .7vw, 26px); white-space: nowrap; }
.dir .count { grid-area: count; justify-self: end; font-size: 13px; color: var(--muted); white-space: nowrap; }
.price-note { font-size: var(--fs-small); line-height: 1.6; color: var(--muted); max-width: 600px; }

@media (min-width: 768px) {
  .dir { column-gap: 24px; row-gap: 10px; padding: 26px 0; }
  .dir .count { font-size: 14px; }
}
@media (min-width: 1024px) {
  .dirs .list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 80px; }
  .dir { padding: 30px 0; }
  .dir:nth-child(2) { border-top: 1px solid var(--line); }
}
@media (hover: hover) {
  .dir:hover .name { color: var(--btn); }
}
.price-note.home { margin-top: 20px; }

/* ─── Первый визит ──────────────────────────────────────────────────────── */

.first {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 24px;
  margin-top: clamp(40px, 30px + 2vw, 48px);
  padding: clamp(24px, 12px + 3.2vw, 64px);
  background: var(--lime);
  border-radius: clamp(24px, 20px + 1vw, 32px);
}
.first > .t, .first > .p, .first > .btn { position: relative; }
.first .t { display: flex; flex-direction: column; gap: 14px; }
.first .h { font-family: var(--serif); font-weight: 300; font-size: var(--fs-card); line-height: 1; letter-spacing: -.02em; }
.first .s { max-width: 420px; line-height: 1.6; color: var(--ink-2); }
.first .p { display: flex; flex-direction: column; gap: 10px; }
.first .sum { font-family: var(--serif); font-weight: 300; font-size: clamp(64px, 48.6px + 3.95vw, 104px); line-height: .85; letter-spacing: -.02em; color: var(--btn); white-space: nowrap; }
.first .sum .r { font-size: .46em; }
.first .dur { font-size: clamp(15px, 14.4px + .2vw, 17px); color: var(--ink-2); }
@media (min-width: 768px) {
  .first { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 48px; }
  .first .t { grid-column: 1 / -1; }
  .first .btn { justify-self: end; }
}
@media (min-width: 1200px) {
  .first { grid-template-columns: minmax(0, 1fr) auto auto; gap: 64px; }
  .first .t { grid-column: auto; }
}
.first .f-lf1 { left: 92%; top: -14%; width: 34px; --dx: -900px; --dy: 320px; --d: 24s; --dl: -6s; }
.first .f-lf2 { left: 92%; top: 50%; width: 26px; --dx: -1000px; --dy: 200px; --d: 28s; --dl: -17s; }
.first .f-lf3 { left: 50%; top: -20%; width: 30px; --dx: -500px; --dy: 380px; --d: 30s; --dl: -11s; }
.first .fr1 { --r0: 10deg; --f: 4.5s; }
.first .fr2 { --r0: -20deg; --f: 3.8s; }
.first .fr3 { --r0: 40deg; --f: 5.2s; }
.first .f-front { right: -70px; bottom: -60px; width: clamp(120px, 15vw, 220px); opacity: .8; --r0: 200deg; --d: 10s; position: absolute; }

/* ─── Отзывы ─────────────────────────────────────────────────────────────── */

.reviews {
  margin-top: var(--section);
  padding: clamp(64px, 40px + 6vw, 120px) 0;
  background: var(--lime-1);
}
.reviews .wrap { display: flex; flex-direction: column; gap: clamp(32px, 20px + 4vw, 72px); }
.reviews .sec-head { align-items: flex-end; flex-wrap: nowrap; }
.reviews .h2 { line-height: 1; }
.rating { display: flex; align-items: flex-end; gap: clamp(12px, 8px + 1.3vw, 28px); }
.rating .v { font-family: var(--serif); font-weight: 300; font-size: clamp(56px, 31px + 6.4vw, 120px); line-height: .8; letter-spacing: -.03em; }
.rating .t { display: flex; flex-direction: column; gap: 10px; padding-bottom: 4px; font-size: clamp(13px, 12px + .3vw, 16px); color: var(--ink-2); line-height: 1.3; }
.rating .t .under-link { padding-top: 0; align-self: flex-start; color: var(--ink); }
.rating .t .under-link.d { display: none; }
@media (min-width: 768px) { .rating .t .under-link.d { display: inline-block; } .reviews .more.m { display: none; } }
.reviews .grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1024px) { .reviews .grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(48px, 6.7vw, 96px); } }
.review-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: clamp(24px, 12px + 3.2vw, 56px);
  background: var(--dark);
  color: var(--on-dark);
  border-radius: clamp(24px, 20px + 1vw, 32px);
}
.review-main .h { font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 21.4px + 2.2vw, 52px); line-height: 1.12; color: var(--lime); letter-spacing: -.01em; }
.review-main blockquote { font-size: clamp(15px, 13.6px + .4vw, 19px); line-height: 1.65; color: var(--on-dark-text); }
.review-main figcaption { font-size: 14px; color: var(--on-dark-2); }
.review-side { display: flex; flex-direction: column; gap: 40px; }
.review {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 28px;
  border-top: 1px solid var(--program-line);
}
.review .h { font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 19.4px + .7vw, 30px); line-height: 1.12; letter-spacing: -.01em; }
.review blockquote { font-size: clamp(15px, 14.4px + .2vw, 16px); line-height: 1.65; color: var(--ink-2); }
.review figcaption { font-size: 14px; color: var(--muted); }

/* ─── Частые вопросы ────────────────────────────────────────────────────── */

.faq { display: grid; gap: 28px; padding-block: var(--section); }
@media (min-width: 1024px) { .faq { grid-template-columns: minmax(0, .6fr) minmax(0, 1fr); gap: 56px; } }
@media (min-width: 1200px) { .faq { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 80px; } }
.faq .side { display: flex; flex-direction: column; gap: 24px; }
.faq .ask { order: 3; padding-top: 24px; font-size: clamp(15px, 14.4px + .2vw, 17px); line-height: 1.6; color: var(--ink-2); border-top: 1px solid var(--line); }
.faq .ask a { border-bottom: 1px solid var(--ink); }
@media (min-width: 1024px) {
  .faq .ask { order: 0; margin-top: 16px; padding-top: 28px; }
  .faq .ask.m { display: none; }
}
@media (max-width: 1023px) { .faq .side .ask { display: none; } }
.qa { display: flex; flex-direction: column; }
.qa details { border-top: 1px solid var(--line); }
.qa details:last-child { border-bottom: 1px solid var(--line); }
.qa summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  min-height: 44px;
  padding: clamp(18px, 14px + 1vw, 28px) 0;
  list-style: none;
  cursor: pointer;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary .q { font-family: var(--serif); font-size: clamp(19px, 15.6px + .9vw, 30px); line-height: 1.2; }
.qa summary .plus { flex: none; font-size: 28px; font-weight: 300; line-height: 1; color: var(--accent); transition: transform .25s; }
.qa details[open] summary .plus { transform: rotate(45deg); }
.qa details p { padding: 0 0 clamp(20px, 16px + 1vw, 32px); font-size: var(--fs-body); line-height: 1.65; color: var(--ink-2); }
@media (min-width: 768px) { .qa details p { padding-right: 80px; } }
@media (hover: hover) { .qa summary:hover .q { color: var(--accent); } }

/* ─── Страницы с заголовком (услуги, запись, документы, кабинет) ───────── */

.page-head { padding-top: clamp(32px, 20px + 3vw, 64px); }
.h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-h1);
  line-height: 1;
  letter-spacing: -.025em;
}
.h1 em { font-weight: 300; }

/* Услуги: шапка с фото, растворённым в фон. */
.svc-hero { position: relative; overflow: hidden; background: var(--head); }
.svc-hero .wrap { position: relative; display: grid; }
.svc-hero .ph { position: relative; height: clamp(260px, 70vw, 360px); margin-inline: calc(-1 * var(--pad)); }
.svc-hero .ph img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.svc-hero .t { position: relative; display: flex; flex-direction: column; gap: 28px; margin-top: -48px; padding-bottom: 48px; }
.svc-hero .h1 { line-height: .95; }
.svc-hero .h1 .l2 { display: block; }
.svc-hero .meet { display: flex; flex-direction: column; gap: 14px; }
.svc-hero .meet .meet-note { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.5; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  white-space: nowrap;
  background: var(--head);
}
@media (hover: hover) { .chips a:hover { border-color: var(--accent); } }
@media (min-width: 768px) {
  .svc-hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 560px; }
  .svc-hero .ph {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 52vw;
    max-width: 960px;
    height: auto;
    margin: 0;
    margin-right: calc(-1 * max(var(--pad), (100vw - var(--max)) / 2));
  }
  .svc-hero .ph img {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 35%);
    mask-image: linear-gradient(to right, transparent, #000 35%);
  }
  .svc-hero .t { margin: 0; padding: 72px 0 64px; justify-content: center; }
  .svc-hero .meet { flex-direction: row; align-items: center; gap: 24px; }
}
@media (min-width: 1200px) {
  .svc-hero .wrap { min-height: 730px; }
  .svc-hero .ph { right: calc(-1 * max(0px, (100vw - var(--max) - 2 * var(--pad)) / 2)); width: 50vw; }
}

.price-group { display: grid; gap: 20px; padding-top: clamp(40px, 30px + 3vw, 72px); scroll-margin-top: 16px; }
.price-group + .price-group { margin-top: clamp(16px, 8px + 2vw, 40px); border-top: 1px solid var(--line-2); }
.price-group .gh { display: flex; flex-direction: column; gap: 4px; }
.price-group .gh .t { font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 23.6px + 1.6vw, 48px); line-height: 1.05; }
.price-group .gh .n { font-size: 14px; color: var(--muted); }
@media (min-width: 1024px) {
  .price-group { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 48px; }
}
.prices { display: flex; flex-direction: column; }
.price-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name price" "desc desc" "dur book";
  align-items: baseline;
  gap: 8px 16px;
  padding: 18px 0;
  border-top: 1px solid var(--line-2);
}
.price-row:last-child { border-bottom: 1px solid var(--line-2); }
.price-row .name { grid-area: name; font-size: clamp(16px, 15.4px + .2vw, 18px); font-weight: 500; line-height: 1.35; }
.price-row .desc { grid-area: desc; font-size: 14px; line-height: 1.5; color: var(--muted); }
.price-row .dur { grid-area: dur; font-size: 13px; color: var(--muted); white-space: nowrap; }
.price-row .price { grid-area: price; font-family: var(--serif); font-size: clamp(19px, 17px + .5vw, 22px); white-space: nowrap; text-align: right; }
.price-row .book { grid-area: book; justify-self: end; }
@media (min-width: 768px) {
  .price-row {
    grid-template-columns: minmax(0, 1fr) 96px 130px 140px;
    grid-template-areas: "name dur price book" "desc dur price book";
    align-items: center;
    column-gap: 20px;
    row-gap: 4px;
    padding: 22px 14px;
    margin-inline: -14px;
  }
  .price-row .name, .price-row .desc { align-self: end; }
  .price-row .desc { align-self: start; }
  .price-row .dur { font-size: 14px; }
  .price-row .price { text-align: right; }
}
/* На компьютере описание и «Записаться» — по наведению на строку;
 * на тач-экранах видны сразу. */
@media (min-width: 768px) and (hover: hover) {
  .price-row { transition: background-color .2s; }
  .price-row .desc, .price-row .book { opacity: 0; transition: opacity .2s; }
  .price-row:hover, .price-row:focus-within { background: var(--lime-1); }
  .price-row:hover .desc, .price-row:hover .book,
  .price-row:focus-within .desc, .price-row:focus-within .book { opacity: 1; }
}

.custom-req {
  display: grid;
  gap: 24px;
  margin-top: clamp(56px, 40px + 4vw, 110px);
  padding: clamp(24px, 12px + 3.2vw, 56px);
  background: var(--lime-1);
  border-radius: var(--r-card);
}
.custom-req .h { font-family: var(--serif); font-weight: 300; font-size: var(--fs-card); line-height: 1; letter-spacing: -.02em; }
.custom-req p { line-height: 1.6; color: var(--ink-2); max-width: 560px; }
.custom-req dl { display: flex; flex-direction: column; }
.custom-req dl div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--program-line); }
.custom-req dl div:last-child { border-bottom: 1px solid var(--program-line); }
.custom-req dt { color: var(--muted); font-size: 15px; }
.custom-req dd { font-size: 16px; }
@media (min-width: 1024px) {
  .custom-req { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; }
  .custom-req .btn { justify-self: start; }
}
.svc-tail { padding-bottom: var(--section); }

/* ─── Запись ─────────────────────────────────────────────────────────────── */

.book-page { padding-bottom: var(--section); }
.book-grid { display: grid; gap: 48px; margin-top: clamp(32px, 24px + 2vw, 56px); }
@media (min-width: 1024px) {
  .book-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(40px, 5vw, 96px); align-items: start; }
}
.steps { display: flex; flex-direction: column; gap: clamp(36px, 28px + 2vw, 56px); }
.step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 12px; scroll-margin-top: 16px; }
@media (min-width: 768px) { .step { grid-template-columns: 44px minmax(0, 1fr); } }
.step .num { font-family: var(--serif); font-size: clamp(18px, 16px + .5vw, 24px); color: var(--accent); line-height: 1.3; }
.step .body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.step h2 { font-size: clamp(17px, 16px + .3vw, 20px); font-weight: 600; line-height: 1.3; }
.step.muted .num, .step.muted h2 { color: var(--muted); opacity: .6; }
.step .hint { font-size: 13px; color: var(--muted); line-height: 1.5; }
.step .hint a, .step .all { color: var(--accent); border-bottom: 1px solid currentColor; }
.step .all { align-self: flex-start; font-size: 14px; }

.select {
  position: relative;
  display: block;
}
.select select, .field .f {
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--head);
  color: var(--ink);
  font: 500 16px/1.4 var(--sans);
  appearance: none;
  -webkit-appearance: none;
}
.select select { padding-right: 44px; cursor: pointer; }
.select::after {
  content: '';
  position: absolute;
  right: 20px; top: 50%;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.select select:focus, .field .f:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(78, 102, 25, .15); }
.field .f::placeholder { color: #8C9180; }
.field textarea.f { min-height: 110px; resize: vertical; }
.pick-row { display: flex; gap: 12px; align-items: stretch; }
.pick-row .select { flex: 1; }
.pick-row .btn { min-height: 54px; }
.js .pick-row .go { display: none; }

.days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
@media (min-width: 768px) { .days { gap: 8px; } }
.days .wd { padding-bottom: 2px; font-size: 12px; color: var(--muted); text-align: center; }
.day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: 6px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--head);
  color: var(--ink);
  line-height: 1.1;
}
@media (min-width: 768px) { .day { min-height: 66px; border-radius: 14px; } }
.day .d { font-family: var(--serif); font-size: clamp(18px, 16px + .5vw, 24px); }
.day .m { font-size: 10px; color: var(--muted); }
.day.off { background: transparent; border-style: dashed; color: #A7AC9B; }
.day.off .m { color: #A7AC9B; }
.day.hole { visibility: hidden; }
.day.on { background: var(--btn); border-color: var(--btn); color: var(--bg); }
.day.on .m { color: var(--lime); }
.day.today { box-shadow: inset 0 0 0 1px var(--accent); }
@media (hover: hover) { a.day:hover { border-color: var(--accent); color: var(--ink); } a.day.on:hover { color: var(--bg); } }
.month { font-size: 14px; font-weight: 600; color: var(--ink-2); grid-column: 1 / -1; padding-top: 8px; }
.month:first-child { padding-top: 0; }

.times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 768px) { .times { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; } }
.time {
  display: grid;
  place-items: center;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--head);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.time.on { background: var(--btn); border-color: var(--btn); color: var(--bg); }
@media (hover: hover) { a.time:hover { border-color: var(--accent); color: var(--ink); } a.time.on:hover { color: var(--bg); } }

.form { display: flex; flex-direction: column; gap: 16px; }
.form .two { display: grid; gap: 16px; }
@media (min-width: 768px) { .form .two { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field .lbl { font-size: 13px; color: var(--muted); }
.field .lbl .opt { color: #8C9180; }
.field .hint { font-size: 12px; color: var(--muted); line-height: 1.5; }
.consent {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  cursor: pointer;
}
.consent input {
  width: 20px; height: 20px;
  margin: 1px 0 0;
  accent-color: var(--btn);
  cursor: pointer;
}
.consent a { border-bottom: 1px solid currentColor; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.summary-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(24px, 18px + 1.5vw, 40px);
  background: var(--lime-1);
  border-radius: var(--r-card);
}
@media (min-width: 1024px) { .summary-card { position: sticky; top: 24px; } }
.summary-card .k { font-size: 14px; font-weight: 600; color: var(--btn); }
.summary-card .svc { display: flex; flex-direction: column; gap: 6px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.summary-card .svc .t { font-family: var(--serif); font-size: clamp(24px, 21px + .6vw, 30px); line-height: 1.15; }
.summary-card .small { font-size: 13px; color: var(--muted); }
.summary-card .when { display: flex; flex-direction: column; gap: 6px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.summary-card .when .t { font-family: var(--serif); font-size: clamp(28px, 24px + 1vw, 38px); line-height: 1.1; }
.summary-card .when .t.empty { font-size: 20px; color: var(--muted); }
.summary-card .cost { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.summary-card .cost .l { font-size: 18px; }
.summary-card .cost .v { font-family: var(--serif); font-size: clamp(24px, 21px + .6vw, 30px); white-space: nowrap; }
.summary-card .btn { width: 100%; }
.summary-card .under { font-size: 12px; line-height: 1.5; color: var(--muted); }

/* ─── Заметки, ошибки, мелочи ───────────────────────────────────────────── */

.note {
  padding: 16px 20px;
  border-radius: 16px;
  background: var(--lime-1);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
.note a { border-bottom: 1px solid currentColor; }
.note.warn { background: var(--warn-bg); color: var(--warn); }
.note.ok { background: var(--ok-bg); color: var(--ink); }
.muted { color: var(--muted); }
.lead-p { font-size: clamp(16px, 15px + .3vw, 19px); line-height: 1.6; color: var(--ink-2); max-width: 680px; }
.under { font-size: 13px; line-height: 1.5; color: var(--muted); }
.under a { border-bottom: 1px solid currentColor; }

/* ─── Итог записи, курсы, ошибки — узкие страницы ───────────────────────── */

.narrow { max-width: 720px; }
.simple { padding-bottom: var(--section); }
.simple .body { display: flex; flex-direction: column; gap: 24px; margin-top: clamp(24px, 20px + 1vw, 40px); }
.simple .acts { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 768px) { .simple .acts { flex-direction: row; flex-wrap: wrap; align-items: center; } }
.kv { display: flex; flex-direction: column; }
.kv div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.kv div:last-child { border-bottom: 1px solid var(--line); }
.kv dt, .kv .k { color: var(--muted); font-size: 15px; }
.kv dd, .kv .v { font-size: 16px; text-align: right; }
.tick {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--lime);
  font-size: 30px;
  color: var(--btn);
}
.cards { display: flex; flex-direction: column; gap: 16px; }
.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 16px + 1vw, 28px);
  background: var(--head);
  border: 1px solid var(--line-2);
  border-radius: 20px;
}
.card .t { font-family: var(--serif); font-size: clamp(22px, 20px + .5vw, 28px); line-height: 1.15; }
.card .row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.card .p { font-family: var(--serif); font-size: 20px; white-space: nowrap; }
.card p { color: var(--ink-2); line-height: 1.55; }
.how { display: flex; flex-direction: column; counter-reset: how; }
.how li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  padding: 16px 0;
  border-top: 1px solid var(--line-2);
  line-height: 1.55;
  color: var(--ink-2);
  counter-increment: how;
}
.how li::before { content: counter(how, decimal-leading-zero); font-family: var(--serif); color: var(--accent); }
.how li:last-child { border-bottom: 1px solid var(--line-2); }

/* ─── Документы (оферта, политика, согласие) ────────────────────────────── */

.doc-page { padding-bottom: var(--section); }
.doc-grid { display: grid; gap: 40px; margin-top: clamp(28px, 20px + 2vw, 56px); }
@media (min-width: 1024px) { .doc-grid { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); align-items: start; } }
.doc-nav { display: flex; flex-direction: column; }
.doc-nav .k { padding-bottom: 12px; font-size: 14px; font-weight: 600; color: var(--btn); }
.doc-nav a { padding: 14px 0; border-top: 1px solid var(--line-2); font-size: 15px; line-height: 1.4; }
.doc-nav a:last-child { border-bottom: 1px solid var(--line-2); }
.doc-nav a.here { color: var(--accent); font-weight: 600; }
@media (min-width: 1024px) { .doc-nav { position: sticky; top: 24px; } .doc-nav.end { display: none; } }
@media (max-width: 1023px) { .doc-nav.start { display: none; } }
.doc-meta { font-size: 14px; color: var(--muted); }
.doc {
  max-width: 760px;
  font-size: clamp(15px, 14.6px + .15vw, 17px);
  line-height: 1.7;
  color: var(--ink-2);
}
.doc h2 {
  margin: 40px 0 12px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 19.4px + .7vw, 30px);
  line-height: 1.2;
  color: var(--ink);
}
.doc h2:first-child { margin-top: 0; }
.doc h3 { margin: 24px 0 8px; font-size: 17px; font-weight: 600; color: var(--ink); }
.doc p, .doc ul, .doc ol { margin: 0 0 14px; }
.doc ul { padding-left: 20px; list-style: disc; }
.doc ol { padding-left: 22px; list-style: decimal; }
.doc li { margin-bottom: 6px; }
.doc a { color: var(--accent); border-bottom: 1px solid currentColor; }
.doc table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 15px; }
.doc td, .doc th { padding: 10px 8px; border-top: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.doc th { color: var(--ink); font-weight: 600; }
.doc .muted { color: var(--muted); }
.doc .lead { font-size: 1.05em; color: var(--ink); }

/* ─── Полоска ожидания перехода (nav.js) ─────────────────────────────────── */

.loading {
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 50% 100%;
  animation: loading 1s linear infinite;
}
@keyframes loading { from { background-position: -50% 0; } to { background-position: 150% 0; } }

/* ─── Нажатия и переходы между страницами ───────────────────────────────── */

/* Голубая подсветка наследуется, поэтому гасится один раз на корне. */
html { -webkit-tap-highlight-color: transparent; }

/* Двойной тап на телефоне — это «увеличить»; браузер ждёт его после каждого
   нажатия, отсюда задержка перед откликом. Увеличивать здесь нечего. */
a, button, label, summary, input[type="checkbox"], input[type="radio"] {
  touch-action: manipulation;
}

/* Переходы между страницами. Включается одной строкой, всё остальное —
   настройка того, что браузер и так умеет. Направление (forward/back)
   ставит nav.js. */
@view-transition { navigation: auto; }

::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: .16s;
  animation-timing-function: cubic-bezier(.22, .8, .3, 1);
}

@keyframes screen-in-right { from { transform: translateX(20px); opacity: 0; } }
@keyframes screen-out-left { to { transform: translateX(-12px); opacity: 0; } }
@keyframes screen-in-left { from { transform: translateX(-20px); opacity: 0; } }
@keyframes screen-out-right { to { transform: translateX(12px); opacity: 0; } }

html:active-view-transition-type(forward)::view-transition-old(root),
html:active-view-transition-type(forward)::view-transition-new(root),
html:active-view-transition-type(back)::view-transition-old(root),
html:active-view-transition-type(back)::view-transition-new(root) {
  mix-blend-mode: normal;
}
html:active-view-transition-type(forward)::view-transition-old(root) {
  animation: screen-out-left .12s cubic-bezier(.22, .8, .3, 1) both;
}
html:active-view-transition-type(forward)::view-transition-new(root) {
  animation: screen-in-right .2s cubic-bezier(.22, .8, .3, 1) both;
}
html:active-view-transition-type(back)::view-transition-old(root) {
  animation: screen-out-right .12s cubic-bezier(.22, .8, .3, 1) both;
}
html:active-view-transition-type(back)::view-transition-new(root) {
  animation: screen-in-left .2s cubic-bezier(.22, .8, .3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .loading { animation: none; opacity: .5; }
}

/* ─── Добавки для простых страниц ───────────────────────────────────────── */
.small-h { font-size: clamp(30px, 24px + 1.5vw, 44px); margin-top: 24px; }
.simple .page-head { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.pre { white-space: pre-line; line-height: 1.65; color: var(--ink-2); }
.summary-card .kv div { border-color: var(--line); }
.summary-card .kv dd { text-align: right; }
.doc-meta.m { margin-bottom: 20px; }
@media (min-width: 1024px) { .doc-meta.m { display: none; } }
.doc ul { list-style: none; padding-left: 0; }
.doc ul li { position: relative; padding-left: 20px; }
.doc ul li::before { content: '–'; position: absolute; left: 0; color: var(--accent); }
.doc-nav .doc-meta { padding-top: 14px; font-size: 13px; }
.doc-page .lead-p { margin-top: 24px; }
.push { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.push[hidden] { display: none; }

/* ─── Кабинет клиента ───────────────────────────────────────────────────── */
/* Макет: разделы колонкой слева, содержимое справа. На телефоне разделы —
   сегментами под заголовком, «Выйти» — внизу профиля. */

.cab {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: clamp(28px, 16px + 3vw, 72px);
  padding-bottom: clamp(56px, 40px + 4vw, 96px);
}
.cab-main { display: contents; }
.cab-head { order: 0; display: flex; flex-direction: column; gap: 10px; }
.cab-nav { order: 1; }
.cab-main > :not(.cab-head) { order: 2; }
.cab-head .sub { font-size: 15px; color: var(--muted); }
.cab-head .sub .back { border-bottom: 1px solid currentColor; }
.cab-head .h1 { font-size: clamp(38px, 26px + 3.1vw, 72px); line-height: 1.02; letter-spacing: -.02em; overflow-wrap: anywhere; }

.cab-nav {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 4px;
  background: var(--lime-1);
  border-radius: 999px;
}
.cab-nav a, .cab-nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
}
.cab-nav a.on { background: var(--btn); color: var(--bg); font-weight: 600; }
.cab-nav .long { display: none; }
.cab-nav .out { display: none; }

@media (min-width: 1024px) {
  .cab {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }
  .cab-main { order: 1; display: flex; flex-direction: column; gap: 56px; min-width: 0; }
  .cab-nav {
    order: 0;
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0;
    background: none;
    border-radius: 0;
  }
  .cab-nav a, .cab-nav button { justify-content: flex-start; min-height: 48px; padding: 0 20px; font-size: 16px; }
  .cab-nav a.on { background: var(--lime-1); color: var(--ink); }
  .cab-nav .long { display: inline; }
  .cab-nav .short { display: none; }
  .cab-nav .out { display: block; margin-top: 20px; }
  .cab-nav .out button { min-height: 36px; font-size: 15px; color: var(--muted); }
  .out-m { display: none; }
}
@media (hover: hover) {
  .cab-nav a:not(.on):hover, .cab-nav button:hover { color: var(--accent); }
}

.cab-sec { display: flex; flex-direction: column; gap: 20px; }
.cab-sec.narrow { max-width: 640px; }
.cab-sec > .k { font-size: 17px; font-weight: 600; color: var(--btn); }
.sec-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.h2s { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 22px + 1.6vw, 44px); line-height: 1.1; }
.h3s { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 24px + 1vw, 36px); line-height: 1.1; }
.plain { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.plain b { font-weight: 600; }
.ul { border-bottom: 1px solid currentColor; }
.under-link.small { padding-top: 4px; font-size: 14px; }
.under-link.acc { color: var(--accent); }
.wide-only { display: none; }
@media (min-width: 768px) {
  .wide-only { display: inline-block; }
  .narrow-only { display: none; }
}
.js .no-js { display: none; }
button.quiet {
  padding: 8px 0;
  border: 0;
  background: none;
  font-size: 15px;
  color: var(--muted);
  cursor: pointer;
}
@media (hover: hover) { button.quiet:hover { color: var(--warn); } }

/* Ближайшая запись */
.next { display: flex; flex-direction: column; background: var(--lime-1); border-radius: 28px; }
.next .hd { display: flex; flex-direction: column; gap: 20px; padding: 24px 24px 0; }
.next .when { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); font-family: var(--serif); font-weight: 300; line-height: 1; }
.next .when .d { font-size: clamp(28px, 22px + 1.8vw, 60px); }
.next .when .t { font-size: clamp(28px, 22px + 1.8vw, 60px); color: var(--accent); }
.next .what { display: flex; flex-direction: column; gap: 4px; }
.next .what .n { font-size: clamp(19px, 17px + .5vw, 24px); font-weight: 500; line-height: 1.3; }
.next .what .m { font-size: 15px; color: var(--muted); }
.next .what .r { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.next .chip {
  align-self: flex-start;
  margin-bottom: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--bg);
  font-size: 13px;
  font-weight: 600;
  color: var(--btn);
}
.next .bar { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 20px 24px 18px; }
.next .bar form { display: flex; justify-content: center; }
@media (min-width: 768px) {
  .next .hd {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    padding: 48px 48px 40px;
    border-bottom: 1px solid var(--line);
  }
  .next .when { flex-direction: column; justify-content: center; gap: 6px; padding: 0; border: 0; }
  .next .what { justify-content: center; gap: 8px; padding-left: 48px; border-left: 1px solid var(--line); }
  .next .bar { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 48px; }
}

/* Строки: история, ещё записи, курсы к покупке */
.rows { display: flex; flex-direction: column; border-bottom: 1px solid var(--line-2); }
.line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "dt pr" "nm nm" "act act";
  gap: 2px 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line-2);
}
.line .dt { grid-area: dt; font-size: 13px; color: var(--muted); }
.line .nm { grid-area: nm; display: flex; flex-direction: column; font-size: 17px; font-weight: 500; line-height: 1.35; }
.line .st { font-size: 13px; font-weight: 400; color: var(--muted); }
.line .pr { grid-area: pr; font-size: 14px; white-space: nowrap; }
.line .act { grid-area: act; display: flex; gap: 20px; align-items: center; font-size: 14px; }
.line .act:empty { display: none; }
.line .act a { color: var(--accent); border-bottom: 1px solid currentColor; }
.line .act button.quiet { font-size: 14px; }
.line.offer { grid-template-areas: "nm pr"; align-items: baseline; }
.line.offer .pr { font-family: var(--serif); font-size: 20px; }
@media (min-width: 768px) {
  .line {
    grid-template-columns: 200px minmax(0, 1fr) auto;
    grid-template-areas: "dt nm act";
    align-items: baseline;
    gap: 16px;
    padding: 22px 0;
  }
  .line.hist { grid-template-areas: "dt nm pr"; grid-template-columns: 200px minmax(0, 1fr) 160px; }
  .line .dt { font-size: 15px; }
  .line .nm { font-size: 19px; }
  .line .pr { font-family: var(--serif); font-size: 22px; text-align: right; }
  .line.offer { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nm pr"; }
}
@media (hover: hover) { a.line:hover .nm { color: var(--accent); } }

/* Профиль */
.prof { display: grid; gap: 48px; }
@media (min-width: 1200px) { .prof { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
.prof .form { max-width: 520px; }
.prof .f[readonly] { background: transparent; color: var(--muted); }
.radios fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 14px; }
.radios legend { margin-bottom: 12px; padding: 0; font-size: 14px; color: var(--muted); }
.radio { display: flex; align-items: center; gap: 12px; font-size: 17px; cursor: pointer; }
.radio input { width: 20px; height: 20px; margin: 0; accent-color: var(--btn); cursor: pointer; }
.radios .btn { margin-top: 16px; }
.docs-h { margin-top: 28px; }
.doc-list { display: flex; flex-direction: column; border-bottom: 1px solid var(--line-2); }
.doc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line-2); font-size: 16px; }
.doc-row a { flex-shrink: 0; font-size: 14px; color: var(--muted); border-bottom: 1px solid currentColor; }
.out-m { margin-top: 8px; }

/* Курсы в кабинете */
.crs-list { display: grid; gap: 16px; }
@media (min-width: 768px) { .crs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.crs-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(24px, 18px + 1.6vw, 40px);
  background: var(--dark);
  color: var(--on-dark);
  border-radius: 28px;
}
.crs-tile .t { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 22px + 1.5vw, 40px); line-height: 1.1; }
.crs-tile .s { font-size: 14px; color: var(--on-dark-text); }
.crs-tile .go { align-self: flex-start; margin-top: 14px; padding: 12px 24px; border-radius: 999px; background: var(--lime); color: var(--dark); font-size: 15px; font-weight: 600; }
.crs-tile.off { background: var(--lime-1); color: var(--ink); }
.crs-tile.off .s { color: var(--muted); }
.crs-tile.off .go { background: var(--btn); color: var(--bg); }
@media (hover: hover) { a.crs-tile:hover { color: var(--on-dark); } a.crs-tile.off:hover { color: var(--ink); } }

.crs-hero {
  display: grid;
  gap: 32px;
  padding: clamp(24px, 14px + 2.6vw, 56px);
  background: var(--dark);
  color: var(--on-dark);
  border-radius: 28px;
}
.crs-hero .l { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.crs-hero .l .t { font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 22px + 2.6vw, 52px); line-height: 1.05; }
.crs-hero .l p { color: var(--on-dark-text); line-height: 1.6; }
.crs-hero .r { display: flex; flex-direction: column; }
.crs-hero .cell { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 0; border-top: 1px solid var(--dark-line); }
.crs-hero .cell:last-child { border-bottom: 1px solid var(--dark-line); }
.crs-hero .k { font-size: 14px; color: var(--on-dark-2); }
.crs-hero .v { font-size: 18px; }
.crs-hero .s { font-size: 14px; color: var(--on-dark-text); }
.crs-hero .s a, .crs-hero .cell > a, .crs-hero .lnk {
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  font-size: 14px;
  color: var(--lime);
  cursor: pointer;
}
@media (min-width: 1024px) { .crs-hero { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; } }

.mats { display: grid; gap: 24px; }
@media (min-width: 768px) { .mats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .mats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mat { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid var(--ink); }
.mat .n { font-size: 18px; font-weight: 500; line-height: 1.35; }
.mat .s { font-size: 14px; color: var(--muted); }
.mat p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.pay { display: flex; }

/* ─── Вход, восстановление и новый пароль ───────────────────────────────── */

.auth { display: flex; flex-direction: column; }
.auth-head { padding: 40px var(--pad) 36px; background: var(--lime-1); }
.auth-head .h1 { font-size: clamp(48px, 34px + 3.7vw, 76px); line-height: 1; letter-spacing: -.02em; }
.auth-head .h1 em { display: block; }
.auth-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: calc(480px + 2 * var(--pad));
  padding: 32px var(--pad) 0;
}
.auth-body .form { gap: 18px; }
.auth-body .note { margin: 0; }
.auth-body > .under-link { align-self: flex-start; }
.auth-body .links { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.auth-foot { padding: 40px var(--pad) 56px; font-size: 14px; color: var(--muted); }
.auth-foot:empty { display: none; }
.auth-foot a { font-weight: 600; color: var(--ink); border-bottom: 1px solid currentColor; }
.auth-side { display: none; }
.f.code { font-size: 22px; letter-spacing: .2em; text-transform: uppercase; }

.seg { display: inline-flex; align-self: flex-start; gap: 8px; padding: 4px; background: var(--lime-1); border-radius: 999px; }
.seg a { display: flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.seg a.on { background: var(--btn); color: var(--bg); font-weight: 600; }

@media (min-width: 1024px) {
  .auth {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(400px, 43vw, 620px);
    grid-template-rows: auto auto 1fr;
    min-height: calc(100vh - 96px);
    /* На широком экране шапка сайта стоит по центру, а форма прилипала
       к краю окна. Левая колонка начинается там же, где шапка. */
    padding-left: max(0px, calc((100% - var(--max) - 2 * var(--pad)) / 2));
  }
  .auth-head { grid-column: 1; padding: 72px var(--pad) 0; background: none; }
  .auth-body { grid-column: 1; padding-top: 36px; }
  .auth-foot { grid-column: 1; align-self: end; padding-top: 56px; }
  .auth-side {
    grid-column: 2;
    grid-row: 1 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px clamp(40px, 5vw, 72px);
    background: var(--lime-1);
  }
}

.letter {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 440px;
  padding: 32px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(31, 39, 21, .10);
}
.letter .from { display: flex; flex-direction: column; gap: 4px; padding-bottom: 16px; border-bottom: 1px solid #E1E6D0; }
.letter .from span { font-size: 13px; color: var(--muted); }
.letter .from b { font-size: 17px; font-weight: 600; }
.letter .hi { font-family: var(--serif); font-size: 26px; line-height: 1.2; }
.letter p { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.letter .btn { min-height: 52px; pointer-events: none; }
.letter .fine { font-size: 12px; color: #8C927C; }

/* ─── Программа курса по расписанию ─────────────────────────────────────── */
/* Дни сверху вниз от свежего: сегодняшний — первым, его и открывают. */
.prog-day { display: flex; flex-direction: column; gap: 18px; padding-top: 22px; border-top: 1px solid var(--ink); }
.prog-day + .prog-day { margin-top: 18px; }
.prog-h { font-family: var(--serif); font-weight: 300; font-size: 26px; line-height: 1.1; }
.prog-h span { font-family: var(--sans); font-size: 14px; color: var(--muted); margin-left: 8px; }
.prog-post { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; }
.prog-time { font-size: 14px; font-weight: 600; color: var(--btn); padding-top: 3px; }
.prog-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.prog-body .pre { margin: 0; }
.prog-body audio { width: 100%; max-width: 420px; }
.prog-body img, .prog-body video { width: 100%; max-width: 480px; height: auto; border-radius: 16px; }