/* ═══════════════════════════════════════════════════════════════════════════
   portal.ayurvedabio.com — общ стил за всички страници.

   Различава се от лендингите в семейството по ЕДНО нещо и то определя всичко
   останало: аудиторията е възрастни хора, които отварят линка от телефона си
   веднъж, след консултация. Затова:

     - основният текст е с една стъпка по-едър от къщния (--step-1 вместо
       --step-0). Ситният текст е първата причина един такъв човек да затвори
       страницата;
     - всяка мишена е поне 56px висока, не 44px;
     - контрастът е по поправените стойности от design-system.md §12, а не по
       живите: #447556 за действие и #8A6210 за надзаглавие. Живите падат на
       AA и точно тук това има значение.

   Цветът: къщният документ пише, че ДЕЙСТВИЕТО е един-единствен токен, и това
   важи и тук - #447556, само на бутоните. Десетте цвята на картите НЕ са
   действие; те са „support hues", които същият документ оставя неуправлявани.
   Служат за разпознаване: човек, който не чете етикетите, помни, че рецептите
   са жълтата карта. Затова наситеният цвят е в кръга с иконата, а фонът на
   картата е същият тон при 8%: цвят колкото да се различава, не колкото да
   бори текста. Текстът върху всяка карта е INK и минава 12:1 навсякъде.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Шрифтовете се вдигат от собствен <link> в layout.html, с версия в URL-а.
   Тук стоеше @import: без версия (кешираният файл оставаше стар при смяна на
   подшрифт) и последователно теглене, css чака css. */

:root {
  /* роли по design-system.md §1, палитра „doctor" */
  --paper:      #FFF9F0;
  --card:       #FFFCF7;
  --ink:        #1F2A20;
  --muted:      #52604F;
  --leaf:       #3D6B4F;   /* STRUCTURE */
  --cta:        #447556;   /* ACTION - поправената стойност, 5.35:1 */
  --cta-dark:   #375F46;
  --gold:       #E8B45A;   /* ACCENT */
  --bronze:     #8A6210;   /* ACCENT-TEXT - поправената стойност, 5.23:1 */
  --line:       #E9DDCB;   /* HAIRLINE */
  --deep:       #1C3527;   /* DARK */

  /* тип скала (§3) */
  --step--1: clamp(14px, 13.2px + .26vw, 16px);
  --step-0:  clamp(17px, 16.2px + .26vw, 20px);
  --step-1:  clamp(20px, 18.6px + .45vw, 24px);
  --step-2:  clamp(24px, 21.6px + .7vw,  31px);
  --step-3:  clamp(30px,   26px + 1.3vw, 41px);
  --step-4:  clamp(37px,   30px + 2.2vw, 58px);

  --max: 1010px;
  --shadow: 0 10px 30px rgba(61, 107, 79, .10);
  --shadow-cta: 0 8px 22px rgba(68, 117, 86, .30);

  /* Тъмният банер за контролния преглед. Двете спирки на градиента са тук, а
     не заровени в правилото, защото qa/gates.py мери контраста срещу
     ПО-СВЕТЛАТА от тях: тя е най-лошият случай за белия текст отгоре. Смени ли
     се --promo-b на нещо по-светло, гейтът пада, вместо текстът тихо да падне
     под AA в единия край на банера. */
  --promo-a:    #16291E;
  --promo-b:    #2E5240;
  --promo-text: #DDE8DE;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding-top: 76px;                 /* лентата горе е фиксирана */
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', 'Inter-fallback', system-ui, sans-serif;
  font-size: var(--step-1);          /* с една стъпка над къщното тяло */
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.shell { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }

h1, h2, h3 { margin: 0 0 16px; text-wrap: balance; }
h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: clamp(34px, 22px + 3.1vw, 62px);
  line-height: 1.06;
  color: var(--leaf);
}
h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: var(--step-3);
  line-height: 1.14;
  color: var(--leaf);
}
h3 { font-size: var(--step-2); font-weight: 600; line-height: 1.4; }

p { margin: 0 0 16px; max-width: 65ch; }
a { color: var(--leaf); }
a:focus-visible, button:focus-visible, summary:focus-visible, audio:focus-visible {
  outline: 3px solid var(--cta-dark);
  outline-offset: 2px;
}

.eyebrow {
  margin: 0 0 12px;
  font-size: clamp(13px, 12px + .2vw, 15px);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronze);
}

/* ── лентата горе ─────────────────────────────────────────────────────────
   Фиксирана, защото на дълга страница „обратно" трябва да е под палеца по
   всяко време, а не само в началото.                                       */
