/* ===== ДИЗАЙН-СИСТЕМА «Родная эмаль» v2 — перекалибровка: доверие + функция + запись ===== */
:root{
  --paper:#F7F4EE; --paper-deep:#F1ECE2; --surface:#FFFEFB; --line:#E6E0D3; --line-strong:#D5CDBC;
  --navy:#0B1B2E; --navy-800:#132A42; --ink:#22303C; --muted:#5F6B66;
  --sage:#228AC8; --sage-deep:#176B98; --sage-tint:#DCEBF5;
  --gold:#B08D57;                 /* только звёзды рейтинга + тонкая линия */
  --cta:#176B98; --cta-hover:#12566F;   /* аквамариновый акцент (запись) */
  --focus:#3E6B8C; --on-dark:#F4F1E9; --on-dark-muted:#A9B4BE;
  --shadow:0 10px 30px -12px rgba(34,48,60,.12); --shadow-hover:0 16px 40px -12px rgba(34,48,60,.16);
  --radius:16px; --maxw:1180px;
  --font-head:'Lora',Georgia,serif; --font-body:'Golos Text',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --bullet-sage:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23176B98' stroke-width='2'%3E%3Cpath d='M4 20 A16 16 0 0 1 20 4'/%3E%3Cpath d='M10 20 A10 10 0 0 1 20 10'/%3E%3C/g%3E%3C/svg%3E");
  --rings-sage:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23228AC8' stroke-width='1.5'%3E%3Cpath d='M20 180 A160 160 0 0 1 180 20'/%3E%3Cpath d='M60 180 A120 120 0 0 1 180 60'/%3E%3Cpath d='M100 180 A80 80 0 0 1 180 100'/%3E%3Cpath d='M140 180 A40 40 0 0 1 180 140'/%3E%3C/g%3E%3C/svg%3E");
}
html.a11y{ --paper:#fff; --paper-deep:#fff; --surface:#fff; --ink:#000; --muted:#000; --line:#000; --line-strong:#000;
  --sage-deep:#0A4A6E; --gold:#6B4E12; --cta:#0A4A6E; --cta-hover:#000; --on-dark:#fff; --on-dark-muted:#e8e8e8; }
html.a11y body{font-size:120%}
html.a11y img:not([src*="logo"]):not([src*="favicon"]){filter:grayscale(1)}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px}
body{margin:0; font-family:var(--font-body); font-size:1.0625rem; color:var(--ink); background:var(--paper); line-height:1.6; -webkit-font-smoothing:antialiased}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}}
h1,h2,h3{font-family:var(--font-head); font-weight:500; line-height:1.18; margin:0; color:var(--navy)}
h1{font-size:clamp(2rem,1.4rem+2.5vw,3rem); line-height:1.12; letter-spacing:-.01em}
h2{font-size:clamp(1.55rem,1.25rem+1.3vw,2.15rem)}
h3{font-family:var(--font-body); font-weight:600; font-size:1.18rem; line-height:1.3; color:var(--navy)}
p{margin:0 0 1rem; max-width:66ch}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.eyebrow{font-weight:600; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sage-deep); margin:0 0 12px}
.section{padding:72px 0}
.lead{font-size:1.1rem; color:var(--muted); max-width:60ch}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px}
.skip{position:absolute; left:-9999px; top:0; background:var(--navy); color:#fff; padding:12px 18px; z-index:1000}
.skip:focus{left:0}
.ic-svg{display:inline-block; width:1.15em; height:1.15em; vertical-align:-.15em; fill:none; stroke:currentColor; stroke-width:1.75}

.chip-year{display:inline-flex; align-items:center; gap:8px; background:var(--sage-tint); color:var(--sage-deep); font-weight:500; font-size:.85rem; padding:7px 14px 7px 10px; border-radius:999px}
.chip-year::before{content:""; width:16px; height:16px; background:var(--bullet-sage) center/contain no-repeat; flex:0 0 auto}

/* Кнопки: действие = зелёное */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-body); font-weight:600; font-size:.98rem; padding:14px 26px; border-radius:12px; border:1px solid transparent; cursor:pointer; transition:.2s ease; white-space:nowrap}
.btn-primary{background:var(--cta); color:#fff}
.btn-primary:hover{background:var(--cta-hover); transform:translateY(-2px); box-shadow:var(--shadow)}
.btn-outline{background:transparent; border-color:var(--line-strong); color:var(--ink)}
.btn-outline:hover{border-color:var(--navy); transform:translateY(-2px)}
.cta-note{font-size:.85rem; color:var(--muted); margin-top:12px; max-width:44ch}

/* Топбар */
.topbar{background:var(--paper-deep); color:var(--muted); font-size:.82rem; border-bottom:1px solid var(--line)}
.topbar .container{display:flex; gap:20px; align-items:center; justify-content:space-between; min-height:42px; flex-wrap:wrap}
.topbar a{color:var(--navy); font-weight:500}
.topbar .ic-svg{width:15px; height:15px; color:var(--sage); vertical-align:-.2em}
.topbar .dot{color:var(--sage)}
.a11y-btn{background:transparent; border:1px solid var(--line-strong); color:var(--ink); padding:5px 12px; border-radius:999px; cursor:pointer; font-size:.8rem; font-family:var(--font-body)}
.a11y-btn:hover{border-color:var(--sage); color:var(--sage-deep)}

/* Шапка */
header.nav{position:sticky; top:0; z-index:900; background:rgba(247,244,238,.92); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--line); transition:.3s}
header.nav.scrolled{box-shadow:var(--shadow)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:74px}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:46px; width:auto}
.brand .tag{font-size:.72rem; color:var(--muted); border-left:1px solid var(--line); padding-left:12px}
nav.main{display:flex; gap:26px; align-items:center}
nav.main a{font-weight:500; font-size:.95rem; color:var(--ink); position:relative; padding:6px 0}
nav.main a::after{content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--sage); transition:.25s}
nav.main a:hover::after{width:100%}
.nav-cta{display:flex; align-items:center; gap:16px}
.nav-phone{font-weight:600; font-size:1.02rem; white-space:nowrap; color:var(--navy)}
.burger{display:none; background:none; border:0; cursor:pointer; padding:8px}
.burger span{display:block; width:26px; height:2px; background:var(--navy); margin:5px 0; transition:.3s}

/* HERO */
.hero{position:relative; background:var(--paper); overflow:hidden}
.hero .container{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding:52px 24px 64px}
.hero h1{margin-bottom:18px}
.hero h1 .accent{color:var(--sage-deep)}
.hero p.sub{font-size:1.12rem; color:var(--muted); max-width:52ch; margin-bottom:18px}
.hero .chip-year{margin-bottom:24px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.hero-trust{display:flex; gap:26px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:22px; margin-top:26px}
.hero-trust .n{font-weight:500; font-size:1.7rem; color:var(--navy); line-height:1; font-feature-settings:"tnum"}
.hero-trust .l{font-size:.8rem; color:var(--muted); margin-top:5px}
.hero-visual{position:relative}
.hero-photo{aspect-ratio:4/5; border-radius:20px; border-top-right-radius:48px; background:var(--paper-deep) url(/assets/hero_brand.webp) center/cover no-repeat; border:1px solid var(--line); box-shadow:var(--shadow); position:relative}
.hero-badge{position:absolute; bottom:-18px; left:-18px; background:var(--surface); color:var(--navy); border-radius:14px; padding:14px 18px; box-shadow:var(--shadow); max-width:236px; border:1px solid var(--line)}
.hero-badge b{font-family:var(--font-head); font-weight:600; font-size:1rem}
.hero-badge small{color:var(--muted)}

/* Полоса доверия (рейтинги) */
.trust{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.trust .container{display:flex; gap:20px; align-items:center; justify-content:space-between; padding:26px 24px; flex-wrap:wrap}
.trust .fam{font-size:.98rem; color:var(--muted); max-width:34ch}
.trust .fam b{color:var(--navy); font-weight:600}
.rates{display:flex; gap:14px; flex-wrap:wrap}
.rate{display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:12px; padding:10px 16px; background:var(--paper); transition:.2s}
.rate:hover{border-color:var(--sage); transform:translateY(-2px)}
.rate .stars{display:flex; gap:2px}
.rate .star-svg{width:15px; height:15px; fill:var(--gold)}
.rate .r{font-weight:700; color:var(--navy); font-size:1.05rem}
.rate .src{font-size:.78rem; color:var(--muted)}
.rate .src b{display:block; color:var(--ink); font-weight:600}

/* Сценарии «С чем вы пришли?» */
.scenarios{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:36px}
.scn{display:flex; flex-direction:column; gap:10px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; cursor:pointer; transition:.2s; text-align:left; color:inherit}
.scn:hover{border-color:var(--sage); box-shadow:var(--shadow); transform:translateY(-2px)}
.scn .ic{width:44px; height:44px; border-radius:11px; background:var(--sage-tint); color:var(--sage-deep); display:flex; align-items:center; justify-content:center}
.scn .ic .ic-svg{width:23px; height:23px}
.scn b{font-size:1.02rem; color:var(--navy)}
.scn span{font-size:.86rem; color:var(--muted)}

/* Услуги */
.grid-services{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px}
.svc{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; transition:.25s; position:relative; overflow:hidden; display:flex; flex-direction:column}
.svc:hover{transform:translateY(-2px); box-shadow:var(--shadow-hover)}
.svc.flag{padding-top:32px}
.svc.flag::before{content:""; position:absolute; top:0; left:28px; width:52px; height:52px; background:var(--rings-sage) top left/contain no-repeat; opacity:.5}
.svc .chip-flag{align-self:flex-start; background:var(--sage-tint); color:var(--sage-deep); font-size:.7rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:5px 11px; border-radius:8px; margin-bottom:12px}
.svc .ic{width:50px; height:50px; border-radius:12px; background:var(--sage-tint); color:var(--sage-deep); display:flex; align-items:center; justify-content:center; margin-bottom:16px}
.svc .ic .ic-svg{width:26px; height:26px; stroke-width:1.6}
.svc h3{font-size:1.24rem; margin-bottom:9px}
.svc p{font-size:.94rem; color:var(--muted); margin-bottom:14px}
.svc .price{font-weight:600; color:var(--navy); margin-top:auto}
.svc .price small{font-weight:400; color:var(--muted)}
.svc .more{display:inline-flex; align-items:center; gap:6px; margin-top:14px; color:var(--cta); font-weight:600; font-size:.9rem}
.svc .more .ic-svg{width:16px; height:16px; stroke:var(--cta); transition:.2s}
.svc:hover .more .ic-svg{transform:translateX(4px)}

/* Как проходит первый визит */
.sec-steps{background:var(--paper-deep)}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:36px}
.step{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; position:relative}
.step .n{width:38px; height:38px; border-radius:50%; background:var(--cta); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:1.05rem; margin-bottom:14px}
.step h3{margin-bottom:6px}
.step p{font-size:.9rem; color:var(--muted); margin:0}
.steps-note{margin-top:22px; display:inline-flex; align-items:center; gap:9px; background:var(--sage-tint); color:var(--sage-deep); font-weight:600; padding:10px 16px; border-radius:10px; font-size:.92rem}

/* Главный врач (светлый, вместо тёмной секции) */
.doctor .container{display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; align-items:start}
.doc-photo{border-radius:20px; border-top-right-radius:44px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); background:var(--paper-deep)}
.doc-photo img{width:100%; display:block}
.doctor h2{margin-bottom:4px}
.doctor .role{color:var(--sage-deep); font-weight:600; margin-bottom:18px}
.doctor blockquote{font-family:var(--font-head); font-style:italic; font-size:1.28rem; line-height:1.4; color:var(--navy); border-left:3px solid var(--sage); padding-left:20px; margin:0 0 20px}
.facts{display:flex; flex-wrap:wrap; gap:9px; margin:18px 0 22px}
.facts .f{background:var(--sage-tint); color:var(--sage-deep); font-size:.82rem; font-weight:500; padding:7px 13px; border-radius:999px}
.pr-list{list-style:none; padding:0; margin:0 0 22px; display:grid; gap:14px}
.pr-list li{display:flex; gap:13px; align-items:flex-start}
.pr-list .chk{width:22px; height:22px; flex:0 0 auto; background:var(--bullet-sage) center/contain no-repeat; margin-top:2px}
.pr-list b{display:block; color:var(--navy)}
.pr-list span{color:var(--muted); font-size:.93rem}
.kol{display:inline-flex; align-items:center; gap:9px; font-size:.92rem; color:var(--sage-deep); font-weight:600; margin-top:4px}

