/* Opora (Pochatok template) — ported from Templates/23.10.2026/opora-psycholog/opora/project/Main.dc.html
   (desktop 1440 + the 375 board). Look of the source: pills everywhere (radius 999), cards 32–48, photos cut by organic
   blobs, sections rounded on top only and stacked over the previous one by 56 px (36 on phones), Comfortaa (titles,
   numbers, prices) + Nunito (text). The source adapts with container queries on .pg; here the page is the container,
   so the same steps are media queries: ≤1120 the three service cards go to two columns, ≤980 one column, ≤760 the menu
   goes to a second row and scrolls sideways, ≤560 phone. Fonts are self-hosted (fonts/, latin + latin-ext + cyrillic).

   COLOURS (owner's rule 19.10: a palette carries at most 6 base colours): the source's 18 tokens are built here from
   six — --bg, --tint-a, --tint-b, --ink, --accent, --accent2 — every other shade is derived with color-mix, so a palette
   only overrides those six (render.py injects them on html:root). */

@font-face { font-family: 'Comfortaa'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/comfortaa-var-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Comfortaa'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/comfortaa-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Comfortaa'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/comfortaa-var-latin.woff2) format('woff2');
  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: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url(../fonts/nunito-var-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url(../fonts/nunito-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url(../fonts/nunito-var-latin.woff2) format('woff2');
  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; }

/* ============ tokens ============ */
:root {
  /* the six a palette sets (source set «Теракота») */
  --bg: #FFFBF5;           /* page background */
  --tint-a: #F7E6D9;        /* warm tinted sections: the first screen, the booking */
  --tint-b: #EDF0E4;        /* the second tinted section: the terms */
  --ink: #3A2E28;          /* text, the footer, the highlighted cards */
  --accent: #D9916B;       /* buttons, active states, progress */
  --accent2: #A8B89A;      /* badges, ticks, chips */
  /* derived from them */
  --surface: #FFFFFF;                                              /* cards */
  --surface2: color-mix(in srgb, var(--tint-a) 60%, #FFFFFF);        /* quiet sections */
  --line: color-mix(in srgb, var(--tint-a) 92%, var(--ink));         /* borders */
  --line2: color-mix(in srgb, var(--line) 60%, #FFFFFF);            /* dividers */
  --ink2: color-mix(in srgb, var(--ink) 78%, var(--tint-a));         /* secondary text */
  --ink3: color-mix(in srgb, var(--ink) 70%, var(--tint-a));         /* captions */
  --dark2: color-mix(in srgb, var(--ink) 90%, #FFFFFF);             /* fills on the dark cards */
  --on-dark: #FFFFFF;
  --on-dark2: color-mix(in srgb, var(--line) 87%, var(--ink));      /* muted text on dark */
  --link: color-mix(in srgb, var(--accent) 50%, var(--ink));
  --off: color-mix(in srgb, var(--ink) 25%, var(--surface));        /* a day the calendar cannot take */
  --bad: #C4320A;
  --r-sec: 56px;           /* top radius of a stacked section = its overlap */
  --shadow: 0 -22px 54px color-mix(in srgb, var(--ink) 13%, transparent);
  --p-logo-h: 40px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 'Nunito', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .dsp { font-family: 'Comfortaa', 'Nunito', system-ui, sans-serif; letter-spacing: -0.01em; margin: 0; }
p { margin: 0; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--ink); }
img { display: block; max-width: 100%; }
input, select, textarea, button { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.sec { padding: 112px 0; }
/* the stack: every block sticks (its top is set by opora.js: 0, or «window − height» for a taller one, so its bottom is
   reachable) and the next one slides over it, rounded on top only, 56 px over the previous one */
.stk { position: sticky; top: 0; }
.ovl { border-radius: var(--r-sec) var(--r-sec) 0 0; margin-top: calc(-1 * var(--r-sec)); box-shadow: var(--shadow); }
.last { position: relative; border-radius: var(--r-sec) var(--r-sec) 0 0; margin-top: calc(-1 * var(--r-sec)); box-shadow: var(--shadow); }

/* reveal on first view (opora.js adds .op-rv once, never in the editor / previews / reduced motion) */
.op-rv { opacity: 0; transform: translateY(34px); transition: opacity .75s cubic-bezier(.22, .75, .3, 1), transform .75s cubic-bezier(.22, .75, .3, 1); }
.op-rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .op-rv { opacity: 1; transform: none; transition: none; } }

/* type */
.h1 { font-size: 64px; line-height: 1.06; font-weight: 700; }
.h2 { font-size: 44px; line-height: 1.12; font-weight: 700; }
.h3 { font-size: 23px; line-height: 1.25; font-weight: 700; }
.num { font-size: 52px; line-height: 1; font-weight: 700; }

/* pills: badges + buttons */
.badge { display: inline-block; padding: 9px 20px; border-radius: 999px; font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.badge--tint-a { background: var(--tint-a); }
.badge--tint-b { background: var(--tint-b); }
.badge--white { background: var(--surface); }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 28px; border: 0; border-radius: 999px;
  font-weight: 700; font-size: 17px; line-height: 1.2; text-align: center; white-space: nowrap; cursor: pointer; transition: filter .15s; }
.btn:hover { filter: brightness(.94); }
.btn--lg { height: 60px; padding: 0 34px; font-size: 18px; }
.btn--acc { background: var(--accent); color: var(--ink); }
.btn--acc:hover { color: var(--ink); }
.btn--dark { background: var(--ink); color: var(--on-dark); }
.btn--dark:hover { color: var(--on-dark); }
.btn--line { background: var(--surface); color: var(--ink); border: 2px solid var(--line); }
.btn--line:hover { color: var(--ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
[data-mode="edit"] .btn[data-p-disabled] { opacity: .45; }
.btnrow { display: flex; flex-wrap: wrap; gap: 14px; }
.btnrow--c { justify-content: center; }
.tick { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 999px; background: var(--accent2); }
.tick svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tick--sm { width: 26px; height: 26px; margin-top: 3px; }
.tick--sm svg { width: 13px; height: 13px; stroke-width: 3.4; }
.circ { position: absolute; border-radius: 999px; pointer-events: none; }
.circ--fill { background: var(--accent2); }
.circ--ring { border: 3px solid var(--line); }

/* round arrow buttons (reviews, calendar) */
.rbtn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 56px; height: 56px; padding: 0; border-radius: 999px;
  border: 2px solid var(--line); background: var(--surface); }
.rbtn svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rbtn--sm { width: 48px; height: 48px; }
.rbtn:disabled { opacity: .35; cursor: default; }

/* section heads */
.shead { max-width: 680px; }
.shead--c { margin: 0 auto; text-align: center; }
.shead .h2 { margin-top: 20px; }
.shead__sub { margin-top: 16px; color: var(--ink2); }
.shead__sub--lg { margin-top: 18px; font-size: 19px; }

/* grids */
.g2x { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.g3x { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.g4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

/* ============ 1. HEADER + FIRST SCREEN (900 together at 1440) ============ */
.hero { min-height: 900px; display: flex; flex-direction: column; background: var(--tint-a); overflow: hidden; }
.hdr { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 26px; padding-bottom: 26px; }
.hdr__brand { font-size: 27px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.hdr__brand:hover { color: var(--ink); }
.nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.nav a { color: var(--ink); font-weight: 600; }
.nav a:hover { color: var(--link); }
.hdr__tools { display: flex; align-items: center; gap: 12px; }

/* language: the code in a round pill, a native select over it (source) */
.langbox { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 56px; height: 56px;
  border-radius: 999px; border: 2px solid var(--line); background: var(--surface); font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.langbox select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; }
.langbox--dark { width: 110px; height: 52px; margin-top: 10px; border-color: var(--dark2); background: var(--ink); color: var(--on-dark); font-size: 17px; }
.langbox--dark select { color: var(--ink); }

.hero__in { flex: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding-top: 40px; padding-bottom: 56px; }
.hero .h1 { margin-top: 22px; }
.hero__sub { margin-top: 20px; max-width: 540px; font-size: 19px; color: var(--ink2); }
.hero .btnrow { margin-top: 34px; }
.hero__note { margin-top: 28px; display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink2); }
.hero__art { position: relative; display: flex; justify-content: center; align-items: center; min-height: 460px; }
.hero__art .circ--fill { left: 0; top: 10px; width: 180px; height: 180px; }
.hero__art .circ--ring { right: 8px; bottom: 0; width: 120px; height: 120px; }
.hero__img { position: relative; width: 100%; max-width: 440px; aspect-ratio: 4 / 5; border-radius: 48% 52% 44% 56% / 52% 46% 54% 48%;
  object-fit: cover; object-position: 50% 18%; background: var(--line2); }

/* ============ 2. OPORA IS A SPACE (900 at 1440) ============ */
.best { min-height: 900px; display: flex; flex-direction: column; justify-content: center; background: var(--surface); }
.best .shead { max-width: 740px; }
.best .g2x { margin-top: 56px; }
.pt { background: var(--surface2); border: 2px solid var(--surface2); border-radius: 36px; padding: 38px 36px; transition: border-color .15s; }
.pt:hover { border-color: var(--accent); }
.pt__n { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 999px; background: var(--accent); font-size: 20px; font-weight: 700; color: var(--ink); }
.pt .h3 { margin-top: 22px; }
.pt p { margin-top: 12px; color: var(--ink2); }
.best .btnrow { margin-top: 48px; }

/* ============ 3. ABOUT ME ============ */
.about { background: var(--surface2); }
.about__art { position: relative; display: flex; justify-content: center; }
.about__art .circ--fill { right: 4px; top: -18px; width: 150px; height: 150px; }
.about__art .circ--ring { left: 10px; bottom: 24px; width: 96px; height: 96px; }
.about__img { position: relative; width: 100%; max-width: 400px; aspect-ratio: 3 / 4; border-radius: 58% 42% 46% 54% / 38% 34% 66% 62%;
  object-fit: cover; object-position: 50% 35%; background: var(--line2); }
.about .h2 { margin-top: 20px; }
.about__p { margin-top: 18px; color: var(--ink2); }
.about__p + .about__p { margin-top: 14px; }
.about__ach { margin-top: 30px; font-size: 19px; }
.ticks { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink2); }
.stats { margin-top: 64px; }
.stat { background: var(--surface); border-radius: 32px; padding: 30px 26px; text-align: center; }
.stat__l { margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--ink2); }

/* ============ 4. FORMATS OF WORK (cards from the site's services; the middle one dark, as the source) ============ */
.svcs { background: var(--surface); }
.svcs .shead { max-width: 720px; }
.svcs .g3x { margin-top: 56px; }
.svc { display: flex; flex-direction: column; border-radius: 44px; padding: 44px 38px; background: var(--surface); border: 2px solid var(--line2); color: var(--ink); }
.svc__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.svc__n { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 999px; font-size: 19px; font-weight: 700; background: var(--surface2); color: var(--ink); }
.svc__dur { padding: 9px 18px; border-radius: 999px; font-size: 14px; font-weight: 700; background: var(--accent2); color: var(--ink); }
.svc .h3 { margin-top: 30px; }
.svc__d { margin-top: 14px; color: var(--ink2); }
.svc__f { margin: 26px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 13px; flex: 1; }
.svc__f li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink2); }
.svc__dot { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; margin-top: 3px; border-radius: 999px; background: var(--tint-a); }
.svc__dot svg { width: 12px; height: 12px; fill: none; stroke: var(--ink); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.svc__sp { flex: 1; }
.svc__rule { margin: 30px 0 24px; height: 2px; border-radius: 2px; background: var(--line2); }
.svc__per { font-size: 14px; font-weight: 700; color: var(--ink3); }
.svc__price { margin-top: 4px; font-size: 40px; font-weight: 700; line-height: 1.05; }
.svc__btn { margin-top: 26px; height: 58px; background: var(--accent); color: var(--ink); }
.svc__btn:hover { color: var(--ink); }
.svc--hi { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.svc--hi .svc__n { background: var(--accent); }
.svc--hi .svc__dur { background: var(--dark2); color: var(--on-dark); }
.svc--hi .svc__d { color: var(--on-dark2); }
.svc--hi .svc__f li { color: var(--on-dark2); }
.svc--hi .svc__dot { background: var(--accent2); }
.svc--hi .svc__rule { background: var(--dark2); }
.svc--hi .svc__per { color: var(--on-dark2); }

/* ============ 5. TERMS ============ */
.promo { background: var(--tint-b); }
.promo .g2x { margin-top: 52px; }
.prm { position: relative; overflow: hidden; border-radius: 48px; padding: 52px 46px; min-height: 360px; background: var(--surface); color: var(--ink); }
.prm__blob { position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 999px; background: var(--tint-a); }
.prm__in { position: relative; display: flex; flex-direction: column; height: 100%; }
.prm__n { font-size: 78px; line-height: 1; font-weight: 700; color: var(--accent); }
.prm__t { margin-top: 16px; font-size: 30px; }
.prm__d { margin-top: 14px; flex: 1; color: var(--ink2); }
.prm__until { align-self: flex-start; margin-top: 22px; padding: 9px 18px; border-radius: 999px; font-size: 14px; font-weight: 700; background: var(--accent2); color: var(--ink); }
.prm__btn { align-self: stretch; margin-top: 24px; height: 58px; background: var(--ink); color: var(--on-dark); }
.prm__btn:hover { color: var(--on-dark); }
.prm--dark { background: var(--ink); color: var(--on-dark); }
.prm--dark .prm__blob { background: var(--dark2); }
.prm--dark .prm__n { color: var(--accent2); }
.prm--dark .prm__d { color: var(--on-dark2); }
.prm--dark .prm__until { background: var(--dark2); color: var(--on-dark); }
.prm--dark .prm__btn { background: var(--accent); color: var(--ink); }

/* ============ 6. REVIEWS (one on screen, no avatars) ============ */
.reviews { background: var(--surface); }
.rv { max-width: 920px; margin: 48px auto 0; }
.revc { position: relative; margin: 0; background: var(--surface2); border-radius: 48px; padding: 64px; text-align: center; min-height: 320px;
  display: flex; flex-direction: column; justify-content: center; }
.revc[hidden] { display: none; }
.revc__mark { position: absolute; left: 44px; top: 24px; font-size: 90px; line-height: 1; color: var(--line); }
.revc__stars { position: relative; color: var(--accent); font-size: 22px; letter-spacing: 4px; }
.revc__q { position: relative; margin: 24px 0 0; font-size: 26px; line-height: 1.38; font-weight: 600; }
.revc__by { position: relative; margin-top: 28px; font-weight: 700; }
.revc__by span { display: block; }
.revc__role { font-weight: 600; font-size: 15px; color: var(--ink3); }
.rv__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; }
.rv__dots { display: flex; gap: 2px; }
.rv__dot { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; }
.rv__dot span { width: 12px; height: 12px; border-radius: 999px; background: var(--line); transition: width .2s, background-color .2s; }
.rv__dot[aria-pressed="true"] span { width: 30px; background: var(--accent); }

/* ============ 7. CONTACTS + MAP ============ */
.contacts { background: var(--surface2); }
.cmap { margin-top: 44px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 36px; align-items: start; }
.cmap:has(> .loc:only-child) { grid-template-columns: 1fr; }   /* no address: the map is gone, the card takes the row */
.map__box { position: relative; border-radius: 44px; overflow: hidden; background: var(--line2); aspect-ratio: 4 / 3; }
.map__grid { position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .7) 0 2px, transparent 2px 76px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .7) 0 2px, transparent 2px 76px); }
.pin { position: absolute; left: 46%; top: 44%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 999px; border: 4px solid var(--surface); background: var(--accent); }
.map__cap { position: absolute; left: 28px; right: 28px; bottom: 28px; background: var(--surface); border-radius: 28px; padding: 20px 24px; }
.map__addr { font-weight: 700; }
.map__link { display: inline-block; margin-top: 6px; font-size: 15px; font-weight: 700; }
.loc { display: flex; flex-direction: column; gap: 12px; }
.loc__h { font-size: 19px; margin-bottom: 4px; }
.loc__card { background: var(--surface); border-radius: 32px; padding: 28px; }
.loc__l { font-size: 14px; font-weight: 700; color: var(--ink3); }
.loc__l + .loc__v { margin-top: 6px; }
.loc__v { font-weight: 700; }
.loc__v--h { font-weight: 400; }
.loc__v + .loc__l { margin-top: 18px; }
.loc__route { margin-top: 24px; height: 54px; padding: 0 26px; }
.loc__note { font-size: 15px; color: var(--ink3); }
.ct__cards { margin-top: 24px; }
.ccard { background: var(--surface); border-radius: 32px; padding: 30px 28px; }
.ccard__l { font-size: 14px; font-weight: 700; color: var(--ink3); }
.ccard__v { display: block; margin-top: 8px; font-size: 21px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.pill { padding: 9px 18px; border-radius: 999px; border: 2px solid var(--line2); font-size: 15px; font-weight: 700; color: var(--ink); transition: background-color .15s; }
.pill:hover { background: var(--tint-a); color: var(--ink); }

/* ============ 8. BOOKING (6 steps; 5 without the office / online step) ============ */
.bk { background: var(--tint-a); }
.bkcard { margin-top: 44px; background: var(--surface); border-radius: 48px; padding: 52px 56px; }
.bk__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; }
.bk__name { color: var(--ink3); }
.bk__bar { margin-top: 12px; height: 12px; border-radius: 999px; background: var(--surface2); overflow: hidden; }
.bk__fill { height: 100%; width: 16.7%; border-radius: 999px; background: var(--accent); transition: width .3s; }
.bk__pills { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 18px 0 0; padding: 0; }
.bk__pills li { padding: 8px 16px; border-radius: 999px; background: var(--surface2); color: var(--ink3); font-size: 14px; font-weight: 700; line-height: 1.5; }
.bk__pills li.is-on { background: var(--accent2); color: var(--ink); }
.bk__p { display: none; border: 0; margin: 30px 0 0; padding: 0; min-width: 0; }
.bk__p.is-active { display: block; }
.bk__h { font-size: 21px; padding: 0; }
.bk__p .g3x, .bk__p .g2x { margin-top: 18px; }
.bk__note { margin-top: 8px; font-size: 15px; color: var(--ink3); }
.opt { display: block; width: 100%; text-align: left; padding: 20px 24px; border-radius: 28px; border: 2px solid var(--line2); background: var(--surface); color: var(--ink); transition: border-color .15s, background-color .15s; }
.opt:hover { border-color: var(--accent); }
.opt[aria-pressed="true"] { border-color: var(--accent); background: var(--tint-a); }
.opt__t { display: block; font-weight: 700; }
.opt__m { display: block; font-size: 15px; color: var(--ink2); }
.cal { margin-top: 18px; max-width: 700px; }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cal__title { font-size: 21px; font-weight: 700; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.cal__wd { margin-top: 18px; }
.cal__wd span { text-align: center; font-size: 13px; font-weight: 700; color: var(--ink3); }
.cal__day { height: 48px; border-radius: 16px; font-weight: 700; border: 2px solid var(--surface2); background: var(--surface2); color: var(--ink); }
.cal__day:disabled { cursor: not-allowed; border-color: var(--surface); background: var(--surface); color: var(--off); }
[data-mode="edit"] .cal__day[data-p-disabled] { opacity: 1; border-color: var(--surface); background: var(--surface); color: var(--off); }
.cal__day[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); }
.bk__date { margin-top: 8px; font-weight: 700; }
.slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; margin-top: 18px; max-width: 700px; }
.slot { height: 52px; border-radius: 999px; font-weight: 700; border: 2px solid var(--line2); background: var(--surface); color: var(--ink); }
.slot:hover { border-color: var(--accent); }
.slot[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); }
.slot--skel { border-color: var(--surface2); background: var(--surface2); }
.slots__empty { margin-top: 14px; color: var(--ink3); }
.frm { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 18px; max-width: 820px; }
.frm__own { display: contents; }
.fld { display: block; }
.fld__l { display: block; font-size: 14px; font-weight: 700; color: var(--ink3); }
.fld input, .fld textarea { display: block; width: 100%; margin-top: 8px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); height: 56px; padding: 0 22px; }
.fld textarea { height: auto; min-height: 56px; padding: 14px 22px; border-radius: 28px; resize: vertical; }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--accent); }
.fld [aria-invalid], .fld.is-bad input, .fld.is-bad textarea { border-color: var(--bad); }
.notice { margin-top: 20px; max-width: 820px; font-size: 15px; color: var(--ink2); }
.notice a { font-weight: 700; }
.sum { margin: 18px 0 0; max-width: 820px; display: flex; flex-direction: column; gap: 2px; background: var(--surface2); border-radius: 32px; padding: 26px 28px; }
.sum__r { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; padding: 10px 0; border-bottom: 2px solid var(--line2); }
.sum__r:last-child { border-bottom: 0; }
.sum__r[hidden] { display: none; }
.sum dt { color: var(--ink3); font-weight: 600; }
.sum dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.bk__err { margin-top: 22px; padding: 14px 22px; border-radius: 24px; background: var(--surface); border: 2px solid var(--accent); font-weight: 700; }
.bk__err span { display: block; }
.bk__err[hidden] { display: none; }
.bk__nav { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; margin-top: 30px; }
.bk__nav [hidden] { display: none; }
.bk__done { text-align: center; padding: 20px 0; }
.bk__done[hidden] { display: none; }
.bk__okic { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 999px; background: var(--accent2); }
.bk__okic svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.bk__okh { margin-top: 22px; font-size: 30px; }
.bk__okd { margin: 14px auto 0; max-width: 460px; color: var(--ink2); }
.bk__done .btn { margin-top: 26px; }
.bk__off { text-align: center; }
.bk__off p { max-width: 560px; margin: 0 auto; font-size: 19px; }
.bk__off .btnrow { margin-top: 26px; }