.topbar {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: 76px;
  display: flex; align-items: center;
  background: rgba(255, 249, 240, .94);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar .shell { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* Логото е и линк към началото. Само по себе си е 42px високо, тоест две
   пиксела под минималната мишена - затова анкерът получи собствена височина. */
.topbar > .shell > a { display: inline-flex; align-items: center; min-height: 44px; }
.topbar img { display: block; width: auto; height: 42px; }
.back {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 48px; padding: 10px 20px 10px 15px;
  border: 2px solid rgba(68, 117, 86, .55);
  border-radius: 999px;
  background: rgba(255, 252, 247, .7);
  color: var(--leaf);
  font-size: 17px; font-weight: 600;
  text-decoration: none;
  transition: background .18s ease, transform .18s ease;
}
.back:hover { background: #fff; transform: translateY(-2px); }
.back svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* ── героят ───────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding: clamp(30px, 3.6vw, 54px) 0 clamp(26px, 3vw, 42px); }
.hero-glow {
  position: absolute; inset: -30% -10% auto -10%; height: 130%;
  background: radial-gradient(60% 55% at 50% 28%, rgba(232, 180, 90, .20), rgba(255, 249, 240, 0) 70%);
  pointer-events: none;
}
.hero .shell { position: relative; }
.lede { font-size: var(--step-1); color: var(--muted); max-width: 62ch; }

/* ── решетката с бутоните ─────────────────────────────────────────────────
   Една колона до 759px и две над него. Три колони НЕ се правят: на 1010px
   картата пада под 300px, иконата и заглавието се смачкват и целият смисъл
   на „по-големи бутони" се губи.                                          */
.cards {
  display: grid; gap: 16px;
  /* Долният отстъп е малък, защото под картите вече стои панелът с програмата.
     Дотогава тук имаше clamp(52px, 7vw, 90px) - целият въздух до футъра. */
  padding: 0 0 clamp(28px, 3.4vw, 44px);
  list-style: none; margin: 0;
}
@media (min-width: 760px) { .cards { grid-template-columns: 1fr 1fr; gap: 20px; } }

.card {
  position: relative;
  display: flex; align-items: center; gap: 18px;
  min-height: 112px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--ink);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(61, 107, 79, .16); }
.card:focus-visible { outline: 3px solid var(--cta-dark); outline-offset: 3px; }

.card-icon {
  display: grid; place-items: center;
  width: 68px; height: 68px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--hue);
  color: #fff;
}
.card-icon svg { width: 34px; height: 34px; }
.card-body { min-width: 0; }
.card-title {
  display: block;
  font-size: var(--step-2); font-weight: 600; line-height: 1.25;
  margin: 0 0 4px;
}
.card-note { display: block; font-size: var(--step--1); color: var(--muted); line-height: 1.45; }

/* Тонът на картата: същият цвят при 8%. Толкова стига, за да се различат
   десет карти една от друга, без да се бори с текста върху тях. */
.card { background: color-mix(in srgb, var(--hue) 15%, var(--card)); }
.card:hover { border-color: color-mix(in srgb, var(--hue) 35%, var(--line)); }

/* Петте тона. Повтарят се по двойки - десет различни цвята не се помнят,
   пет се помнят. Всеки е достатъчно тъмен, за да носи бяла икона (≥ 4.5:1). */
