/* Внутрішні сторінки повного сайту (scripts/site_build.py): послуги, статті, ціни, контакти. Стиль B: великий заголовок,
   вузька колонка тексту, іконка сторінки з дією, темна смуга запису. Спільні токени і кнопки беруться з site-b.css. */

/* Шрифт Inter Tight: власні файли замість Google Fonts. Змінний (вісь wght), три підмножини з unicode-range, як віддає Google:
   браузер завантажує лише ті, чиї символи є на сторінці. Шляхи від assets/. */
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/inter-tight-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/inter-tight-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: "Inter Tight"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/inter-tight-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; }
/* Діалоги і скіп-лінк стоять поза .vb і беруть --font-body: без цього вони просили б Geist, якого вже немає */
:root { --font-body: var(--font-b); --font-display: var(--font-b); --b-hover: #e8e9e4; --b-placeholder: #dfe1dc; }

/* Мова в темній смузі над шапкою */
.b-lang { display: flex; gap: 0.1rem; margin-left: auto; }
.b-strip__hours + .b-lang { margin-left: 0; }
.b-lang a { position: relative; display: inline-flex; align-items: center; min-height: 2rem; padding: 0 0.55rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; color: var(--b-on-dark-2); text-decoration: none; }
.b-lang a:hover, .b-lang a:focus-visible, .b-lang a[aria-current] { color: #fff; }
.b-lang a[aria-current] { font-weight: 600; box-shadow: inset 0 -2px 0 var(--b-accent); }
.b-lang a::after { content: ""; position: absolute; inset: -0.4rem -0.05rem; }
.b-strip__in { justify-content: space-between; }

/* Мобільна шапка: кнопка дзвінка (a.b-menu-btn.b-call-btn з іконкою трубки) стоїть перед «Записатися».
   Логотип і три кнопки в стару ширину не влазили (на 375 px не вистачало ~20 px), тому на вузьких екранах шапка компактніша:
   кнопки 44 px лишаються, стискаються логотип (без підпису, потім дрібніший) і «Записатися»; нижче 356 px лишається знак зуба. */
.b-call-btn { text-decoration: none; transition: background-color 220ms var(--b-ease), color 220ms var(--b-ease), transform 120ms var(--b-ease); }
.b-call-btn:active, .b-menu-btn:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .b-call-btn:hover { background: var(--b-ink); color: var(--b-bg); } }
@media (max-width: 29.99rem) {
  .b-bar-top { gap: 0.5rem; }
  .b-header__mobile { gap: 0.375rem; }
  .b-header__mobile .b-btn { padding: 0 0.75rem; font-size: 0.8125rem; }
  .b-bar-top .b-logo { --lk-n: 0.875rem; }
  .b-bar-top .b-logo__name { letter-spacing: 0.12em; margin-right: -0.12em; }
  .b-bar-top .b-logo__tag { display: none; }
}
@media (max-width: 23.2rem) {
  .b-bar-top .b-logo { --lk-n: 0.8125rem; }
  .b-bar-top .b-logo__name { letter-spacing: 0.06em; margin-right: -0.06em; }
}
@media (max-width: 22.2rem) { .b-bar-top .b-logo__words { display: none; } }

/* Цифри однакової ширини: години роботи і кнопки з номером телефону */
.vb .hours td { font-weight: 500; font-variant-numeric: tabular-nums; }
.b-btn[href^="tel"] { font-variant-numeric: tabular-nums; }
/* Нижня панель: кільце-тінь замість суцільної рамки, щоб краї не різали фон (фото, чорна смуга запису) під панеллю */
.b-dock { border: 0; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.08), 0 12px 30px -16px rgb(0 0 0 / 0.4); }

/* Рейтинг Google під кнопками першого екрана головної: дрібний рядок-посилання, лише текст і стрілка.
   Розмітка (generator): a.b-rating третім елементом у .b-hero__row (під .b-hero__cta; на десктопі в правій колонці) або після .b-hero__row;
   усередину .b-hero__cta не класти: довгий рядок розтягне колонку кнопок. */
.b-rating { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; margin-top: 0.5rem; font-size: var(--b-small); font-weight: 500; line-height: 1.3; color: var(--b-ink-3); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.b-rating .ico { flex: none; width: 0.95rem; height: 0.95rem; transition: transform 220ms var(--b-ease); }
.b-rating:hover { color: var(--b-ink); text-decoration-thickness: 2px; }
.b-hero__row > .b-rating { margin-top: -1rem; }
@media (min-width: 48rem) { .b-hero__row > .b-rating { grid-column: 2; justify-self: end; } }
@media (hover: hover) and (pointer: fine) { .b-rating:hover .ico { transform: translate(2px, -2px); } }

/* Перший екран внутрішньої сторінки. Розмітка (generator, head_block): .p-head__wrap > крихти, .p-head__grid > (.p-head__text > kicker, h1, .p-lead,
   .p-meta, .b-hero__cta) + .p-icon, далі figure.p-hero-fig. Телефон: .p-head__grid і .p-head__text розчиняються (display: contents), тож крихти й іконка
   3.5rem стоять в одному ряду, а H1 починається одразу під ним; від 48rem два стовпці, як було. */
.p-head { padding-bottom: clamp(2rem, 1rem + 3vw, 4rem); }
.p-head__grid, .p-head__text { display: contents; }
.p-head__wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "crumbs icon" "kicker kicker" "title title" "lead lead" "meta meta" "cta cta" "fig fig"; align-items: start; }
.p-head__wrap > .b-crumbs { grid-area: crumbs; align-self: center; min-width: 0; padding-top: 0; }
.p-head .p-icon { grid-area: icon; align-self: center; margin-left: 1rem; }
.p-head .b-kicker { grid-area: kicker; margin-top: 1.25rem; }
.p-head h1 { grid-area: title; margin-top: 1rem; max-width: 18ch; font-size: clamp(2.3rem, 1rem + 4.8vw, 5.6rem); letter-spacing: -0.055em; line-height: 0.98; hyphens: manual; overflow-wrap: break-word; }
.p-head .b-kicker + h1 { margin-top: 0.75rem; }
.p-lead { grid-area: lead; margin-top: 1.5rem; max-width: 36rem; font-size: clamp(1.1875rem, 1rem + 0.7vw, 1.5rem); line-height: 1.4; color: var(--b-ink-2); text-wrap: pretty; }
.p-meta { grid-area: meta; margin-top: 1rem; font-size: var(--b-small); line-height: 1.4; color: var(--b-ink-3); font-variant-numeric: tabular-nums; }
.p-head .b-hero__cta { grid-area: cta; margin-top: 2rem; }
.p-hero-fig { grid-area: fig; margin: clamp(1.5rem, 1rem + 2vw, 2.5rem) 0 0; }
.p-hero-fig .b-hero__frame { outline: 1px solid var(--b-img-outline); outline-offset: -1px; }
/* Кнопки першого екрана до 40rem: на всю ширину, однакові */
@media (max-width: 39.99rem) {
  .p-head .b-hero__cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .p-head .b-hero__cta .b-btn { width: 100%; }
}
/* Поява H1 внутрішньої сторінки коротша, ніж на головній (там 1,5 с, крок 35 мс): H1 тут є LCP і повторюється на кожному переході */
.vb .p-head h1.is-split.is-in .w__i { transition-duration: 0.8s; transition-delay: calc(var(--wi, 0) * 20ms); }
/* Хлібні крихти: зона натиску 44 px, вигляд рядка той самий. Посилання розтягнуте до 2,75rem, від'ємний margin повертає
   висоту рядка до 1,55em (line-height від .vb), а вирівнювання по центру лишає текст на місці. */
@media (max-width: 47.99rem), (pointer: coarse) {
  .b-crumbs a { display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: calc((1.55em - 2.75rem) / 2); }
}
/* Поточна сторінка в один рядок з трикрапкою; посилання батьків не стискаються */
.b-crumbs { flex-wrap: nowrap; }
.b-crumbs > a, .b-crumbs > [aria-hidden] { flex: none; white-space: nowrap; }
.b-crumbs [aria-current] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-icon { width: 3.5rem; justify-self: end; }
.p-icon__svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (min-width: 48rem) {
  .p-head__wrap { display: block; }
  .p-head__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 6vw, 6rem); margin-top: 2rem; align-items: center; }
  .p-head__text { display: block; }
  .p-head__wrap > .b-crumbs { padding-top: 2rem; }
  .p-head .p-icon { grid-area: auto; margin-left: 0; }      /* not an item of the phone grid any more: a stray area name would add implicit tracks */
  .p-icon { width: clamp(9rem, 15vw, 14rem); }
  .p-head .b-kicker { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .js .vb .p-hero-fig .b-hero__frame, .js .vb .p-hero-fig .b-hero__frame img { animation: none; } }