/* Команда */
.grid-docs{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:36px}
.doc{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:.25s}
.doc:hover{box-shadow:var(--shadow-hover); transform:translateY(-2px)}
.doc .photo{aspect-ratio:1/1; background:var(--paper-deep) url(/assets/doc_placeholder.webp) center/cover no-repeat; position:relative}
.doc .photo.real{background:none}
.doc .photo.real img{width:100%; height:100%; object-fit:cover}
.doc .ph-tag{position:absolute; top:12px; left:12px; background:rgba(34,48,60,.72); color:#f0ece4; font-size:.7rem; padding:5px 9px; border-radius:7px}
.doc .info{padding:20px}
.doc h3{font-size:1.14rem}
.doc .role{color:var(--sage-deep); font-weight:600; font-size:.88rem; margin:5px 0 9px}
.doc .meta{font-size:.85rem; color:var(--muted); line-height:1.5}
.doc .meta b{color:var(--ink); font-weight:600}

/* Цены */
.sec-prices{background:var(--paper-deep)}
.ptable{margin-top:30px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.ptable .row{display:grid; grid-template-columns:1fr auto auto; gap:16px; padding:16px 24px; border-bottom:1px solid var(--line); align-items:center}
.ptable .row:last-child{border-bottom:0}
.ptable .row.head{background:var(--navy); color:var(--on-dark); font-weight:600}
.ptable .row:not(.head):nth-child(even){background:color-mix(in srgb,var(--sage-tint) 40%,transparent)}
.ptable .cat{font-weight:600; color:var(--navy)}
.ptable .cat small{display:block; font-weight:400; color:var(--muted); font-size:.84rem}
.ptable .wait{font-size:.86rem; color:var(--muted); white-space:nowrap}
.ptable .val{font-weight:600; color:var(--navy); white-space:nowrap; font-feature-settings:"tnum"; text-align:right}
.ptable .row.head .cat,.ptable .row.head .val,.ptable .row.head .wait{color:var(--on-dark)}
.why-from{margin-top:18px; background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--sage); border-radius:0 10px 10px 0; padding:14px 18px; font-size:.92rem; color:var(--muted)}
.why-from b{color:var(--navy)}

/* Отзывы */
.grid-rev{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px}
.rev{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px}
.rev .stars{display:flex; gap:3px; margin-bottom:12px}
.rev .star-svg{width:17px; height:17px; fill:var(--gold)}
.rev p{font-size:.96rem; color:var(--ink)}
.rev .who{display:flex; align-items:center; gap:12px; margin-top:16px}
.rev .av{width:40px; height:40px; border-radius:50%; background:var(--sage); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600}
.rev .who b{font-size:.93rem}
.rev .who small{color:var(--muted)}
.rev-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; align-items:center}
.rev-actions .lbl{font-size:.9rem; color:var(--muted)}

/* FAQ */
.faq{margin-top:32px; display:grid; gap:12px; max-width:820px}
.faq details{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:0 20px}
.faq summary{list-style:none; cursor:pointer; padding:18px 0; font-weight:600; color:var(--navy); display:flex; justify-content:space-between; align-items:center; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:1.4rem; color:var(--sage); font-weight:400; transition:.2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 18px; color:var(--muted); font-size:.96rem}

/* Блог */
.sec-blog{background:var(--paper-deep)}
.grid-blog{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:36px}
.post{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:.25s}
.post:hover{box-shadow:var(--shadow-hover); transform:translateY(-2px)}
.post .cover{aspect-ratio:16/10; background:var(--paper-deep); position:relative}
.post .body{padding:22px}
.post .tag{display:inline-block; font-size:.7rem; color:var(--sage-deep); font-weight:600; letter-spacing:.06em; text-transform:uppercase; background:var(--sage-tint); padding:4px 10px; border-radius:7px}
.post h3{font-size:1.14rem; margin:11px 0}
.post .by{display:flex; align-items:center; gap:9px; font-size:.82rem; color:var(--muted); margin-top:12px; border-top:1px solid var(--line); padding-top:12px}
.post .by img{width:26px; height:26px; border-radius:50%; object-fit:cover}

/* Запись */
.book .container{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start}
.book-info .phones{margin:20px 0; display:grid; gap:8px}
.book-info .phones a{font-weight:600; color:var(--navy); font-size:1.3rem}
.book-info .phones small{display:block; color:var(--muted); font-weight:400; font-size:.85rem}
.messengers{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0}
.msgr{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line-strong); border-radius:10px; padding:10px 16px; font-weight:600; font-size:.9rem; color:var(--navy); transition:.2s}
.msgr:hover{border-color:var(--sage); transform:translateY(-2px)}
.msgr .d{width:9px; height:9px; border-radius:50%}
.doc-quote{display:flex; gap:14px; align-items:center; background:var(--sage-tint); border-radius:14px; padding:16px; margin-top:20px}
.doc-quote img{width:56px; height:56px; border-radius:50%; object-fit:cover; flex:0 0 auto}
.doc-quote p{margin:0; font-size:.9rem; color:var(--sage-deep); font-style:italic}
.doc-quote b{display:block; font-style:normal; color:var(--navy); font-size:.85rem; margin-top:4px}
.book-card{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:30px; box-shadow:var(--shadow)}
.book-card h3{margin-bottom:4px}
.field{margin-bottom:15px}
.field label{display:block; font-size:.85rem; font-weight:600; color:var(--navy); margin-bottom:6px}
.field input,.field select,.field textarea{width:100%; padding:13px 15px; border:1px solid var(--line-strong); border-radius:11px; font-family:var(--font-body); font-size:.98rem; color:var(--ink); background:var(--surface)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--focus); outline:none; box-shadow:0 0 0 3px rgba(62,107,140,.15)}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:.8rem; color:var(--muted); margin:6px 0 16px}
.consent input{margin-top:3px; flex:0 0 auto}
.consent a{color:var(--sage-deep); text-decoration:underline}
.book-card .btn{width:100%}
.book-card .fine{font-size:.78rem; color:var(--muted); text-align:center; margin-top:12px}

/* Контакты */
.grid-loc{display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-top:36px}
.loc{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.loc .map{aspect-ratio:16/9; background:var(--paper-deep); filter:sepia(.15) saturate(.8); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.9rem}
.loc .map::after{content:"Карта — подключить Яндекс.Карту"}
.loc .body{padding:24px}
.loc .badge{display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--sage-deep); background:var(--sage-tint); padding:5px 10px; border-radius:8px; margin-bottom:12px}
.loc h3{font-size:1.24rem; margin-bottom:5px; font-family:var(--font-head); font-weight:500}
.loc .ent{font-size:.82rem; color:var(--muted); margin-bottom:14px}
.loc dl{display:grid; grid-template-columns:22px 1fr; gap:9px 12px; margin:0; font-size:.94rem}
.loc dt{color:var(--sage-deep); text-align:center}
.loc dt .ic-svg{width:17px; height:17px}
.loc dd{margin:0}
.loc a{font-weight:600; color:var(--navy)}