.hue-leaf   { --hue: #3D6B4F; }
.hue-bronze { --hue: #8A6210; }
.hue-water  { --hue: #2F6577; }
.hue-clay   { --hue: #9C4F30; }
.hue-indigo { --hue: #41517C; }

/* Малкият знак „това е PDF" или „това е външен сайт". Стои СЛЕД описанието,
   в потока. Първата версия го слагаше абсолютно горе вдясно и той се качваше
   върху заглавието на всяка карта с по-дълъг надпис - тоест на половината. */
.card-kind {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px;
  padding: 3px 12px 3px 9px;
  border-radius: 999px;
  background: rgba(255, 252, 247, .8);
  border: 1px solid var(--line);
  font-size: 14px; font-weight: 600; color: var(--muted);
}
.card-kind svg { width: 15px; height: 15px; }

/* ── банерът за контролен преглед ─────────────────────────────────────────
   Единственото рекламно място на портала и затова е точно едно. Стои между
   героя и десетте карти: над всичко, което човек ще чете, и под изречението,
   което му обяснява къде е попаднал.

   Тъмен на кремава страница, вместо още една кремава карта с по-дебел ръб.
   Картите са десет и всички са в един тон; каквото и да сложим между тях в
   същия тон, окото го брои за единайсета карта и го подминава. Обратният
   контраст е единственото, което се вижда от разстояние на телефон.

   Бутонът е златен, а не зелен. Зеленото ДЕЙСТВИЕ (#447556) върху тъмнозелен
   банер е 1.6:1 - бутонът просто изчезва. Златото с тъмно мастило отгоре е
   6.9:1 и е същата двойка, която носят номерата в мудрите.                  */
.promo { padding: 0 0 clamp(26px, 3.2vw, 40px); }
.promo-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(18px, 2.4vw, 28px);
  padding: clamp(22px, 2.8vw, 30px) clamp(22px, 3vw, 34px);
  border-radius: 26px;
  background: linear-gradient(122deg, var(--promo-a), var(--promo-b));
  box-shadow: 0 16px 40px rgba(22, 41, 30, .22);
}
/* Кръгът е закачен ГОРЕ, не центриран като при картите: тук текстът е четири
   реда и центрираният кръг увисва до средата на абзаца, далеч от заглавието,
   на което е знак. Ръбът е там, защото златото при 14% върху тъмнозелено се
   губи: без хайрлайна кръгът се вижда като петно, не като икона. */
.promo-icon {
  display: grid; place-items: center;
  align-self: start;
  width: 76px; height: 76px; flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(232, 180, 90, .14);
  border: 1px solid rgba(232, 180, 90, .34);
  color: var(--gold);
}
.promo-icon svg { width: 38px; height: 38px; }
.promo-eyebrow {
  margin: 0 0 8px;
  font-size: clamp(13px, 12px + .2vw, 15px);
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold);
}
.promo-card h2 {
  margin: 0 0 10px;
  font-size: var(--step-2); line-height: 1.18;
  color: #fff;
}
.promo-card p { margin: 0; max-width: 56ch; font-size: var(--step-0); color: var(--promo-text); }

/* Мишената е 60px, не 56px: това е бутонът, който трябва да се улучи от пръв
   път на телефон, държан с една ръка. */
.promo-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 60px; padding: 0 30px;
  border-radius: 999px;
  background: var(--gold); color: var(--deep);
  font-size: var(--step-0); font-weight: 700; text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(22, 41, 30, .3);
  transition: background .18s ease, transform .18s ease;
}
.promo-cta:hover { background: #F2C271; transform: translateY(-2px); }
.promo-cta:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* Под 860px трите колони не се събират: заглавието остава три думи на ред, а
   бутонът се смачква до вертикална дума. Иконата минава над текста, бутонът
   става на цяла ширина - там е под палеца, а не в ъгъла. */
@media (max-width: 859px) {
  .promo-card { grid-template-columns: 1fr; gap: 16px; }
  .promo-cta { width: 100%; }
}

/* ── следващата стъпка: 12-месечната програма ─────────────────────────────
   Стои след десетте карти. Тя не е насока след консултацията като тях, а
   покана нататък, и точно затова не е карта в решетката: сложена вътре, тя би
   изглеждала като още едно нещо за четене и би избутала Дневния режим извън
   екрана.

   Тук банерът е тих: кремав, със златна нишка и един зелен бутон. Два тъмни
   банера на една страница се четат като две реклами и човек спира да вярва и
   на двете.                                                                */
.nextstep { padding: 0 0 clamp(52px, 7vw, 90px); }
.nextstep-card {
  padding: clamp(24px, 3.2vw, 36px);
  border: 1px solid rgba(232, 180, 90, .5);
  border-radius: 26px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--gold) 14%, var(--card)), var(--card) 62%);
  box-shadow: var(--shadow);
}
.nextstep-head { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 20px); margin: 0 0 18px; }
.nextstep-title { min-width: 0; }
.nextstep-title .eyebrow { margin: 0 0 6px; }
.nextstep-card h2 { margin: 0; font-size: var(--step-2); line-height: 1.18; }
.nextstep-lede { font-size: var(--step-0); margin: 0 0 20px; }

/* Кръгът е златен, а знакът в него бронзов: същата двойка ACCENT / ACCENT-TEXT,
   която носи и надзаглавието отгоре. Контрастът ѝ е 4.74:1 и се мери в гейта,
   защото златото при 22% е точно на границата - още два процента и пада. */
.nextstep-icon {
  display: grid; place-items: center;
  width: 68px; height: 68px; flex: 0 0 auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gold) 22%, var(--card));
  border: 1px solid rgba(232, 180, 90, .5);
  color: var(--bronze);
}
.nextstep-icon svg { width: 36px; height: 36px; }

/* На телефон кръгът отива НАД надписа. До него заглавието остава колона от две
   думи на ред и „Включи се в нашата 12-месечна програма" се разкъсва на „12-" и
   „месечна". */