/* Іконки: два кольори, лінії з pathLength=1; дії з icon-actions.css */
.p-icon .i-line, .p-links__icon .i-line, .p-price__svg .i-line, .p-card__icon .i-line { stroke: var(--lk-ink); stroke-width: 6; stroke-dasharray: 1; }
.p-links__icon .i-line, .p-price__svg .i-line { stroke-width: 8; }      /* ~1.5 px at 48 px: the line matches the weight of the text next to it */
.p-icon .i-ink, .p-links__icon .i-ink, .p-price__svg .i-ink, .p-card__icon .i-ink { fill: var(--lk-ink); }
.p-icon .i-acc, .p-links__icon .i-acc, .p-price__svg .i-acc, .p-card__icon .i-acc { fill: var(--b-accent); transform-box: fill-box; transform-origin: center; }
.p-icon .i-paper, .p-links__icon .i-paper, .p-price__svg .i-paper { fill: var(--b-bg); }
.p-card__icon .i-paper { fill: var(--b-surface); }
@media (prefers-reduced-motion: no-preference) {
  .p-icon.is-drawn .i-line { animation: svc-draw 1100ms cubic-bezier(0.4, 0, 0.2, 1) both; }
  .p-icon.is-drawn .i-acc { animation: svc-pop 500ms var(--b-ease) 600ms both; }
  .p-icon.is-acting .a-p { animation: var(--a) 1000ms cubic-bezier(0.4, 0, 0.2, 1) var(--ad, 0ms) both; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .p-icon:hover .a-p { animation: var(--a) 1000ms cubic-bezier(0.4, 0, 0.2, 1) var(--ad, 0ms) both; }
  .p-links a:hover .a-p { animation: var(--a) 1000ms cubic-bezier(0.4, 0, 0.2, 1) var(--ad, 0ms) both; }
}

/* Текст сторінки */
.p-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; padding-block: clamp(1rem, 0.5rem + 2vw, 3rem) var(--b-section); }
.p-body--wide { display: block; }
.p-prose > * + * { margin-top: 1.15rem; }
.p-prose h2 { margin-top: 3.25rem; padding-top: 1.25rem; border-top: 1px solid var(--b-ink); font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; text-wrap: balance; }
.p-prose > h2:first-child { margin-top: 0; }
.p-prose h2.is-long { font-size: clamp(1.35rem, 1rem + 1.1vw, 1.75rem); }      /* a heading that is a whole sentence (over 52 characters) must not dominate the page */
.p-prose h3 { margin-top: 2.25rem; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.p-prose :is(p, li, dd, dt) { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.6; color: var(--b-ink-2); text-wrap: pretty; }
.p-prose a { color: var(--b-ink); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.p-prose a:hover { text-decoration-thickness: 2px; }
.p-prose a.b-btn { text-decoration: none; }
.p-prose a.b-btn--main, .p-prose a.b-btn--main:hover { color: var(--b-on-accent); }
.p-prose ul:not(.p-points), .p-prose ol { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.p-prose ul:not(.p-points) > li { position: relative; padding-left: 1.5rem; }
.p-prose ul:not(.p-points) > li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.5rem; height: 0.5rem; background: var(--b-accent); }
.p-prose ol { counter-reset: step; }
.p-prose ol > li { position: relative; padding-left: 2.6rem; counter-increment: step; }
.p-prose ol > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border: 1px solid var(--b-ink); border-radius: 0; font-size: 0.85rem; font-weight: 600; color: var(--b-ink); font-variant-numeric: tabular-nums; }
.p-points { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-bottom: 1px solid var(--b-rule); }
.p-points > li { padding: 1rem 0; border-top: 1px solid var(--b-rule); }
.p-points h3 { margin: 0 0 0.3rem; font-size: 1.125rem; }
.p-points p { margin: 0; font-size: 1.0625rem; }

/* Readability engine (site_build.py, render_blocks): the same words, better shapes. Real steps: the ol above. Long "term - description" lists
   become rows: the term bold in a 10-14rem column from 48rem, a hairline between the rows like .p-points. The first letter of a term and of a
   description is capitalised in CSS only, the text in the page stays as written. A row without a term has an empty dt and takes the full width. */
.p-prose dl.p-terms { border-bottom: 1px solid var(--b-rule); }
.p-terms > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem; padding: 0.9rem 0; border-top: 1px solid var(--b-rule); }
.p-terms dt { font-weight: 600; letter-spacing: -0.01em; color: var(--b-ink); }
.p-terms dt:empty { display: none; }
.p-terms dd { margin: 0; }
.p-terms :is(dt, dd)::first-letter { text-transform: uppercase; }
@media (min-width: 48rem) {
  .p-terms > div { grid-template-columns: clamp(10rem, 26%, 14rem) minmax(0, 1fr); column-gap: 1.5rem; }
  .p-terms dt:empty + dd { grid-column: 1 / -1; }
}
/* Short items (five or more, a phrase each): hairline rows, two columns from 48rem, no square markers */
.p-prose ul.is-short:not(.p-points) { grid-template-columns: minmax(0, 1fr); gap: 0; border-bottom: 1px solid var(--b-rule); }
.p-prose ul.is-short:not(.p-points) > li { padding: 0.6rem 0; border-top: 1px solid var(--b-rule); }
.p-prose ul.is-short:not(.p-points) > li::before { content: none; }
@media (min-width: 48rem) { .p-prose ul.is-short:not(.p-points) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; } }
/* Question headings (an h3 ending in "?") fold into details.p-qa: a hairline, the question, a plus that turns into a cross; the first is open.
   Lighter than the FAQ block: no circle, the whole line is the 44 px target. */
.p-qa { border-bottom: 1px solid var(--b-rule); }
.p-prose > :not(.p-qa) + .p-qa { border-top: 1px solid var(--b-rule); }
.p-prose > .p-qa + .p-qa { margin-top: 0; }
.p-qa > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; padding-block: 0.7rem; list-style: none; cursor: pointer; }
.p-qa > summary::-webkit-details-marker { display: none; }
.p-prose .p-qa summary h3 { margin: 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; text-wrap: balance; }
.p-qa > summary::after { content: ""; flex: none; width: 0.875rem; height: 0.875rem; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; transition: transform 220ms var(--b-ease); }
.p-qa[open] > summary::after { transform: rotate(45deg); }
.p-qa__body { padding-bottom: 1.25rem; }
.p-qa__body > * + * { margin-top: 1rem; }

/* Picture system: a crop of one shape, black and white, thin outline. A phone shows the picture across the whole screen. A poster or infographic
   (generator: p-fig--poster) keeps its colours, its whole frame and a white ground, because its own lettering is the content. */