/* Дисклеймер + подвал */
.med-warn{background:var(--paper-deep); color:var(--ink); text-align:center; font-size:.86rem; padding:15px 24px; border-top:1px solid var(--line)}
footer{background:var(--navy); color:var(--on-dark-muted); padding:60px 0 26px}
.foot-top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:38px; padding-bottom:36px; border-bottom:1px solid var(--navy-800)}
footer .brand img{height:52px; margin-bottom:16px}
footer p{color:var(--on-dark-muted)}
footer .foot-h{color:var(--on-dark); font-family:var(--font-body); font-size:.92rem; letter-spacing:.05em; text-transform:uppercase; margin:0 0 15px}
footer ul{list-style:none; padding:0; margin:0; display:grid; gap:9px; font-size:.92rem}
footer a:hover{color:#fff}
.colleagues{margin-top:16px; padding:14px 16px; border:1px solid var(--navy-800); border-radius:12px; font-size:.86rem}
.colleagues b{color:var(--on-dark); display:block; margin-bottom:3px}
.legal-cards{display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:30px 0; border-bottom:1px solid var(--navy-800)}
.lcard{font-size:.82rem; line-height:1.7}
.lcard b{color:var(--on-dark); display:block; margin-bottom:5px; font-size:.9rem}
.lcard .lic{color:var(--on-dark-muted); margin-top:5px; display:block}
.foot-bottom{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-top:22px; font-size:.82rem; color:var(--on-dark-muted)}
.foot-bottom a{text-decoration:underline}

/* Cookie + mobile CTA */
.cookie{position:fixed; left:20px; right:20px; bottom:20px; max-width:560px; margin:0 auto; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:18px 20px; z-index:1000; display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.cookie p{margin:0; font-size:.85rem; color:var(--muted); flex:1 1 260px}
.cookie a{color:var(--sage-deep); text-decoration:underline}
.cookie.hidden{display:none}
.mobile-cta{display:none}

.reveal{opacity:0; transform:translateY(12px); transition:.6s cubic-bezier(.22,1,.36,1)}
html.js .reveal{opacity:0}
html.js .reveal.in{opacity:1; transform:none}

@media (max-width:960px){
  .hero .container,.doctor .container,.book .container{grid-template-columns:1fr; gap:34px}
  .hero-visual{max-width:440px; margin-top:8px}
  .scenarios,.steps{grid-template-columns:repeat(2,1fr)}
  .grid-services,.grid-docs,.grid-rev,.grid-blog{grid-template-columns:repeat(2,1fr)}
  .grid-loc,.legal-cards,.foot-top{grid-template-columns:1fr}
  nav.main,.nav-phone{display:none}
  .burger{display:block}
  nav.main.open{display:flex; position:absolute; top:74px; left:0; right:0; background:var(--surface); flex-direction:column; padding:20px 24px; gap:15px; border-bottom:1px solid var(--line); box-shadow:var(--shadow)}
  .mobile-cta{display:flex; position:fixed; bottom:0; left:0; right:0; background:var(--surface); border-top:1px solid var(--line); padding:10px 14px; gap:10px; z-index:800; box-shadow:0 -8px 24px -16px rgba(34,48,60,.4)}
  .mobile-cta .btn{flex:1; padding:13px}
  .mobile-cta .icon{flex:0 0 auto; width:50px}
  .cookie{bottom:78px}
  .trust .container{justify-content:center; text-align:center}
}
@media (max-width:560px){
  .section{padding:52px 0}
  .scenarios,.steps,.grid-services,.grid-docs,.grid-rev,.grid-blog{grid-template-columns:1fr}
  .ptable .row{grid-template-columns:1fr auto}
  .ptable .wait{display:none}
}

@media(max-width:960px){ .brand .tag{display:none} .brand img{height:42px} }
@media(max-width:560px){ .nav-inner{gap:12px} .nav-cta{gap:10px} .nav-cta .btn-primary{padding:11px 16px; font-size:.9rem} }

@media(max-width:560px){ .topbar .container > span:first-child{display:none} .topbar .container{justify-content:center} }

/* Дополнения к дизайн-системе прототипа для многостраничного сайта.
   Правило: ничего из base.css не переопределяем без причины — только то,
   чего в прототипе-одностраничнике не было. */

/* Аудит прототипа: без JS 60 блоков .reveal оставались невидимыми.
   Теперь контент виден всегда, анимация — только когда JS есть. */
.reveal{opacity:1;transform:none}
html.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
}

/* Заголовок первого уровня на внутренних страницах */
main h1{font-family:var(--font-head);font-weight:600;color:var(--navy);
  font-size:clamp(1.9rem,1.2rem + 2.2vw,3rem);line-height:1.12;margin:.2em 0 .4em}

/* Таблица прейскуранта длинная — заголовок секции липкий.
   Фон переопределяем вместе с цветом текста: иначе светлый текст остаётся
   на светлом фоне и заголовки исчезают (контраст 1.12:1). */
.ptable .row.head{position:sticky;top:0;z-index:2}

/* Карточки врачей — в theme-cobalt.css, блок «Раздел „Врачи“» (15.09.2026) */

/* Юридические тексты: длинные документы */
.legal-doc{max-width:760px}
.legal-doc h2{font-size:1.35rem;margin-top:1.6em}
.legal-doc h3{font-size:1.08rem;margin-top:1.3em}
.legal-doc p,.legal-doc li{color:var(--ink);line-height:1.7}
.legal-doc table{width:100%;border-collapse:collapse;margin:1em 0;font-size:.94rem}
.legal-doc th,.legal-doc td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
.legal-doc th{background:var(--paper-deep);font-weight:600}

/* Форма записи */
.form-grid{display:grid;gap:14px;grid-template-columns:1fr 1fr;margin-top:18px}
.form-grid .full{grid-column:1/-1}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}
.field label{display:block;font-size:.88rem;font-weight:600;color:var(--ink);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1px solid var(--line-strong);
  border-radius:10px;font:inherit;background:var(--surface);color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--focus);outline-offset:1px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--muted);line-height:1.5}
.consent input{margin-top:3px;width:18px;height:18px;flex:none}

/* Единый видимый фокус — требование доступности */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}

/* Оглавление разделов прайса */
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px}
.toc-chip{font-size:.85rem;padding:7px 14px;border-radius:999px;background:var(--surface);
  border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:.2s}
.toc-chip:hover{border-color:var(--sage);color:var(--sage-deep);background:var(--sage-tint)}

/* Контраст: золото #B08D57 на бумаге давало 2.82:1 — ниже порога даже для
   нетекстовых элементов. Затемнили до 4.56:1, оттенок сохранён. */
:root{--gold:#8A6A38}

/* Сообщение формы */
.form-msg{margin-top:14px;font-size:.94rem;min-height:1.2em}
.form-msg.ok{color:var(--sage-deep);font-weight:600}
.form-msg.err{color:#9B2C2C;font-weight:600}
.svc-note{font-size:.82rem;color:var(--muted);margin:-4px 0 8px}

/* Сценарии стали ссылками вместо кнопок: раскладку .scn (flex-column) не трогаем,
   снимаем только подчёркивание. display:block ломал колонку. */
a.scn{text-decoration:none}
a.scn span{display:block}

/* FAQ на details/summary: работает без JS */
.faq{margin-top:22px;display:grid;gap:10px;max-width:820px}
.faq-i{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 20px}
.faq-i summary{cursor:pointer;font-weight:600;color:var(--navy);font-size:1.02rem;
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary::after{content:'+';color:var(--sage-deep);font-size:1.4rem;line-height:1;flex:none}
.faq-i[open] summary::after{content:'–'}
.faq-i p{margin:12px 0 0;color:var(--ink);line-height:1.65}

/* Карточки клиник */
.clinics{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:26px}
.clinic-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 26px;box-shadow:var(--shadow)}
.clinic-card h2,.clinic-card h3{font-family:var(--font-head);color:var(--navy);margin:0 0 10px;font-size:1.2rem}
.clinic-card .addr{color:var(--ink);margin:0 0 8px;line-height:1.6}
.clinic-card .fine{color:var(--muted);font-size:.82rem;margin:10px 0}

/* Тап-таргеты на мобильном: аудит нашёл 12 элементов меньше 44 px */
@media(max-width:640px){
  .consent input{width:24px;height:24px}
  .foot-top a,.nav-phone,.tb-phone{display:inline-block;padding:6px 0}
  .fine,.eyebrow{font-size:.8rem}
}

/* Три показателя в hero держим одной строкой: перенос третьего выглядел как сбой */
.hero-trust{gap:32px}
.hero-trust>div{flex:0 1 auto;min-width:0}

/* Перечень процедур внутри карточки услуги */
.svc-list{margin:10px 0 12px;padding-left:18px;color:var(--muted);font-size:.88rem;line-height:1.7}
.svc-list li{margin:0}

/* Незаполненное место в юридическом тексте: видно, что данные ещё уточняются */
.tbd{color:var(--muted);border-bottom:1px dashed var(--line-strong);font-style:italic}
.draft-note{background:var(--sage-tint);border-left:3px solid var(--sage);border-radius:10px;
  padding:14px 18px;margin:0 0 26px;color:var(--ink);font-size:.94rem;line-height:1.6}
.legal-doc blockquote{margin:1em 0;padding:14px 18px;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--sage);border-radius:10px}
.legal-doc blockquote p{margin:.4em 0}
.legal-doc code{background:var(--paper-deep);padding:2px 6px;border-radius:5px;font-size:.9em}
.legal-doc ul{padding-left:20px}
@media(max-width:760px){
  /* Три колонки на телефоне ужимают числа до столбика букв — показываем
     каждую строку карточкой: услуга сверху, значения с подписями снизу. */
  .legal-doc table,.legal-doc tbody,.legal-doc tr,.legal-doc td{display:block}
  .legal-doc thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .legal-doc table{border:0;font-size:.95rem}
  .legal-doc tr{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:0 0 10px;
    background:var(--paper)}
  .legal-doc td{border:0;padding:3px 0;overflow-wrap:break-word}
  .legal-doc td:first-child{font-weight:600;padding-bottom:6px}
  .legal-doc td:empty{display:none}
  .legal-doc td:not(:first-child)::before{content:attr(data-l) ": ";font-weight:600;color:var(--muted)}
}

/* Оглавление длинного юридического раздела */
.legal-toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 22px;margin:0 0 30px}
.legal-toc ul{list-style:none;margin:0;padding:0;columns:2;column-gap:28px}
.legal-toc li{margin:0 0 7px;break-inside:avoid}
.legal-toc a{color:var(--ink);text-decoration:none;font-size:.92rem;border-bottom:1px solid transparent}
.legal-toc a:hover{color:var(--sage-deep);border-bottom-color:var(--sage)}
@media(max-width:640px){.legal-toc ul{columns:1}}
.legal-doc h2{font-family:var(--font-head);color:var(--navy);font-size:1.5rem;
  padding-top:.5em;border-top:1px solid var(--line)}