@media (max-width: 599px) {
  .nextstep-head { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* Четирите неща, които бяха едно изречение с двоеточие и четири запетаи. На
   екран такова изречение се чете като стена; изброени, те се сканират за
   секунда и точно това прави човек, който вече е прочел десет карти. */
.nextstep-list {
  display: grid; gap: 12px 26px;
  margin: 0 0 24px; padding: 0;
  list-style: none;
}
@media (min-width: 760px) { .nextstep-list { grid-template-columns: 1fr 1fr; } }
.nextstep-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: var(--step-0); line-height: 1.4;
}
.nextstep-list svg {
  width: 24px; height: 24px; flex: 0 0 auto;
  margin-top: 2px;
  color: var(--cta);
}

/* Бутонът и дребният шрифт стоят рамо до рамо на широк екран и един под друг на
   телефон. Изречението е ДО бутона, а не над него, защото отговаря на въпроса,
   който човек си задава точно докато гледа бутона: „какво става, ако натисна". */
.nextstep-act { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 22px; }
.nextstep-act .fine {
  margin: 0; flex: 1 1 22ch;
  font-size: var(--step--1); line-height: 1.45; color: var(--muted);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 60px; padding: 0 30px;
  border-radius: 999px;
  background: var(--cta); color: #fff;
  font-size: var(--step-0); font-weight: 700; text-decoration: none;
  box-shadow: var(--shadow-cta);
  transition: background .18s ease, transform .18s ease;
}
.btn:hover { background: var(--cta-dark); transform: translateY(-2px); }
@media (max-width: 599px) { .btn { display: flex; } }

/* ── стълбичката се изкачва ───────────────────────────────────────────────
   Трите стъпала се рисуват едно след друго, после точката горе изплува. Играе
   се ТОЧНО веднъж, когато панелът влезе в екрана, и после стои мирно: същото
   правило като на всичко останало тук.

   Скритото състояние виси на `:not(.is-in)`, а НЕ на самата анимация. Разликата
   личи при снимките за проверка: `html.motion-settled` гаси всички анимации, и
   ако началният кадър беше в keyframes-ите, иконата щеше да остане невидима на
   всяка снимка. Така, щом класът `.is-in` дойде, пътечките са цели дори когато
   анимацията изобщо не се пуска.

   Дължината на всяко стъпало е 8.5 единици; 10 в dasharray стига да го покрие
   цялото. Тя стои винаги, защото при dashoffset 0 не се вижда разлика.        */
.st { stroke-dasharray: 10; }
.st-dot { transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: no-preference) {
  html.motion .nextstep-card:not(.is-in) .st { stroke-dashoffset: 10; }
  html.motion .nextstep-card:not(.is-in) .st-dot { opacity: 0; transform: scale(.4); }

  html.motion .nextstep-card.is-in .st { animation: st-draw .5s cubic-bezier(.22, .61, .36, 1) both; }
  html.motion .nextstep-card.is-in .st-2 { animation-delay: .16s; }
  html.motion .nextstep-card.is-in .st-3 { animation-delay: .32s; }
  html.motion .nextstep-card.is-in .st-dot {
    animation: st-pop .45s cubic-bezier(.34, 1.4, .5, 1) .52s both;
  }
  @keyframes st-draw { from { stroke-dashoffset: 10; } to { stroke-dashoffset: 0; } }
  @keyframes st-pop {
    from { opacity: 0; transform: scale(.4); }
    to   { opacity: 1; transform: scale(1); }
  }
}

/* ── съдържателните подстраници ───────────────────────────────────────── */
.prose { padding: clamp(10px, 2vw, 24px) 0 clamp(52px, 7vw, 90px); }
.prose h2 { margin-top: clamp(32px, 4vw, 48px); }
.prose h3 { margin-top: 26px; margin-bottom: 8px; }
.prose ul, .prose ol { max-width: 65ch; padding-left: 26px; margin: 0 0 16px; }
.prose li { margin-bottom: 10px; }
.prose strong { font-weight: 600; }

.panel {
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow);
  margin: 0 0 20px;
}
.panel > :last-child { margin-bottom: 0; }
.panel-tint { background: color-mix(in srgb, var(--hue, var(--leaf)) 12%, var(--card)); }

/* Голям бутон-файл вътре в подстраница. Същата мишена като картите отпред. */
.filelink {
  display: flex; align-items: center; gap: 16px;
  min-height: 76px; padding: 16px 20px;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--card);
  color: var(--ink); text-decoration: none; font-weight: 600;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.filelink + .filelink { margin-top: 12px; }
.filelink:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: rgba(68, 117, 86, .45); }
.filelink-icon {
  display: grid; place-items: center;
  width: 52px; height: 52px; flex: 0 0 auto;
  border-radius: 50%; background: var(--hue, var(--leaf)); color: #fff;
}
.filelink-icon svg { width: 26px; height: 26px; }
.filelink small { display: block; font-weight: 400; font-size: var(--step--1); color: var(--muted); }

/* ── аудио плеърът ────────────────────────────────────────────────────────
   Нативният <audio> нарочно. Всяка самоделка тук значи собствени бутони,
   собствен фокус и собствени грешки на телефон, а нативният вече работи и
   на iOS, и с екранен четец, и заключва екрана правилно.                  */