.p-fig { margin-inline: 0; }
.p-fig img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--b-placeholder); outline: 1px solid var(--b-img-outline); outline-offset: -1px; filter: grayscale(1) contrast(1.05); }
.p-fig--poster img { aspect-ratio: auto; object-fit: contain; background: #fff; filter: none; }
@media (max-width: 39.99rem) { .p-fig { margin-inline: calc(-1 * var(--b-gutter)); } }
@media (min-width: 40rem) { .p-points { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; } }
@media (min-width: 64rem) {
  /* Текст і картка запису стоять разом зліва, як заголовок над ними; порожнє поле лишається на краю, а не між колонками */
  .p-body:not(.p-body--wide) { grid-template-columns: minmax(0, 46rem) minmax(16rem, 20rem); justify-content: start; column-gap: clamp(2rem, 11.5vw - 5.4rem, 6rem); align-items: start; }
  .p-aside { position: sticky; top: 9rem; }
}
/* Contents of a long page (T4.1). From 80rem: sticky nav.p-toc | text | card, the leftover width goes between the columns so that neither edge is empty;
   64-80rem: no contents; below 64rem: details.p-toc-m folded under the hero. Both lists hold the same links (generator: toc_blocks). */
.p-toc, .p-toc-wrap { display: none; }
.p-prose h2[id], .p-svc-prices h2[id], .p-faq h2[id] { scroll-margin-top: 0.75rem; }
@media (min-width: 80rem) {
  .p-body.p-body--toc { grid-template-columns: minmax(0, 12rem) minmax(0, 44rem); column-gap: clamp(2rem, 3vw, 3.5rem); }
  .p-body.p-body--toc.p-body--aside { grid-template-columns: minmax(0, 12rem) minmax(0, 44rem) minmax(0, 18rem); justify-content: space-between; }
  .p-toc { display: block; position: sticky; top: 9rem; align-self: start; max-height: calc(100vh - 11rem); overflow-y: auto; scrollbar-width: thin; }
}
.p-toc .b-kicker { margin-bottom: 0.75rem; }
.p-toc ul { list-style: none; padding: 0; border-left: 1px solid var(--b-rule); }
.p-toc a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-left: -1px; padding: 0.45rem 0 0.45rem 0.9rem; border-left: 2px solid transparent; font-size: var(--b-small); line-height: 1.35; text-decoration: none; color: var(--b-ink-3); transition: color 220ms var(--b-ease), border-color 220ms var(--b-ease); }
.p-toc a:hover, .p-toc a[aria-current] { color: var(--b-ink); }
.p-toc a[aria-current] { border-left-color: var(--b-accent); font-weight: 500; }
@media (max-width: 63.99rem) { .p-toc-wrap { display: block; padding-bottom: clamp(0.5rem, 0.25rem + 1vw, 1.25rem); } }
.p-toc-m { border-top: 1px solid var(--b-ink); border-bottom: 1px solid var(--b-rule); }
.p-toc-m > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; padding-block: 0.5rem; list-style: none; cursor: pointer; font-size: var(--b-small); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.p-toc-m > summary::-webkit-details-marker { display: none; }
.p-toc-m > summary::after { content: ""; flex: none; width: 0.875rem; height: 0.875rem; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; transition: transform 220ms var(--b-ease); }
.p-toc-m[open] > summary::after { transform: rotate(45deg); }
.p-toc-m ul { list-style: none; padding: 0 0 0.5rem; }
.p-toc-m li + li { border-top: 1px solid var(--b-rule); }
.p-toc-m a { display: flex; align-items: center; min-height: 2.75rem; padding-block: 0.4rem; font-size: 1rem; line-height: 1.3; text-decoration: none; color: var(--b-ink); }
.p-toc-m a[aria-current] { font-weight: 600; }

