/* Алина Антонова — визуальный мир «Бланк».
   Документная бумага в полосах фальцовки, шариковые чернила,
   лавандовое поле (крышка пробирки), золото сыворотки, красный флаг.
   Мобильный в основе, десктоп выведен из него.
   Контракт направления: .impeccable/surfaces/index-html.md */

:root{
  --paper:#FAF7F2;
  --band:#F2EDE3;
  --band-2:#E8E1D3;
  --ink:#2C2A25;
  --ink-2:#5C574E;
  --ink-3:#5F594F;
  --sage:#4A6B4E;
  --sage-deep:#3A5540;
  --sage-tint:#DCEADD;
  --teal:#0F544D;
  --teal-tint:#DCEAE7;
  --flag:#A8342A;
  --rule:#DDD8CC;

  --serif:'Source Serif 4',Georgia,serif;
  --sans:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --gap:1.15rem;
  --shell:1.15rem;
  --radius:20px;
  --radius-s:12px;
  --pill:999px;
  --rail:1240px;
  --rail-read:46rem;

  --ease:cubic-bezier(.16,.84,.44,1);

  /* Шкала текста: основной и мелкий. */
  --fs-body:.875rem;
  --fs-small:.8125rem;

  /* Шкала вертикальных отступов. */
  --space-section:3rem;  /* сверху и снизу секции */
  --space-block:1.5rem;  /* заголовок → содержимое, блок → блок внутри секции */
  --space-card:1rem;     /* между карточками */
  --space-item:1.25rem;  /* вертикальный padding пункта списка */
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.62;
  color:var(--ink);
  background:var(--paper);
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
p{text-wrap:pretty}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* Поверхности, которые рисует браузер, а не мы. */
::selection{background:var(--sage);color:#fff}
::-moz-selection{background:var(--sage);color:#fff}
html{scrollbar-color:var(--sage) var(--band);caret-color:var(--sage)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--band)}
::-webkit-scrollbar-thumb{background:var(--sage);border-radius:var(--pill)}
:focus-visible{outline:2.5px solid var(--sage);outline-offset:3px;border-radius:4px}
a{text-underline-offset:.22em;text-decoration-thickness:1px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:10050;background:var(--sage);color:#fff;padding:.75rem 1rem;font-size:.85rem;border-radius:0 0 var(--radius-s) 0}
.skip-link:focus{left:0}

/* ─────────── ТИПОГРАФИКА ─────────── */

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:-.015em;text-wrap:balance}

.section-title{
  font-family:var(--serif);
  font-size:clamp(1.45rem,6.4vw,1.9rem);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.02em;
}
.section-title em,.accent{font-style:normal;color:var(--sage)}

/* Заголовок несёт себя сам: ярлыков над ним нет нигде. */
.section-label,.eyebrow{display:none}

section{padding:var(--space-section) var(--shell)}
section > .section-title{margin-bottom:var(--space-block)}
.audience-fit{padding-top:2.25rem}

/* Полосы фальцовки: чередование через одну секцию. */
.about,.programs,.files,.faq{background:var(--band)}

/* ─────────── ШАПКА ─────────── */

header{position:sticky;top:0;z-index:100}
nav{
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem var(--shell);
  min-height:60px;
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);
  backdrop-filter:blur(10px) saturate(1.3);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease);
}
header.is-scrolled nav{border-bottom-color:var(--rule)}
.logo{
  line-height:0;
  flex:1 1 auto;
  min-width:0;
}
.logo img{height:28px;width:auto;max-width:100%}
@media(max-width:350px){.logo img{height:22px}nav{gap:.4rem}}
.nav-links,.intro-call-btn{display:none}