.track { margin: 0 0 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.track h3 { margin: 0 0 4px; font-size: var(--step-1); }
.track p { margin: 0 0 12px; font-size: var(--step--1); color: var(--muted); }
.track audio { display: block; width: 100%; min-height: 44px; }
.track .dl { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; min-height: 44px; font-size: var(--step--1); font-weight: 600; }
.track .dl svg { width: 18px; height: 18px; }

/* ── видео плеърът ────────────────────────────────────────────────────────
   Едно видео има порталът, Деви Кавачам, и то стои в Bunny, не тук: 226 MB на
   нашия хостинг се теглят цели при всяко отваряне и на телефон с мобилен
   интернет това е сметка, не практика.

   Съотношението е заковано на 16:9 в обвивката, а не оставено на iframe-а.
   Иначе, докато плеърът се вдига, страницата е с нулева височина на това
   място и текстът под него подскача точно когато човек чете.               */
.video { position: relative; margin: 0 0 18px; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: rgba(82, 96, 79, .08); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── мудрите ──────────────────────────────────────────────────────────────
   Снимките са изрязани от брошурата и там са на 150 ppi: 400px е техният
   таван, не избор. Затова слотът е закован на 300px и не се разтяга - при
   400px колона същата снимка става видимо мека.

   Позата и дишането са еднакви и за четирите и стоят ВЕДНЪЖ, в бележката
   над картите. Повторени във всяка карта, те са четири еднакви абзаца,
   които човек спира да чете още на втория - а точно в тях е разликата
   между „сложи ръцете си" и „седни както трябва".                        */
.mudra {
  display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: start;
  padding: 20px; margin: 0 0 18px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--card);
}
.mudra-photo {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: 12px; background: rgba(82, 96, 79, .08);
}
.mudra-body h3 { margin: 0 0 12px; font-size: var(--step-1); color: var(--leaf); }
.mudra-body ol { list-style: none; margin: 0; padding: 0; max-width: none; counter-reset: mstep; }
.mudra-body li { position: relative; margin: 0 0 10px; padding-left: 44px; font-size: var(--step-0); }
.mudra-body li:last-child { margin-bottom: 0; }
.mudra-body li::before {
  counter-increment: mstep; content: counter(mstep);
  position: absolute; left: 0; top: 1px;
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--gold); color: var(--deep);
  font-size: 15px; font-weight: 700; line-height: 1;
}
/* Под 720px снимката отива отгоре, но не на цялата ширина: ръка, разпъната
   на 100% от екрана, изглежда като грешка, а не като илюстрация. */