.p-aside__card { display: grid; gap: 0.75rem; padding: 1.5rem; background: var(--b-dark); color: var(--b-on-dark-2); border-top: 2px solid var(--b-accent); font-size: var(--b-small); }
.p-aside__t { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.02em; color: var(--b-on-dark); }
.p-aside__tel { font-size: 1.75rem; font-weight: 500; letter-spacing: -0.03em; color: var(--b-on-dark); text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-aside__card .b-btn { margin-top: 0.5rem; }
.vb .p-aside__card :focus-visible { outline-color: #fff; }

/* Prices. Markup (generator, page_prices): .p-prices > nav.p-chips (button.p-chips__all + .p-chips__list with the short names) + .p-prices__main (note, tables, FAQ).
   Phone and tablet: the names sit in one scrolling row with a fade at the right edge; "all sections" unfolds them into several rows, so any section is two touches away.
   From 64rem: a sticky index on the left (grid 14-18rem | up to 56rem), the width that is left goes between the columns. */
.p-chips { position: sticky; top: 6.25rem; z-index: 3; display: flex; align-items: center; gap: 0.5rem; margin-inline: calc(-1 * var(--b-gutter)); padding: 0.75rem var(--b-gutter); overflow-x: auto; background: var(--b-bg); scrollbar-width: thin; }
.p-chips::after { content: ""; flex: none; align-self: stretch; position: sticky; right: 0; width: 2.5rem; margin-left: -2.5rem; background: linear-gradient(to right, transparent, var(--b-bg)); pointer-events: none; transition: opacity 200ms var(--b-ease); }
.p-chips.is-end::after, .p-chips.is-open::after { opacity: 0; }
.p-chips__list { display: flex; gap: 0.5rem; flex: none; }
.p-chips__all { flex: none; display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.5rem; padding: 0 1rem; border: 1px solid var(--b-ink); border-radius: 999px; background: transparent; color: var(--b-ink); font: 500 0.85rem/1 var(--font-b); white-space: nowrap; cursor: pointer; transition: background-color 220ms var(--b-ease), color 220ms var(--b-ease), transform 120ms var(--b-ease); }
.p-chips__all::after { content: ""; width: 0.7rem; height: 0.7rem; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; transition: transform 220ms var(--b-ease); }
.p-chips__all[aria-expanded="true"] { background: var(--b-ink); color: var(--b-bg); }
.p-chips__all[aria-expanded="true"]::after { transform: rotate(45deg); }
.p-chips__all:active { transform: scale(0.96); }
.p-chips.is-open { flex-direction: column; align-items: flex-start; overflow: visible; }
.p-chips.is-open .p-chips__list { flex-wrap: wrap; }
.p-chips a { flex: none; display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; border: 1px solid var(--b-rule-strong); border-radius: 999px; font-size: 0.85rem; font-weight: 500; text-decoration: none; color: var(--b-ink); white-space: nowrap; transition: background-color 220ms var(--b-ease), color 220ms var(--b-ease), transform 120ms var(--b-ease); }
.p-chips a:hover { background: var(--b-hover); }
.p-chips a:active { transform: scale(0.96); }
@media (pointer: coarse) { .p-chips a, .p-chips__all { min-height: 2.75rem; } }
.p-chips a.is-current { background: var(--b-ink); border-color: var(--b-ink); color: var(--b-bg); }
.p-note { margin-top: 1.25rem; font-size: var(--b-small); color: var(--b-ink-3); }
.p-prices { padding-bottom: 1rem; }
.p-prices__main { min-width: 0; }
.p-body--prices .p-faq { max-width: none; }
@media (min-width: 64rem) {
  .p-prices { display: grid; grid-template-columns: minmax(14rem, 18rem) minmax(0, 60rem); justify-content: space-between; column-gap: clamp(2rem, 4vw, 4rem); align-items: start; }
  .p-chips { top: 8rem; display: block; margin: 0; padding: 0.5rem 0 0; max-height: calc(100vh - 10rem); overflow-y: auto; background: none; }
  .p-chips::after, .p-chips__all { display: none; }
  .p-chips__list { flex-direction: column; gap: 0; border-left: 1px solid var(--b-rule); }
  .p-chips a { min-height: 2.5rem; margin-left: -1px; padding: 0.4rem 0 0.4rem 1rem; border: 0; border-left: 2px solid transparent; border-radius: 0; font-size: 0.9375rem; font-weight: 400; line-height: 1.3; white-space: normal; color: var(--b-ink-3); }
  .p-chips a:hover { background: none; color: var(--b-ink); }
  .p-chips a:active { transform: none; }
  .p-chips a.is-current { background: none; border-left-color: var(--b-accent); color: var(--b-ink); font-weight: 500; }
  .p-prices__main > .p-note:first-child { margin-top: 0.5rem; }
}
.p-prose .p-price { margin-top: 3rem; }
.p-prose .p-price :is(h2, h3) { margin: 0; padding: 0; border: 0; }
.p-price { margin-top: 3.25rem; scroll-margin-top: 10rem; }
.p-price__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--b-ink); }
/* h3 on a service page, under its «Ціни» h2: same look as the h2 of the price page */
.p-price__head :is(h2, h3), .p-prose .p-price__head h3 { font-size: clamp(1.35rem, 1rem + 1.1vw, 1.9rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.1; text-wrap: balance; }
.p-price__head span { flex: none; font-size: var(--b-small); color: var(--b-ink-3); }
/* Price page: the icon of the service in a 3rem slot left of the heading (an empty slot for a section without an icon keeps the headings on one edge).
   Phone: icon and unit label in one row, the heading under them. */
.p-price--idx .p-price__head { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; grid-template-areas: "icon title unit"; align-items: center; column-gap: 1rem; }
.p-price--idx .p-price__head > .p-price__icon { grid-area: icon; display: block; width: 3rem; height: 3rem; }
.p-price--idx .p-price__head > h2 { grid-area: title; }
.p-price--idx .p-price__head > span:last-child { grid-area: unit; }
@media (max-width: 47.99rem) {
  .p-price--idx .p-price__head { grid-template-columns: 3rem minmax(0, 1fr); grid-template-areas: "icon unit" "title title"; row-gap: 0.75rem; }
  .p-price--idx .p-price__head > span:last-child { justify-self: end; }
}
.p-price__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.p-price table { width: 100%; margin-top: 0.75rem; border-collapse: collapse; }
.p-price th { padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--b-rule); font-size: 1.0625rem; font-weight: 400; line-height: 1.4; text-align: left; color: var(--b-ink-2); text-wrap: pretty; }
.p-price td { width: 1%; padding: 0.85rem 0; border-bottom: 1px solid var(--b-rule); font-size: 1.0625rem; font-weight: 500; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Price cell (generator, price_cell): muted prefix and unit around a tabular number; the unit box has one width, so the numbers of a column keep a right edge */
.p-from, .p-unit { font-weight: 400; color: var(--b-ink-3); }
.p-num { display: inline-block; min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }
.p-unit { display: inline-block; min-width: 2.6rem; text-align: left; }
/* Row hover: the fill reaches 0.75rem past the text on both sides (a shadow, so the rules and the text stay on the edge of the column) */
@media (hover: hover) and (pointer: fine) {
  .p-price tr:hover :is(th, td) { background: var(--b-hover); }
  .p-price tr:hover th { box-shadow: -0.75rem 0 0 var(--b-hover); }
  .p-price tr:hover td { box-shadow: 0.75rem 0 0 var(--b-hover); }
}
/* Прайс на телефоні: липкими лишаються лише шапка без смуги з адресою (69 px) і док (71 px), разом близько 17% екрана 375x812.
   Чіпи звичайним рядком у потоці; смуга (рівно 2rem) від'їжджає при прокрутці, тому top -2rem. Без :has() лишається стара поведінка. */
@media (max-width: 47.99rem) {
  .vb:has(.p-chips) .b-header { top: calc(env(safe-area-inset-top, 0px) - 2rem); }
  .p-chips { position: static; }
  /* Перехід за якорем: відступ під липку шапку 69 px (у site.css scroll-padding-top html додається до scroll-margin-top цілі) */
  html:has(.p-chips) { scroll-padding-top: 0; }
  .p-price { scroll-margin-top: 5rem; }
}

/* Ціни на сторінці послуги: таблиця з сторінки цін тієї ж мови, стилі .p-price, заголовок розділу замість лінії таблиці.
   Розмітка (generator): section.p-svc-prices > h2, section.p-price, p.p-note, a.p-svc-prices__all «Усі ціни». */
.p-svc-prices { margin-top: 3.25rem; }
.p-svc-prices > h2 { margin-top: 0; }
.p-svc-prices .p-price { margin-top: 1.25rem; }
.p-svc-prices .p-price__head { padding-top: 0; border-top: 0; }
.p-svc-prices .p-note { margin-top: 1rem; font-size: var(--b-small); line-height: 1.45; color: var(--b-ink-3); }
.p-svc-prices__all, .p-svc-prices > a:last-child { display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; width: fit-content; min-height: 2.75rem; margin: 0.5rem 0 0 auto; font-size: 1.0625rem; font-weight: 500; }
.p-svc-prices__all .ico { flex: none; width: 1.1rem; height: 1.1rem; transition: transform 220ms var(--b-ease); }
@media (hover: hover) and (pointer: fine) { .p-svc-prices__all:hover .ico { transform: translateX(3px); } }

/* «Болить зараз?» на сторінках зубного болю, одразу після першого екрана. Сама секція є карткою (вона ж може мати .b-wrap
   або містити його: він тоді розчиняється), червона смуга зліва. Розмітка (generator): section.p-urgent > h2, p, таблиця/список годин,
   .b-hero__cta з двома кнопками. Десктоп: текст ліворуч, години праворуч. Телефон: усе в один стовпчик, кнопки на всю ширину. */
.p-urgent { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.85rem; width: calc(100% - 2 * var(--b-gutter)); max-width: calc(var(--b-wrap) - 2 * var(--b-gutter)); margin: 0 auto clamp(1.5rem, 1rem + 2vw, 3rem); padding: clamp(1.25rem, 0.9rem + 1.6vw, 2rem); background: var(--b-surface); border: 1px solid var(--b-rule); border-left: 4px solid var(--b-accent); }
.p-urgent > .b-wrap { display: contents; }
.p-urgent h2 { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; }
.p-urgent p { max-width: 36rem; font-size: 1.125rem; line-height: 1.5; color: var(--b-ink-2); text-wrap: pretty; }
.p-urgent table { width: 100%; max-width: 24rem; border-collapse: collapse; font-size: var(--b-small); }
.p-urgent :is(th, td) { padding: 0.45rem 0; border-bottom: 1px solid var(--b-rule); font-weight: 400; text-align: left; color: var(--b-ink-2); }
.p-urgent td { font-weight: 500; text-align: right; color: var(--b-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.p-urgent .b-hero__cta, .p-urgent__cta { margin-top: 0.5rem; }
@media (max-width: 39.99rem) {
  .p-urgent .b-hero__cta, .p-urgent__cta { flex-direction: column; align-items: stretch; }
  .p-urgent .b-btn { width: 100%; white-space: normal; text-align: center; }
}
@media (min-width: 48rem) {
  .p-urgent { grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem); column-gap: clamp(2rem, 6vw, 5rem); align-items: start; }
  :is(.p-urgent, .p-urgent > .b-wrap) > :is(table, dl, ul, .p-urgent__hours) { grid-column: 2; grid-row: 1 / span 3; }
  :is(.p-urgent, .p-urgent > .b-wrap) > :not(table, dl, ul, .p-urgent__hours) { grid-column: 1; }
}

/* «Коротко»: три рядки-відповіді одразу під першим екраном (site_content.BRIEF). Розмітка (generator): section.p-brief > .b-wrap > .p-brief__box > h2, dl > div > dt + dd.
   Верхня лінія чорнилом, h2 скромний, як kicker, з червоним квадратом; мітка дрібними великими літерами, як .b-way__label; від 64rem три колонки з розділювачами,
   на телефоні рядки один під одним. */
.p-brief { padding-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.p-brief__box { padding-top: 1rem; border-top: 1px solid var(--b-ink); }
.p-brief h2 { display: flex; align-items: center; gap: 0.6rem; font-size: var(--b-small); font-weight: 600; letter-spacing: 0.04em; line-height: 1.3; text-transform: uppercase; text-wrap: wrap; color: var(--b-ink); }
.p-brief h2::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; background: var(--b-accent); }
.p-brief dl { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 0.5rem; }
.p-brief dl > div { padding-block: 1rem; border-top: 1px solid var(--b-rule); }
.p-brief dl > div:first-child { border-top: 0; }
.p-brief dt { font-size: var(--b-small); font-weight: 500; letter-spacing: 0.04em; line-height: 1.3; text-transform: uppercase; color: var(--b-ink-3); }
.p-brief dd { margin: 0.4rem 0 0; font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); line-height: 1.45; color: var(--b-ink); text-wrap: pretty; }
@media (min-width: 64rem) {
  .p-brief dl { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); margin-top: 1rem; }
  .p-brief dl > div { padding: 0.25rem 2rem 0.25rem; border-top: 0; border-left: 1px solid var(--b-rule); }
  .p-brief dl > div:first-child { padding-left: 0; border-left: 0; }
}

/* FAQ в кінці тексту: як на головній (.b-faq з site-b.css: details > summary з h3 і знаком плюс), але скромніші розміри, бо колонка вужча.
   Живе і в .p-prose (послуги, статті), і поза ним (ціни), тому стиль заголовка й відповіді повний. */