.legal-doc h2:first-of-type{border-top:none}



/* Логотип в шапке не сжимать. Схлопывался не сам рисунок, а вся левая часть
   шапки: .brand — гибкий элемент строки, и при нехватке места ужимался он,
   утягивая картинку до 20 px (на 360 px — до нуля). Фиксируем обоих. */
.brand{flex-shrink:0}
.brand img{flex-shrink:0;height:42px;width:auto}

/* Телефон в шапке на узком экране убираем: он уже есть строкой выше и
   отнимает место у логотипа. Кнопка записи и звонок снизу остаются. */
@media(max-width:700px){
  .nav-phone{display:none}
  .nav-inner{gap:12px}
}

/* Цена не должна обрезаться справа на узком экране */
@media(max-width:640px){
  .ptable .val{white-space:nowrap;text-align:right;padding-left:8px}
  .ptable .cat{overflow-wrap:anywhere}
}

/* Cookie-баннер бесполезен без JS (его нечем закрыть и негде запомнить выбор),
   поэтому показываем только когда JS есть. */
.cookie{display:none}
html.js .cookie{display:flex}
html.js .cookie.hidden{display:none}

/* Блок «пока звоните» вместо формы, пока юр-тексты на вычитке */
.book-fallback{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 28px;box-shadow:var(--shadow);max-width:620px}

/* Узкие экраны (320 px и меньше — iPhone SE и подобные).
   Прототип-одностраничник до этой ширины не доводили: блок записи оставался
   в две колонки, карточки клиник имели жёсткий минимум 300 px, а длинная
   кнопка с номером не переносилась. */
.book .container{grid-template-columns:1fr}
.clinics{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
@media(min-width:900px){
  .book .container{grid-template-columns:1fr 1fr}
}
@media(max-width:380px){
  .container{padding:0 16px}
  .btn{white-space:normal;word-break:break-word}
  .clinic-card{padding:20px 18px}
  .book-fallback{padding:20px 18px}
}

/* ═══════════════════════════════════════════════════════════════════════
   Редизайн 10.09.2026 по навыку frontend-design (DESIGN.md §7, PROJECT.md §8).
   Смелость — в одном месте: ценник первого экрана. Всё остальное тише.
   ═══════════════════════════════════════════════════════════════════════ */

/* Анимация появления снята со всех блоков: одна последовательность на странице
   лучше девяноста одной. Правило .reveal оставлено безвредным на случай старой разметки. */
html.js .reveal{opacity:1;transform:none;transition:none}

/* Карточки больше не подпрыгивают при наведении: это отклик без действия. */
.svc:hover,.scn:hover{transform:none}

/* Первый экран: слоган одним цветом, характер — размером и засечками. */
.hero h1{color:var(--navy);font-size:clamp(2.4rem,1.5rem + 3.6vw,4.1rem);
  line-height:1.04;letter-spacing:-.02em;max-width:11ch}
.hero .sub{max-width:34em}
.hero .cta-note{color:var(--muted)}

/* Ценник. Приём с точками-отводами — из прейскуранта на стене клиники:
   это язык самого предмета, а не декор. */
.price-tag{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  border-top-right-radius:48px;padding:30px 32px 24px;box-shadow:var(--shadow);align-self:center}
.pt-title{font-family:var(--font-head);font-size:1.3rem;color:var(--navy);margin:0 0 18px}
.pt-list{list-style:none;margin:0;padding:0}
.pt-list li{display:flex;align-items:baseline;gap:10px;padding:11px 0;font-size:1.02rem}
.pt-name{color:var(--ink)}
.pt-dots{flex:1;border-bottom:2px dotted var(--line-strong);transform:translateY(-4px);min-width:16px}
.pt-val{font-weight:600;color:var(--navy);white-space:nowrap;font-feature-settings:"tnum"}
.pt-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:.9rem}
.pt-foot a{color:var(--cta);font-weight:600}
.pt-foot span{color:var(--muted)}

/* Единственная анимация сайта: строки ценника проявляются по очереди при загрузке. */
/* Только когда есть JavaScript: без него строки видны сразу, ничего не прячется
   даже на полсекунды (проверка check.py ловит именно это). */
@media (prefers-reduced-motion:no-preference){
  html.js .pt-list li{animation:ptIn .5s ease both}
  html.js .pt-list li:nth-child(1){animation-delay:.15s}
  html.js .pt-list li:nth-child(2){animation-delay:.25s}
  html.js .pt-list li:nth-child(3){animation-delay:.35s}
  html.js .pt-list li:nth-child(4){animation-delay:.45s}
  html.js .pt-list li:nth-child(5){animation-delay:.55s}
}
@keyframes ptIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media(max-width:900px){
  .hero .container{grid-template-columns:1fr}
  .price-tag{margin-top:8px}
}
@media(max-width:420px){
  .price-tag{padding:22px 18px 18px;border-top-right-radius:32px}
  .pt-list li{font-size:.95rem}
}

/* Сценарии: строки-ссылки вместо четырёх одинаковых плиток с иконками. */
.scn-rows{list-style:none;margin:26px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));column-gap:40px}
.scn-rows a{display:flex;flex-direction:column;gap:3px;padding:16px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit}
.scn-rows b{font-size:1.08rem;color:var(--navy);font-weight:600}
.scn-rows span{color:var(--muted);font-size:.94rem}
.scn-rows a:hover b{color:var(--cta)}

/* Услуги: два главных направления крупно, остальное строками. */
.svc-mains{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap:22px;margin-top:28px}
.svc-main{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:30px 32px}
.svc-main h3{font-family:var(--font-head);font-size:1.6rem;font-weight:600;margin:0 0 10px}
.svc-main p{color:var(--ink);margin:0 0 12px;max-width:40em}
.svc-price{font-size:1.25rem;font-weight:600;color:var(--navy);font-feature-settings:"tnum"}
.svc-link{color:var(--cta);font-weight:600}
.svc-rows{list-style:none;margin:26px 0 0;padding:0}
.svc-rows a{display:grid;grid-template-columns:minmax(180px,.8fr) 2fr auto;gap:18px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.svc-rows a:hover .svc-row-name{color:var(--cta)}
.svc-row-name{font-weight:600;color:var(--navy);font-size:1.05rem}
.svc-row-text{color:var(--muted);font-size:.95rem}
.svc-row-text .svc-note{display:block;color:var(--sage-deep);font-size:.86rem;margin-top:2px}
.svc-row-price{font-weight:600;color:var(--navy);white-space:nowrap;font-feature-settings:"tnum"}
@media(max-width:700px){
  .svc-rows a{grid-template-columns:1fr auto;row-gap:4px}
  .svc-row-text{grid-column:1/-1;order:3}
}

/* Заголовок секции и лид не должны слипаться */
main .section h2{margin-bottom:.35em}

/* Блок записи: пока формы нет, одна колонка — иначе лид уезжает вправо от карточки */
.book .container{grid-template-columns:1fr !important;max-width:760px}

/* Подписи колонок подвала — обычным регистром: капс здесь только шумел */
footer .foot-h{text-transform:none;letter-spacing:0;font-size:1rem;font-family:var(--font-head);font-weight:600}

/* Страница услуг: три главных направления в ряд, дальше перечень */
.svc-mains-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.svc-main h2{font-size:1.5rem;margin:0 0 10px}
.svc-main .svc-list{margin:4px 0 14px}
.svc-rows-title{margin-top:48px}

/* Под ценой «от» — за что именно эта цифра */
.svc-row-price{text-align:right}
.svc-row-price small,.svc-price small{display:block;font-weight:400;font-size:.78rem;color:var(--muted);
  white-space:normal;max-width:14em;margin-left:auto;line-height:1.35}
.svc-price small{display:inline;margin-left:6px;max-width:none}

/* Колонки перечня услуг — фиксированной ширины, иначе описание плавает
   вслед за длиной цены в соседней колонке */
.svc-rows a{grid-template-columns:15rem minmax(0,1fr) 11rem}
@media(max-width:900px){.svc-rows a{grid-template-columns:12rem minmax(0,1fr) 9.5rem}}
@media(max-width:700px){.svc-rows a{grid-template-columns:1fr auto}}

/* Кнопки в карточке клиники: промежуток задаёт контейнер, а не встроенный стиль */
.card-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}