@media (max-width: 719px) {
  .mudra { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
  .mudra-photo { max-width: 360px; }
}

/* ── таблицата с Екадаши ──────────────────────────────────────────────────
   На телефон таблица с пет колони е нечетима, затова под 760px всеки ред
   се превръща в карта: датата е заглавие, останалото са двойки етикет:
   стойност, четени от псевдоелемент с data-label.                        */
.tablewrap { overflow-x: auto; margin: 0 0 20px; }
table.cal { width: 100%; border-collapse: collapse; font-size: var(--step-0); }
table.cal caption { text-align: left; padding-bottom: 12px; color: var(--muted); font-size: var(--step--1); }
table.cal th, table.cal td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.cal thead th { font-size: 14px; letter-spacing: .04em; color: var(--muted); font-weight: 600; white-space: nowrap; }
table.cal tbody tr:nth-child(odd) { background: rgba(232, 180, 90, .06); }
table.cal .name { font-weight: 600; }
table.cal .is-next { background: color-mix(in srgb, var(--leaf) 12%, var(--card)) !important; }
table.cal .is-next .name::after {
  content: "следващият"; display: inline-block; margin-left: 8px;
  padding: 2px 10px; border-radius: 999px;
  background: var(--leaf); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
@media (max-width: 759px) {
  table.cal, table.cal tbody, table.cal tr, table.cal td { display: block; width: 100%; }
  /* Под display:block на таблицата caption-ът остава table-caption и се
     свива до нула ширина: надписът излизаше по една дума на ред. */
  table.cal caption { display: block; width: 100%; }
  table.cal thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.cal tbody tr {
    margin-bottom: 12px; padding: 6px 4px 10px;
    border: 1px solid var(--line); border-radius: 16px; background: var(--card);
  }
  table.cal tbody tr:nth-child(odd) { background: var(--card); }
  table.cal td { border-bottom: 0; padding: 6px 14px; }
  table.cal td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 600; color: var(--muted);
  }
  table.cal td.name { font-size: var(--step-0); padding-top: 12px; }
  table.cal td.name::before { content: none; }
  /* Етикетът идва от атрибут, не от текст, затова не може да се опакова в
     <span> като останалото. По един атрибут на език и по едно правило. */
  html.lang-en table.cal td[data-label-en]::before { content: attr(data-label-en) ": "; }
  html.lang-ro table.cal td[data-label-ro]::before { content: attr(data-label-ro) ": "; }
}

/* ── дошите ───────────────────────────────────────────────────────────── */
.dosha { margin: 0 0 20px; }
.dosha summary {
  display: flex; align-items: center; gap: 14px;
  min-height: 76px; padding: 14px 18px;
  border: 1px solid var(--line); border-radius: 22px;
  background: color-mix(in srgb, var(--hue) 14%, var(--card));
  cursor: pointer; list-style: none;
  font-size: var(--step-2); font-weight: 600;
}
.dosha summary::-webkit-details-marker { display: none; }
.dosha summary::after {
  content: "+"; margin-left: auto;
  font-size: 30px; font-weight: 400; line-height: 1; color: var(--leaf);
}
.dosha[open] summary::after { content: "\2013"; }
.dosha[open] summary { border-radius: 22px 22px 0 0; }
.dosha .dosha-body {
  padding: 20px 18px 6px;
  border: 1px solid var(--line); border-top: 0; border-radius: 0 0 22px 22px;
}
.dosha-el { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 auto; border-radius: 50%; background: var(--hue); color: #fff; }
.dosha-el svg { width: 26px; height: 26px; }
.dosha-grid { display: grid; gap: 18px; }
@media (min-width: 760px) { .dosha-grid { grid-template-columns: 1fr 1fr; } }
/* Снимката на ястието, извадена от брошурата. Живее ВЪТРЕ в решетката на
   рецептата (.has-photo): на широк екран е лява колона до съставките и
   приготвянето, за да не оставя празно поле вдясно; на средни ширини е свой
   ред над тях; на телефон всичко е една колона. 340px е таван за тесните
   изгледи: кадрите са портретни и на цял ред избутват рецептата под сгъвката. */
.dosha-photo {
  display: block; width: 100%; max-width: 340px; height: auto;
  margin: 0; border-radius: 12px;
  background: rgba(82, 96, 79, .08);
}
@media (min-width: 760px) and (max-width: 1023px) {
  .dosha-grid.has-photo .dosha-photo { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .dosha-grid.has-photo { grid-template-columns: 280px 1fr 1fr; align-items: start; }
  /* Височината се заковава на 3:4 с object-fit, за да е наравно с текста и
     деветте кадъра да стоят еднакво, макар оригиналите да са разнобойни. */
  .dosha-grid.has-photo .dosha-photo {
    max-width: none; aspect-ratio: 3 / 4; object-fit: cover;
  }
}
.dosha-grid h4 { margin: 0 0 8px; font-size: var(--step-0); font-weight: 600; color: var(--leaf); }
.dosha-grid ul { margin: 0; padding-left: 22px; }
.dosha-grid li { margin-bottom: 6px; font-size: var(--step-0); }

/* ── бележка / предупреждение ─────────────────────────────────────────── */
.note {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 20px; margin: 0 0 20px;
  border: 1px solid rgba(232, 180, 90, .55);
  border-radius: 16px;
  background: linear-gradient(102deg, rgba(232, 180, 90, .16), rgba(255, 252, 247, .5) 62%);
  font-size: var(--step-0); line-height: 1.5;
}
.note svg { width: 26px; height: 26px; flex: 0 0 auto; color: var(--bronze); margin-top: 2px; }
.note p { margin: 0; max-width: none; }
.note p + p { margin-top: 8px; }

/* „скоро": същият размер като истинска карта, но нарочно не е линк, защото
   няма къде да води. Сива, за да не се чака клик, който няма да се случи. */
.soon {
  display: flex; align-items: center; gap: 16px;
  min-height: 76px; padding: 16px 20px; margin: 0 0 12px;
  border: 1px dashed var(--line); border-radius: 16px;
  background: rgba(82, 96, 79, .04); color: var(--muted);
}
.soon-icon { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 auto; border-radius: 50%; background: rgba(82, 96, 79, .12); color: var(--muted); }
.soon-icon svg { width: 26px; height: 26px; }
.soon strong { display: block; color: var(--ink); font-weight: 600; }
.soon small { font-size: var(--step--1); }

/* ── футър ────────────────────────────────────────────────────────────── */
footer.site {
  padding: clamp(34px, 4.4vw, 54px) 0;
  border-top: 1px solid var(--line);
  background: var(--card);
  font-size: var(--step--1);
  color: var(--muted);
}
footer.site .shell { display: grid; gap: 14px; }
/* Връзките във футъра стоят сами на реда си, а не вътре в изречение:
   значи са истински мишени и им трябва височината на мишена. Линковете
   вътре в абзац нарочно остават на реда си - WCAG прави точно това
   изключение за тях и разреденият текст се чете по-зле. */
footer.site a { display: inline-flex; align-items: center; min-height: 44px;
                color: var(--leaf); font-weight: 600; }
footer.site .tel { font-size: var(--step-0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── език на рецептите ────────────────────────────────────────────────── */
/* Трите версии стоят една до друга в HTML-а; вижда се само активната.
   По подразбиране това е българската, затова английската и румънската са
   скрити още от CSS-а: изгасне ли JS, страницата пак е цяла и на български.
   `revert` връща display-а по подразбиране - block за div, inline за span -
   вместо да се изброява кой елемент какъв е. */
.l[data-lang="en"], .l[data-lang="ro"] { display: none; }
html.lang-en .l[data-lang="bg"], html.lang-ro .l[data-lang="bg"] { display: none; }
html.lang-en .l[data-lang="en"] { display: revert; }
html.lang-ro .l[data-lang="ro"] { display: revert; }

/* Превключвателят живее в лентата горе, до бутона „Всички насоки" (затова
   margin-left: auto - тласка го надясно, при съседа му). Лентата е hidden в
   разметката и се вдига от скрипта: мъртви бутони при изключен JS не се
   показват. */
.langbar { display: inline-flex; gap: 6px; margin-left: auto; }
.langbar[hidden] { display: none; }
.langbtn {
  font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .04em;
  /* 44px е подът за мишена на телефон - тук е закован и по двете оси. */
  min-width: 46px; min-height: 44px; padding: 0 10px;
  border-radius: 999px; cursor: pointer;
  color: var(--leaf); background: rgba(255, 252, 247, .7);
  border: 2px solid rgba(68, 117, 86, .35);
  transition: background .18s ease;
}
.langbtn:hover { border-color: rgba(68, 117, 86, .55); background: #fff; }
.langbtn[aria-pressed="true"] { color: #fff; background: #447556; border-color: #447556; }

/* На тесен телефон трите бутона и „Всички насоки" не се събират до логото.
   Отстъпва етикетът: стрелката остава, а името е в title и в достъпното име.
   Селекторът е нарочно през :not([hidden]) - без JS лентата я няма и няма
   причина етикетът да изчезва. */
@media (max-width: 600px) {
  .langbar:not([hidden]) ~ .back .back-label { display: none; }
  .langbar:not([hidden]) ~ .back { padding: 10px 14px; }
}

/* ── слушалката пред телефона ─────────────────────────────────────────── */
/* Поклащането е леко и кратко нарочно: този портал го четат възрастни хора,
   а постоянно движеща се иконка до текст пречи на четенето. Три завъртания,
   после четири секунди мир. Изключва се при prefers-reduced-motion. */
.tel-ic {
  width: 1.05em; height: 1.05em; flex: 0 0 auto;
  margin-right: .35em; vertical-align: -.15em;
  transform-origin: 50% 85%;
  animation: tel-nudge 5s ease-in-out infinite;
}
@keyframes tel-nudge {
  0%, 12%, 100% { transform: rotate(0deg); }
  3%            { transform: rotate(-11deg); }
  6%            { transform: rotate(9deg); }
  9%            { transform: rotate(-5deg); }
}
/* В кръглия бутон горе размерът идва от .back svg; тук остава само люлеенето. */
.back .tel-ic { width: 20px; height: 20px; margin-right: 0; vertical-align: baseline; }

@media (prefers-reduced-motion: reduce) {
  .tel-ic { animation: none; }
}

/* ── „Дишане": раздвижването при скрол ────────────────────────────────────
   Аудиторията са възрастни хора, които отварят линка веднъж, след
   консултация, от телефон. Затова правилото е едно и важи навсякъде: всяко
   нещо се движи ТОЧНО веднъж, при влизане в екрана, и после стои мирно
   завинаги. Нищо не пулсира, нищо не се повтаря, нищо не мърда, докато се
   чете. Движението казва „страницата е жива", не „виж ме".

   Скриването е тук, в CSS, а НЕ в скрипта, и виси на класа .motion върху
   <html>, вдигнат от вграден скрипт в началото на <body>. Ако списъкът се
   раздаваше от JS след първото рисуване, картите щяха първо да се покажат,
   после да изчезнат и чак тогава да изплуват. Това мигане е по-грозно от
   липсата на анимация.

   Затова списъкът се пише два пъти: веднъж за скритото състояние (с
   :not(.is-in)) и веднъж за прехода. Същият списък стои и в скрипта долу в
   страницата - сменя ли се тук, сменя се и там.

   .motion се вдига само ако има IntersectionObserver и човекът НЕ е поискал
   „намалено движение". Гръмне ли скриптът, той сам сваля класа и страницата
   остава цяла, само неподвижна.                                            */
@media (prefers-reduced-motion: no-preference) {
  html.motion .hero .eyebrow:not(.is-in),
  html.motion .hero h1:not(.is-in),
  html.motion .hero .lede:not(.is-in),
  html.motion .cards > li:not(.is-in),
  html.motion .prose h2:not(.is-in),
  html.motion .prose h2 + p:not(.is-in),
  html.motion .prose h2 + ul:not(.is-in),
  html.motion .prose h2 + ol:not(.is-in),
  html.motion .filelink:not(.is-in),
  html.motion .track:not(.is-in),
  html.motion .note:not(.is-in),
  html.motion .soon:not(.is-in),
  html.motion .mudra:not(.is-in),
  html.motion .panel:not(.is-in),
  html.motion .promo-card:not(.is-in),
  html.motion .nextstep-card:not(.is-in),
  html.motion details.dosha:not(.is-in) {
    opacity: 0;
    transform: translateY(30px);
  }
  html.motion .hero .eyebrow,
  html.motion .hero h1,
  html.motion .hero .lede,
  html.motion .cards > li,
  html.motion .prose h2,
  html.motion .prose h2 + p,
  html.motion .prose h2 + ul,
  html.motion .prose h2 + ol,
  html.motion .filelink,
  html.motion .track,
  html.motion .note,
  html.motion .soon,
  html.motion .mudra,
  html.motion .panel,
  html.motion .promo-card,
  html.motion .nextstep-card,
  html.motion details.dosha {
    transition: opacity .8s cubic-bezier(.22, .61, .36, 1) var(--rv-d, 0s),
                transform .8s cubic-bezier(.22, .61, .36, 1) var(--rv-d, 0s);
  }

  /* Снимките влизат и с мащаб: 0.88 е достатъчно, за да се усети, и малко
     достатъчно, за да не се чете като „изскача". */
  html.motion .mudra-photo:not(.is-in),
  html.motion .dosha-photo:not(.is-in) { opacity: 0; transform: scale(.86); }
  html.motion .mudra-photo,
  html.motion .dosha-photo {
    transform-origin: 50% 60%;
    transition: opacity .9s ease, transform .9s cubic-bezier(.22, .61, .36, 1);
  }

  /* Кръгът с иконата язди закъснението на своята карта: няма собствен
     наблюдател, само наследеното --rv-d. */
  html.motion .cards > li:not(.is-in) .card-icon { transform: scale(.78) rotate(-8deg); }
  html.motion .cards > li .card-icon {
    transition: transform .8s cubic-bezier(.22, .61, .36, 1) var(--rv-d, 0s);
  }
}

/* Снимката за проверка (?jump=…) не бива да улови средата на прехода:
   всичко се заковава в завършено състояние, без анимация. */
html.motion-settled *, html.motion-settled *::before, html.motion-settled *::after {
  transition: none !important; animation: none !important;
}

/* Лентата горе е без сянка на върха на страницата. Тръгне ли човек надолу,
   ляга тънка сянка: така се вижда, че текстът минава ПОД лентата, а не се
   губи В нея. Това не е анимация за красота, а ориентир, затова остава и
   при „намалено движение". */
.topbar { transition: box-shadow .3s ease; }
.topbar.is-scrolled { box-shadow: 0 4px 18px rgba(31, 42, 32, .09); }

/* Акордеонът се разгъва, вместо да цъква отворен. Височината я движи
   скриптът (WAAPI); CSS-ът само пази съдържанието изрязано, докато трае
   движението. Без JS <details> си работи както винаги.                      */
.dosha-body.is-sliding { overflow: hidden; }

/* ── второто дишане: непрекъснатото движение ──────────────────────────────
   Първата версия правеше всичко „точно веднъж, много кротко" и на широк
   екран това се четеше като „нищо не се движи": четири от десетте карти
   вече бяха показани, докато страницата се зарежда, а останалите шест
   изплуваха с четиринайсет пиксела. Затова тук се добавя движение, което
   ОТГОВАРЯ на скрола и не свършва: линията на напредъка, дишащото сияние и
   плъзгането на героя. Всичко е transform/opacity, тоест го носи графичният
   процесор и не пипа разположението.                                      */

/* Линията на напредъка: живее в долния ръб на лентата горе, така че не
   отнема нито пиксел от съдържанието. Няма собствен елемент - псевдо-
   елемент е, за да не се пипа разметката на осемте страници. */
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: linear-gradient(90deg, var(--cta), var(--gold));
  transform: scaleX(var(--sp, 0)); transform-origin: 0 50%;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .topbar::after { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  /* Сиянието зад героя диша: девет секунди на цикъл, толкова бавно, че се
     усеща като светлина, а не като анимация. Заради него концепцията се
     казва „Дишане" - дотук името беше без покритие. */
  html.motion .hero-glow {
    animation: breathe 9s ease-in-out infinite;
    transform-origin: 50% 30%;
  }
  @keyframes breathe {
    0%, 100% { transform: scale(1);    opacity: .8; }
    50%      { transform: scale(1.14); opacity: 1;  }
  }

  /* Героят изостава от скрола: страницата минава по-бързо от него и той
     потъва нагоре. Стойността я подава скриптът и само над 760px - на
     телефон скролът е по-важен от дълбочината. */
  html.motion .hero .shell {
    transform: translate3d(0, var(--par, 0px), 0);
    opacity: var(--par-o, 1);
  }

  /* Показалецът на мишката получава отговор, който се вижда: картата се
     вдига шест пиксела вместо два, а кръгът с иконата подскача. */
  @media (hover: hover) {
    .card { transition: transform .35s cubic-bezier(.22, .61, .36, 1),
                        box-shadow .35s ease, border-color .3s ease; }
    .card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(61, 107, 79, .2); }
    html.motion .cards > li.is-in .card:hover .card-icon { transform: scale(1.09) rotate(4deg); }
    .filelink:hover { transform: translateY(-4px); }
  }
}