.p-faq { margin-top: 3.25rem; }
.p-prose > .p-faq { margin-top: 3.25rem; }
.p-faq > h2 { margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--b-ink); font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; text-wrap: balance; }
.p-faq .b-faq { margin-top: 1.25rem; border-top-color: var(--b-rule); }
.p-faq summary { min-height: 3.75rem; padding-block: 0.9rem; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); }
.p-faq summary h3 { margin: 0; font: inherit; letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; }
.p-faq details > p { max-width: 42rem; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.6; text-wrap: pretty; }
.p-body--wide .p-faq { max-width: 46rem; margin-top: clamp(3rem, 2rem + 3vw, 5rem); }

/* Contacts: three ways in a row (.b-ways from site-b.css), then the visit block with the static map, then "how to get there".
   Markup (generator): .p-visit > .p-visit__info (address, phone, e-mail, hours, route button) + figure.p-map; section.p-how. */
.p-visit { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-top: 0; border-top: 0; }
.p-visit address { margin-bottom: 1.75rem; font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); font-style: normal; letter-spacing: -0.03em; line-height: 1.2; }
.p-visit .b-kicker { margin-bottom: 0.4rem; }
.p-visit .hours { margin-bottom: 1.5rem; }
.p-big { font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); font-weight: 500; letter-spacing: -0.03em; text-decoration: none; font-variant-numeric: tabular-nums; margin-bottom: 1.75rem; display: inline-block; }
.p-big:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.p-map { margin: 0; }
.p-map > a { display: block; }
/* Own frame instead of .p-fig img: that one turns the image grey and would wash out the red marker */
.p-map img { display: block; width: 100%; height: auto; background: var(--b-placeholder); outline: 1px solid var(--b-img-outline); outline-offset: -1px; }
.p-map figcaption { margin-top: 0.5rem; font-size: 0.75rem; line-height: 1.4; color: var(--b-ink-3); }
.p-map figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
@media (min-width: 60rem) { .p-visit { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; } }
.p-how { margin-top: clamp(3rem, 2rem + 4vw, 5rem); }
.p-how > h2 { padding-top: 1rem; border-top: 1px solid var(--b-ink); font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; }
.p-how__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; padding-block: 1.5rem; border-bottom: 1px solid var(--b-rule); }
.p-how__row h3 { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; }
.p-how__row p { max-width: 40rem; font-size: 1.1875rem; line-height: 1.55; color: var(--b-ink-2); text-wrap: pretty; }
.p-how__row .b-btn { justify-self: start; margin-top: 0.5rem; }
.p-how .p-fig { margin-top: 1.5rem; max-width: 40rem; }
@media (min-width: 60rem) {
  .p-how__row { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) auto; column-gap: 2.5rem; align-items: start; }
  .p-how__row .b-btn { margin-top: 0; justify-self: end; }
}

/* Інші послуги і читайте також */
.p-more { padding-block: 0 var(--b-section); }
.p-more h2 { margin-bottom: 1.5rem; font-size: var(--b-h3); font-weight: 500; letter-spacing: -0.035em; }
.p-links { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--b-ink); }
.p-links a { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 0.25rem; border-bottom: 1px solid var(--b-rule); font-size: 1.125rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; text-decoration: none; color: inherit; transition: background-color 220ms var(--b-ease); }
.p-links a > :not(.ico) { transition: transform 300ms var(--b-ease); }
.p-links a span { flex: 1; text-wrap: balance; }
.p-links a .ico { flex: none; width: 1.2rem; height: 1.2rem; transition: transform 220ms var(--b-ease); }
.p-links__icon { flex: none; width: 3rem; height: 3rem; overflow: visible; }
@media (hover: hover) and (pointer: fine) { .p-links a:hover { background: var(--b-hover); } .p-links a:hover > :not(.ico) { transform: translateX(0.5rem); } .p-links a:hover .ico { transform: translateX(3px); } }
@media (min-width: 48rem) { .p-links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; } }
@media (min-width: 72rem) { .p-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Closing band (generator, cta_band). From 64rem two columns: the name of the page, the heading, the text, the buttons and the three ways (call, chat, route)
   on the left, a black and white 4:5 photo with the bottom fade of .b-lab__over on the right. Below 64rem the photo is hidden (display: none together with
   loading=lazy: the file is not fetched on a phone). */
.p-cta { padding-block: clamp(3.5rem, 2rem + 6vw, 8rem); background: var(--b-dark); color: var(--b-on-dark); }
.p-cta__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.p-cta .b-kicker { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.25rem; color: var(--b-on-dark-2); }
.p-cta .b-kicker::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; background: var(--b-accent); }
.p-cta h2 { max-width: 14ch; font-size: clamp(2.5rem, 1rem + 6vw, 6.5rem); font-weight: 500; letter-spacing: -0.055em; line-height: 0.95; text-wrap: balance; color: var(--b-on-dark); }
.p-cta p { margin-top: 1.5rem; max-width: 30rem; font-size: 1.1875rem; line-height: 1.45; color: var(--b-on-dark-2); text-wrap: pretty; }
.p-cta .b-kicker { margin-top: 0; max-width: none; font-size: var(--b-small); line-height: 1.3; }
.p-cta .b-hero__cta { margin-top: 2rem; }
.p-cta .b-btn--line { border-color: var(--b-on-dark); color: var(--b-on-dark); }
.p-cta .b-btn--line:hover { background: var(--b-on-dark); color: var(--b-dark); }
.p-cta :focus-visible { outline-color: #fff; }
.p-cta__ways { margin-top: 2.5rem; border-top-color: rgb(255 255 255 / 0.28); }
.p-cta__ways .b-way { padding-block: 1rem; border-bottom-color: rgb(255 255 255 / 0.18); color: var(--b-on-dark); }
.p-cta__ways .b-way__label { color: var(--b-on-dark-2); }
.p-cta__ways .b-way__value { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
@media (min-width: 60rem) {
  .p-cta__ways .b-way { padding: 1.25rem 1rem 0 0; }
  .p-cta__ways .b-way + .b-way { padding-left: 1rem; border-left-color: rgb(255 255 255 / 0.18); }
}
.p-cta__photo { display: none; position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: var(--b-dark); }
.p-cta__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p-cta__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 3rem 1.25rem 1rem; background: linear-gradient(to top, rgb(18 19 17 / 0.72), transparent); font-size: 0.8125rem; line-height: 1.4; color: var(--b-on-dark-2); }
@media (min-width: 64rem) {
  .p-cta__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
  .p-cta h2 { font-size: clamp(2.5rem, 1rem + 4vw, 5rem); }
  .p-cta__photo { display: block; }
}

/* Inline call to action inside a long text (generator, place_inline_cta): dark card with a red top line, like .b-plate */
.p-prose > .p-inline-cta { display: grid; gap: 1rem; align-items: center; margin-block: 2.25rem; padding: 1.25rem 1.5rem; background: var(--b-dark); border-top: 2px solid var(--b-accent); }
.p-prose .p-inline-cta p { margin: 0; max-width: 32rem; font-size: 1.1875rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; color: var(--b-on-dark); }
.p-inline-cta .b-btn { justify-self: stretch; }
@media (min-width: 40rem) {
  .p-prose > .p-inline-cta { grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; }
  .p-inline-cta .b-btn { justify-self: end; }
}
.vb .p-inline-cta :focus-visible { outline-color: #fff; }

/* Article cards (generator, article_card): "Корисно знати" under a service, "Читайте також" under an article, the hub. A row card: thumbnail 3:2 in black and
   white (or the icon of the article on a light plate when it has no fitting picture), title, two lines of excerpt, an arrow. Phone: thumbnail 7.5rem. */
.p-cards { display: grid; grid-template-columns: minmax(0, 1fr); }
.p-card { position: relative; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0 1rem; align-items: start; padding: 1rem 0; border-top: 1px solid var(--b-rule); text-decoration: none; color: inherit; }
.p-card:first-child { border-top-color: var(--b-ink); }
.p-cards:last-child { border-bottom: 1px solid var(--b-rule); }
.p-card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--b-placeholder); outline: 1px solid var(--b-img-outline); outline-offset: -1px; }
.p-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.p-card__media--icon { display: grid; place-items: center; background: var(--b-surface); }
.p-card__icon { display: block; width: min(52%, 9rem); height: auto; overflow: visible; }
.p-card__body { display: grid; gap: 0.35rem; align-content: start; min-width: 0; }
.p-card :is(h2, h3) { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.025em; line-height: 1.2; text-wrap: balance; }
.p-card p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--b-small); line-height: 1.45; color: var(--b-ink-3); }
.p-card__date { font-size: 0.8125rem; line-height: 1.4; color: var(--b-ink-3); font-variant-numeric: tabular-nums; }
.p-card__go { display: inline-flex; margin-top: 0.15rem; }
.p-card__go .ico { width: 1.2rem; height: 1.2rem; transition: transform 220ms var(--b-ease); }
.p-card:hover :is(h2, h3) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
@media (hover: hover) and (pointer: fine) { .p-card:hover .p-card__go .ico { transform: translateX(3px); } }
.p-more--cards .p-cards + .p-links { margin-top: 2rem; }
.p-more--tight { padding-bottom: clamp(3rem, 2rem + 4vw, 5rem); }      /* another .p-more follows */
@media (min-width: 40rem) {
  .p-card { grid-template-columns: 12rem minmax(0, 1fr); gap: 0 1.5rem; padding-block: 1.25rem; }
  .p-card :is(h2, h3) { font-size: 1.375rem; }
  .p-card p { font-size: 0.9375rem; }
}
@media (min-width: 64rem) {
  .p-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
  .p-card { grid-template-columns: 15rem minmax(0, 1fr); }
  .p-card:nth-child(2) { border-top-color: var(--b-ink); }
}
/* Hub: the first card is big (photo left, text right from 48rem, the whole row from 64rem); the others are the same row cards in two columns from 64rem */
.p-cards--hub { border-bottom: 0; }
.p-cards--hub .p-card:nth-child(2) { border-top-color: var(--b-ink); }
.p-card--big { grid-template-columns: minmax(0, 1fr); gap: 1rem 0; padding: 0 0 1.5rem; border-top: 0; }
.p-card--big .p-card__body { gap: 0.6rem; }
.p-card--big :is(h2, h3) { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem); letter-spacing: -0.035em; line-height: 1.08; }
.p-card--big p { -webkit-line-clamp: 4; font-size: 1.0625rem; }
@media (min-width: 48rem) {
  .p-card--big { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 4vw, 4rem); align-items: end; padding-bottom: 2rem; }
}
@media (min-width: 64rem) {
  .p-card--big { grid-column: 1 / -1; }
  .p-cards--hub .p-card:nth-child(3) { border-top-color: var(--b-ink); }
}

