/* GuidexLab — обновление лендинга 2026.
   Подключается после signature.css и только добавляет: движение первого экрана,
   макет окна согласования, ленту шагов, мобильную шапку в одну строку. */

.public{--accent:#6692ff;--ok:#6acda1;--wait:#e2b675;--ease-out:cubic-bezier(.2,.7,.2,1)}
body[data-site-theme=light] .public{--accent:#215def;--ok:#147356;--wait:#976019}

/* ── первый экран: медленный наезд на снимок ── */
@keyframes gx-drift{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.06) translate3d(-1.2%,-1%,0)}}
.hero .hero-image{animation:gx-drift 26s ease-in-out infinite alternate;transform-origin:70% 45%;will-change:transform}
/* Первый экран стоит в той же колонке, что шапка и разделы, на любом экране от планшета:
   текст, снимок, затемнение и нижняя линия начинаются и заканчиваются по её краям.
   --col — отступ колонки: 5%, 4% до 1000 px, на широком экране колонка 1440 по центру. */
@media(min-width:761px){
  .hero{--col:5%;padding-left:var(--col);padding-right:var(--col);border-bottom-color:transparent}
  .hero .hero-image{left:calc(var(--col) + 16%);right:auto;width:calc(100% - 2*var(--col) - 10%);object-position:center}
  .hero .hero-shade,body[data-site-theme] .hero .hero-shade{left:var(--col);right:var(--col);
    background:linear-gradient(90deg,var(--hero-bg) 0,var(--hero-bg) 22%,var(--hero-bg-a) 33%,rgba(0,0,0,0) 56%)}
  /* всё, что выходит за колонку (в том числе при медленном наезде снимка), обрезается ровно по её краю */
  .hero{clip-path:inset(0 var(--col))}
  .hero:after{content:"";position:absolute;bottom:0;height:1px;background:var(--line);left:var(--col);right:var(--col)}
  .image-caption{right:calc(var(--col) + 14px)}
  .public{--hero-bg:#14181d;--hero-bg-a:rgba(20,24,29,.9)}
  body[data-site-theme=light] .public{--hero-bg:#f8fafc;--hero-bg-a:rgba(248,250,252,.9)}
}
@media(min-width:761px) and (max-width:1000px){.hero{--col:4%}}
@media(min-width:1600px){.hero{--col:max(5%,calc((100% - 1440px)/2))}}

/* ── окно согласования ── */
.approval-demo{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:40px;align-items:center;margin:8px 0 44px}
.ad-window{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.02) inset}
body[data-site-theme=light] .ad-window{box-shadow:0 30px 70px -45px rgba(23,35,46,.45)}
.ad-bar{display:flex;align-items:center;gap:14px;height:40px;padding:0 14px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.ad-dots{display:flex;gap:6px}.ad-dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.ad-title{font-weight:550}
.ad-body{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);background:#13223a}
/* настоящий вид просмотрщика RealGUIDE, который получает врач */
.ad-stage{position:relative;align-self:start;aspect-ratio:1200/934;background:#13223a;overflow:hidden}
.ad-stage img{display:block;width:100%;height:100%;object-fit:cover}
.ad-pin{position:absolute;z-index:1;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%}
.ad-pin-b{left:53.6%;top:31%;border:2px solid #8cb0ff;animation:gx-pulse 2.4s ease-out infinite}
@keyframes gx-pulse{0%{box-shadow:0 0 0 0 rgba(102,146,255,.55)}100%{box-shadow:0 0 0 16px rgba(102,146,255,0)}}
.ad-side{display:flex;flex-direction:column;gap:10px;padding:18px;border-left:1px solid var(--line);min-width:0;background:var(--paper);align-self:stretch}
.ad-overline{font-size:10px;letter-spacing:.9px;color:var(--muted)}
.ad-plan{font-size:19px;font-weight:620;letter-spacing:-.2px}
.ad-chip{display:inline-flex;align-items:center;gap:7px;width:fit-content;padding:5px 10px;border-radius:99px;font-size:12px;font-weight:550;background:rgba(226,182,117,.12);color:var(--wait)}
.ad-chip i{width:6px;height:6px;border-radius:50%;background:currentColor}
.ad-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:38px;border-radius:8px;border:1px solid var(--line);font-size:13px;font-weight:550}
.ad-btn svg{width:16px;height:16px}
.ad-btn-primary{background:var(--blue,#215def);border-color:transparent;color:#fff;margin-top:6px}
.ad-hist-title{margin-top:10px}
.ad-history{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.ad-history li{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:8px;font-size:12px;min-width:0}
.ad-history li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-history li em{font-style:normal;color:var(--muted);white-space:nowrap}
.ad-history li.is-now{background:var(--base)}
.ad-history li.is-now em{color:var(--wait)}
.ad-points{display:flex;flex-direction:column;gap:22px}
.ad-caption{font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.ad-points p{display:grid;grid-template-columns:30px 1fr;gap:12px;font-size:16px;line-height:1.5}
.ad-points b{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);color:var(--accent);font-size:12px}

/* ── лента шагов: линия заполняется, когда блок виден ── */
.process-timeline{position:relative}
.process-timeline .process-step{position:relative;border-top-color:transparent}
.process-timeline:before,.process-timeline:after{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px}
.process-timeline:before{background:var(--line)}
.process-timeline:after{background:linear-gradient(90deg,var(--accent),var(--ok));transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease-out) .2s}
.process-timeline.in-view:after{transform:scaleX(1)}
.process-timeline .process-step:before{content:"";position:absolute;left:0;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--night);border:2px solid var(--line);z-index:1;
  transition:border-color .3s,background .3s}
.process-timeline.in-view .process-step:before{border-color:var(--accent);background:var(--accent)}
.process-timeline.in-view .process-step:nth-child(1):before{transition-delay:.3s}
.process-timeline.in-view .process-step:nth-child(2):before{transition-delay:.7s}
.process-timeline.in-view .process-step:nth-child(3):before{transition-delay:1.1s}
.process-timeline.in-view .process-step:nth-child(4):before{transition-delay:1.5s;border-color:var(--ok);background:var(--ok)}

/* ── калькулятор: сумма без прыжков ширины ── */
.estimate-result output{font-variant-numeric:tabular-nums}

/* ── меню: дополнительный блок только на телефоне ── */
.nav-extra{display:none}

@media(max-width:1100px) and (min-width:761px){
  .approval-demo{grid-template-columns:1fr;gap:28px}
  .ad-points{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .ad-caption{grid-column:1/-1}
}

@media(max-width:760px){
  /* шапка в одну строку: логотип · тема · меню */
  .public-header{display:flex!important;flex-wrap:nowrap;height:64px!important;min-height:0!important;padding:0!important;gap:8px}
  .public-header>.brand{margin-right:auto}
  .public-header .lang-switch,.public-header .header-login{display:none!important}
  .public-header .site-preferences{margin:0}
  .public-header .public-menu{display:inline-grid;min-height:40px;width:40px}
  .public-mode .public-header nav{top:64px!important}
  .public-header nav.open{gap:4px}
  .public-header nav a:not(.btn){padding:10px 0;font-size:16px}
  .nav-extra{display:flex;flex-direction:column;gap:14px;margin-top:12px;padding-top:18px;border-top:1px solid var(--line)}
  .nav-extra .lang-switch{display:inline-flex!important;width:fit-content;height:40px}
  .nav-extra .btn{justify-content:center;min-height:46px}

  .approval-demo{grid-template-columns:1fr;gap:24px;margin-bottom:34px}
  .ad-body{grid-template-columns:1fr}
  .ad-side{border-left:0;border-top:1px solid var(--line)}
  .ad-points p{font-size:15px}
  .process-timeline:before,.process-timeline:after{display:none}
  .process-timeline .process-step{border-top-color:var(--line)}
  .process-timeline .process-step:before{display:none}
}

@media(prefers-reduced-motion:reduce){
  .hero .hero-image,.ad-pin-b{animation:none}
  .process-timeline:after{transition:none}
}

/* ── демонстрация согласования сразу после первого экрана ── */
.demo-section .section-heading{margin-bottom:18px}
.ad-label{display:inline-flex;align-items:center;gap:9px;margin:0 0 14px;padding:7px 12px;border-radius:99px;border:1px dashed var(--line);
  font-size:13px;font-weight:550;color:var(--muted)}
.ad-label svg{width:16px;height:16px;color:var(--accent)}
.demo-section .approval-demo{margin:0}
.ad-window,.ad-window *{cursor:default;user-select:none}

/* ── карточки услуг: название, назначение, что входит, цена ── */
.service-card .service-visual>span,.service-card .service-visual>small{display:none}
.service-body .svc-name{font-size:22px;font-weight:650;letter-spacing:-.3px;margin:0 0 10px}
.service-body>p{font-size:15px;line-height:1.6;color:inherit;opacity:.86;margin:0 0 16px}
.svc-incl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.svc-incl li{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--muted)}
.svc-incl svg{width:16px;height:16px;flex-shrink:0;color:var(--ok)}
.service-price strong{font-size:24px}
.svc-visnote{margin-top:14px;font-size:12px;color:var(--muted)}

/* ── шапка: короткая «Войти» только на телефоне ── */
.header-login .hl-short{display:none}
.theme-toggle{justify-content:flex-start;gap:10px}
.theme-toggle .tt-ico{display:inline-grid}
.theme-toggle svg{width:18px;height:18px}

/* ── строка итога рядом с параметрами (телефон) ── */
.estimate-live{display:none}
@keyframes gx-bump{0%{transform:scale(1)}40%{transform:scale(1.035)}100%{transform:scale(1)}}

@media(max-width:760px){
  /* 7. в шапке — «Войти», тема уходит в меню */
  .public-header .header-login{display:inline-flex!important;min-height:40px;padding:8px 14px;font-size:13px}
  .public-header .header-login .hl-long{display:none}
  .public-header .header-login .hl-short{display:inline}
  .public-header .header-login svg{display:inline-block;width:15px;height:15px}
  .public-header #themeBtn{display:none}
  .nav-extra{flex-direction:row;flex-wrap:wrap;align-items:center}
  .nav-extra .theme-toggle{flex:1;min-width:190px;min-height:40px;font-size:13px}


  /* 8. итог прилипает к низу экрана, пока видны параметры */
  .estimate-live{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;bottom:12px;z-index:5;margin-top:18px;
    padding:12px 16px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));background:var(--paper);
    box-shadow:0 14px 30px -18px rgba(0,0,0,.55)}
  .estimate-live span{font-size:12px;color:var(--muted)}
  .estimate-live strong{font-size:24px;font-weight:650;font-variant-numeric:tabular-nums}
  .estimate-live.bump{animation:gx-bump .35s var(--ease-out)}
  /* сумма уже в строке итога — в блоке результата остаётся расшифровка */
  .estimate-result>.eyebrow,.estimate-result>output{display:none}
  .service-body .svc-name{font-size:20px}
}
@media(prefers-reduced-motion:reduce){.estimate-live.bump{animation:none}}

/* ── услуги: два формата работы — одна строка-переключатель над карточками ── */
.way-switch{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin:0 0 22px}
.way-lead{font-size:14px;font-weight:600;margin-right:6px}
.way-chip{display:inline-flex;align-items:baseline;gap:8px;padding:9px 14px;border:1px solid var(--line);border-radius:99px;text-decoration:none;color:inherit;
  transition:border-color .2s,background-color .2s}
.way-chip b{font-size:14px;font-weight:600}
.way-chip small{font-size:12px;color:var(--muted)}
.way-chip:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:color-mix(in srgb,var(--accent) 8%,transparent)}
/* карточка, к которой перешли, коротко подсвечивается */
.service-card{scroll-margin-top:96px}
.service-card:target{animation:gx-target 1.6s var(--ease-out)}
@keyframes gx-target{0%,35%{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent)}100%{box-shadow:0 0 0 0 transparent}}

/* ── финальный призыв перед подвалом ── */
.final-cta{border-bottom:0}
.final-card{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:36px 40px;border-radius:20px;
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));
  background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 60%),var(--paper)}
.final-card h2{font-size:30px;font-weight:650;letter-spacing:-.5px;margin:0 0 8px}
.final-card p{font-size:15px;color:var(--muted);margin:0;max-width:520px}
.final-actions{display:flex;gap:12px;flex-shrink:0;flex-wrap:wrap}
.final-actions .btn{min-height:48px}

@media(max-width:760px){
  .way-lead{width:100%}
  .way-chip{width:100%;flex-direction:column;align-items:flex-start;gap:2px;border-radius:14px;padding:10px 14px}
  .final-card{flex-direction:column;align-items:stretch;padding:26px 20px}
  .final-card h2{font-size:24px}
  .final-actions{flex-direction:column}
  .final-actions .btn{width:100%}
}