/* Оглавление прайса на телефоне — одной лентой с прокруткой, а не экраном чипов */
@media(max-width:700px){
  .toc{flex-wrap:nowrap;overflow-x:auto;margin-left:-16px;margin-right:-16px;padding:2px 16px 10px;
    scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .toc-chip{flex:none;white-space:nowrap}
}

/* Кнопка записи под каждым разделом прейскуранта (Fable-аудит 18.09.2026, п. 5) */
.ptable-cta{margin:18px 0 0;display:flex;gap:16px;flex-wrap:wrap;align-items:center}

/* ═══════════════════════════════════════════════════════════════════════════
   Тема «Кобальт и фарфор» — 10.09.2026.
   Владелец снял запреты на цвет и шрифты с задачей «чтобы сайт не выглядел
   сделанным ИИ». Главная примета, которую убирает эта тема, — кремовый фон
   с засечным заголовком (навык frontend-design, калибровка, пункт 1).

   Откуда цвет: кобальт по белому фарфору — петербургская классика, а зубная
   керамика — тоже фарфор. Среди голубых стоматологий города глубокий кобальт
   выделяет клинику и сочетается с тёмно-синим логотипом.
   Откуда шрифт: Geologica — широкие плотные пропорции, как в логотипе «АДЕНТА».
   Текст — Golos: пациенты годами читают его на Госуслугах.

   Контраст (WCAG): белый на кобальте 9.6, кобальт на белом 9.6, чернила на
   фарфоре 16.2, приглушённый на фарфоре 5.5 — всё выше 4.5.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --paper:#FFFFFF;            /* фон страницы — белый, не крем */
  --paper-deep:#F4F6F9;       /* «фарфор»: фон чередующихся секций */
  --surface:#FFFFFF;
  --line:#E1E5EB;
  --line-strong:#C9D1DC;
  --navy:#0E1A2B;             /* «чернила»: заголовки, подвал */
  --navy-800:#1B2A3E;
  --ink:#1F2A38;              /* основной текст */
  --muted:#586371;
  --sage:#1B3C9E;             /* кобальт */
  --sage-deep:#1B3C9E;
  --sage-tint:#E8EDF8;
  --cta:#1B3C9E;
  --cta-hover:#132F80;
  --gold:#1B3C9E;
  --focus:#1B3C9E;
  --on-dark:#FFFFFF;
  --on-dark-muted:#C9D2E8;
  /* Одна мягкая тень под каждой карточкой — примета шаблона. Тени нет вовсе;
     единственный объект с тенью — ценник на первом экране. */
  --shadow:none;
  --shadow-hover:none;
  --radius:10px;
  --font-head:'Geologica','Golos Text',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-body:'Golos Text',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --cobalt:#1B3C9E;
  --cobalt-soft:#D5DDF3;
}

/* ── Типографика ─────────────────────────────────────────────────────────── */
h1,h2,.hero h1,main h1,.legal-doc h2,.pt-title,.svc-main h3,.svc-main h2,
.clinic-card h2,.clinic-card h3,footer .foot-h{font-family:var(--font-head);font-weight:800;letter-spacing:-.02em}
h2{font-weight:800}
h3{font-family:var(--font-body);font-weight:600}
main h1{font-size:clamp(2.1rem,1.4rem + 2.6vw,3.4rem);line-height:1.02}
main .section h2{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem);line-height:1.08}
body{font-feature-settings:"kern","liga"}