/* Рядки послуг як посилання (головна ru/sk, розділ статей) */
a.c-svc__row { text-decoration: none; color: inherit; }
.c-svc li:nth-child(n+7) { --row: 5; }
.vb .c-svc__desc { text-wrap: pretty; }
/* Рядок зсувається через transform, а не через padding (перерахунок лейаута щокадру); заливка ::before і колір іконки як у site-b.css.
   Тут, а не в site-b.css: макети variant-*.html мають лишитись як були. */
.vb .c-svc__row { transition: none; }
.vb .c-svc__row::before { background: var(--b-hover); }
.vb .c-svc__row > :is(.c-svc__icon, .c-svc__name, .c-svc__desc, .c-svc__more) { transition: transform 300ms var(--b-ease); }
@media (min-width: 48rem) { .vb .c-svc__row .b-service__go { transition: background-color 220ms var(--b-ease), color 220ms var(--b-ease), transform 300ms var(--b-ease); } }
@media (hover: hover) and (pointer: fine) {
  .vb .c-svc__row:hover { padding-left: 0; padding-right: 0; }
  .vb .c-svc__row:hover > :is(.c-svc__icon, .c-svc__name, .c-svc__desc, .c-svc__more) { transform: translateX(0.75rem); }
  .vb .c-svc__row:hover .c-svc__icon { --svc-paper: var(--b-hover); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 48rem) { .vb .c-svc__row:hover .b-service__go { transform: translateX(calc(3px - 0.75rem)); } }

@media (prefers-reduced-motion: reduce) {
  .b-call-btn, .b-rating .ico, .p-svc-prices__all .ico { transition: none; }
  .b-call-btn:active, .b-menu-btn:active, .b-rating:hover .ico, .p-svc-prices__all:hover .ico { transform: none; }
  /* rows and chips answer with colour only */
  .p-links a, .p-links a > *, .p-chips a, .vb .c-svc__row, .vb .c-svc__row > *, .vb .c-svc__row::before, .p-qa > summary::after, .p-faq .pm, .p-toc a, .p-toc-m > summary::after, .p-chips__all, .p-chips__all::after, .p-chips::after, .p-card__go .ico { transition: none; }
  .p-chips a:active, .p-chips__all:active, .p-links a:hover > *, .vb .c-svc__row:hover > *, .p-card:hover .p-card__go .ico { transform: none; }
}

/* Doctor page without a portrait (generator, doctor_page): a compact single column; the closing band follows the reviews */
.b-doc-page__grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 60rem; margin-top: 1rem; gap: 0; align-items: start; }
.b-doc-page__grid--solo + .b-doc-page__reviews { margin-top: clamp(3rem, 2rem + 4vw, 5rem); padding-bottom: clamp(3rem, 2rem + 4vw, 5rem); }
.b-doc-page__reviews .b-link { min-height: 2.75rem; }

/* Друк (насамперед прайс): без шапки, доку, кнопок, смуги запису, іконок і меню; таблиці на всю ширину, рядки не рвуться,
   підвал темним на білому: адреса й телефон лишаються текстом. Штрихи іконок (pathLength=1) у друці розсипаються, тому їх немає. */