/* ============ 9. CONTACT FORM (14.10: unified texts cf.*, the booking card's fields and buttons) ============ */
.cfm { background: var(--surface); }
.cfm__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.cfm__head { max-width: none; }
.cfm__head .h2 { margin-top: 0; }
.cfm__card { min-width: 0; margin-top: 0; background: var(--surface2); }
.cf__frm { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; max-width: none; }
.cf__full { grid-column: 1 / -1; }
.cf__under { display: flex; flex-direction: column; gap: 4px; margin-top: -6px; padding: 0 22px; }
.cf__hint { font-size: 15px; color: var(--ink2); }
.cf-err { font-size: 15px; font-weight: 700; color: var(--bad); }
.cf__frm > .cf-err { margin-top: -10px; padding: 0 22px; }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cf__nav { margin-top: 28px; }
.cfm__card .notice { max-width: none; }

/* ============ FOOTER ============ */
.foot { background: var(--ink); color: var(--on-dark); padding: 96px 0 40px; }
.foot a { color: var(--on-dark2); }
.foot a:hover { color: var(--on-dark); }
.ftr { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 36px; }
.foot__brand { font-size: 27px; font-weight: 700; color: var(--on-dark); line-height: 1.2; }
.foot a.foot__brand { color: var(--on-dark); }
.foot__brand.p-has-logo .p-logo { height: 44px; }
.foot__tag { margin-top: 14px; color: var(--on-dark2); max-width: 280px; }
.foot__h { font-weight: 700; }
.foot__h--lang { margin-top: 20px; }
.foot ul { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
/* the runtime adds «Налаштування cookies» and «Політика cookies» next to the privacy link inside its own <li> */
.foot li { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.foot__links { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.foot__notice { margin-top: 44px; padding-top: 26px; border-top: 2px solid var(--dark2); font-size: 14px; color: var(--on-dark2); }
.foot__legal { margin-top: 14px; font-size: 14px; color: var(--on-dark2); }
.foot__made { margin-top: 8px; font-size: 14px; }

/* ============ PRIVACY PAGE ============ */
.pv-top { background: var(--tint-a); padding-bottom: 104px; }
.pv-top .hdr { padding-bottom: 40px; }
.pv-back { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); }
.pv-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pv-top .h1 { margin-top: 26px; font-size: 52px; }
.pv-lead { margin-top: 18px; max-width: 760px; font-size: 19px; color: var(--ink2); }
.pv-body { background: var(--surface); padding: 72px 0 140px; }
.pv-list { max-width: 820px; display: flex; flex-direction: column; gap: 36px; }
.pv-sec h2 { font-size: 24px; line-height: 1.3; font-weight: 700; }
.pv-sec p { margin-top: 12px; color: var(--ink2); }

/* editor: the photo's replace button sits on the art box (not clipped by the blob) */
.hero__art .p-replace, .about__art .p-replace { top: 0; right: 0; }
/* the editor: an empty service description still shows a grey hint, so the owner can click it and write one */
[data-mode="edit"] [data-t^="svc:"][data-t$=":desc"]:empty::before { content: "Опис формату"; opacity: .4; }

/* long service lists scroll inside their own box, the section keeps its height (user 14.10: up to 20 services) */
.svcs .g3x { max-height: min(820px, 92vh); overflow-y: auto; scrollbar-width: none; }
.bk .g3x { max-height: min(440px, 78vh); overflow-y: auto; scrollbar-width: none; }
.svcs .g3x::-webkit-scrollbar, .bk .g3x::-webkit-scrollbar { display: none; }

/* ============ ≤1120: the three cards go to two columns ============ */
@media (max-width: 1120px) {
  .svcs .g3x { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============ ≤1080: the menu on its own row, scrolling sideways with a fade ============ */
@media (max-width: 1080px) {
  .nav { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; gap: 18px; padding: 2px 28px 8px 0; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }
}

/* ============ ≤980: one column, smaller type ============ */
@media (max-width: 980px) {
  :root { --r-sec: 36px; }
  .hero__in, .split, .cmap, .cfm__grid { grid-template-columns: 1fr; gap: 32px; }
  .cfm__head { max-width: 680px; margin: 0 auto; text-align: center; }
  .g2x, .g3x, .svcs .g3x { grid-template-columns: 1fr; }
  .hero, .best { min-height: 0; }
  .sec { padding: 64px 0; }
  .wrap { padding-left: 20px; padding-right: 20px; }   /* sides only: .hdr keeps its top / bottom */
  .h1 { font-size: 38px; }
  .h2 { font-size: 28px; }
  .h3 { font-size: 20px; }
  .num { font-size: 40px; }
  .circ { display: none; }
  .hdr { gap: 14px; }
  .nav { gap: 14px; font-size: 15px; }
  .cal__grid { gap: 5px; }
  .pv-top .h1 { font-size: 38px; }
  /* hero: the photo first, compact, then the texts */
  .hero__art { order: -1; }
  .hero__img { max-width: 320px; }
  .hero__in { padding-top: 8px; }
  /* prices: cards under each other, no box scrolling inside the page */
  .svcs .g3x { max-height: none; overflow: visible; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* «Чому Opora»: the number beside the title, no big empty card */
  .best .g2x { margin-top: 36px; }
  .pt { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: start; padding: 24px; border-radius: 28px; }
  .pt__n { grid-row: span 2; width: 46px; height: 46px; font-size: 18px; }
  .pt .h3 { margin-top: 10px; }
  .pt p { margin-top: 8px; }
  .best .btnrow { margin-top: 32px; }
}
@media (min-width: 641px) and (max-width: 980px) {
  .best .g2x { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .svcs .g3x { grid-template-columns: minmax(0, 1fr); }
}

/* ============ ≤760 ============ */
@media (max-width: 760px) {
  .hdr { gap: 12px; }
  .revc__q { font-size: 22px; }
}

/* ============ ≤560: phone ============ */
@media (max-width: 560px) {
  .sec { padding: 48px 0; }
  .wrap { padding-left: 16px; padding-right: 16px; }
  .h1 { font-size: 32px; }
  .h2 { font-size: 24px; }
  .h3 { font-size: 18px; }
  .num { font-size: 34px; }
  .hero__in, .split, .cmap { gap: 26px; }
  .g2x, .g3x, .frm, .cf__frm { gap: 14px; }
  .g4 { gap: 12px; }
  .hero__art { min-height: 0; }
  .hero__img { max-width: 260px; }
  .hero__in { gap: 20px; }
  .pt { padding: 20px 18px; column-gap: 14px; border-radius: 24px; }
  .pt__n { width: 40px; height: 40px; font-size: 16px; }
  .pt .h3 { margin-top: 8px; }
  .g2x { gap: 10px; }
  .svcs .g3x { margin-top: 32px; }
  .svc { padding: 28px 22px; border-radius: 32px; }
  .svc .h3 { margin-top: 20px; }
  .svc__f { margin-top: 18px; gap: 10px; }
  .svc__rule { margin: 22px 0 16px; }
  .svc__price { font-size: 32px; }
  .svc__btn { margin-top: 18px; height: 52px; }
  .prm { padding: 32px 24px; border-radius: 34px; min-height: 0; }
  .prm__n { font-size: 52px; }
  .revc { padding: 34px 22px; border-radius: 34px; min-height: 0; }
  .revc__q { font-size: 19px; }
  .bkcard { padding: 26px 18px; border-radius: 32px; }
  .cal__grid { gap: 4px; }
  .cal__day { height: 40px; border-radius: 12px; font-size: 15px; }
  .slots { gap: 8px; }
  .btnrow { flex-direction: column; align-items: stretch; }
  .btnrow .btn { width: 100%; padding-left: 16px; padding-right: 16px; white-space: normal; }
  .loc__route { width: 100%; padding-left: 16px; padding-right: 16px; }
  .bk__nav .btn { flex: 1 1 130px; padding: 0 14px; white-space: normal; }
  .cf__frm { grid-template-columns: minmax(0, 1fr); }
  .cf__nav .btn { width: 100%; }
  .ftr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .ftr > :first-child { grid-column: 1 / -1; }
  .foot { padding: 64px 0 32px; }
  .map__cap { left: 16px; right: 16px; bottom: 16px; padding: 14px 18px; border-radius: 22px; }
  .pv-top .h1 { font-size: 30px; }
}

/* narrow phones: logo, language and «Записатися» still on one row */
@media (max-width: 420px) {
  .hdr { gap: 10px; }
  .hdr__brand { font-size: 22px; }
  .hdr__tools { gap: 8px; }
  .hdr__tools .btn { height: 44px; padding: 0 16px; font-size: 14px; }
  .hdr .langbox { transform: scale(.86); transform-origin: right center; margin-left: -6px; }
}
@media (max-width: 340px) {
  .hdr__brand { font-size: 20px; }
  .hdr__tools .btn { padding: 0 12px; font-size: 13px; }
}


/* 25.10 (owner: «застосуй до всіх шаблонів де є акції можливість додавання лише одної»): the owner may keep a single
   offer. Each card has data-needs on its own title, so an unfilled one disappears on the live site, and the section
   carries both titles, so it goes away whole when no offer is left. The card that stays must read as a banner made for
   one, not as half a row with a hole, so on the desktop it takes the whole row and lays its content out sideways.
   The phone keeps the stacked card. */
@media (min-width: 901px) {
  .promo .g2x:has(> .prm:only-child) { grid-template-columns: minmax(0, 1fr); }
  .promo .g2x:has(> .prm:only-child) > .prm { min-height: 0; padding: 44px 48px; }
  .promo .g2x:has(> .prm:only-child) > .prm > .prm__in {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 48px; height: auto;
  }
  .promo .g2x:has(> .prm:only-child) > .prm > .prm__in > .prm__n,
  .promo .g2x:has(> .prm:only-child) > .prm > .prm__in > .prm__t,
  .promo .g2x:has(> .prm:only-child) > .prm > .prm__in > .prm__d,
  .promo .g2x:has(> .prm:only-child) > .prm > .prm__in > .prm__until { grid-column: 1; justify-self: start; }
  .promo .g2x:has(> .prm:only-child) > .prm > .prm__in > .prm__d { flex: none; }
  /* four text rows (the figure, the title, the text, the «until» badge); «1 / 5» spans them all, and a row the owner
     left empty stays zero high, so the button is centred against what is really filled in. «1 / -1» would NOT do it:
     with implicit rows -1 is the end of the explicit grid and the button would stick to the first row. */
  .promo .g2x:has(> .prm:only-child) > .prm > .prm__in > .prm__btn {
    grid-column: 2; grid-row: 1 / 5; align-self: center; justify-self: end; margin-top: 0; padding: 0 40px;
  }
}


/* ============ 26.10: courses, who they suit, plans, the workbook, platform reviews + the courses / course / services pages.
   Structure of the three «expert» templates (linaverde), look strictly Opora's: pills, cards 32–48, blob photos, the
   stacked rounded sections, only the six palette colours and their color-mix shades ============ */

/* my courses: three cards, the photo on top */
.crs { background: var(--surface2); }
.crs .g3x { margin-top: 56px; }
.crc { display: flex; flex-direction: column; min-width: 0; border-radius: 44px; overflow: hidden; background: var(--surface); }
.crc__photo { position: relative; aspect-ratio: 4 / 3; background: var(--line2); }
.crc__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.crc__body { flex: 1; display: flex; flex-direction: column; padding: 30px 32px 34px; }
.crc__dur { align-self: flex-start; }
.crc .h3 { margin-top: 18px; }
.crc__row { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.crc__price { font-size: 30px; font-weight: 700; line-height: 1.1; }
.crc__btn { height: 52px; padding: 0 24px; }
.crs__all { margin-top: 44px; }

/* who the courses suit: the title beside three ticked paragraphs */
.aud { background: var(--surface); }
.aud__in { align-items: start; }
.aud__list { display: flex; flex-direction: column; gap: 20px; }
.aud__p { display: flex; gap: 14px; align-items: flex-start; font-size: 19px; color: var(--ink2); }
.aud__note { padding: 18px 24px; border-radius: 28px; background: var(--surface2); font-size: 15px; color: var(--ink3); }

/* buy the course: the plans reuse the format cards (.svc, the middle one dark) */
.buy { background: var(--tint-b); }
.buy .g3x { margin-top: 56px; }

/* the workbook */
.guide { background: var(--surface); }
.guide__art { position: relative; display: flex; justify-content: center; }
.guide__art .circ--fill { left: 6px; top: -16px; width: 140px; height: 140px; }
.guide__art .circ--ring { right: 14px; bottom: 20px; width: 100px; height: 100px; }
.guide__img { position: relative; width: 100%; max-width: 400px; aspect-ratio: 4 / 5; border-radius: 48% 52% 44% 56% / 52% 46% 54% 48%;
  object-fit: cover; object-position: 50% 40%; background: var(--line2); }
.guide .h2 { margin-top: 20px; }
.guide__buy { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.guide__price { font-size: 40px; font-weight: 700; line-height: 1.05; }
.guide__art .p-replace { top: 0; right: 0; }

/* course reviews from the platform: cards with stars, date, the course and the «verified purchase» pill */
.vrev { background: var(--tint-a); }
.vrev .g3x { margin-top: 52px; }
.vrc { margin: 0; min-width: 0; display: flex; flex-direction: column; border-radius: 36px; padding: 32px 30px; background: var(--surface); }
.vrc__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.vrc__stars { color: var(--accent); font-size: 18px; letter-spacing: 3px; line-height: 1; }
.vrc__off { color: var(--line); }
.vrc__date { font-size: 14px; font-weight: 700; color: var(--ink3); }
.vrc__q { flex: 1; margin: 18px 0 0; font-size: 17px; line-height: 1.6; }
.vrc__by { margin-top: 22px; display: flex; flex-direction: column; }
.vrc__name { font-weight: 700; }
.vrc__course { font-size: 15px; font-weight: 600; color: var(--ink3); }
.vrc__badge { align-self: flex-start; margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px;
  border-radius: 999px; background: var(--tint-b); font-size: 13px; font-weight: 700; line-height: 1.4; }
.vrc__ok { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 999px; background: var(--accent2); }
.vrc__ok svg { width: 11px; height: 11px; fill: none; stroke: var(--ink); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }

/* the subpages' title block (privacy.html's warm top + a badge) */
.pv-top .pg-kicker { display: block; width: fit-content; margin-top: 26px; }
.pv-top .pg-kicker + .h1 { margin-top: 18px; }

/* courses.html: every course in full, photo and text alternating */
.clist-sec { background: var(--surface); }
.clist { display: flex; flex-direction: column; gap: 72px; }
.cfull { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.cfull--b .cfull__art { order: 2; }
.cfull__art { position: relative; }
.cfull__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 35%; border-radius: 48% 52% 44% 56% / 52% 46% 54% 48%; background: var(--line2); }
.cfull--b .cfull__img { border-radius: 58% 42% 46% 54% / 38% 34% 66% 62%; }
.cfull .h2 { margin-top: 16px; }
.cfull__p { margin-top: 16px; color: var(--ink2); }
.cfull__inc { margin-top: 24px; font-weight: 700; }
.cfull .svc__f { margin-top: 12px; flex: none; }
.cfull__buy { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.clist__note { margin-top: 64px; max-width: 820px; }

/* the dark «not sure where to start» card (courses / services pages) */
.cta-sec { background: var(--tint-b); }
.cta-card { display: flex; align-items: center; justify-content: space-between; gap: 40px; border-radius: 48px; padding: 56px; background: var(--ink); color: var(--on-dark); }
.cta-card__p { margin-top: 14px; max-width: 640px; color: var(--on-dark2); }

/* services.html: the personal sessions as rows */
.plist-sec { background: var(--surface); }
.plist { display: flex; flex-direction: column; gap: 20px; }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; border-radius: 40px; padding: 36px 40px; background: var(--surface2); }
.prow .svc__d { margin-top: 10px; }
.prow .svc__f { margin-top: 16px; flex: none; }
.prow__side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; text-align: right; }
.prow .svc__price { margin-top: 0; }

/* course.html: progress, steps, the lesson, notes, the team, the review form */
.co-prog { margin-top: 30px; max-width: 520px; }
.co-prog__row { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; color: var(--ink2); }
.co-prog__n { color: var(--ink); }
.co-prog__bar { margin-top: 10px; height: 12px; border-radius: 999px; background: var(--surface); overflow: hidden; }
.co-prog__fill { height: 100%; width: 37.5%; border-radius: 999px; background: var(--accent); }
.co-sec { background: var(--surface); }
.co { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 48px; align-items: start; }
.co-steps ol { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.co-step { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px 10px 10px;
  border-radius: 999px; border: 2px solid var(--surface2); background: var(--surface2); color: var(--ink); text-align: left; transition: border-color .15s; }
.co-step:hover { border-color: var(--accent); }
.co-step__n { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: var(--surface); font-size: 15px; font-weight: 700; }
.co-step__t { font-size: 15px; font-weight: 700; line-height: 1.35; }
.co-step__len { font-size: 13px; font-weight: 700; color: var(--ink3); }
.co-step.is-cur { border-color: var(--accent); background: var(--tint-a); }
.co-step.is-cur .co-step__n, .co-step.is-done .co-step__n { background: var(--accent2); }
.co-step.is-locked { cursor: not-allowed; border-color: var(--line2); background: var(--surface); color: var(--ink3); }
.co-step.is-locked:hover { border-color: var(--line2); }
.co-steps__hint { margin-top: 14px; font-size: 14px; color: var(--ink3); }
.co-lesson { border-radius: 48px; padding: 40px; background: var(--surface2); }
.co-lesson__h { font-size: 26px; }
.co-player { position: relative; margin-top: 22px; aspect-ratio: 16 / 9; border-radius: 32px; overflow: hidden; background: var(--line2); }
.co-player img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.co-player__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.co-player__len { position: absolute; right: 18px; bottom: 18px; padding: 6px 14px; border-radius: 999px; background: var(--surface); font-size: 14px; font-weight: 700; }
.co-lesson__p { margin-top: 20px; color: var(--ink2); }
.co-notes { margin-top: 28px; border-radius: 32px; padding: 28px; background: var(--surface); }
.co-notes__h { font-size: 19px; }
.co-notes__hint { margin-top: 6px; font-size: 14px; color: var(--ink3); }
.co-notes .fld textarea { margin-top: 14px; }
.co-notes__row { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.co-notes__saved { font-weight: 700; color: var(--ink2); }
.co-lesson__nav { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; }
.co-team-sec { background: var(--surface2); }
.co-team { margin-top: 36px; }
.co-team .ccard__v { margin-top: 0; }
.co-team .ccard__l { margin-top: 6px; }
.co-rv { background: var(--tint-a); }
.co-rv .cfm__card { background: var(--surface); }
.co-rv form > .fld { margin-bottom: 18px; }
.stars { display: flex; gap: 6px; margin: 10px 0 0; padding: 0; border: 0; }
.stars label { position: relative; display: inline-flex; cursor: pointer; }
.stars input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.stars svg { width: 34px; height: 34px; fill: var(--surface2); stroke: var(--line); stroke-width: 1.5; stroke-linejoin: round; }
.stars label.is-on svg { fill: var(--accent); stroke: var(--accent); }
.stars input:focus-visible + svg { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

@media (max-width: 980px) {
  .crs .g3x, .buy .g3x, .vrev .g3x { margin-top: 36px; }
  .aud__p { font-size: 17px; }
  .cfull, .co { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cfull--b .cfull__art { order: 0; }
  .clist { gap: 56px; }
  .cta-card { flex-direction: column; align-items: flex-start; gap: 24px; padding: 36px 28px; border-radius: 36px; }
  .prow { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 28px; border-radius: 32px; }
  .prow__side { flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; gap: 12px 18px; }
  .co-lesson { padding: 28px; border-radius: 36px; }
  .co-lesson__h { font-size: 22px; }
  .guide__img { max-width: 320px; }
}
@media (min-width: 641px) and (max-width: 980px) {
  .crs .g3x, .buy .g3x, .vrev .g3x, .co-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .crc { border-radius: 32px; }
  .crc__body { padding: 22px 22px 26px; }
  .crc__price { font-size: 26px; }
  .vrc { padding: 26px 22px; border-radius: 30px; }
  .guide__price { font-size: 32px; }
  .guide__buy .btn, .cfull__buy .btn, .cta-card .btn { width: 100%; padding-left: 16px; padding-right: 16px; white-space: normal; }
  .co-lesson { padding: 20px 16px; border-radius: 30px; }
  .co-player { border-radius: 22px; }
  .co-notes { padding: 20px 18px; border-radius: 24px; }
  .co-lesson__nav .btn { flex: 1 1 130px; padding: 0 14px; white-space: normal; }
  .co-step { padding: 8px 12px 8px 8px; border-radius: 26px; }
  .prow { padding: 22px 20px; border-radius: 28px; }
  .stars svg { width: 30px; height: 30px; }
}

/* 26.10: with «Курси» and «Мій кабінет» the menu is longer, so on a desktop where the brand, the menu and the buttons no
   longer fit one row (ru at 1440, everything at 1081–1240) opora.js sets .hdr--rows: the same second scrolling row as ≤1080 */
.nav__acc { white-space: nowrap; }
.hdr--rows .nav { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; gap: 18px; padding: 2px 28px 8px 0; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.hdr--rows .nav::-webkit-scrollbar { display: none; }
.hdr--rows .nav a { white-space: nowrap; }