/* ── Верхняя полоса: чернила на всех страницах — строгая рамка сайта ────── */
.topbar{background:var(--navy);color:var(--on-dark-muted);border:0}
.topbar a,.topbar span{color:var(--on-dark-muted)}
.topbar a:hover{color:#fff}
.topbar .ic-svg{color:var(--cobalt-soft)}
.a11y-btn{background:transparent;border:1px solid #34445C;color:var(--on-dark-muted)}
.a11y-btn:hover{border-color:var(--cobalt-soft);color:#fff}

/* ── Шапка: белая везде, на главной — кобальт, сливается с первым экраном ── */
.nav{background:#fff;border-bottom:1px solid var(--line)}
.nav .main a{color:var(--navy)}
.nav .main a[aria-current="page"]{color:var(--cobalt);box-shadow:inset 0 -2px 0 var(--cobalt)}
body.home .nav{background:var(--cobalt);border-bottom-color:rgba(255,255,255,.14)}
body.home .nav .main a,body.home .nav-phone{color:#fff}
body.home .nav .btn-primary{background:#fff;color:var(--cobalt)}
body.home .nav .btn-primary:hover{background:var(--cobalt-soft)}
body.home .burger span{background:#fff}
body.home .nav.scrolled{box-shadow:0 1px 0 rgba(255,255,255,.14)}
@media(max-width:960px){
  body.home .nav .main{background:var(--cobalt)}
}

/* ── Кнопки: радиус по иерархии — мелкое 10px, крупные плоскости без него ── */
.btn{border-radius:10px;font-family:var(--font-body)}
.btn-primary{background:var(--cobalt);color:#fff}
.btn-primary:hover{background:var(--cta-hover)}
.btn-outline{border:1.5px solid var(--navy);color:var(--navy);background:transparent}
.btn-outline:hover{background:var(--navy);color:#fff}

/* ── Первый экран: кобальт, слоган белым, ценник — белая табличка ──────── */
.hero{background:var(--cobalt);color:#fff;padding-bottom:8px}
.hero .container{padding-top:56px;padding-bottom:72px}
.hero h1{color:#fff;font-size:clamp(2.6rem,1.5rem + 4.4vw,5rem);line-height:.98;
  letter-spacing:-.03em;max-width:10ch;font-weight:800}
.hero .sub{color:var(--cobalt-soft);font-size:1.12rem;max-width:32em}
.hero .cta-note{color:var(--cobalt-soft);opacity:.9}
.hero .btn-primary{background:#fff;color:var(--cobalt)}
.hero .btn-primary:hover{background:var(--cobalt-soft)}
.hero .btn-outline{border-color:rgba(255,255,255,.7);color:#fff}
.hero .btn-outline:hover{background:#fff;color:var(--cobalt)}
.price-tag{background:#fff;color:var(--navy);border:0;border-radius:6px;
  box-shadow:0 22px 48px -24px rgba(5,14,40,.55)}
.pt-title{font-size:1.25rem;font-weight:700}
.pt-val{font-family:var(--font-head);font-weight:700;font-size:1.08rem;color:var(--navy)}
.pt-dots{border-bottom-color:#C3CBD8}
.pt-foot{border-top-color:var(--line)}

/* ── Секции: чередование белого и фарфора вместо карточек на одном фоне ── */
#start{background:#fff}
#services{background:var(--paper-deep);padding-top:72px !important}
.sec-steps{background:#fff}
#faq{background:var(--paper-deep)}
.book{background:#fff}
#contacts{background:var(--paper-deep)}

/* Главные направления — плоскости без рамки и тени, различаются по размеру. */
.svc-main{background:#fff;border:0;border-radius:4px;padding:32px 34px}
.svc-main h3{font-size:1.7rem}
.svc-price{font-family:var(--font-head);font-weight:700;font-size:1.35rem;color:var(--navy)}
.svc-rows a{border-bottom-color:var(--line-strong)}
.svc-row-price{font-family:var(--font-head);font-weight:700}
.svc-row-name{font-weight:600}
body:not(.home) .svc-main{background:var(--paper-deep)}

/* Шаги первого визита — без карточек: крупный номер, заголовок, текст, линия. */
.steps{gap:0;border-top:1px solid var(--line-strong)}
.step{background:transparent;border:0;border-radius:0;padding:24px 22px 8px 0;box-shadow:none}
.step + .step{border-left:1px solid var(--line);padding-left:22px}
.step .n{background:transparent;color:var(--cobalt);font-family:var(--font-head);font-weight:800;
  font-size:2.2rem;width:auto;height:auto;border-radius:0;justify-content:flex-start;margin-bottom:6px}
.steps-note{background:transparent;border:0;padding:16px 0 0;color:var(--muted);font-weight:500}
@media(max-width:760px){
  .step + .step{border-left:0;padding-left:0;border-top:1px solid var(--line)}
}

/* Вопросы — список с линиями, а не стопка карточек. */
.faq{gap:0;border-top:1px solid var(--line-strong)}
.faq-i{background:transparent;border:0;border-bottom:1px solid var(--line-strong);border-radius:0;padding:18px 0}
.faq-i summary{font-family:var(--font-body);font-weight:600;font-size:1.06rem}
.faq-i summary::after{color:var(--cobalt)}

/* Сценарии «С чем вы пришли» — жирная строка, линия, без карточек. */
.scn-rows a{border-bottom-color:var(--line-strong)}
.scn-rows b{font-family:var(--font-body)}
.scn-rows a:hover b{color:var(--cobalt)}

/* Клиники — две плоскости, без тени. */
.clinic-card{background:#fff;border:0;border-radius:4px;box-shadow:none}
#contacts .clinic-card{background:#fff}
body:not(.home) .clinic-card{background:var(--paper-deep)}

/* Цены: шапка таблицы чернилами, строки чистые. */
.ptable{border-radius:4px;box-shadow:none;border:1px solid var(--line)}
.ptable .row.head{background:var(--navy)}
.ptable .val{font-family:var(--font-head);font-weight:700}
.why-from{background:var(--sage-tint);border:0;border-left:3px solid var(--cobalt);border-radius:0}
.toc-chip{border-radius:999px;border-color:var(--line-strong)}
.toc-chip:hover{background:var(--sage-tint);border-color:var(--cobalt);color:var(--cobalt)}

/* Пометки и оговорки */
.draft-note{background:var(--sage-tint);border-left-color:var(--cobalt);border-radius:0}
.book-fallback{border:0;border-radius:4px;background:var(--paper-deep);box-shadow:none}
.legal-toc{border-radius:4px;background:var(--paper-deep);border:0}
.legal-doc blockquote{border-radius:0;background:var(--paper-deep);border:0;border-left:3px solid var(--cobalt)}
.legal-doc h2{border-top-color:var(--line)}

/* ── Подвал: чернила ─────────────────────────────────────────────────────── */
footer{background:var(--navy);color:var(--on-dark-muted)}
footer a{color:var(--on-dark-muted)}
footer a:hover{color:#fff}
footer .foot-h{color:#fff;font-weight:700}
.lcard{border-color:#26364C}
.foot-bottom{border-top-color:#26364C}

/* ── Фокус и выделение — кобальтом ──────────────────────────────────────── */
::selection{background:var(--cobalt);color:#fff}
body.home .hero a:focus-visible,body.home .nav a:focus-visible,body.home .nav button:focus-visible{outline-color:#fff}

/* Нижняя панель на телефоне */
.mobile-cta{background:#fff;border-top:1px solid var(--line)}

/* Прототип задаёт цвет подзаголовка и подписи логотипа более сильными
   селекторами — на кобальте они становились тёмными и нечитаемыми. */
.hero .hero-text .sub,.hero .hero-text p.sub{color:var(--cobalt-soft)}
.hero .hero-text .cta-note{color:var(--cobalt-soft)}
body.home .brand .tag{color:var(--cobalt-soft);border-left-color:rgba(255,255,255,.25)}

/* Вопросы: прототип рисует рамку правилом «.faq details» — оно сильнее
   одиночного класса. Перебиваем тем же весом. */
.faq details,.faq details.faq-i{background:transparent;border:0;border-bottom:1px solid var(--line-strong);
  border-radius:0;padding:0}
.faq summary{padding:20px 0}
.faq details p{margin:0 0 20px;max-width:62ch}

/* Блок записи — по левому краю, как остальные секции, а не островом по центру */
.book .container{max-width:var(--maxw);display:block}
.book .lead,.book .book-fallback{max-width:640px}

/* Шапка: у прототипа фон задан жёстким кремовым rgba на «header.nav» —
   он сильнее «.nav». Перебиваем тем же селектором. */
header.nav{background:rgba(255,255,255,.94)}
body.home header.nav{background:var(--cobalt)}
header.nav.scrolled{box-shadow:0 1px 0 var(--line)}
body.home header.nav.scrolled{box-shadow:0 1px 0 rgba(255,255,255,.14)}

/* Широкая гарнитура: длинные названия направлений в три колонки не влезают */
.svc-mains-3 .svc-main h2{font-size:clamp(1.3rem,1rem + .8vw,1.55rem);line-height:1.12}
.svc-main .svc-price small{display:block;margin:4px 0 0}

/* Маркеры списков прототипа нарисованы старым аквамарином — перерисовываем кобальтом */
:root{
  --bullet-sage:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%231B3C9E' stroke-width='2'%3E%3Cpath d='M4 20 A16 16 0 0 1 20 4'/%3E%3Cpath d='M10 20 A10 10 0 0 1 20 10'/%3E%3C/g%3E%3C/svg%3E");
  --rings-sage:none;
}

/* Режим «Для слабовидящих»: максимальный контраст, действия — тёмным кобальтом
   (контраст на белом 13 к 1), первый экран — тоже тёмный кобальт с белым текстом. */
html.a11y{--sage:#102A6E;--sage-deep:#102A6E;--cta:#102A6E;--cta-hover:#000;--cobalt:#102A6E;
  --gold:#102A6E;--focus:#000;--cobalt-soft:#FFFFFF}
html.a11y header.nav{background:#fff}
html.a11y body.home header.nav{background:var(--cobalt)}

/* Прототип увеличивал шрифт в режиме для слабовидящих на body, а все размеры
   заданы в rem — от корня. Увеличение фактически не работало. Переносим на html. */
html.a11y{font-size:120%}
html.a11y body{font-size:1.0625rem}

/* Правило прототипа тянуло сгенерированную заставку; элемента больше нет, картинку не выкладываем */
.hero-photo{background-image:none}

/* Уведомление о cookie на телефоне занимало почти треть экрана и закрывало
   первый экран. Компактнее: текст мельче, кнопка в строку, ближе к краю. */
@media(max-width:640px){
  .cookie{left:10px;right:10px;bottom:84px;padding:12px 14px;gap:12px;border-radius:10px;
    flex-direction:row;align-items:center}
  .cookie p{font-size:.8rem;line-height:1.4;margin:0}
  .cookie .btn{padding:9px 14px !important;width:auto;flex:none;font-size:.85rem}
}
@media(max-width:640px){
  /* у прототипа текст уведомления требует минимум 260px — кнопка уезжала вниз */
  .cookie{flex-wrap:nowrap}
  .cookie p{flex:1 1 auto;min-width:0}
}

/* Запись через ботов LoyalMed (11.09.2026). MAX — главная кнопка, Telegram — контурная.
   QR-коды только там, где они нужны: компьютер с мышью, широкий экран. На телефоне
   кнопка сама открывает мессенджер, QR там бесполезен. */
.bots{max-width:640px}
.bots-hint{margin:0 0 20px;color:var(--ink)}
.bots-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:14px}
.bot{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.bot .btn{min-height:48px}
.bot-qr{display:none;margin:0}
.bot-qr svg{display:block;background:#fff;border-radius:4px}
.bots-qr-note{display:none;margin:14px 0 0;font-size:.9rem;color:var(--muted)}
.bots-phone{margin:22px 0 0;color:var(--muted)}
.bots-phone a{color:var(--cta);font-weight:600;white-space:nowrap}
.bots-or{margin:34px 0 14px;font-weight:600;color:var(--navy)}
@media (hover:hover) and (pointer:fine) and (min-width:900px){
  .bots-list{gap:40px}
  .bot-qr,.bots-qr-note{display:block}
}
@media (max-width:480px){
  .bots-list{flex-direction:column;align-items:stretch}
  .bot{align-items:stretch}
  .bot .btn{width:100%;justify-content:center}
}

/* Нижние юр-ссылки: на телефоне столбиком, зона нажатия ≥44 px.
   Страница получает запас снизу под фиксированную плашку «Записаться» — иначе
   плашка перекрывает ссылки и нажатие уходит в запись (14.09.2026). */
.foot-legal{display:flex;flex-wrap:wrap;gap:0 18px}
@media (max-width:960px){
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .mobile-cta{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .foot-legal{flex-direction:column;gap:0}
  .foot-legal a{display:block;padding:12px 0}
}

/* Пока открыт cookie-баннер, страница получает запас снизу, чтобы баннер не закрывал
   последние юр-ссылки подвала; чипы разделов цен — зона нажатия ≥44 px (перепроверка 15.09.2026). */
html.js body:has(#cookie:not(.hidden)) footer{padding-bottom:200px}
@media (max-width:960px){
  html.js body:has(#cookie:not(.hidden)) footer{padding-bottom:170px}
  .toc-chip{min-height:44px;display:inline-flex;align-items:center}
}

/* ═══ Раздел «Врачи», версия 3 (15.09.2026) ═════════════════════════════════════
   Сценарий: пациент с тревогой, с телефона, за 1–2 минуты выбирает врача по задаче и
   записывается в одно касание. Список — по задаче пациента, клиника — метка карточки.
   Серия портретов — одна фотосессия: один кроп 4:5, одна подложка-фарфор, радиус 4px и
   один скруглённый верхний правый угол — единственная «примета» раздела. Тени и рамок нет
   (DESIGN.md §6), цвет с характером — только кобальт (§2). */

/* ── Список ── */
.dr-list.section{padding-top:36px}
.dr-tasks ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0;padding:0}
.dr-tasks a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1.5px solid var(--navy);
  border-radius:999px;color:var(--navy);font-weight:600;text-decoration:none;font-size:.95rem}
.dr-tasks a:hover{background:var(--navy);color:#fff}
.dr-dir{margin-top:56px;scroll-margin-top:90px}
.dr-dir-head{padding-bottom:14px;margin-bottom:24px;border-bottom:1px solid var(--line-strong)}
main .section .dr-dir-head h2{margin:0;font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem)}
.dr-dir-head p{margin:4px 0 0;color:var(--muted)}
.dr-grid{list-style:none;margin:0;padding:0;display:grid;gap:40px 24px;
  grid-template-columns:repeat(4,minmax(0,1fr))}
.dr-card{position:relative;min-width:0}
.dr-photo{aspect-ratio:4/5;background:var(--paper-deep);border-radius:4px 32px 4px 4px;overflow:hidden}
.dr-photo img{display:block;width:100%;height:100%;object-fit:cover}
.dr-photo-none{display:flex;align-items:center;justify-content:center;color:var(--cobalt);
  font-family:var(--font-head);font-weight:800;font-size:3rem}
main .dr-name{margin:14px 0 4px;font-family:var(--font-body);font-size:1.08rem;line-height:1.3;font-weight:600;letter-spacing:0}
.dr-name a{color:var(--navy);text-decoration:none}
.dr-name a::after{content:'';position:absolute;inset:0}
.dr-card:hover .dr-name a{color:var(--cobalt);text-decoration:underline;text-underline-offset:3px}
.dr-name a:focus-visible{outline:none}
.dr-card:has(a:focus-visible){outline:2px solid var(--focus);outline-offset:6px;border-radius:4px}
.dr-spec{margin:0;color:var(--muted);font-size:.94rem;line-height:1.4;overflow-wrap:break-word}
.dr-lead{margin:8px 0 0;color:var(--ink);font-size:.94rem;line-height:1.45}
.dr-card-facts{list-style:none;margin:10px 0 0;padding:0;font-size:.92rem;line-height:1.35;color:var(--ink)}
.dr-card-facts li{display:flex;gap:7px;align-items:flex-start;margin:5px 0}
.dr-card-facts .ic-svg{flex:none;width:16px;height:16px;margin-top:1px;color:var(--cobalt)}
.dr-help{margin-top:64px;padding-top:28px;border-top:1px solid var(--line-strong);max-width:680px}
main .section .dr-help h2{margin:0 0 8px;font-size:clamp(1.35rem,1.1rem + .8vw,1.7rem)}
.dr-help p{margin:0}
.dr-help-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px !important}
.dr-help-act .btn{min-height:48px}
.dr-help-phone{margin-top:14px !important;color:var(--muted)}
.dr-help-phone a{color:var(--cta);font-weight:600;white-space:nowrap}
.dr-empty{max-width:640px;margin-top:28px}
.dr-empty>p{margin:0 0 22px}
@media(max-width:1000px){.dr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){
  .dr-dir{margin-top:40px}
  .dr-tasks ul{flex-wrap:nowrap;overflow-x:auto;margin-right:-16px;padding-right:16px;scrollbar-width:none}
  .dr-tasks a{white-space:nowrap}
  .dr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 12px}
  .dr-photo{border-top-right-radius:20px}
  main .dr-name{font-size:1rem;margin-top:10px}
  .dr-spec,.dr-card-facts,.dr-lead{font-size:.875rem}
  .dr-help-act .btn{flex:1 1 100%}
}

/* ── Страница врача: первый экран ──
   Компьютер: портрет 420px слева, справа ФИО, где принимает, цена консультации, отзывы
   и запись. Телефон: портрет крупно во всю ширину («человек, а не должность») — кнопка
   записи уходит ниже, но её держит липкая панель внизу экрана (одно касание до MAX). */
.section.dr-page{padding-top:20px;padding-bottom:64px}
.dr-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;margin:0 0 16px;padding:0;font-size:.9rem;color:var(--muted)}
.dr-crumbs li{display:flex;align-items:center;min-height:44px}
.dr-crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted)}
.dr-crumbs li+li::before{content:"/";margin:0 10px;color:var(--muted)}
.dr-crumbs a:hover{color:var(--cobalt)}
.dr-hero{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);grid-template-rows:auto auto 1fr;
  grid-template-areas:"photo title" "photo head" "photo act";column-gap:56px;align-items:start}
.dr-title{grid-area:title;min-width:0}
.dr-hero>.dr-photo{grid-area:photo;border-top-right-radius:40px}
.dr-head{grid-area:head;min-width:0}
.dr-act{grid-area:act;min-width:0;margin-top:30px;padding-top:26px;border-top:1px solid var(--line-strong)}
main .dr-head h1{margin:0 0 12px;font-size:clamp(2rem,1.3rem + 2vw,3.1rem);line-height:1.04}
.dr-role{margin:0;font-size:1.15rem;line-height:1.4;font-weight:600;color:var(--navy)}
.dr-task{display:block;font-weight:400;color:var(--muted);font-size:1rem}
.dr-exp{margin:6px 0 0;color:var(--muted)}
.dr-at{list-style:none;margin:18px 0 0;padding:0}
.dr-head .dr-at{margin-top:14px}
.dr-at li{display:flex;gap:9px;align-items:flex-start;margin:8px 0;color:var(--ink);line-height:1.4}
.dr-at .ic-svg{flex:none;width:19px;height:19px;margin-top:1px;color:var(--cobalt)}
.dr-at b{font-weight:700;color:var(--navy)}
.dr-quote{margin:22px 0 0;padding:0 0 0 18px;border-left:3px solid var(--cobalt);max-width:56ch}
.dr-quote p{margin:0;font-size:1.12rem;line-height:1.5;color:var(--navy)}
.dr-about{margin:14px 0 0;max-width:62ch}
/* Внешние отзывы (врач и клиника): площадка — данные, разметка одна. Строка — ссылка ≥44px
   со звездой и числом, под ней дата «по данным на …». Подложка-фарфор, без рамки (§6). */
.dr-revs{margin-top:22px;padding:14px 18px 12px;max-width:460px;background:var(--paper-deep);border-radius:4px}
.dr-revs-h{margin:0;font-size:.875rem;color:var(--muted);line-height:1.4}
.dr-revs ul{list-style:none;margin:2px 0 0;padding:0}
.dr-revs li{margin:0 0 4px}
.dr-revs a{display:flex;gap:8px;align-items:center;min-height:44px;font-weight:600;color:var(--cobalt);text-decoration:none}
.dr-revs a:hover span{text-decoration:underline;text-underline-offset:3px}
.dr-revs a .ic-svg{flex:none;width:19px;height:19px}
.dr-pd-sub,.dr-pd-date{display:block;font-size:.875rem;color:var(--muted);line-height:1.4}
.dr-pd-date{margin:-8px 0 0 27px}
.dr-revs>.dr-pd-sub{margin-top:6px}
.dr-revs-clinic{margin-top:12px;padding:0;background:none}
main .section .dr-act-h{margin:0 0 12px;font-size:clamp(1.25rem,1.05rem + .6vw,1.5rem)}
@media(max-width:899px){
  /* Телефон: ФИО и специальность над портретом — в первом экране и лицо, и имя; кнопку
     записи держит липкая панель. */
  .dr-hero{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"title" "photo" "head" "act"}
  .dr-hero>.dr-photo{max-width:520px;border-top-right-radius:28px;margin:16px 0 4px}
  .dr-crumbs li[aria-current]{display:none}
  .dr-crumbs ol{margin-bottom:6px}
  main .dr-head h1{font-size:clamp(1.75rem,1.1rem + 3vw,2.3rem);line-height:1.08;margin-bottom:8px;overflow-wrap:break-word}
  .dr-role{font-size:1.02rem}
  .dr-act{margin-top:24px;padding-top:22px}
}

/* ── Страница врача: ниже первого экрана ── */
.dr-steps-sec{background:var(--paper-deep)}
.dr-steps{list-style:none;counter-reset:st;margin:24px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 48px}
.dr-steps li{counter-increment:st;padding-top:16px;border-top:1px solid var(--line-strong)}
.dr-steps li::before{content:counter(st);display:block;font-family:var(--font-head);font-weight:800;
  font-size:2rem;line-height:1;color:var(--cobalt);margin-bottom:10px}
main .dr-steps h3{margin:0 0 6px;font-size:1.1rem}
.dr-steps p{margin:0;color:var(--ink)}
.dr-steps a{color:var(--cta)}
@media(max-width:760px){.dr-steps{grid-template-columns:minmax(0,1fr);gap:20px}
  .dr-steps li{display:grid;grid-template-columns:2.4rem minmax(0,1fr);column-gap:8px}
  .dr-steps li::before{grid-row:span 2;margin:0;font-size:1.7rem}}

.dr-blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:44px 56px}
main .section .dr-block h2,main .section .dr-facts h2{margin:0 0 14px;font-size:clamp(1.35rem,1.1rem + .8vw,1.7rem)}
.dr-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.dr-rows li{display:grid;grid-template-columns:3.4rem minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--line-strong)}
.dr-rows li:last-child{border-bottom:0}
.dr-one li{grid-template-columns:minmax(0,1fr);gap:0}
.dr-year{font-family:var(--font-head);font-weight:700;color:var(--navy);font-feature-settings:"tnum"}
.dr-rows b{display:block;font-weight:600;color:var(--ink)}
.dr-sub{display:block;margin-top:2px;color:var(--muted);font-size:.94rem}
.dr-links{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:2px}
.dr-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--cta);font-weight:600}
.dr-slots{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.dr-slots li{display:block;padding:4px 10px;border:0;background:var(--sage-tint);border-radius:4px}
.dr-prices{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.dr-prices a{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;align-items:baseline;min-height:56px;padding:12px 0;
  border-bottom:1px solid var(--line-strong);color:var(--ink);text-decoration:none}
.dr-prices a:hover .dr-price-name{color:var(--cobalt);text-decoration:underline;text-underline-offset:3px}
.dr-price-name{flex:1 1 10rem;min-width:0;font-weight:600}
/* На 320 px подпись «металлокерамическая коронка» не влезала рядом с названием — цена переносится строкой ниже. */
.dr-price-val{margin-left:auto;text-align:right;font-family:var(--font-head);font-weight:700;color:var(--navy);white-space:nowrap;font-feature-settings:"tnum"}
.dr-price-val small{display:block;font-family:var(--font-body);font-weight:400;font-size:.85rem;color:var(--muted);white-space:normal}
.dr-fine{margin:12px 0 0;font-size:.9rem;color:var(--muted);max-width:62ch}

.dr-facts{background:var(--paper-deep)}
.dr-keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px 40px;margin:8px 0 0}
.dr-keys div{padding-top:12px;border-top:2px solid var(--cobalt)}
.dr-keys dt{font-size:.9rem;color:var(--muted)}
.dr-keys dd{margin:4px 0 0;font-weight:600;color:var(--navy);line-height:1.4}
.dr-qual{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:36px 56px;margin-top:36px}
main .dr-h3{margin:0 0 12px;font-size:1.1rem}
.dr-courses{margin:0;padding:0 0 0 20px}
.dr-courses li{padding:6px 0;line-height:1.5}
.dr-courses li::marker{color:var(--cobalt)}
.dr-more summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;color:var(--cobalt);font-weight:600}
.dr-more[open] summary{margin-bottom:4px}
.dr-back{margin:28px 0 0}
.dr-back a{display:inline-flex;align-items:center;min-height:44px;color:var(--cobalt);font-weight:600}
.dr-peers .dr-grid{margin-top:8px}
.dr-final{border-top:1px solid var(--line)}
.dr-final p{margin:0;max-width:62ch}
main .section.dr-final h2{margin:0 0 10px}

/* ── Отзывы пациентов (18.09.2026): строки как в прейскуранте, без карточек и теней ── */
#reviews{background:var(--paper-deep)}
#faq{background:#fff}
.rv-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px 56px;margin-top:8px}
.rv-col h3{margin:0;font-size:1.3rem}
.rv-addr{margin:4px 0 6px;color:var(--muted);font-size:.95rem}
.rv-list{list-style:none;margin:0;padding:0}
.rv-row{padding:16px 0 14px;border-bottom:1px solid var(--line-strong)}
.rv-row:last-child{border-bottom:0}
.rv-line{display:flex;align-items:baseline;gap:10px;color:var(--ink);text-decoration:none;min-height:44px}
.rv-line:hover .rv-name{color:var(--cobalt)}
.rv-line:hover .pt-dots{border-bottom-color:var(--cobalt)}
.rv-line:focus-visible{outline:2px solid var(--cobalt);outline-offset:4px}
.rv-name{font-weight:600;font-size:1.06rem}
.rv-val{display:inline-flex;align-items:baseline;gap:6px;color:var(--navy)}
.rv-val b{font-family:var(--font-head);font-weight:800;font-size:1.9rem;line-height:1;letter-spacing:-.02em}
.rv-val .ic-svg{width:18px;height:18px;color:var(--cobalt);transform:translateY(1px)}
.rv-sub{margin:2px 0 0;color:var(--ink)}
.rv-award{margin:6px 0 0;font-weight:600;color:var(--cobalt)}
.rv-act{display:flex;flex-wrap:wrap;align-items:center;gap:0 26px;margin-top:4px}
.rv-act a{display:inline-flex;align-items:center;min-height:44px}
.rv-act .more{color:var(--muted)}
.rv-add{font-weight:700;color:var(--cobalt);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.rv-add:hover{color:var(--navy)}
.rv-foot{margin-top:22px}

/* ── Фото клиник на «Контактах» (18.09.2026): первая — фасад, крупно; остальные сеткой ── */
.cl-gal{list-style:none;margin:18px 0 6px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.cl-gal li:first-child{grid-column:1/-1}
.cl-gal a{display:block;border-radius:4px;overflow:hidden}
.cl-gal a:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
.cl-gal img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.cl-gal li:first-child img{aspect-ratio:16/10}

/* ── Страница «Анкета здоровья» (21.09.2026) ───────────────────────────────────
   Вход пациента в анкету: объясняет, сколько это займёт, зачем и что с данными.
   Своих цветов не заводит — те же кобальт, фарфор и чернила. Строки-перечни
   набраны как прейскурант (линии, без карточек с тенями): DESIGN.md §4, §7. */
.ank-sec{background:var(--paper-deep)}
.ank-top{padding-bottom:40px}
.ank-act{margin-top:30px;max-width:640px}
.ank-act .btn,.ank-end-act .btn{min-height:52px;font-size:1.05rem;padding:14px 34px}
.ank-note{margin:14px 0 0;color:var(--muted);max-width:52ch}
.ank-warn{margin:0 0 18px;padding:14px 16px;background:var(--sage-tint);
  border-left:3px solid var(--cobalt);color:var(--ink);max-width:56ch}
.ank-rows{list-style:none;margin:28px 0 0;padding:0;max-width:820px;
  border-top:1px solid var(--line-strong)}
.ank-rows li{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:4px 32px;
  padding:20px 0;border-bottom:1px solid var(--line-strong)}
.ank-rows b{font-weight:600;color:var(--navy)}
.ank-rows span{color:var(--muted)}
.ank-fine{margin-top:22px;max-width:62ch}
.ank-end{padding-top:56px}
.ank-end-act{margin-top:26px}
.ank-end-note{margin:18px 0 0;color:var(--muted);max-width:52ch}
/* «Обновляем раз в год» — объяснение, а не требование: тон спокойный, вес обычного текста */
.ank-year{margin:14px 0 0;color:var(--muted);max-width:60ch}
/* Код страницы: сотрудник показывает его с экрана, пациент сканирует своим телефоном.
   На узком экране картинка встаёт над текстом — иначе код мельчает до нечитаемого. */
.ank-qr{display:flex;gap:22px;align-items:center;margin:28px 0 0;padding:20px;
  background:#fff;border:1px solid var(--line);border-radius:14px;max-width:640px}
.ank-qr img{flex:none;width:176px;height:176px;display:block}
.ank-qr-txt p{margin:0 0 8px;color:var(--muted)}
.ank-qr-h{color:var(--navy)!important;font-size:1.05rem}
.ank-qr-url b{color:var(--navy);white-space:nowrap}
@media (max-width:560px){.ank-qr{flex-direction:column;align-items:flex-start;gap:16px}
  .ank-qr img{width:200px;height:200px;margin:0 auto}}
.ank-end-note b{color:var(--navy);white-space:nowrap}
.steps.steps-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:960px){
  .steps.steps-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ank-rows li{grid-template-columns:1fr;gap:4px}
  .ank-top{padding-bottom:28px}
}
@media (max-width:560px){
  .steps.steps-3{grid-template-columns:1fr}
}

/* Блок анкеты на «Записи»: не карточка, а раздел за линией — запись и анкета
   идут подряд, а не спорят за внимание. */
.zapis-anketa{margin-top:52px;padding-top:28px;border-top:1px solid var(--line-strong);max-width:680px}
.zapis-anketa h2{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem)}
.zapis-anketa p{margin:12px 0 0;color:var(--muted);max-width:62ch}
.zapis-anketa-act{margin-top:20px !important}
.zapis-anketa-act .btn{min-height:48px}

/* Ссылка внутри абзаца была неотличима от обычного текста: правило прототипа
   a{color:inherit;text-decoration:none} действует и в прозе, поэтому «Политика обработки
   персональных данных», «Полный прейскурант» и телефоны выглядели как текст (WCAG 1.4.1 —
   смысл передавался не оформлением, а догадкой). Кнопки не трогаем. Кобальт на белом 9.6:1,
   на фарфоре 8.87:1, на подложке пометок 8.19:1. */
main p a:not(.btn){color:var(--cta);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px}
main p a:not(.btn):hover{color:var(--cta-hover)}
.mobile-cta.ank-cta.is-off{display:none}

/* /rabota/ — вакансии по клиникам (23.09.2026) */
.job-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px;margin-top:28px}
.job-clinic{border:1px solid var(--line);border-radius:12px;padding:24px;background:var(--surface,#fff)}
.job-clinic h3{margin:0 0 4px;font-size:1.2rem;color:var(--navy)}
.job-org{margin:0 0 16px;color:var(--muted);font-size:.95rem}
.job-list{margin:0 0 16px;padding-left:1.2em;line-height:1.7}
.job-list li::first-letter{text-transform:uppercase}
.job-mail{margin:0}
.job-note{margin-top:20px;color:var(--muted)}

/* ═══════════════════════════════════════════════════════════════════════
   СЦЕНА ПЕРВОГО ЭКРАНА — 11.09.2026, фон переработан 12.09.2026
   Фон — объём кости в проекции, как в планировщике имплантации: яркая
   кортикальная кромка, зернь губчатки, уровни прозрачности (разметку даёт
   pages_home.bone_field). Движение одно: сверху вниз проходит срез —
   кобальтовая шторка уезжает вниз, её верхняя кромка светится, и за ней
   «восстанавливается» объём. Заодно по строкам ценника идут цены.
   Цена кадра: двигается ровно один слой и только transform.
   Финальный кадр — обычная вёрстка. Прячется что-либо только под html.scene:
   класс ставит скрипт в <head> (core.head) — его нет при «уменьшить движение»,
   без JS, на повторном заходе и на слабом устройстве.
   Снимается одной строкой в build/build.py.
   ═══════════════════════════════════════════════════════════════════════ */

.hero{isolation:isolate;overflow:hidden;
  /* Гашение слева: под слоганом и подзаголовком фон почти чистый кобальт. */
  --hero-fade:linear-gradient(90deg,transparent 47%,rgba(0,0,0,.55) 54%,#000 61%)}
.hero .container{z-index:1}

.hero-bone{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  -webkit-mask-image:var(--hero-fade);mask-image:var(--hero-fade)}
.hero-bone path{vector-effect:non-scaling-stroke}
.hero-bone--m{display:none}

/* Телефон: колонки складываются, объём переезжает вниз и слабеет. */
@media (max-width:900px){
  .hero{--hero-fade:linear-gradient(160deg,transparent 0 22%,rgba(0,0,0,.4) 40%,#000 55%)}
  .hero-bone--d{display:none}
  .hero-bone--m{display:block;opacity:.78}
}

/* Ценник: строка ведёт в свой раздел прейскуранта. */
.pt-list a{display:flex;align-items:baseline;gap:10px;min-width:0;color:inherit;text-decoration:none;
  border-radius:4px}
.pt-list li{display:block}
.pt-list a .pt-name,.pt-list a .pt-dots{transition:color .2s ease,border-color .2s ease}
.pt-list a:hover .pt-name{color:var(--cobalt)}
.pt-list a:hover .pt-dots{border-bottom-color:var(--cobalt)}
.pt-list a:focus-visible{outline:2px solid var(--cobalt);outline-offset:4px}

/* Слоган по словам: внешняя рамка режет, внутреннее слово поднимается.
   Нижний запас — чтобы рамка не срезала «р», «у», «з». */
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.16em;margin-bottom:-.16em}
.hero h1 .w>span{display:inline-block}

/* Прежняя анимация строк ценника уступает сцене. */
html.js .pt-list li{animation:none}

/* Шторка существует только на время сцены. */
.hero-veil{display:none}

/* ── Постановка ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  /* Сама шторка — сплошной кобальт поверх кобальтового фона: маска ей не нужна,
     а без маски слой едет по экрану даром (проверено замером первой отрисовки). */
  html.scene .hero-veil{display:block;position:absolute;inset:0;z-index:0;pointer-events:none;
    background:var(--cobalt);animation:scan 1.45s linear .1s both}
  /* Кромка среза: тонкая яркая линия и короткий шлейф по уже пройденному объёму.
     Гасится слева той же маской — свет не должен заезжать на слоган. */
  html.scene .hero-veil::before{content:"";position:absolute;left:0;right:0;top:-96px;height:96px;
    -webkit-mask-image:var(--hero-fade);mask-image:var(--hero-fade);
    background:linear-gradient(180deg,transparent,rgba(255,255,255,.07) 82%,
      rgba(255,255,255,.28) 98%,rgba(255,255,255,.28))}

  html.scene .hero h1 .w>span{animation:rise .75s cubic-bezier(.2,.75,.2,1) both}
  html.scene .hero h1 .w:nth-child(1)>span{animation-delay:.15s}
  html.scene .hero h1 .w:nth-child(2)>span{animation-delay:.25s}
  html.scene .hero h1 .w:nth-child(3)>span{animation-delay:.35s}

  /* Тайминги строк ценника совпадают с проходом кромки по ним. */
  html.scene .pt-list .pt-name{animation:fadeIn .35s ease both;
    animation-delay:calc(.55s + var(--i) * .14s)}
  html.scene .pt-list .pt-dots{animation:lead .5s cubic-bezier(.45,0,.2,1) both;
    animation-delay:calc(.67s + var(--i) * .14s)}
  html.scene .pt-list .pt-val{animation:land .4s cubic-bezier(.2,.8,.3,1) both;
    animation-delay:calc(1.05s + var(--i) * .14s)}
}

@keyframes scan{from{transform:translateY(0)}to{transform:translateY(calc(100% + 100px))}}
@keyframes fadeIn{from{opacity:0}}
@keyframes rise{from{transform:translateY(105%)}}
@keyframes lead{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes land{from{opacity:0;transform:translateY(5px)}}

/* Режим «Для слабовидящих»: фон и сцену убираем, там нужен чистый контраст. */
html.a11y .hero-bone,html.a11y .hero-veil,body.a11y .hero-bone,body.a11y .hero-veil{display:none}