@media print {
  .skip, .b-header, .b-dock, .b-btn, .b-hero__cta, .b-rating, .p-chips, .p-aside, .p-cta, .p-urgent .b-hero__cta, .p-icon, .p-links__icon, .p-price__icon, .p-card__go, .p-toc, .p-toc-wrap, .p-inline-cta, dialog, .footer__links { display: none !important; }
  .p-head { padding-bottom: 1rem; }
  .p-body, .p-body--wide, .p-prices { display: block; padding-block: 0 1.5rem; }
  .p-prices, .p-prose, .p-svc-prices { max-width: none; }
  .p-price { margin-top: 1.75rem; }
  .p-price table { width: 100%; }
  .p-price tr, .p-price__head, .p-urgent { break-inside: avoid; }
  .p-price__head { break-after: avoid; }
  .vb .site-footer { padding-block: 1rem; background: none; }
  .vb .site-footer, .vb .site-footer * { color: #000; }
  .vb .site-footer .b-logo__mark { fill: #000; }
}

/* Binotel chat (site-chat.js loads the widget only after a click on [data-open-chat]). The stock launcher and the greeting cloud are hidden:
   our buttons open the chat by clicking the launcher from script, which works while it is display: none. The chat window itself (#bwc-chat,
   not the .bwc-chat class of the launcher) stays visible. */
bwchat#bwc-wrap button.bwc-chat, bwchat#bwc-wrap #bwc-chat-cloud-message { display: none !important; }
/* While the chat window is open our dock and the desktop chat button step aside */
html.is-chat-open .b-dock, html.is-chat-open .b-chat-fab { display: none; }
[data-open-chat][aria-busy="true"] { cursor: progress; opacity: 0.6; }
/* Desktop chat button (the dock is gone from 70rem): dark pill bottom right, shown by the same scroll rule as the dock */
.b-chat-fab { display: none; }
@media (min-width: 70rem) {
  .b-chat-fab { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: var(--z-sticky); display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3.25rem; padding: 0 1.4rem 0 1.15rem; border: 0; border-radius: 999px; background: var(--b-ink); color: var(--b-bg); font: 500 1rem/1 var(--font-b); cursor: pointer; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.2), 0 12px 30px -12px rgb(0 0 0 / 0.5); transform: translateY(calc(100% + 1.5rem)); visibility: hidden; transition: transform 400ms var(--b-ease), visibility 400ms, background-color 220ms var(--b-ease); }
  .b-chat-fab.is-shown { transform: none; visibility: visible; }
  .b-chat-fab .ico { width: 1.5rem; height: 1.5rem; }
  .b-chat-fab:active { transform: scale(0.96); }
  .vb .b-chat-fab:focus-visible { outline: 2px solid var(--b-bg); outline-offset: 0; box-shadow: 0 0 0 5px var(--b-ink); }
}
@media (hover: hover) and (pointer: fine) { .b-chat-fab:hover { background: var(--b-ink-2); } }
@media (prefers-reduced-motion: reduce) { .b-chat-fab { transition: none; } .b-chat-fab:active { transform: none; } }
@media print { .b-chat-fab { display: none !important; } }

/* Binotel GetCall, "call me back" (site-callback.js loads the widget only after a click on [data-open-callback]). The stock phone button and the form
   that opens by itself are hidden (and switched off in the widget settings); our buttons open the widget's own form (#bingc-passive stays visible). */
#bingc-phone-button, #bingc-active { display: none !important; }
[data-open-callback][aria-busy="true"] { cursor: progress; opacity: 0.6; }
html.is-chat-open .b-cb-fab { display: none; }
/* Desktop "call me back" button above the chat button: light pill with a dark outline, shown by the same scroll rule (site-chat.js) */
.b-cb-fab { display: none; }
@media (min-width: 70rem) {
  .b-cb-fab { position: fixed; right: 1.5rem; bottom: 5.5rem; z-index: var(--z-sticky); display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3.25rem; padding: 0 1.4rem 0 1.15rem; border: 0; border-radius: 999px; background: var(--b-bg); color: var(--b-ink); font: 500 1rem/1 var(--font-b); cursor: pointer; box-shadow: 0 0 0 1px var(--b-ink), 0 12px 30px -12px rgb(0 0 0 / 0.35); transform: translateY(calc(100% + 5.5rem)); visibility: hidden; transition: transform 400ms var(--b-ease), visibility 400ms, background-color 220ms var(--b-ease); }
  .b-cb-fab.is-shown { transform: none; visibility: visible; }
  .b-cb-fab .ico { width: 1.5rem; height: 1.5rem; }
  .b-cb-fab:active { transform: scale(0.96); }
  .vb .b-cb-fab:focus-visible { outline: 2px solid var(--b-ink); outline-offset: 3px; }
}
@media (hover: hover) and (pointer: fine) { .b-cb-fab:hover { background: var(--b-surface); } }
@media (prefers-reduced-motion: reduce) { .b-cb-fab { transition: none; } .b-cb-fab:active { transform: none; } }
@media print { .b-cb-fab { display: none !important; } }

/* Form v0: bot trap field. Off screen rather than display: none, so a simple bot still finds it and fills it; a person never sees it
   and Tab skips it (tabindex="-1"). site.js marks a lead spam when it has a value. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Home, doctors: until the clinic sends its team and photos (01e-content.md E-2) there is one doctor without a portrait. A lone 4:5 grey box with
   initials left two thirds of the row empty, so a single card lies as a row: a small square with the initials, the name, role and link beside it,
   a hairline above and below like the other lists. Goes back to the portrait grid by itself once a second card or a photo exists. */
.b-doctors:has(> li:only-child) { grid-template-columns: minmax(0, 1fr); max-width: 46rem; }
.b-doctors > li:only-child .b-doc__link { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: 1.5rem; align-items: center; padding-block: 1.25rem; border-block: 1px solid var(--b-rule); }
.b-doctors > li:only-child .b-doc__photo--mono { grid-row: 1 / span 3; width: 5.5rem; aspect-ratio: 1; font-size: 1.75rem; }
.b-doctors > li:only-child .b-doc__name { margin-top: 0; }
.b-doctors > li:only-child .b-doc__more { justify-self: start; }

/* Пін клініки на карті контактів (08.10.2026): посилання на картку Google поверх центру карти, вістря пінa стоїть на клініці */
.p-map__frame { position: relative; }
.p-map__pin { position: absolute; left: 50%; top: 50%; width: clamp(2.25rem, 6vw, 3.5rem); transform: translate(-50%, -100%); filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.3)); transition: transform 220ms var(--b-ease); }
.p-map__pin svg { display: block; width: 100%; height: auto; }
.p-map__pin:hover, .p-map__pin:focus-visible { transform: translate(-50%, -106%); }
@media (prefers-reduced-motion: reduce) { .p-map__pin { transition: none; } .p-map__pin:hover, .p-map__pin:focus-visible { transform: translate(-50%, -100%); } }

/* Іконка-пін на сторінці контактів як посилання на Google Картки (08.10.2026, правки 7 і 8): підпис «Ми тут» під іконкою */
a.p-icon--link { display: grid; justify-items: center; gap: 0.75rem; width: max-content; text-decoration: none; color: var(--b-ink); }
a.p-icon--link > span:first-child { display: block; width: 3.5rem; }
@media (min-width: 48rem) { a.p-icon--link > span:first-child { width: clamp(9rem, 15vw, 14rem); } }
.p-icon__cta { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; border-bottom: 1px solid currentColor; }
.p-icon__cta .ico { width: 1rem; height: 1rem; }
a.p-icon--link:hover .p-icon__cta, a.p-icon--link:focus-visible .p-icon__cta { color: var(--b-accent); }

/* Карта контактів: картинка + згода, потім жива карта Leaflet (правка 11, 08.10.2026) */
.p-map__frame { overflow: hidden; background: var(--b-placeholder); }
.p-map__still { display: block; width: 100%; height: auto; }
.p-map__live { position: absolute; inset: 0; z-index: 1; background: var(--b-placeholder); }
.p-map__live[hidden] { display: none; }
.p-map.is-live .p-map__pin { display: none; }
.p-map__gate { position: absolute; z-index: 2; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; display: grid; gap: 0.75rem; padding: 1rem; background: var(--b-bg); border: 1px solid var(--b-rule-strong); border-radius: 0.75rem; font-size: 0.9375rem; line-height: 1.45; }
.p-map__gate[hidden] { display: none; }
.p-map__gate p { margin: 0; }
.p-map__pol { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.p-map__gate .b-btn { justify-self: start; }
@media (min-width: 40rem) { .p-map__gate { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.p-map__live .leaflet-tile-pane { filter: grayscale(1) contrast(1.05); }
.p-map__live .leaflet-control-zoom { border: 1px solid var(--b-rule-strong); border-radius: 0.5rem; overflow: hidden; box-shadow: none; }
.p-map__live .leaflet-control-zoom a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; line-height: 1; font-size: 1.5rem; color: var(--b-ink); background: var(--b-bg); }
.p-map__live .leaflet-control-zoom a:hover { background: var(--b-ink); color: var(--b-bg); }
.p-map__live .leaflet-control-attribution { font-size: 0.6875rem; }
.p-pinicon { background: none; border: 0; }
.p-pinicon a { display: block; width: 44px; height: 57px; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.3)); }
.p-pinicon svg { display: block; width: 100%; height: 100%; }
.p-map__live .p-place { display: flex; align-items: center; gap: 0.35rem; width: max-content; pointer-events: none; }
.p-map__live .p-place i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--b-ink); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--b-ink); }
.p-map__live .p-place b { padding: 0.1rem 0.4rem; background: rgb(255 255 255 / 0.9); border-radius: 0.25rem; font: 500 0.75rem/1.2 var(--font-b, inherit); color: var(--b-ink); white-space: nowrap; }
.p-map__still { width: 100%; height: 100%; object-fit: cover; }
.p-map__frame { aspect-ratio: 4 / 3; }
@media (min-width: 64rem) { .p-map__frame { aspect-ratio: 2 / 1; } }
.s1-mh { grid-template-columns: minmax(0, 1fr); }