.lang-switcher{display:flex;align-items:center;background:var(--band-2);border-radius:var(--pill);padding:2px;min-height:44px}
.lang-sep{display:none}
.lang-btn{
  font-size:.78rem;font-weight:600;letter-spacing:.06em;
  min-height:40px;min-width:44px;display:grid;place-items:center;padding:0 .6rem;border-radius:var(--pill);color:var(--ink-2);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.lang-btn.active{background:var(--sage);color:#fff}

.mobile-menu-toggle{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:var(--pill);background:var(--band-2)}
/* Шапка на мобайле не конкурирует с главной кнопкой: переключатель языка и бургер ниже. */
@media(max-width:768px){
  .lang-switcher{min-height:36px;padding:2px}
  .lang-btn{min-height:32px;min-width:40px;padding:0 .5rem;font-size:.75rem}
  .mobile-menu-toggle{width:36px;height:36px;flex:0 0 36px}
}
.mobile-menu-toggle-bars{display:grid;gap:4px;width:16px}
.mobile-menu-toggle-bars span{height:1.5px;background:var(--ink);border-radius:2px;transition:transform .25s var(--ease),opacity .2s}
.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle-bars span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle-bars span:nth-child(2){opacity:0}
.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle-bars span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ─────────── КНОПКИ ─────────── */

.btn-primary,.btn-ghost,.btn-program,.btn-submit,.drawer-cta,.file-action,.file-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;padding:.85rem 1.5rem;
  font-family:var(--sans);font-size:.95rem;font-weight:600;letter-spacing:.005em;
  border-radius:var(--pill);text-decoration:none;text-align:center;
  transition:background .22s var(--ease),color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease);
}
.btn-primary,.btn-submit,.drawer-cta{
  background:var(--sage);color:#fff;
  box-shadow:0 6px 18px -8px rgba(58,85,64,.75);
}
.btn-primary:hover,.btn-submit:hover,.drawer-cta:hover{background:var(--sage-deep);box-shadow:0 10px 24px -10px rgba(58,85,64,.85)}
.btn-primary:active,.btn-submit:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--rule)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--sage);color:var(--sage)}
.btn-primary--inverse{background:#fff;color:var(--sage);box-shadow:none}
.btn-primary--inverse:hover{background:var(--sage-tint)}
.btn-submit[disabled],.btn-primary[disabled]{background:var(--ink-3);box-shadow:none;cursor:not-allowed}

/* ─────────── ПЕРВЫЙ ЭКРАН ─────────── */

.hero{display:block;padding:.4rem 0 0;overflow-x:clip}
/* Лид и метка «онлайн» живут только в десктопной раскладке героя. */
.hero-lede,.hero-tag{display:none}

/* Сцена — сетка из трёх рядов; фото и графы направлений делят второй ряд
   и намеренно перекрываются, поэтому композиция не зависит от подгонки
   отрицательных отступов под конкретный кадр. */
.hero-scene{
  display:grid;
  grid-template-columns:1fr;
  padding:0 var(--shell);
}

.hero-title{
  grid-area:1/1;
  font-family:var(--serif);
  font-size:clamp(1.7rem,8.6vw,2.3rem);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.03em;
  text-align:center;
  text-wrap:balance;
  z-index:3;
  position:relative;top:20px;   /* опускаем визуально, высота первого экрана не меняется (не transform: он занят анимацией входа) */
}
/* Заголовок набран одним размером, второй фразой в строке: «ПИТАНИЕ / которое работает на тебя». */
.hero-line2{
  display:block;
  padding-top:.12em;
  font-size:1em;
  line-height:1.05;
  font-weight:600;
}
.hero-title .accent{color:var(--sage)}


.hero-photo{
  --arch:50% 50% 0 0 / 40% 40% 0 0;
  --fade-y:linear-gradient(to bottom,#000 60%,transparent 100%);
  --aw:calc((100vw - 2 * var(--shell)) * .72);   /* ширина арки */
  position:relative;
  grid-area:2/1;
  justify-self:end;
  width:var(--aw);
  margin:calc(.1rem + 30px) calc(-1.9rem - 80px) 0 0;   /* арка ниже на 30px */
  z-index:2;
  height:calc(var(--aw) / .8 - 45px);                /* блок короче на 15px: кнопки ниже по странице поднимаются */
}
/* Арка в тоне сайта: сверху полукруг, снизу уходит в фон страницы.
   Два слоя одной формы: слева сильно размытый, справа резкий с зерном;
   горизонтальные маски перекрещены, блюр слева направо плавно сходит на нет. */
.hero-photo::before,.hero-photo::after{
  content:"";position:absolute;pointer-events:none;
  border-radius:var(--arch);
}
.hero-photo::before{
  inset:-24px;
  background:linear-gradient(180deg,#D3E4D6 0%,#B9D2BE 100%);
  filter:blur(100px);
  -webkit-mask-image:var(--fade-y),linear-gradient(to right,#000 0%,#000 45%,transparent 100%);
  mask-image:var(--fade-y),linear-gradient(to right,#000 0%,#000 45%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.hero-photo::after{
  inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.5' intercept='.5'/%3E%3CfeFuncG type='linear' slope='.5' intercept='.5'/%3E%3CfeFuncB type='linear' slope='.5' intercept='.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(180deg,#E9F1EA 0%,#D6E6D8 100%);
  background-blend-mode:multiply,normal;
  /* Резкий слой: справа и ниже верхней части (сверху арку держит размытый слой .arch-top). */
  -webkit-mask-image:var(--fade-y),linear-gradient(to right,transparent 38%,#000 92%),linear-gradient(to bottom,transparent 8%,#000 52%);
  mask-image:var(--fade-y),linear-gradient(to right,transparent 38%,#000 92%),linear-gradient(to bottom,transparent 8%,#000 52%);
  -webkit-mask-composite:source-in,source-in;
  mask-composite:intersect,intersect;
}
/* Верх арки: отдельный размытый слой, чтобы контур арки сверху был мягким и размытие было видно. */
.arch-top{
  position:absolute;inset:0;pointer-events:none;
  border-radius:var(--arch);
  background:linear-gradient(180deg,#C6DCCB 0%,#D6E6D8 100%);
  filter:blur(30px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 18%,transparent 66%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 18%,transparent 66%);
}
/* Фото: кадр на 22% шире арки (лицо крупнее) и сдвинут влево от неё, поэтому
   фигура не уезжает вслед за аркой. Снизу кадр плавно растворяется в фон. */
.hero-photo picture{
  position:absolute;z-index:1;top:-55px;               /* фото выше на 25px относительно исходного */
  left:calc(var(--aw) * -.02 - 80px);
  display:block;width:calc(var(--aw) * 1.22);height:calc(100% + 45px);
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 96%);
  mask-image:linear-gradient(to bottom,#000 70%,transparent 96%);
}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 0}

/* Четыре направления набраны графами бланка. */
.hero-focus{
  grid-area:2/1;
  /* По центру высоты фото: тот же отрицательный отступ, что у кадра. */
  align-self:center;
  justify-self:start;
  width:53%;
  margin-top:.1rem;
  z-index:4;
  list-style:none;
  display:grid;justify-items:start;gap:.45rem;
}
/* Направления — чипы: видно, что это нажимаемые ссылки. */
.hero-focus a{
  display:inline-grid;
  grid-template-columns:1.1rem auto;
  align-items:center;
  gap:.4rem;
  min-height:36px;
  padding:.25rem .8rem .25rem .65rem;
  white-space:nowrap;
  border-radius:var(--pill);
  background:rgba(250,247,242,.9);
  box-shadow:inset 0 0 0 1.5px var(--rule);
  text-decoration:none;
  font-size:var(--fs-small);
  font-weight:500;
  line-height:1.2;
  color:var(--ink);
  transition:color .2s var(--ease);
}
.hero-focus a:hover{color:var(--sage);box-shadow:inset 0 0 0 1.5px var(--sage)}
.hero-focus img{width:16px;height:16px;opacity:.8}

.hero-cta{grid-area:3/1;display:grid;gap:.6rem;margin-top:.9rem;padding-bottom:0}
.hero-cta .btn-primary,.hero-cta .btn-ghost{width:100%}
.hero-cta .btn-primary{min-height:56px;font-size:1rem}
.hero-cta .btn-ghost{min-height:48px}
.btn-icon{width:1.2rem;height:1.2rem;flex:0 0 auto}

/* ─────────── УЗНАЁШЬ СЕБЯ ─────────── */

.audience-fit-head{margin-bottom:var(--space-block)}
.audience-fit-grid{display:grid;gap:0}
.audience-fit-item{
  display:grid;grid-template-columns:1.6rem 1fr;column-gap:1rem;align-items:center;
  padding:var(--space-item) 0;
  border-top:1px solid var(--rule);
}
.audience-fit-item:first-child{border-top:0;padding-top:.4rem}
.audience-fit-item:last-child{padding-bottom:0}
.audience-icon{width:1.6rem;height:1.6rem;color:var(--sage)}
.audience-fit-item p{font-size:var(--fs-body);line-height:1.5;color:var(--ink-2);}

/* ─────────── ОБО МНЕ ─────────── */

.about{display:grid;gap:var(--space-block)}
.about-img{position:relative;border-radius:var(--radius);overflow:hidden}
.about-img img{width:100%;height:auto}
.experience-badge{
  position:absolute;left:0;bottom:0;z-index:2;
  background:var(--sage);color:#fff;
  padding:.85rem 1.1rem;
  border-radius:0 var(--radius) 0 0;
  display:grid;line-height:1;
}
.experience-badge strong{font-family:var(--serif);font-size:1.8rem;font-weight:600;letter-spacing:-.02em}
.experience-badge span{font-size:.7rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;padding-top:.4rem;opacity:.9}
.about-content{display:grid;gap:var(--space-block)}
.about-text{display:grid;gap:.8rem;color:var(--ink-2);font-size:var(--fs-body);line-height:1.6;}
.about-text strong{color:var(--ink);font-weight:600}

.pillars-label{
  font-family:var(--serif);font-size:1.25rem;font-weight:600;line-height:1.12;letter-spacing:-.02em;
  color:var(--ink);
}
.pillars{display:grid;gap:.6rem}
.pillar{
  display:grid;grid-template-columns:2.75rem 1fr;column-gap:.95rem;align-items:start;
  padding:1rem 1.1rem 1rem 1rem;
  background:var(--paper);border-radius:var(--radius-s);
}
.pillar-icon{
  grid-row:1 / span 2;width:2.75rem;height:2.75rem;padding:.7rem;border-radius:50%;
  background:var(--sage-tint);color:var(--sage-deep);
}
.pillar h4{font-family:var(--serif);font-size:1.05rem;font-weight:600;letter-spacing:-.015em;line-height:1.2;margin:.15rem 0 .25rem}
.pillar p{font-size:var(--fs-body);line-height:1.5;color:var(--ink-2)}

/* ─────────── НАПРАВЛЕНИЯ ─────────── */

.specialties-grid{display:grid;gap:0}
.specialty-card{padding:var(--space-item) 0;border-top:1px solid var(--rule)}
.specialty-card:last-child{border-bottom:1px solid var(--rule)}
.specialty-num{display:none}
.specialty-name{font-family:var(--serif);font-size:1.15rem;font-weight:600;line-height:1.15;letter-spacing:-.015em;margin-bottom:.35rem}
.specialty-text{font-size:var(--fs-body);line-height:1.55;color:var(--ink-2);}

/* ─────────── ФОРМАТЫ ─────────── */

.programs-grid{display:grid;gap:var(--space-card)}
.program-card{
  --pc-line:var(--rule);
  --pc-check-bg:var(--sage-tint);
  --pc-check-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A6B4E' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background:var(--paper);
  border-radius:var(--radius);
  padding:1.6rem 1.35rem 1.35rem;
  display:grid;gap:0;align-content:start;
}
.program-card.featured{
  box-shadow:inset 0 0 0 2px var(--sage),0 14px 32px -18px rgba(58,85,64,.55);
}
.program-name{font-family:var(--serif);font-size:1.45rem;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.program-duration{margin-top:.4rem;font-size:var(--fs-small);font-weight:500;letter-spacing:.02em;color:var(--ink-3)}

/* Цена — главный акцент карточки. */
.program-price{
  margin-top:1.1rem;
  font-family:var(--serif);font-size:2.9rem;font-weight:600;letter-spacing:-.035em;line-height:1;
  color:var(--sage-deep);
}
.program-price span{font-family:var(--sans);font-size:var(--fs-small);font-weight:600;letter-spacing:.08em;vertical-align:1.1em;padding-left:.3rem;opacity:.8}

.program-desc{
  margin-top:1rem;padding-bottom:1.1rem;border-bottom:1px solid var(--pc-line);
  font-size:var(--fs-body);line-height:1.55;color:var(--ink-2);
}

/* Состав — галочки вместо квадратиков, воздух между пунктами. */
.program-includes{list-style:none;display:grid;gap:.8rem;padding:1.1rem 0;font-size:var(--fs-body);line-height:1.4}
.program-includes li{display:grid;grid-template-columns:1.25rem 1fr;gap:.75rem;align-items:start;color:var(--ink)}
.program-includes li::before{
  content:"";width:1.25rem;height:1.25rem;margin-top:-.05rem;border-radius:50%;
  background:var(--pc-check-bg) var(--pc-check-img) center/.7rem no-repeat;
}
.program-note{padding-top:1rem;border-top:1px solid var(--pc-line);font-size:var(--fs-small);font-style:italic;color:var(--ink-3);line-height:1.45}
.btn-program{width:100%;margin-top:1.1rem}
.program-card.featured .btn-program{background:var(--sage);color:#fff;box-shadow:0 6px 18px -8px rgba(58,85,64,.75)}
.program-card.featured .btn-program:hover{background:var(--sage-deep)}
.program-card:not(.featured) .btn-program{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.program-card:not(.featured) .btn-program:hover{box-shadow:inset 0 0 0 1.5px var(--sage);color:var(--sage)}

/* ─────────── ОТЗЫВ ─────────── */

.review-wrap{margin-top:0}
.review-card{display:grid;gap:.9rem;background:var(--band);border-radius:var(--radius);padding:1.5rem 1.35rem 1.35rem}
.review-quote{font-family:Georgia,'Times New Roman',serif;font-size:4.5rem;line-height:.75;height:2rem;color:var(--sage);opacity:.5}
.review-text{font-size:.95rem;line-height:1.65;color:var(--ink)}
.review-author{display:flex;align-items:center;gap:.8rem;margin-top:.3rem;padding-top:1.1rem;border-top:1px solid var(--rule)}
.review-avatar{
  width:42px;height:42px;flex:0 0 42px;border-radius:var(--pill);
  background:var(--sage-tint);color:var(--sage-deep);
  display:grid;place-items:center;
  font-family:var(--serif);font-size:1.2rem;font-weight:600;
}
.review-name{font-size:var(--fs-body);font-weight:600}
.review-role{font-size:var(--fs-small);color:var(--ink-3)}

/* ─────────── МАТЕРИАЛЫ ─────────── */

.materials-intro{display:grid;gap:var(--space-block)}
.materials-lede{font-size:var(--fs-body);line-height:1.6;color:var(--ink-2);margin-top:var(--space-block)}
.materials-editorial{border-radius:var(--radius);overflow:hidden;width:100%}
.materials-editorial img{width:100%;height:auto}

.library-title{font-family:var(--serif);font-size:1.25rem;font-weight:600;letter-spacing:-.02em;margin:var(--space-block) 0 0}
.library-block{margin-top:.5rem}
.files-grid{display:grid;gap:var(--space-card);margin-top:var(--space-card)}
.file-card{
  background:var(--paper);border-radius:var(--radius-s);
  padding:1.45rem 1.35rem;display:grid;gap:.3rem;
}
.file-type{
  justify-self:start;
  font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal);background:var(--teal-tint);
  padding:.26rem .55rem;border-radius:var(--pill);margin-bottom:.25rem;
}
.file-card--unavailable .file-type{color:var(--ink-3);background:var(--band-2)}
.file-name{font-family:var(--serif);font-size:1.05rem;font-weight:600;letter-spacing:-.015em}
.file-desc{font-size:var(--fs-body);line-height:1.5;color:var(--ink-2)}
.file-price{font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.file-action{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem .9rem;
  min-height:0;padding:0;margin-top:.9rem;border-radius:0;
  background:none;box-shadow:none;text-align:left;
}
.file-btn{
  flex:1 1 11rem;min-height:48px;padding:.6rem 1.15rem;font-size:.9rem;
  background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-3);color:var(--ink);
}
.file-btn:hover{box-shadow:inset 0 0 0 1.5px var(--sage);color:var(--sage)}
.file-card--unavailable{background:var(--band-2)}
.file-card--unavailable .file-name{color:var(--ink-2)}
.file-card--unavailable .file-btn{box-shadow:inset 0 0 0 1.5px var(--rule);background:none;color:var(--ink-3);cursor:not-allowed}
/* Бесплатный материал: значок документа, текст, одна главная кнопка. */
.file-card--free{grid-template-columns:3.25rem 1fr;column-gap:1rem;row-gap:0;align-items:start;padding:1.25rem}
.file-tile{
  grid-row:1;align-self:start;width:3.25rem;
  display:grid;justify-items:center;gap:.2rem;padding:.6rem 0 .5rem;
  border-radius:14px;background:var(--sage-tint);color:var(--sage-deep);
}
.file-icon{width:1.7rem;height:1.7rem}
.file-ext{font-size:.7rem;font-weight:700;letter-spacing:.1em;line-height:1}
.file-card--free .file-body{display:grid;gap:.3rem;align-content:start}
.file-card--free .file-type{margin-bottom:0}
.file-card--free .file-action{grid-column:1 / -1;margin-top:1.1rem}
.file-card--free .file-price{display:none}
.file-card--free .file-btn{background:var(--sage);color:#fff;box-shadow:0 6px 18px -8px rgba(58,85,64,.75);flex-basis:100%}
.file-card--free .file-btn:hover{background:var(--sage-deep);color:#fff;box-shadow:0 10px 24px -10px rgba(58,85,64,.85)}
.file-btn-icon{width:1.2rem;height:1.2rem}
.file-needs-link{font-size:.78rem;color:var(--ink-3)}

/* ─────────── КАК ПРОХОДИТ РАБОТА ─────────── */

.steps-grid{display:grid;gap:0;counter-reset:step}
.step-card{
  display:grid;grid-template-columns:2.4rem 1fr;column-gap:.4rem;row-gap:.25rem;
  padding:var(--space-item) 0;border-top:1px solid var(--rule);
}
.step-num{grid-column:1;grid-row:1}
.step-title,.step-text{grid-column:2}
.step-card:last-child{border-bottom:1px solid var(--rule)}
.step-num{
  font-size:var(--fs-small);font-weight:600;color:var(--sage);
  font-variant-numeric:tabular-nums;letter-spacing:.04em;padding-top:.3em;
}
.step-title{font-family:var(--serif);font-size:1.06rem;font-weight:600;letter-spacing:-.015em;line-height:1.2;margin-bottom:.25rem}
.step-text{font-size:var(--fs-body);line-height:1.5;color:var(--ink-2);}

/* ─────────── FAQ ─────────── */

.faq-list{margin-top:0}
.faq-item{border-top:1px solid var(--rule)}
.faq-item:last-child{border-bottom:1px solid var(--rule)}
.faq-question{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:1fr 1.3rem;align-items:start;gap:.7rem;
  padding:var(--space-item) 0;
  font-family:var(--serif);font-size:1rem;font-weight:600;line-height:1.28;letter-spacing:-.012em;
}
.faq-question::-webkit-details-marker{display:none}
.faq-question::after{
  content:"";justify-self:end;margin-top:.42em;
  width:11px;height:11px;
  border-right:1.8px solid var(--sage);border-bottom:1.8px solid var(--sage);
  transform:rotate(45deg);
  transition:transform .28s var(--ease);
}
.faq-item[open] .faq-question::after{transform:rotate(225deg);margin-top:.62em}
.faq-answer{font-size:var(--fs-body);line-height:1.6;color:var(--ink-2);padding:0 0 1.15rem;}
.needs-input{
  background:var(--teal-tint);color:var(--teal);
  padding:.1em .35em;border-radius:4px;font-size:.9em;font-weight:600;
}

/* ─────────── КОНТАКТЫ ─────────── */

.contact-lede{font-size:var(--fs-body);line-height:1.6;color:var(--ink-2);margin:0 0 var(--space-block)}
/* Прямой контакт: последний шанс написать, если заявку не оставили. */
.contact-direct{
  margin-top:var(--space-block);padding-top:var(--space-block);
  border-top:1px solid var(--rule);
  display:grid;gap:1rem;
}
.contact-direct-title{font-family:var(--serif);font-size:1.25rem;font-weight:600;line-height:1.2;letter-spacing:-.015em}
.contact-direct-actions{display:grid;gap:.6rem}
.contact-direct-btn img{width:20px;height:20px}
.btn-primary.contact-direct-btn img{filter:invert(1) brightness(2)}
.contact-direct-handle{font-weight:500;color:var(--ink-3)}
.contact-direct-phone{justify-self:start;padding:.7rem 0;font-size:var(--fs-body);color:var(--ink-2)}
.contact-direct-phone:hover{color:var(--sage)}

/* ─────────── ФОРМА ─────────── */

.contact-form{display:grid;gap:var(--space-item)}
.form-row{display:grid;gap:.4rem}
.field-label{font-size:var(--fs-small);font-weight:600;letter-spacing:.02em;color:var(--ink-2)}
.field-optional{font-weight:400;color:var(--ink-3)}
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form input[type=tel],
.contact-form textarea{
  width:100%;min-height:46px;
  padding:.6rem .95rem;
  font:inherit;font-size:1rem;
  color:var(--ink);
  background:var(--paper);
  border:1.5px solid var(--rule);
  border-radius:var(--radius-s);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.contact-form textarea{min-height:120px;resize:vertical;line-height:1.5}
.contact-form input::placeholder,.contact .contact-form textarea::placeholder{color:var(--ink-3)}
.contact-form input:focus,.contact .contact-form textarea:focus{
  outline:none;border-color:var(--sage);box-shadow:0 0 0 3px var(--sage-tint);
}
.contact-form input[aria-invalid="true"]{border-color:var(--flag)}
.field-error{font-size:var(--fs-small);color:var(--flag);font-weight:500;min-height:0}
.field-error:empty{display:none}
.field-note,.format-hint{font-size:var(--fs-small);color:var(--ink-3);line-height:1.45}

.messenger-choice{display:flex;gap:.4rem;margin-bottom:.1rem}
/* Выбор мессенджера, под ним — номер или @username отдельной строкой. */
.messenger-line{display:grid;gap:.5rem}
.messenger-line .messenger-choice{margin:0}
.messenger-pill{position:relative;cursor:pointer}
.messenger-pill input{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;margin:0;cursor:pointer}
.messenger-pill span{
  display:grid;place-items:center;min-height:38px;padding:.4rem 1rem;
  font-size:var(--fs-body);font-weight:500;border-radius:var(--pill);
  background:var(--band-2);color:var(--ink-2);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.messenger-pill input:checked + span{background:var(--sage);color:#fff;font-weight:600}
.messenger-pill input:focus-visible + span{outline:2.5px solid var(--sage);outline-offset:3px}

.format-choice{display:grid;gap:.55rem}
.format-card{position:relative;cursor:pointer}
.format-card input{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;margin:0;cursor:pointer}
.format-card-body{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  min-height:48px;padding:.6rem 1rem;
  background:var(--paper);
  border:1.5px solid var(--rule);
  border-radius:var(--radius-s);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.format-card input:checked + .format-card-body{border-color:var(--sage);background:var(--sage-tint)}
.format-card input:focus-visible + .format-card-body{outline:2.5px solid var(--sage);outline-offset:3px}
.format-card-name{font-size:var(--fs-body);font-weight:600}
.format-card-price{font-family:var(--serif);font-size:1.15rem;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.format-card input[data-key="unsure"] + .format-card-body .format-card-price{
  font-family:var(--sans);font-size:var(--fs-small);font-weight:500;color:var(--ink-3);white-space:normal;text-align:right;
}

.form-row--checkbox{gap:.2rem}
.form-row--checkbox input[type=checkbox]{
  width:22px;height:22px;margin-top:.12rem;accent-color:var(--sage);flex:0 0 22px;
}
.consent-label{
  display:flex;align-items:flex-start;gap:.8rem;
  font-size:var(--fs-small);line-height:1.5;color:var(--ink-2);padding:.55rem 0;min-height:44px;cursor:pointer;
}
.consent-label a{color:var(--sage)}

.btn-submit{width:100%;margin-top:.3rem}
.form-status{font-size:var(--fs-body);line-height:1.5;font-weight:500}
.form-status p{padding:.9rem 1.05rem;border-radius:var(--radius-s)}
/* Пустой статус не занимает строку сетки формы: низ формы равен верху. */
.form-status:not(:has(> p:not([hidden]))){display:none}
[hidden]{display:none!important}
.status-success{background:var(--sage-tint);color:var(--sage-deep)}
.status-error{background:#F5E3E0;color:var(--flag)}

/* ─────────── ЗАЯВКА НА ТЁМНОМ ─────────── */
/* Секция контактов — тёмная панель: форма и прямые контакты стоят на ней. */

.contact{
  --on-dark:#fff;
  --on-dark-2:rgba(255,255,255,.78);
  --on-dark-3:rgba(255,255,255,.6);
  --on-dark-line:rgba(255,255,255,.2);
  --on-dark-fill:rgba(255,255,255,.07);
  background:var(--ink);color:var(--on-dark);
}
.contact .section-title{color:var(--on-dark)}
.contact > .section-title{margin-bottom:calc(var(--space-block) / 2)}
.contact .contact-lede{color:var(--on-dark-2)}
.contact .field-label{color:var(--on-dark)}
.contact .field-optional{color:var(--on-dark-3)}
.contact .field-note,.contact .format-hint{color:var(--on-dark-3)}
.contact .format-hint a,.contact .consent-label a{color:var(--on-dark)}
.contact .field-error{color:#FFA89C}

.contact .contact-form input[type=text],
.contact .contact-form input[type=email],
.contact .contact-form input[type=tel],
.contact .contact-form textarea{
  background:var(--on-dark-fill);border-color:var(--on-dark-line);color:var(--on-dark);
}
.contact .contact-form input::placeholder,.contact .contact-form textarea::placeholder{color:var(--on-dark-3)}
.contact .contact-form input:focus,.contact .contact-form textarea:focus{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.contact .contact-form input[aria-invalid="true"]{border-color:#FFA89C}

.contact .messenger-pill span{background:var(--on-dark-fill);box-shadow:inset 0 0 0 1.5px var(--on-dark-line);color:var(--on-dark)}
.contact .messenger-pill input:checked + span{background:#fff;box-shadow:none;color:var(--ink)}
.contact .messenger-pill input:focus-visible + span,
.contact .format-card input:focus-visible + .format-card-body{outline-color:#fff}

.contact .format-card-body{background:var(--on-dark-fill);border-color:var(--on-dark-line)}
.contact .format-card input:checked + .format-card-body{background:rgba(255,255,255,.14);border-color:#fff}
.contact .format-card-price{color:var(--on-dark)}
.contact .format-card input[data-key="unsure"] + .format-card-body .format-card-price{color:var(--on-dark-3)}

.contact .consent-label{color:var(--on-dark-2)}
.contact .contact-form input[type=checkbox]{accent-color:#fff}

.contact .btn-submit{background:#fff;color:var(--ink);box-shadow:none}
.contact .btn-submit:hover{background:var(--sage-tint)}

.contact .status-success{background:var(--sage-tint);color:var(--sage-deep)}

.contact .contact-direct{border-top-color:var(--on-dark-line)}
.contact .contact-direct-title{color:var(--on-dark)}
.contact .btn-primary.contact-direct-btn{background:#4F7A55;box-shadow:none}
.contact .btn-primary.contact-direct-btn:hover{background:#5B8A62}
.contact .btn-ghost.contact-direct-btn{color:var(--on-dark);box-shadow:inset 0 0 0 1.5px var(--on-dark-line)}
.contact .btn-ghost.contact-direct-btn:hover{box-shadow:inset 0 0 0 1.5px #fff;color:#fff}
.contact .btn-ghost.contact-direct-btn img{filter:invert(1) brightness(2);opacity:.9}
.contact .contact-direct-handle{color:var(--on-dark-3)}
.contact .contact-direct-phone{color:var(--on-dark-2)}
.contact .contact-direct-phone:hover{color:#fff}

/* ─────────── ПОДВАЛ ─────────── */

footer a{display:inline-block;padding:.72rem 0}
footer{
  padding:2rem var(--shell) 2.2rem;
  background:#211F1B;color:var(--band);
  display:grid;gap:.45rem;font-size:var(--fs-small);
}
footer a{color:#fff}
.footer-top{display:none}

/* ─────────── МОДАЛКА ─────────── */

.intro-modal{
  display:none;position:fixed;inset:0;z-index:10020;
  background:rgba(44,42,37,.55);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  padding:var(--shell);place-items:center;
}
.intro-modal.open{display:grid}
.intro-modal-card{
  background:var(--paper);border-radius:var(--radius);
  padding:2rem 1.4rem 1.6rem;max-width:420px;width:100%;
  display:grid;gap:.8rem;position:relative;
}
.intro-modal-close{position:absolute;top:.5rem;right:.6rem;width:40px;height:40px;border-radius:var(--pill);font-size:1.5rem;line-height:1;color:var(--ink-2)}
.intro-modal-title{font-family:var(--serif);font-size:1.35rem;font-weight:600;letter-spacing:-.02em;line-height:1.12;max-width:16ch}
.intro-modal-text{font-size:var(--fs-body);line-height:1.55;color:var(--ink-2)}
.intro-modal-note{font-size:var(--fs-small);color:var(--ink-3);line-height:1.45}

/* Окно заявки: выбранный формат и короткая форма. */
.request-modal .intro-modal-card{
  max-width:440px;max-height:calc(100dvh - 2 * var(--shell));overflow-y:auto;
  gap:.45rem;padding:1.6rem 1.35rem 1.35rem;
}
.request-modal .contact-form{gap:1rem}
.request-modal-label{font-size:var(--fs-small);font-weight:600;color:var(--ink-3);padding-right:2.5rem}
.request-modal-title{font-family:var(--serif);font-size:1.45rem;font-weight:600;letter-spacing:-.02em;line-height:1.12;padding-right:1.5rem}
.request-modal-price{white-space:nowrap;color:var(--sage-deep)}
.request-modal .contact-form{grid-template-columns:1fr;margin-top:.7rem}

/* ─────────── МОБИЛЬНЫЕ КОМПОНЕНТЫ ─────────── */

.drawer-backdrop{
  position:fixed;inset:0;z-index:10000;background:rgba(44,42,37,.5);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.drawer-backdrop.open{opacity:1;pointer-events:auto}
.mobile-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:10010;
  width:min(88vw,340px);
  background:var(--paper);
  padding:4.4rem 1.4rem 2rem;
  display:grid;align-content:start;gap:.1rem;
  transform:translateX(100%);
  visibility:hidden;
  transition:transform .34s var(--ease),visibility 0s .34s;
  overflow-y:auto;
}
.mobile-drawer.open{transform:translateX(0);visibility:visible;transition-delay:0s}
.mobile-drawer > a{
  font-family:var(--serif);font-size:1.18rem;font-weight:600;letter-spacing:-.018em;
  text-decoration:none;padding:.62rem 0;border-bottom:1px solid var(--rule);
}
.mobile-drawer > a:hover{color:var(--sage)}
.drawer-close{position:absolute;top:.9rem;right:1rem;width:44px;height:44px;border-radius:var(--pill);font-size:1.6rem;line-height:1;background:var(--band-2)}
.drawer-lang{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:1.3rem 0 1rem}
.drawer-lang-label{font-size:var(--fs-small);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.drawer-lang-switch{display:flex;background:var(--band-2);border-radius:var(--pill);padding:2px}
.drawer-cta{width:100%}
.drawer-social{display:flex;gap:.4rem;padding-top:1rem}
.drawer-social a{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--pill);background:var(--band-2)}
.drawer-social img{width:20px;height:20px;opacity:.8}

.mobile-bottom-cta{
  position:fixed;left:var(--shell);right:var(--shell);bottom:.75rem;z-index:90;
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  background:var(--ink);color:var(--band);
  border-radius:var(--pill);
  padding:.42rem .5rem .42rem 1.15rem;
  font-size:.85rem;
  box-shadow:0 10px 28px -12px rgba(44,42,37,.7);
  transform:translateY(150%);
  transition:transform .38s var(--ease);
}
.mobile-bottom-cta.show{transform:translateY(0)}
.mobile-bottom-cta a{
  background:var(--sage);color:#fff;text-decoration:none;
  padding:.62rem 1.05rem;border-radius:var(--pill);
  font-size:.82rem;font-weight:600;white-space:nowrap;min-height:44px;
  display:grid;place-items:center;
}

/* ─────────── СТРАНИЦА «РЕЦЕПТЫ» ─────────── */

.embedded-page{display:none;padding:0}
body.show-recipes .embedded-page{display:block}
body.show-recipes > main > .hero,
body.show-recipes > main > section:not(.embedded-page),
body.show-recipes > main > footer{display:none}
.embedded-page-inner{padding:1.6rem var(--shell) 6rem}
.embedded-page-topbar{padding-bottom:1.4rem}
.embedded-back{display:inline-block;min-height:44px;padding:.7rem 0;font-size:var(--fs-body);font-weight:600;text-decoration:none;color:var(--sage)}
.recipes-h1{font-family:var(--serif);font-size:clamp(1.55rem,6.6vw,2rem);font-weight:600;letter-spacing:-.025em;line-height:1.05;margin-bottom:1rem}
.recipes-hero p{font-size:var(--fs-body);line-height:1.6;color:var(--ink-2);max-width:38ch}
.recipe-filters{display:flex;flex-wrap:wrap;gap:.45rem;margin:2rem 0 1.6rem}
.recipe-filter{
  min-height:44px;padding:.55rem 1rem;border-radius:var(--pill);
  background:var(--band-2);color:var(--ink-2);font-size:.86rem;font-weight:500;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.recipe-filter.active{background:var(--sage);color:#fff;font-weight:600}
.recipes-empty-state{
  background:var(--band);border-radius:var(--radius);
  padding:2.4rem 1.4rem;display:grid;gap:.6rem;
}
.recipes-empty-state h2{font-size:1.5rem;letter-spacing:-.02em}
.recipes-empty-state p{font-size:.95rem;line-height:1.55;color:var(--ink-2);max-width:34ch}

/* ─────────── ОДНО АВТОРСКОЕ ДВИЖЕНИЕ ─────────── */
/* Вход первого экрана: заголовок и кадр. Направления и кнопки видны сразу.
   Только здесь и только один раз. Ниже по странице движения нет: одинаковый
   вход на каждой секции — это не композиция, а тик.
   Контент виден по умолчанию, анимация ничего не прячет насовсем.
   Ниже по странице — только едва заметное проявление при скролле (см. «Проявление при скролле»). */

@media(prefers-reduced-motion:no-preference){
  @keyframes lift{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes liftPhoto{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}
  .hero-title,.hero-lede{animation:lift .8s var(--ease) backwards}
  .hero-line2{display:block;animation:lift .8s var(--ease) .1s backwards}
  .hero-photo{animation:liftPhoto 1s var(--ease) .06s backwards}
  .hero-photo.is-waiting{animation-play-state:paused}
  .hero-cta{animation:lift .8s var(--ease) .5s backwards}
}

/* ─────────── ДЕСКТОП, ВЫВЕДЕННЫЙ ИЗ МОБИЛЬНОГО ─────────── */
/* Тот же герой (арка, вырезанная фигура, чипы, капсулы), те же строки бланка,
   плиты и капсулы. Меняется только раскладка: колонки вместо стопки.
   Одна точка останова; ширина держится на clamp/minmax, не на новых брейкпоинтах. */

@media(min-width:769px){
  :root{
    --shell:clamp(2rem,5.5vw,5rem);
    /* Края полос: контент стоит по раме --rail, а фон идёт на всю ширину. */
    --pad-x:max(var(--shell),calc((100% - var(--rail)) / 2));
    --fs-body:1rem;--fs-small:.875rem;
    --space-section:6.8rem;--space-block:2.5rem;--space-card:1.25rem;--space-item:1.5rem;
  }

  section{padding:var(--space-section) var(--pad-x)}
  .audience-fit{padding-top:4.5rem}
  .section-title{font-size:clamp(2rem,3.2vw,2.8rem);max-width:20ch}
  /* Заголовок над содержимым на всю ширину — одной строкой;
     заголовок в узкой левой колонке остаётся в колонку. */
  .audience-fit .section-title,.specialties > .section-title,
  .programs > .section-title,.how-it-works > .section-title{max-width:none}
  .materials-copy .section-title{max-width:none}

  /* ── Шапка ── */
  nav{gap:1.1rem;min-height:76px;padding:.7rem var(--pad-x)}
  .logo{flex:0 0 auto}
  .logo img{height:34px}
  .nav-links{display:flex;gap:.15rem;flex:1 1 auto;min-width:0;justify-content:center;flex-wrap:nowrap}
  .nav-links a{
    font-size:.86rem;white-space:nowrap;font-weight:500;text-decoration:none;color:var(--ink-2);
    padding:.5rem .85rem;border-radius:var(--pill);
    transition:background .2s var(--ease),color .2s var(--ease);
  }
  .nav-links a:hover{background:var(--band-2);color:var(--ink)}
  .intro-call-btn{
    display:inline-flex;align-items:center;min-height:44px;padding:.6rem 1.25rem;
    background:var(--sage);color:#fff;border-radius:var(--pill);
    font-size:.86rem;font-weight:600;text-decoration:none;white-space:nowrap;
    box-shadow:0 6px 18px -8px rgba(58,85,64,.75);
    transition:background .22s var(--ease),box-shadow .22s var(--ease);
  }
  .intro-call-btn:hover{background:var(--sage-deep);box-shadow:0 10px 24px -10px rgba(58,85,64,.85)}
  .lang-switcher{min-height:44px;padding:2px}
  .lang-btn{min-height:40px;min-width:44px;font-size:.78rem}
  .mobile-menu-toggle,.mobile-bottom-cta{display:none}

  /* ── Первый экран: та же арка и фигура, но колонкой слева — слово ── */
  .hero{padding:0 var(--pad-x)}
  .hero-scene{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    grid-template-rows:1fr auto auto auto auto 1fr;
    column-gap:clamp(2rem,4vw,4rem);
    min-height:clamp(34rem,calc(100svh - 76px - 1rem),50rem);
    padding:0;
  }
  .hero-title{
    grid-area:2/1;align-self:end;
    top:0;text-align:left;
    font-size:clamp(2.5rem,5.2vw,4.5rem);
    line-height:.98;letter-spacing:-.04em;
  }
  .hero-line2{padding-top:.06em;line-height:1}
  .hero-lede{
    display:block;grid-area:3/1;
    margin-top:1.75rem;max-width:42ch;
    font-size:1.08rem;line-height:1.6;color:var(--ink-2);
  }
  .hero-lede strong{color:var(--ink);font-weight:500}
  .hero-lede-more{display:block;margin-top:.8rem}
  .hero-cta{
    grid-area:5/1;margin-top:2rem;
    display:flex;flex-wrap:wrap;justify-content:flex-start;gap:.75rem;
  }
  .hero-cta .btn-primary,.hero-cta .btn-ghost{width:auto;min-height:56px;font-size:1rem;padding-inline:1.75rem;white-space:nowrap}

  /* Арка на всю колонку; кадр шире арки и сдвинут так, чтобы фигура стояла по её оси. */
  .hero-photo{
    grid-area:1/2/7/3;
    align-self:center;justify-self:end;
    width:100%;max-width:35rem;
    margin:0;height:auto;aspect-ratio:.78;
  }
  .hero-photo picture{top:-8%;left:-4%;width:128%;height:107%}
  .hero-photo::before{filter:blur(120px)}
  /* Параллакс от мыши: --mx/--my (−1…1) пишет app.js. Двигается только фон за
     фигурой: размытый слой арки уходит против курсора, резкий — за ним.
     Фигура и метка стоят на месте. translate не спорит с transform анимации входа. */
  .hero-photo{--mx:0;--my:0}
  .hero-photo::before{translate:calc(var(--mx) * -12px) calc(var(--my) * -9px)}
  .hero-photo::after,.hero-photo .arch-top{translate:calc(var(--mx) * 7px) calc(var(--my) * 5px)}
  .hero-tag{
    display:inline-flex;align-items:center;gap:.55rem;
    position:absolute;right:-.75rem;bottom:10%;z-index:5;
    padding:.55rem 1.1rem .55rem .9rem;border-radius:var(--pill);
    background:var(--ink);color:var(--band);
    font-size:.88rem;font-weight:600;letter-spacing:.01em;white-space:nowrap;
    box-shadow:0 10px 28px -12px rgba(44,42,37,.7);
  }
  .hero-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:#8DB592;flex:0 0 7px}

  /* Направления — те же чипы, но в левой колонке под лидом: два столбца по два. */
  .hero-focus{
    grid-area:4/1;
    align-self:start;justify-self:start;
    width:auto;margin:1.75rem 0 0;gap:.6rem;
    grid-template-columns:repeat(2,max-content);
  }
  .hero-focus a{min-height:44px;padding:.3rem 1.05rem .3rem .8rem;grid-template-columns:1.25rem auto;gap:.55rem;font-size:.95rem}
  .hero-focus img{width:18px;height:18px}

  /* ── Узнаёшь себя: строки бланка раскрываются в плиты 3×2 ── */
  .audience-fit-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-card)}
  .audience-fit-item,
  .audience-fit-item:first-child,
  .audience-fit-item:last-child{
    grid-template-columns:1fr;row-gap:1.15rem;align-items:start;align-content:start;
    padding:1.75rem 1.6rem 1.9rem;
    background:var(--band);border-radius:var(--radius);border-top:0;
  }
  .audience-icon{width:2.75rem;height:2.75rem;padding:.7rem;border-radius:50%;background:var(--sage-tint);color:var(--sage-deep)}
  .audience-fit-item p{font-size:1.05rem;line-height:1.45;color:var(--ink);max-width:none}

  /* ── Обо мне ── */
  .about{grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(3rem,6vw,6rem);align-items:start}
  .about-img{position:sticky;top:100px}
  .about-text{max-width:58ch}
  /* Отступ до «Что входит в работу» — вдвое меньше общего зазора блоков. */
  .pillars-label{margin-top:calc(var(--space-block) / -2)}
  /* Питание и Сопровождение слева друг под другом, Анализы — высокая плита справа,
     Образ жизни — во всю ширину под ними. Порядок в DOM: Питание, Анализы,
     Образ жизни, Сопровождение. */
  .pillars{grid-template-columns:1fr 1fr;gap:.85rem}
  .pillar{padding:1.15rem 1.2rem 1.2rem 1.1rem;align-content:start}
  .pillar:nth-child(1){grid-column:1;grid-row:1}
  .pillar:nth-child(2){grid-column:2;grid-row:1 / span 2}
  .pillar:nth-child(3){grid-column:1 / -1;grid-row:3}
  .pillar:nth-child(4){grid-column:1;grid-row:2}
  .pillar p{max-width:none}

  /* ── Направления: рубрика слева, значение справа, как строка бланка ── */
  .specialties-grid{grid-template-columns:1fr;gap:0}
  .specialty-card{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(2rem,5vw,5rem);align-items:baseline;
    padding:1.9rem 0;
  }
  .specialty-name{font-size:clamp(1.3rem,1.9vw,1.6rem);margin:0}
  .specialty-text{font-size:1.05rem;line-height:1.55;max-width:46ch}

  /* ── Форматы: каждая карточка на всю ширину; слева имя, цена и действие,
     справа состав. Так карточки не тянутся до высоты соседа и не пустеют. ── */
  .programs-grid{grid-template-columns:1fr;gap:1.25rem}
  .program-card{
    display:grid;
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    grid-template-rows:auto auto auto auto 1fr auto auto;
    column-gap:clamp(2.5rem,5vw,4.5rem);
    padding:2.5rem 2.75rem;
  }
  .program-name,.program-duration,.program-price,.program-desc,.program-note,.btn-program{grid-column:1}
  .program-note{grid-row:6;margin-top:1.5rem}
  .btn-program{grid-row:7}
  .program-name{font-size:1.75rem}
  .program-price{font-size:3.4rem}
  .program-desc{border-bottom:0;padding-bottom:0}
  .program-includes{
    grid-column:2;grid-row:1 / 8;align-self:start;
    padding:.35rem 0 .35rem clamp(2rem,4vw,3.5rem);
    border-left:1px solid var(--pc-line);
    gap:1rem;
  }
  .program-card.featured .program-includes{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));column-gap:2rem}

  /* ── Отзыв: заголовок слева, плита-цитата справа ── */
  .reviews{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);column-gap:clamp(3rem,6vw,6rem);align-items:start}
  .reviews > .section-title{grid-column:1;grid-row:1;margin-bottom:0}
  .review-wrap{grid-column:2;grid-row:1}
  .review-card{padding:2.75rem 3rem 2.4rem;gap:1.1rem}
  .review-quote{font-size:6rem;height:2.6rem}
  .review-text{font-family:var(--serif);font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.5;letter-spacing:-.01em;max-width:44ch}
  .review-author{margin-top:.9rem;padding-top:1.4rem}
  .review-avatar{width:48px;height:48px;flex-basis:48px}

  /* ── Материалы: слово и бесплатный гайд слева, кадр во всю высоту справа ── */
  .files{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);column-gap:clamp(3rem,6vw,6rem);align-items:start}
  .materials-intro{display:contents}
  .materials-copy{grid-column:1;grid-row:1}
  .materials-editorial{grid-column:2;grid-row:1 / span 2;align-self:stretch;position:relative;min-height:26rem}
  .materials-editorial picture,.materials-editorial img{position:absolute;inset:0;width:100%;height:100%}
  .materials-editorial img{object-fit:cover}
  .files > div:not(.materials-intro){grid-column:1;grid-row:2;align-self:end}
  .materials-lede{max-width:44ch;font-size:1.05rem}
  .library-title{margin-top:var(--space-block)}
  .files-grid--2{grid-template-columns:1fr}
  .file-card--free{grid-template-columns:3.5rem minmax(0,1fr) auto;align-items:center;column-gap:1.25rem;padding:1.5rem 1.6rem}
  .file-card--free .file-action{grid-column:3;margin-top:0}
  .file-card--free .file-btn{flex:0 0 auto}

  /* ── Шаги: четыре графы в ряд ── */
  .steps-grid{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));column-gap:var(--space-card)}
  .step-card{
    display:block;padding:1.5rem 1.5rem 0 0;border-top:1px solid var(--rule);
  }
  .step-card:last-child{border-bottom:0}
  .step-num{
    display:block;padding:0 0 1.6rem;
    font-family:var(--serif);font-size:2.4rem;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--sage);
  }
  .step-title{font-size:1.25rem;margin-bottom:.45rem}
  .step-text{max-width:30ch}

  /* ── FAQ: вопрос слева закреплён, ответы справа ── */
  .faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);column-gap:clamp(3rem,6vw,6rem);align-items:start}
  .faq > .section-title{grid-column:1;grid-row:1;margin-bottom:0;position:sticky;top:110px}
  .faq-list{grid-column:2;grid-row:1}
  .faq-question{font-size:1.12rem}
  .faq-answer{max-width:60ch}

  /* ── Заявка: слово и прямые контакты слева, форма справа ── */
  .contact{
    display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    grid-template-rows:auto auto 1fr;
    column-gap:clamp(3rem,6vw,6rem);align-items:start;
  }
  .contact > .section-title{grid-column:1;grid-row:1;margin-bottom:1rem}
  .contact > .contact-lede{grid-column:1;grid-row:2;max-width:none;margin-bottom:0}
  .contact > .contact-form{
    grid-column:2;grid-row:1 / span 3;grid-template-columns:1fr 1fr;column-gap:1.2rem;
    padding:2.5rem;border-radius:var(--radius);background:rgba(255,255,255,.05);
  }
  /* Линейка ровно посередине: воздух над ней равен воздуху под ней. */
  .contact > .contact-direct{grid-column:1;grid-row:3;align-self:start;margin-top:var(--space-block);padding-top:var(--space-block)}
  .contact-direct-actions{grid-template-columns:1fr}
  .form-row:has(textarea),.form-row--checkbox,.form-row--wide,.btn-submit,.form-status,
  .form-row:has(.format-choice){grid-column:1/-1}
  .format-choice{grid-template-columns:repeat(3,1fr)}

  /* ── Подвал ── */
  /* Подвал в две строки: подпись, навигация и соцсети; под волосяной линейкой —
     служебная строка. Мобильный подвал не меняется: верхняя строка только здесь. */
  footer{
    padding:3rem var(--pad-x) 2.25rem;
    grid-template-columns:auto auto 1fr auto;column-gap:1.75rem;row-gap:0;align-items:center;
    color:rgba(255,255,255,.55);
  }
  .footer-top{
    grid-column:1 / -1;
    display:flex;align-items:center;gap:2rem;
    padding-bottom:2rem;margin-bottom:1.25rem;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .footer-logo{line-height:0;margin-right:auto}
  .footer-logo img{height:28px;width:auto}
  /* Сброс стилей шапки: глобальный nav задаёт ей фон, высоту и размытие. */
  .footer-nav{display:flex;gap:.25rem;min-height:0;padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0}
  .footer-nav a{
    padding:.45rem .8rem;border-radius:var(--pill);
    font-size:.88rem;font-weight:500;text-decoration:none;color:rgba(255,255,255,.75);
    transition:background .2s var(--ease),color .2s var(--ease);
  }
  .footer-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
  .footer-social{display:flex;gap:.4rem}
  .footer-social a{
    display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:var(--pill);
    background:rgba(255,255,255,.08);transition:background .2s var(--ease);
  }
  .footer-social a:hover{background:rgba(255,255,255,.16)}
  .footer-social img{filter:invert(1) brightness(2);opacity:.85}
  footer > p:last-child{grid-column:4}
  footer > p:last-child a{padding:0;color:rgba(255,255,255,.55)}
  footer > p:last-child a:hover{color:#fff}

  /* Окно заявки шире и ниже по отступам, чтобы помещаться без прокрутки. */
  .request-modal{padding:1rem}
  .request-modal .intro-modal-card{max-width:520px;max-height:calc(100dvh - 2rem);padding:2rem 2.1rem 2rem}
  .request-modal-title{padding-right:2rem}

  .embedded-page-inner{padding:2.5rem var(--pad-x) 5rem}
  .recipe-filters{margin:2.5rem 0 2rem}
}

/* Узкий десктоп: шесть ссылок и капсула не помещаются в одну строку шапки,
   поэтому ссылки уходят в ту же шторку, что и на мобильном. */
@media(min-width:769px) and (max-width:1099px){
  .nav-links{display:none}
  .logo{flex:1 1 auto}
  .mobile-menu-toggle{display:grid}
}

/* ─────────── ПРОЯВЛЕНИЕ ПРИ СКРОЛЛЕ ─────────── */
/* Едва заметный сдвиг на 10px и появление, один раз. Классы вешает app.js,
   поэтому без JS всё видно сразу. После проявления классы снимаются,
   чтобы не мешать hover-переходам карточек. */
@media(prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(10px);
    transition:opacity .7s var(--ease) var(--rv-d,0ms),transform .7s var(--ease) var(--rv-d,0ms)}
  .rv.in{opacity:1;transform:none}
}