/* Рейтинг Google у першому екрані (правка 16, 08.10.2026): знак G, п'ять зірок (4,4 заповнено) і число */
.b-rating .b-g { flex: none; width: 1.25rem; height: 1.25rem; }
.b-rating .b-stars svg { display: block; width: 5.5rem; height: 1.1rem; }
.b-stars__bg { fill: var(--b-rule-strong); }
.b-stars__fg { fill: #f5a300; }
.b-rating > span[aria-hidden] { font-weight: 600; color: var(--b-ink); }

/* Стаття «Болить зуб»: триаж, швидкі переходи, кроки, заборони, причини (правка 23, 09.10.2026). Усе в колонці тексту .p-prose */
.p-triage { display: grid; gap: 0.75rem; margin-block: 2rem; }
@media (min-width: 40rem) { .p-triage { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.p-triage__card { display: grid; align-content: start; gap: 0.5rem; padding: 1.1rem 1.1rem 1.25rem; background: var(--b-surface); border: 1px solid var(--b-rule-strong); border-top-width: 4px; border-radius: 0.5rem; }
.p-triage__card--now { border-top-color: var(--b-accent); }
.p-triage__card--today { border-top-color: var(--b-ink); }
.p-triage__card--plan { border-top-color: var(--b-rule-strong); }
.p-triage__k { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-size: var(--b-small); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--b-ink-3); }
.p-triage__k .ico { width: 1.15rem; height: 1.15rem; }
.p-triage__card--now .p-triage__k { color: var(--b-accent); }
.p-triage__t { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.p-triage ul { margin: 0.25rem 0 0; padding-left: 1.1rem; font-size: 0.9375rem; line-height: 1.45; color: var(--b-ink-2); }
.p-triage li + li { margin-top: 0.35rem; }
.p-jump { margin-block: 2rem; padding: 1.1rem 1.25rem 1.25rem; border: 1px solid var(--b-rule-strong); border-radius: 0.5rem; }
.p-jump__h { margin: 0 0 0.25rem; font-size: var(--b-small); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--b-ink-3); }
.p-jump ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 0.75rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .p-jump ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.p-jump__hint { margin: 0 0 0.9rem; font-size: 0.9375rem; line-height: 1.4; color: var(--b-ink-2); }
.p-jump a { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.35rem 0.6rem; border: 1px solid var(--b-rule-strong); border-radius: 0.4rem; background: var(--b-surface); font-size: 0.9375rem; line-height: 1.25; text-decoration: none; color: var(--b-ink); cursor: pointer; }
.p-jump a { height: 100%; box-sizing: border-box; }
.p-jump a span { flex: 1; }
.p-jump .p-jump__go { width: 1rem; height: 1rem; color: var(--b-ink-3); }
.p-jump a:hover .p-jump__go, .p-jump a:focus-visible .p-jump__go { color: var(--b-accent); }
.p-jump a:hover, .p-jump a:focus-visible { background: var(--b-rule); border-color: var(--b-accent); }
.p-jump .ico { flex: none; width: 1.25rem; height: 1.25rem; color: var(--b-accent); }
.p-prose [id] { scroll-margin-top: 7rem; }
.p-do, .p-dont { display: grid; gap: 0.75rem; margin: 1.25rem 0; padding: 0; list-style: none; }
.p-do { counter-reset: do; }
.p-do li, .p-dont li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0.9rem; align-items: start; padding: 0.9rem 1rem; background: var(--b-surface); border: 1px solid var(--b-rule); border-radius: 0.5rem; }
.p-do__ic, .p-dont__ic { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--b-bg); border: 1px solid var(--b-rule-strong); }
.p-do__ic .ico { width: 1.4rem; height: 1.4rem; }
.p-do li::after { content: none; }
.p-dont li { border-left: 3px solid var(--b-accent); }
.p-dont__ic { background: var(--b-accent); border-color: var(--b-accent); color: var(--b-on-accent); }
.p-dont__ic .ico { width: 1.2rem; height: 1.2rem; stroke-width: 2.5; }
.p-hint { padding: 0.75rem 1rem; border-radius: 0.5rem; background: var(--b-rule); font-size: 0.9375rem; }
.p-cause { display: grid; gap: 0.9rem; margin: 1.25rem 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .p-cause { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.p-cause li { display: grid; align-content: start; gap: 0.5rem; padding: 1.1rem 1.1rem 1.25rem; background: var(--b-surface); border: 1px solid var(--b-rule); border-radius: 0.5rem; }
.p-cause__ic { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--b-bg); border: 1px solid var(--b-rule-strong); color: var(--b-accent); }
.p-cause__ic .ico { width: 1.4rem; height: 1.4rem; }
.p-cause h3 { margin: 0.25rem 0 0; font-size: 1.1875rem; letter-spacing: -0.02em; line-height: 1.2; }
.p-cause p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--b-ink-2); }
.p-cause__go { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.25rem; font-weight: 500; font-size: 0.9375rem; color: var(--b-ink); text-decoration: underline; text-underline-offset: 0.2em; }
.p-cause__go .ico { width: 1rem; height: 1rem; }
.p-cta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-block: 1.75rem; padding: 1.1rem 1.25rem; background: var(--b-ink); color: var(--b-on-dark); border-radius: 0.5rem; border-top: 3px solid var(--b-accent); }
.p-cta-line > div { flex: 1 1 12rem; }
.p-cta-line p { margin: 0; }
.p-cta-line__t { font-weight: 600; font-size: 1.0625rem; }
.p-cta-line .b-btn { gap: 0.5rem; max-width: 100%; min-height: 3.25rem; height: auto; padding-block: 0.6rem; white-space: normal; text-align: center; line-height: 1.25; }
.p-cta-line .b-btn .ico { width: 1.1rem; height: 1.1rem; }
.p-cta-line .b-btn--line { color: var(--b-on-dark); border-color: rgb(255 255 255 / 0.5); }
.p-note { margin: 1.5rem 0 0; padding: 0.9rem 1rem; border-left: 3px solid var(--b-rule-strong); background: var(--b-surface); font-size: 0.875rem; line-height: 1.5; color: var(--b-ink-2); }
/* ...the prose lists (red squares, step numbers, large type) do not apply inside these blocks (same specificity as the prose rules, later in the file) */
.p-prose .p-jump ul > li, .p-prose ol.p-do > li, .p-prose ul.p-dont > li, .p-prose ul.p-cause > li { padding-left: 0; counter-increment: none; font-size: 0.9375rem; line-height: 1.45; }
.p-prose .p-jump ul > li::before, .p-prose ol.p-do > li::before, .p-prose ul.p-dont > li::before, .p-prose ul.p-cause > li::before { content: none; }
.p-prose ol.p-do > li, .p-prose ul.p-dont > li { padding: 0.9rem 1rem; font-size: 1.0625rem; line-height: 1.5; }
.p-prose ul.p-cause > li { padding: 1.1rem 1.1rem 1.25rem; }
.p-prose .p-jump ul > li { padding: 0; }
.p-prose .p-triage ul > li { font-size: 0.9375rem; line-height: 1.45; padding-left: 1.25rem; }
.p-prose .p-triage ul > li::before { top: 0.55em; width: 0.4rem; height: 0.4rem; }
.p-prose .p-triage ul { gap: 0.4rem; margin: 0.25rem 0 0; padding: 0; }
.p-prose .p-jump ul { grid-template-columns: minmax(0, 1fr); gap: 0.4rem 0.75rem; }
@media (min-width: 30rem) { .p-prose .p-jump ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 40rem) { .p-prose .p-jump ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.p-prose .p-cause p { font-size: 0.9375rem; line-height: 1.5; }
.p-prose .p-hint, .p-prose .p-note { font-size: 0.9375rem; background: var(--b-surface); border-left: 3px solid var(--b-rule-strong); }
.p-prose .p-cta-line p { color: inherit; font-size: 1rem; }

/* Privacy policy: the table of cookies and browser storage. Scrolls sideways in a narrow column; under 40rem each row is a card with the column name before each value */
.p-pol-table { overflow-x: auto; }
.p-pol-table table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.45; }
.p-pol-table th, .p-pol-table td { padding: 0.8rem 1rem 0.8rem 0; border-bottom: 1px solid var(--b-rule); text-align: left; vertical-align: top; color: var(--b-ink-2); }
.p-pol-table th { font-size: var(--b-small); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--b-ink-3); border-bottom-color: var(--b-ink); }
.p-pol-table td:first-child { color: var(--b-ink); word-break: break-word; }
@media (max-width: 40rem) {
  .p-pol-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .p-pol-table tr { display: block; padding: 0.8rem 0; border-bottom: 1px solid var(--b-rule); }
  .p-pol-table td { display: block; padding: 0.15rem 0; border: 0; }
  .p-pol-table td::before { content: attr(data-label) ": "; font-weight: 500; color: var(--b-ink-3); }
}