/* =====================================================================
   МОЕ ПРАВО — Страница «Партнёрам»
   Хедер и футер — 1:1 с живого сайта mpravo24.ru
   Тело страницы — по макету Figma «Партнёрам финальный»
   ===================================================================== */

/* ===================== БАЗА ===================== */
:root{
  --teal:#0c6781;
  --teal-2:#6faaae;
  --teal-3:#56b4c0;
  --ink:#4d4c4c;
  --page:#202020;
  --card-a:#232323;
  --card-b:#151515;
  --footer:#3b3b3b;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
:root{color-scheme:only light}
html,body{overflow-x:hidden;max-width:100%}
body{
  font-family:'Montserrat',-apple-system,Segoe UI,Roboto,sans-serif;
  color:#fff;
  background:var(--page);
  line-height:1.3;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}

/* =====================================================================
   ХЕДЕР — 1:1 с mpravo24.ru
   ===================================================================== */
.mpr-header{position:fixed;top:0;left:0;right:0;z-index:99998;background:#fff0;pointer-events:none}
.mpr-header__inner{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:14px 80px;gap:60px;background:#fff0;pointer-events:auto;position:relative}
.mpr-header__inner::before{content:'';position:absolute;inset:0;background:#fff;clip-path:inset(0 round 0 0 90px 90px);filter:drop-shadow(0 4px 12px rgb(0 0 0 / .1));z-index:-1;pointer-events:none}
.mpr-header__logo{display:flex;align-items:center;flex-shrink:0}
.mpr-header__logo img{display:block;height:34px;width:auto}
.mpr-nav{font-family:"Montserrat",sans-serif;flex:1;display:flex;justify-content:center}
.mpr-nav__list{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:36px}
.mpr-nav__link{color:#4d4c4c;font-size:18px;font-weight:500;text-decoration:none;white-space:nowrap;transition:color .2s;outline:none}
.mpr-nav__link:hover{color:#0c6781}
.mpr-nav__link:focus{color:#4d4c4c;outline:none;text-decoration:none}
.mpr-nav__phone{color:#0c6781!important;font-weight:600;font-size:17px}
.mpr-nav__arrow{font-size:9px;margin-left:4px;opacity:.5}
.mpr-nav__item--dropdown{position:relative}
.mpr-nav__submenu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-8px);list-style:none;margin:0;padding:8px 0;min-width:230px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 8px 24px rgb(0 0 0 / .12);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility 0s .2s;z-index:100002}
.mpr-nav__item--dropdown:hover>.mpr-nav__submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition:opacity .2s,transform .2s,visibility 0s 0s}
.mpr-nav__submenu li{margin:0}
.mpr-nav__submenu a{display:block;padding:10px 20px;color:#4d4c4c;font-size:15px;font-weight:400;text-decoration:none;border-left:3px solid #fff0;transition:background .15s,border-color .15s}
.mpr-nav__submenu a:hover{background:#f5f8fa;border-left-color:#0c6781;color:#0c6781}
.mpr-header__phone-mobile{display:none}
.mpr-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;background:none;border:none;cursor:pointer;padding:6px;box-shadow:none}
.mpr-burger span{display:block;height:2.5px;background:#333;border-radius:2px;transition:transform .25s,opacity .2s}
.mpr-mobile-overlay{display:none;position:fixed;inset:0;background:rgb(0 0 0 / .45);z-index:100000;opacity:0;transition:opacity .3s}
.mpr-mobile-overlay.open{display:block;opacity:1}
.mpr-mobile-panel{position:fixed;top:0;right:-320px;width:300px;max-width:85vw;height:100%;background:#fff;z-index:100001;overflow-y:auto;transition:right .3s ease;box-shadow:-4px 0 20px rgb(0 0 0 / .15);display:flex;flex-direction:column}
.mpr-mobile-panel.open{right:0}
.mpr-mobile-panel__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #eee}
.mpr-mobile-panel__header img{height:28px;width:auto}
.mpr-mobile-panel__close{background:none;border:none;font-size:32px;color:#333;cursor:pointer;line-height:1;padding:0 4px;box-shadow:none}
.mpr-mobile-nav{flex:1;padding:12px 0}
.mpr-mobile-nav ul{list-style:none;margin:0;padding:0}
.mpr-mobile-nav a{display:block;padding:14px 24px;color:#333;font-family:"Montserrat",sans-serif;font-size:17px;font-weight:500;text-decoration:none;border-bottom:1px solid #f3f3f3;transition:background .15s}
.mpr-mobile-nav a:hover{background:#f5f8fa;color:#0c6781}
.mpr-mobile-panel__footer{padding:20px 24px;border-top:1px solid #eee;text-align:center}
.mpr-mobile-panel__phone{display:block;color:#0c6781;font-family:"Montserrat",sans-serif;font-size:20px;font-weight:600;text-decoration:none;margin-bottom:4px}
.mpr-mobile-panel__note{font-size:13px;color:#888}
@media (max-width:1024px){
  .mpr-nav{display:none}
  .mpr-burger{display:flex}
  .mpr-header__phone-mobile{display:flex;align-items:center;margin-left:auto}
  .mpr-header__inner{padding:4px 40px;max-width:90%;gap:26px}
  .mpr-header__logo img{height:26px}
}

/* =====================================================================
   ФУТЕР — 1:1 с mpravo24.ru
   ===================================================================== */
.mpr-site-footer{background:#3B3B3B;color:#fff;font-family:"Montserrat",sans-serif;border-radius:37px 37px 0 0;margin-top:-30px;position:relative;z-index:1}
.mpr-footer-top{padding:70px 0 0}
.mpr-footer-top__inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:60px}
.mpr-contact{display:flex;align-items:center;gap:15px}
.mpr-photo{width:80px;height:80px;border-radius:50%;object-fit:cover}
.mpr-phone{font-size:21px;font-weight:700;color:#fff;text-decoration:none}
.mpr-phone:hover,.mpr-phone:focus,.mpr-phone:active,.mpr-phone:visited{color:#fff;outline:none;text-decoration:none}
.mpr-title{font-size:21px;font-weight:700}
.mpr-note{font-size:10px;color:#fff;opacity:.82!important;margin-top:5px}
.mpr-actions{display:flex;gap:120px}
.mpr-action{display:flex;align-items:center;gap:12px}
.mpr-action img{width:80px;height:80px;border-radius:12px;object-fit:cover}
.mpr-text{font-size:21px;font-weight:700}
.mpr-button-container{display:flex;align-items:center;gap:2px;margin-top:5px}
.mpr-button{padding:5px 12px;background:#fff;color:#000;border:none;border-radius:30px;text-decoration:none;font-size:10px;font-weight:700}
.mpr-button:hover,.mpr-button:focus,.mpr-button:active{background:#fff;color:#000;outline:none;text-decoration:none}
.mpr-play{width:25px!important;height:25px!important;padding:3px;background:#fff;border-radius:50%!important}
.mpr-footer-row{padding:30px 20px 40px}
.mpr-footer-row__inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-start;gap:40px}
.mpr-government{flex-shrink:0}
.mpr-agencies{display:flex;gap:30px;flex-wrap:wrap;max-width:500px}
.mpr-agency{text-align:center}
.mpr-agency img{height:80px;display:block;margin:0 auto}
.mpr-agency p{width:110px;margin-top:10px;font-size:12px;color:#fff;margin-bottom:0}
.mpr-government__title{font-size:18px;font-weight:700;color:#fff;margin-top:15px;text-align:left}
.mpr-footer-legal{text-align:right;flex:1}
.mpr-legal{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.mpr-partner-btn{display:inline-block;margin-bottom:10px;padding:8px 14px;background:#fff;color:#3b3b3b;border-radius:30px;text-decoration:none;font-size:12px;font-weight:700}
.mpr-partner-btn:hover,.mpr-partner-btn:focus{color:#3b3b3b;text-decoration:none;outline:none}
.mpr-partner-btn span{font-weight:400;font-size:13px}
.mpr-link{color:#fff;font-size:16px;text-decoration:underline}
.mpr-link:hover,.mpr-link:focus,.mpr-link:visited{color:#fff;outline:none}
.mpr-copyright{font-size:16px;line-height:1.5;padding-top:30px;color:#fff}
.mpr-copyright span{font-size:17px;font-weight:700}
.mpr-partners-wrap{display:inline-block;position:relative;cursor:pointer}
.mpr-partners-trigger{color:#fff;text-decoration:underline;font-size:inherit}
.mpr-partners-popup{display:none;position:absolute;bottom:calc(100% + 10px);right:0;background:#fefefe;color:#1a1a1a;border-radius:10px;padding:18px 22px;min-width:500px;box-shadow:0 6px 24px rgb(0 0 0 / .22);font-size:13px;line-height:1.2;z-index:100;text-align:left}
.mpr-partners-popup::after{content:'';position:absolute;bottom:-8px;right:28px;width:16px;height:16px;background:#fefefe;transform:rotate(45deg);box-shadow:3px 3px 6px rgb(0 0 0 / .08)}
.mpr-partners-popup strong{display:block;font-size:13px;margin-bottom:6px;color:#0c6781}
/* consent modal (footer) */
.modal{display:none;position:fixed;inset:0;z-index:100050;background:rgb(0 0 0 / .5)}
.modal-content{background:#fff;color:#222;max-width:520px;margin:12vh auto 0;padding:30px 34px;border-radius:14px;position:relative;line-height:1.5;font-size:16px}
.modal-content a{color:#0c6781;text-decoration:underline}
.modal-content .close{position:absolute;top:10px;right:16px;font-size:30px;color:#888;cursor:pointer;line-height:1}
#revokeConsentBtn{background:none;border:none;color:#fff;font-size:16px;text-decoration:underline;font-family:inherit;text-align:right;padding:0}
@media (max-width:900px){
  .mpr-footer-top__inner{flex-direction:column;gap:20px;align-items:center}
  .mpr-footer-top{padding:50px 0 0}
  .mpr-actions{flex-direction:column;gap:15px}
  .mpr-photo,.mpr-action img{width:50px;height:50px}
  .mpr-phone,.mpr-title,.mpr-text{font-size:16px}
  .mpr-footer-row__inner{flex-direction:column;align-items:center;text-align:center}
  .mpr-agencies{justify-content:center;gap:0}
  .mpr-agency img{height:60px}
  .mpr-government__title{font-size:16px;text-align:center}
  .mpr-footer-legal{text-align:center}
  .mpr-legal{align-items:center}
  .mpr-link{justify-content:center}
  .mpr-copyright{font-size:14px;padding-top:20px}
  .mpr-copyright span{font-size:14px}
  .mpr-partners-popup{right:-10px;min-width:260px;font-size:11px}
  .mpr-government{display:flex;flex-wrap:wrap;justify-content:center}
  #revokeConsentBtn{text-align:center}
}

/* =====================================================================
   ТЕЛО СТРАНИЦЫ (по Figma «Партнёрам финальный»)
   ===================================================================== */
.wrap{max-width:1600px;margin:0 auto;padding:0 clamp(20px,4vw,60px)}

/* универсальная «таблетка»-кнопка */
.tab{display:inline-flex;align-items:center;justify-content:center;padding:0 clamp(18px,1.6vw,26px);height:clamp(50px,3.4vw,65px);border-radius:14px;font-weight:500;font-size:clamp(17px,1.6vw,30px);color:#fff;border:none;cursor:pointer;line-height:1;text-align:center}
.tab--dark{background:#373737}

.tab--teal{background:#0c6781}


/* ---------------- ГЕРОЙ ---------------- */
.hero{position:relative;overflow:hidden;background:#111 50% 12%/cover no-repeat;background-image:url('assets/img/named/hero-bg.webp');display:flex;align-items:flex-end;min-height:min(953px,49.6vw)}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.55) 30%,rgba(0,0,0,.15) 62%,rgba(0,0,0,.28) 100%)}
.hero__inner{position:relative;z-index:2;width:100%;padding-top:clamp(150px,20vw,300px);padding-bottom:clamp(50px,7vw,110px)}
.hero__title{font-size:clamp(30px,3.05vw,54px);font-weight:700;text-transform:uppercase;line-height:1.14;color:#fff;letter-spacing:.3px}
.hero__sub{margin-top:clamp(16px,1.6vw,26px);font-size:clamp(18px,1.95vw,37px);font-weight:400;color:#fff;line-height:1.22}
.hero__pills{margin-top:clamp(24px,2.6vw,44px);display:flex;gap:14px;flex-wrap:wrap}

/* ---------------- БЛОК 2 — что получает партнёр ---------------- */
.features{background:#e7e9ea center/cover no-repeat;background-image:url('assets/img/named/b2-bg.webp');color:#202020;padding:clamp(46px,5.4vw,104px) 0}
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;grid-auto-rows:clamp(112px,7.45vw,143px)}
.fcard{position:relative;border-radius:16px;overflow:hidden;background:linear-gradient(145deg,#232323,#151515);padding:clamp(16px,1.5vw,24px);display:flex;flex-direction:column;justify-content:flex-end;color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.18)}
.fcard__t{position:relative;z-index:3;font-size:clamp(14px,1.12vw,21px);font-weight:700;text-transform:uppercase;line-height:1.12}
/* крупная иконка-«водяной знак», уходящая за верхне-правый угол (как в Figma) */
.fcard__ic{position:absolute;height:auto;z-index:2;pointer-events:none}
/* мягкий световой ореол под иконкой */
.fcard--a::after,.fcard--c::after,.fcard--e::after,.fcard--h::after{content:"";position:absolute;top:-45%;right:-12%;width:66%;height:200%;background:radial-gradient(closest-side,rgba(255,255,255,.13),transparent 72%);z-index:1;pointer-events:none}
.fcard--a .fcard__ic{width:47%;right:2%;top:-5%;transform:rotate(-30deg);opacity:.3}
.fcard--c .fcard__ic{width:41%;right:1.5%;top:9%;transform:rotate(3deg);opacity:.36}
.fcard--e .fcard__ic{width:45%;right:2%;top:-3%;transform:rotate(-34deg);opacity:.28}
.fcard--h .fcard__ic{width:38%;right:1%;top:-30%;transform:rotate(-4deg);opacity:.32}
.fcard__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.fcard--photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.88) 8%,rgba(0,0,0,.25) 55%,rgba(0,0,0,.15));z-index:1}
.fcard--a{grid-column:1;grid-row:1}
.fcard--b{grid-column:2;grid-row:1}
.fcard--c{grid-column:3;grid-row:1}
.fcard--method{grid-column:1;grid-row:2/span 2}
.fcard--e{grid-column:2;grid-row:2}
.fcard--crm{grid-column:3;grid-row:2/span 3}
.fcard--leadgen{grid-column:2;grid-row:3/span 2}
.fcard--h{grid-column:1;grid-row:4}
.fcard--wide{grid-column:1/span 3;grid-row:5}
.fcard--crm .fcard__bg{object-position:center 42%}
.fcard--method .fcard__bg{object-position:center 85%}
/* широкая карточка — фото клавиатуры с AI-клавишей справа */
.fcard--wide{overflow:hidden;justify-content:center}
.fcard--wide .fcard__t{max-width:54%}
.fcard__kb{position:absolute;right:-2%;top:50%;transform:translateY(-50%);height:340%;width:auto;max-width:none;z-index:1;pointer-events:none}
.fcard--wide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#141414 26%,rgba(20,20,20,.55) 45%,rgba(20,20,20,0) 68%);z-index:2}

/* личный кабинет */
.cabinet{margin-top:clamp(40px,5vw,90px);display:grid;grid-template-columns:1.06fr 1fr;gap:clamp(24px,3vw,50px);align-items:center}
.cabinet__title{font-size:clamp(26px,3vw,47px);font-weight:400;text-transform:uppercase;color:#373737;line-height:1.14}
.cabinet__title b{font-weight:700}
.cabinet__pills{margin-top:clamp(20px,2.4vw,40px);display:flex;flex-direction:column;gap:12px;max-width:760px}
.cpill-row{display:flex;flex-wrap:nowrap;gap:12px}
.cpill{background:#6faaae;color:#fff;border-radius:26px;padding:8px clamp(14px,1.1vw,19px);font-size:clamp(14px,1.15vw,22px);font-weight:500;white-space:nowrap}
.cabinet__btn{margin-top:clamp(22px,2.4vw,38px)}
.cabinet__media img{width:100%;filter:drop-shadow(0 30px 50px rgba(0,0,0,.25))}

/* ---------------- БЛОК 3 — города + истории ---------------- */
.cities{background:#202020;padding:clamp(50px,6vw,96px) 0 0}
.cities__cloud{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,1vw,16px);max-width:1360px;margin:0 auto}
.cchip{background:rgba(255,255,255,.16);border-radius:30px;padding:clamp(9px,.9vw,14px) clamp(18px,1.8vw,32px);font-size:clamp(17px,1.6vw,30px);font-weight:500;color:#fff}
.city-check{margin:clamp(26px,3vw,50px) auto 0;max-width:1100px;background:rgba(255,255,255,.12);border-radius:18px;padding:clamp(16px,1.6vw,26px) clamp(24px,3vw,48px);display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.city-check__q{font-size:clamp(20px,2vw,37px);font-weight:700;text-transform:uppercase;color:#fff}
.city-check__choices{display:flex;gap:12px;margin-left:auto}
.city-check__choice{background:rgba(106,170,172,.19);color:#56b4c0;border:none;border-radius:24px;padding:9px clamp(18px,1.6vw,28px);font-size:clamp(16px,1.3vw,25px);font-weight:500;transition:.15s}

.city-check__choice.is-active{background:#56b4c0;color:#fff}
.city-check__arrow{color:#fff;display:inline-flex;flex:none}
.stories{margin-top:clamp(36px,4.5vw,80px)}
.stories__track{display:flex;gap:clamp(14px,1.4vw,26px);overflow-x:auto;padding:0 clamp(20px,4vw,60px) 22px;scroll-snap-type:x mandatory;touch-action:pan-x}
.stories__track::-webkit-scrollbar{height:8px}
.stories__track::-webkit-scrollbar-thumb{background:#444;border-radius:4px}
.story{flex:0 0 clamp(230px,19.6vw,377px);aspect-ratio:377/445;border-radius:24px;overflow:hidden;scroll-snap-align:start;background:#2a2a2a}
.story img{width:100%;height:100%;object-fit:cover}

/* ---------------- БЛОК 4 — показатели / получить ---------------- */
.promo{background:#202020;padding:clamp(40px,5vw,80px) 0}
.promo__card{position:relative;border-radius:36px;overflow:hidden;background:#d7dadb center/cover no-repeat;background-image:url('assets/img/named/b4-card.webp');min-height:clamp(280px,40vw,771px);display:flex}
.promo__left{position:relative;z-index:2;padding:clamp(28px,3.8vw,72px);display:flex;flex-direction:column;justify-content:space-between;gap:24px;flex:1;max-width:55%}
.promo__title{font-size:clamp(24px,3vw,47px);font-weight:700;text-transform:uppercase;color:#202020;line-height:1.14}
.promo__cta{display:flex;align-items:center;gap:clamp(16px,2vw,30px);flex-wrap:wrap}
.promo__note{font-size:clamp(18px,1.9vw,36px);color:#202020;font-weight:500;line-height:1.1}
.promo__media{position:absolute;right:0;top:0;height:100%;display:flex;align-items:flex-end;justify-content:flex-end;z-index:1;pointer-events:none}
.promo__media img{height:100%;width:auto;object-fit:contain;object-position:right bottom}

/* ---------------- БЛОК 5 — фокус (воронка = точный SVG из Figma) ---------------- */
.focus{background:#202020;padding:clamp(50px,6vw,96px) 0;overflow:hidden}
.focus__inner{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:clamp(18px,2.4vw,44px);align-items:stretch;justify-content:center}
.focus__labels{display:flex;flex-direction:column;gap:clamp(34px,3.6vw,55px);text-align:right;padding-top:clamp(90px,9.5vw,145px)}
.focus__label{font-size:clamp(18px,1.9vw,30px);font-weight:700;text-transform:uppercase;color:#fff;line-height:1.06}
.focus__label--dim{opacity:.5}
.funnel{display:flex;justify-content:center;align-items:flex-start}
.funnel__svg{height:clamp(440px,46vw,690px);width:auto;max-width:100%;display:block}
.focus__text{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;gap:clamp(28px,3.2vw,50px);padding-bottom:clamp(40px,6vw,110px)}
.focus__line{font-size:clamp(21px,2.3vw,35px);font-weight:700;text-transform:uppercase;color:#fff;line-height:1.22;width:max-content;max-width:100%;text-align:right}
.focus__grad{background:linear-gradient(90deg,#6da8ad,#0c6781);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------------- БЛОК 6 — медиа ---------------- */
.media{background:#202020;padding:clamp(40px,5vw,72px) 0}
.media__title{font-size:clamp(38px,5vw,56px);font-weight:700;text-transform:uppercase;background:linear-gradient(90deg,#6faaae,#0c6781);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:clamp(20px,2.4vw,36px)}
.media__scroller{overflow-x:auto;padding-bottom:14px;touch-action:pan-x}
.media__scroller::-webkit-scrollbar{height:8px}
.media__scroller::-webkit-scrollbar-thumb{background:#444;border-radius:4px}
.media__track{display:flex;gap:clamp(14px,1.4vw,24px);padding:0 clamp(20px,4vw,60px);width:max-content}
.mcard{position:relative;flex:0 0 clamp(240px,17.6vw,339px);aspect-ratio:339/446;border-radius:14px;overflow:hidden;display:flex;align-items:flex-end}
.mcard--wide{flex-basis:clamp(420px,41vw,789px);aspect-ratio:789/444}
.mcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mcard--founder img{object-position:center}
.mcard::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,0) 58%)}
.mcard__cap{position:relative;z-index:2;padding:clamp(16px,1.6vw,24px);font-size:clamp(15px,1.2vw,22px);font-weight:700;text-transform:uppercase;color:#fff;line-height:1.12}

/* ---------------- БЛОК 7 — эксперт ---------------- */
.expert{position:relative;overflow:hidden;background:#202020;padding:clamp(44px,5vw,80px) 0 clamp(130px,13.9vw,235px)}
.expert__inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:clamp(14px,1.5vw,30px);max-width:1080px;margin:0 auto}
.expert__avatar{flex:0 0 auto;width:clamp(67px,6.3vw,105px);height:clamp(67px,6.3vw,105px);border-radius:50%;overflow:hidden;border:2px solid #6faaae;background:#333}
.expert__avatar img{width:100%;height:100%;object-fit:cover;object-position:top center}
.expert__avatar--placeholder{display:flex;align-items:center;justify-content:center;background:#3a3a3a;color:#8f8f8f}
.expert__avatar--placeholder svg{width:60%;height:60%}
.expert__name{font-size:clamp(15px,1.6vw,26px);font-weight:600;color:#fff}
.expert__role{font-size:clamp(10px,1.05vw,19px);color:#fff;margin-top:3px}
.expert__quote{font-size:clamp(11px,1.15vw,22px);color:#fff;margin-top:clamp(8px,0.85vw,13px);line-height:1.1;font-weight:400}
.expert__btns{display:flex;flex-wrap:wrap;gap:clamp(6px,0.6vw,10px);margin-top:clamp(10px,1vw,15px)}
.expert__tg{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(90deg,#6faaae,#0c6781);color:#fff;border-radius:100px;padding:clamp(6px,0.6vw,9px) clamp(14px,1.4vw,22px);font-size:clamp(11px,1.05vw,20px);font-weight:400}
.expert__tg svg,.expert__tg img{flex:none;width:clamp(13px,1vw,17px);height:auto}
.expert__max img{width:clamp(13px,0.95vw,17px);height:auto}

/* ---------------- АДАПТИВ ---------------- */
@media (max-width:900px){
  .hero__inner{padding-top:clamp(120px,34vw,180px)}
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:120px}
  .fcard--a{grid-column:1;grid-row:1}.fcard--b{grid-column:2;grid-row:1}
  .fcard--c{grid-column:1;grid-row:2}.fcard--e{grid-column:2;grid-row:2}
  .fcard--method{grid-column:1;grid-row:3/span 2}.fcard--crm{grid-column:2;grid-row:3/span 2}
  .fcard--leadgen{grid-column:1/span 2;grid-row:5/span 2}
  .fcard--h{grid-column:1/span 2;grid-row:7}
  .fcard--wide{grid-column:1/span 2;grid-row:8}
  .cabinet{grid-template-columns:1fr;gap:30px}
  .promo__card{flex-direction:column;min-height:0}
  .promo__left{max-width:100%}
  .promo__media{position:relative;width:100%;height:auto;padding:0 20px 24px;justify-content:center}
  .promo__media img{width:100%;height:auto;max-width:560px}
  .focus__inner{grid-template-columns:1fr;gap:22px;justify-items:center}
  .focus__labels{flex-direction:row;flex-wrap:wrap;justify-content:center;text-align:center;padding-top:0;gap:24px}
  .funnel{order:1}
  .funnel__svg{height:auto;width:min(430px,82vw)}
  .focus__text{padding-bottom:0;text-align:center;order:2;align-items:center}
  .focus__line{width:auto;text-align:center}
  .expert__inner{flex-direction:column;text-align:center;align-items:center}
  .expert__btns{justify-content:center}
  .city-check__choices{margin-left:0}
  .city-check{justify-content:center}
}
@media (max-width:560px){
  .cpill-row{flex-wrap:wrap}
  .bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .fcard{min-height:120px}
  .fcard--a,.fcard--b,.fcard--c,.fcard--e,.fcard--h,.fcard--method,.fcard--crm,.fcard--leadgen,.fcard--wide{grid-column:1;grid-row:auto}
  .fcard--photo{min-height:180px}
}

/* =====================================================================
   МОДАЛКА «Обсудим открытие» (да / нет из блока «нашёл свой город?»)
   ===================================================================== */


.city-modal{display:none;position:fixed;inset:0;z-index:100060;padding:20px;align-items:center;justify-content:center}
.city-modal.is-open{display:flex}
.city-modal__overlay{position:absolute;inset:0;background:#0009}
.city-modal__card{position:relative;width:303px;height:390px;max-width:100%;max-height:calc(100dvh - 40px);overflow:auto;border-radius:10.235px;color:#fff;background:radial-gradient(ellipse 561px 722px at center,#55b5c4 0%,#318ea3 50%,#1e7b92 75%,#0c6781 100%);flex:none}
.city-modal__texture{position:absolute;inset:0;width:303px;height:390px;opacity:.12;background:url('assets/popups/map-lines.webp') 0 0/100% 100% no-repeat;pointer-events:none}
.city-modal__shade{position:absolute;inset:0;background:linear-gradient(90deg,transparent 64.87%,#0c6781 169.26%),linear-gradient(#0c6781,transparent 55.13%),linear-gradient(0deg,#0c6781,transparent 53.59%);pointer-events:none}
.city-modal__close{position:absolute;right:5px;top:3px;border:0;background:none;color:#fff;font-size:18px;z-index:3;line-height:1}
.city-modal__title{position:absolute;top:34px;left:0;width:100%;text-align:center;font-size:21.895px;font-weight:600;line-height:1.063;text-transform:uppercase}
.city-modal__title em{display:block;margin-top:4.3px;font-size:19.913px;font-weight:400;white-space:nowrap}
.city-modal__desc{position:absolute;top:89.81px;left:45px;width:212.683px;font-size:10.499px;line-height:1.063;text-align:center}
.city-modal__map{position:absolute;inset:0;pointer-events:none}
.city-modal__region{position:absolute;left:101px;top:136px;transform:rotate(-8.53deg)}
.city-modal__glow{position:absolute;left:119.17px;top:163.88px}
.city-modal__shield{position:absolute;left:144.28px;top:185.48px;transform:rotate(-1deg)}
.city-modal__form{position:absolute;left:40px;top:246px;width:222.429px;display:flex;flex-direction:column;gap:7.98px}
.city-modal__input{width:100%;height:28.421px;border:0;border-radius:6.179px;background:#ffffff7a;color:white;padding:0 10px;font:500 13.593px Montserrat,sans-serif}
.city-modal__input::placeholder{color:white;opacity:1}
.city-modal__consent{display:flex;align-items:center;gap:3.2px;margin-top:-.7px;white-space:nowrap;font-size:8.62px;font-weight:500;line-height:1.063}
.city-modal__consent input{appearance:none;width:8.595px;height:8.595px;border:.752px solid white;border-radius:2.149px;margin:0;flex:none}
.city-modal__consent input:checked{background:white;box-shadow:inset 0 0 0 2px #0c6781}
.city-modal__submit{height:28.421px;margin-top:7px;border:0;border-radius:6.179px;background:white;color:#0c6781;font:600 14.707px Montserrat,sans-serif;text-transform:uppercase}
.city-modal__status{position:relative;margin-top:390px;padding:8px;background:#0c6781;font-size:12px;text-align:center}
.city-modal__card--metrics{width:273px;height:166px;border-radius:7.932px;background:radial-gradient(ellipse 506px 308px at center,#55b5c4,#318ea3 50%,#1e7b92 75%,#0c6781)}
.city-modal__card--metrics .city-modal__title,.city-modal__card--metrics .city-modal__desc,.city-modal__card--metrics .city-modal__map,.city-modal__card--metrics .city-modal__texture{display:none}
.city-modal__card--metrics .city-modal__shade{background:linear-gradient(90deg,#0c6781 -6.23%,transparent 44.59%),linear-gradient(90deg,transparent 65.44%,#0c6781 125.9%)}
.city-modal__card--metrics .city-modal__form{left:12.5px;top:13.8px;width:248.046px;gap:8.9px}
.city-modal__card--metrics .city-modal__input{height:31.695px;font-size:15.158px;border-radius:6.89px}
.city-modal__card--metrics .city-modal__consent{font-size:9.613px;gap:3.6px}
.city-modal__card--metrics .city-modal__consent input{width:9.585px;height:9.585px}
.city-modal__card--metrics .city-modal__submit{height:31.695px;font-size:16.4px;border-radius:6.89px;margin-top:7.5px}
.city-modal__card--metrics .city-modal__status{margin-top:166px}
body.city-modal-open{overflow:hidden}

.city-modal__input:focus-visible{outline:1px solid #fff;outline-offset:1px}

/* Десктоп: заливки кнопок из мобильного макета */
@media (min-width:901px){
  .hero__pills .tab--dark{background:#fff;color:#0c6781}

  .hero__pills .tab--teal,.cabinet__btn{background:linear-gradient(90deg,#0c6781,#6faaae);color:#fff}

}
/* Keep dialogs inside Safari's visual viewport when browser bars or the keyboard change. */
.city-modal{inset:auto;top:var(--modal-top,0px);left:var(--modal-left,0px);width:var(--modal-width,100%);height:var(--modal-height,100dvh);padding:16px;overscroll-behavior:contain}
.city-modal__card{max-height:calc(var(--modal-height,100dvh) - 32px);overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-padding-top:32px;scroll-padding-bottom:12px}
.city-modal__close{position:sticky;top:0;right:auto;float:right;width:44px;height:32px;margin-right:4.5px;display:flex;align-items:center;justify-content:center;padding:0;z-index:4}
.city-modal__card--metrics{height:189px}
.city-modal__card--metrics .city-modal__form{top:29.8px}
.city-modal__card--metrics .city-modal__status{margin-top:189px}
.city-modal__card--metrics .city-modal__close{width:32px;height:24px;margin-right:0}
@media(max-width:600px){
  /* Safari zooms fields smaller than 16px, moving and clipping the dialog. */
  .city-modal__input,.city-modal__card--metrics .city-modal__input{font-size:16px}
}
@media(max-width:600px){
  .city-modal--compact .city-modal__card:not(.city-modal__card--metrics){height:278px}
  .city-modal--compact .city-modal__card:not(.city-modal__card--metrics) .city-modal__map{display:none}
  .city-modal--compact .city-modal__card:not(.city-modal__card--metrics) .city-modal__title{top:25px}
  .city-modal--compact .city-modal__card:not(.city-modal__card--metrics) .city-modal__desc{top:81px}
  .city-modal--compact .city-modal__card:not(.city-modal__card--metrics) .city-modal__form{top:126px}
  .city-modal--compact .city-modal__card:not(.city-modal__card--metrics) .city-modal__status{margin-top:278px}
}
/* Match the mobile fill on the efficiency CTA. */
.promo__btn{background:linear-gradient(98deg,#6faaae,#006580)}

/* Motion follows the credit-holidays page: fade .9s, card rise .5s, stagger 120ms. */
.motion-pending{opacity:0}
.motion-visible{animation:partnerFadeIn .9s ease both;animation-delay:var(--reveal-delay,0ms)}
.motion-card.motion-visible{animation-name:partnerCardIn;animation-duration:.5s;animation-timing-function:ease-out}
@keyframes partnerFadeIn{from{opacity:0}to{opacity:1}}
@keyframes partnerCardIn{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
.city-modal.is-open .city-modal__card{animation:partnerPopupIn .24s cubic-bezier(.2,.7,.2,1) both}
@keyframes partnerPopupIn{from{opacity:0;translate:0 12px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
@media(hover:hover) and (pointer:fine){
  .fcard{transition:scale .25s ease,box-shadow .25s ease}
  .fcard:hover{scale:1.02;box-shadow:0 10px 34px #00475b26;z-index:4}
}
/* Desktop hover: gently enlarge the whole card frame (not the photo inside). */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .story,.mcard{transition:transform .3s ease,box-shadow .3s ease;transform-origin:center}
  .story:hover,.mcard:hover{transform:scale(1.04);box-shadow:0 10px 28px rgba(0,71,91,.22);z-index:4}
}
/* Vertical breathing room so a hovered card's enlarged frame, gradient and shadow
   are not clipped by the rails' overflow. Negative margins keep the layout in place. */
@media(hover:hover) and (pointer:fine){
  .stories__track,.media__scroller{padding-top:28px;padding-bottom:40px;margin-top:-28px;margin-bottom:-28px}
}
@media(prefers-reduced-motion:reduce){
  .motion-pending{opacity:1!important}
  .motion-visible,.city-modal.is-open .city-modal__card{animation:none!important}
  .fcard{transition:none!important}
  .fcard:hover{scale:1;translate:0 0}
  html{scroll-behavior:auto}
}
@media(min-width:601px){
  .stories__track{scrollbar-width:none;scroll-snap-type:x proximity}
  .stories__track::-webkit-scrollbar{display:none}
}
/* A picture wrapper must inherit the monitor slot height, not its intrinsic image height. */
@media(min-width:901px){
  .promo__media picture{display:block;height:100%}
  .promo__media img{display:block;height:100%;width:auto;max-width:none}
}
@media(min-width:601px){
  .media__scroller{scrollbar-width:none}
  .media__scroller::-webkit-scrollbar{display:none}
}
/* Desktop contact block uses the same content and centered layout as mobile. */
@media(min-width:601px){
  .expert__avatar,.expert__name,.expert__role{display:none}
  .expert__body{text-align:center}
  .expert__quote .desktop-only{display:none!important}
  .expert__quote .mobile-only{display:block}
  .expert__quote{margin-top:0}
  .expert__btns{justify-content:center}
  .expert{padding:clamp(44px,5vw,80px) 0}
}
@media(min-width:601px){
  .expert{padding-top:clamp(64px,5vw,96px);padding-bottom:clamp(96px,8vw,154px)}
  .expert__quote{font-size:clamp(22px,2.1vw,40px);line-height:1.2;font-weight:400}
  .expert__btns{gap:16px;margin-top:28px}
  .expert__tg{font-size:clamp(20px,1.6vw,30px);padding:14px 30px;gap:10px}
  .expert__tg svg,.expert__tg img{width:24px;height:24px}
}

/* Iceberg: one geometry, two clipped strokes; no decorative lighting. */
.iceberg-outline{fill:none;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.iceberg-waterline{stroke-width:3.5;stroke-linecap:round;transform-box:view-box;transform-origin:50% 28.479%;}
.iceberg-around{display:inline-block;max-width:100%}
.iceberg-mobile-svg{position:absolute;inset:0;width:230.893px;height:330.926px;overflow:visible}
.iceberg-motion-ready .focus:not([data-iceberg-state="complete"]) .iceberg-outline,
.iceberg-motion-ready .focus:not([data-iceberg-state="complete"]) .iceberg-waterline,
.iceberg-motion-ready .focus:not([data-iceberg-state="complete"]) .funnel__svg text,
.iceberg-motion-ready .focus:not([data-iceberg-state="complete"]) .funnel__label,
.iceberg-motion-ready .focus:not([data-iceberg-state="complete"]) .iceberg-around{opacity:0}
@media(max-width:600px){
  .funnel__label--team,.funnel__label--control{color:#909090;opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .iceberg-motion-ready .focus .iceberg-outline,.iceberg-motion-ready .focus .iceberg-waterline,
  .iceberg-motion-ready .focus .funnel__svg text,.iceberg-motion-ready .focus .funnel__label,
  .iceberg-motion-ready .focus .iceberg-around{opacity:1}
  .iceberg-motion-ready .focus .focus__label--dim{opacity:.5}
}
/* Clip the existing text gradient on each animated line rather than its parent. */
.focus__line--head .focus__grad>.iceberg-around{background:linear-gradient(90deg,#6da8ad,#0c6781);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Responsive media player, opened only by the three video cards. */
.media-player{width:min(960px,calc(100vw - 24px));max-width:960px;max-height:calc(100dvh - 24px);margin:auto;padding:16px;border:0;border-radius:16px;background:#202020;color:#fff;overflow:auto}
.media-player::backdrop{background:rgba(0,0,0,.85)}
.media-player__header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.media-player__header h2{font:600 18px/1.3 Montserrat,sans-serif;margin:0}
.media-player__close{flex:0 0 44px;width:44px;height:44px;border:0;border-radius:50%;background:#383838;color:white;font-size:32px;cursor:pointer}
.media-player__content video{display:block;width:100%;max-height:calc(100dvh - 130px);background:#000}
.media-player__content iframe{display:block;width:100%;aspect-ratio:16/9;max-height:calc(100dvh - 130px);border:0;background:#000}
.media-player__error{font-size:14px;line-height:1.5}
.media-player__error a{color:#6da8ad;text-decoration:underline}
.mcard[data-media-player]{cursor:pointer}
@media(max-width:600px){.media-player{padding:12px}.media-player__header h2{font-size:14px}}

/* Desktop forms — Figma 860:1317, 860:1345 and 860:1373. */
.city-modal__desktop-art,.city-modal__desktop-monitor{display:none}
@media(min-width:601px){
 .city-modal__card,.city-modal__card--metrics{container-type:inline-size;width:min(958.357px,calc(100vw - 48px),calc((100dvh - 48px)*2.036));height:auto;aspect-ratio:958.357/470.712;border-radius:18.625px;overflow:hidden;background:radial-gradient(ellipse 185.31cqw 91.017cqw at center,#55b5c4,#318ea3 50%,#1e7b92 75%,#0c6781)}
 .city-modal__texture{width:100%;height:100%;background:url('assets/popups/desktop-map.webp') 24.53% 66.34%/254.23% 333.75% no-repeat;filter:invert(1);opacity:.12}
 .city-modal__shade{background:linear-gradient(90deg,transparent 27.76%,#0c6781 100%),linear-gradient(90deg,transparent 43.78%,#0c6781 103.84%);z-index:1}
 .city-modal__map{display:none}
 .city-modal__desktop-art{display:block;position:absolute;inset:0;pointer-events:none}
 .city-modal__desktop-region{position:absolute;left:11%;top:19.98%;width:25.37%;height:auto;transform:rotate(-8.53deg)}
 .city-modal__desktop-glow{position:absolute;left:15.55%;top:32.28%;width:15.14%;height:auto}
 .city-modal__desktop-shield{position:absolute;left:21.52%;top:42.73%;width:3.12%;height:auto;transform:rotate(-1deg)}
 .city-modal__title{top:16.89%;left:34.25%;width:56.45%;font-size:4.762cqw;line-height:1.063;text-align:right;z-index:2}
 .city-modal__title em{margin-top:1.02cqw;font-size:4.331cqw;line-height:1.063}
 .city-modal__desc{top:72.87%;left:5.837%;width:42.55%;font-size:2.1cqw;line-height:1.063;text-align:left;z-index:2}
 .city-modal__form{left:55.3%;top:46.91%;width:35.33%;gap:1.267cqw;z-index:2}
 .city-modal__input{height:4.514cqw;border-radius:.981cqw;font-size:2.159cqw;padding:0 1.543cqw}
 .city-modal__consent{font-size:1.369cqw;gap:.5cqw;margin-top:-.13cqw;line-height:1.063}
 .city-modal__consent input{width:1.367cqw;height:1.367cqw;border-width:1.145px;border-radius:.341cqw}
 .city-modal__submit{height:4.514cqw;border-radius:.981cqw;font-size:2.336cqw;margin-top:1.05cqw}
 .city-modal__close,.city-modal__card--metrics .city-modal__close{position:absolute;float:none;top:1.2%;right:2.28%;width:44px;height:44px;margin:0;z-index:4}
 .city-modal__status,.city-modal__card--metrics .city-modal__status{position:absolute;bottom:1%;left:5%;width:90%;margin:0;padding:4px;z-index:3;font-size:12px}
 .city-modal__card--metrics .city-modal__desktop-art{display:none}
 .city-modal__card--metrics{background:radial-gradient(ellipse 185.31cqw 91.017cqw at center,#55b5c4,#318ea3 50%,#1e7b92 75%,#0c6781)}
 .city-modal__card--metrics .city-modal__desktop-monitor{display:block;position:absolute;left:57.18%;top:-12.96%;width:77.01%;height:133.3%;overflow:hidden}
 .city-modal__desktop-monitor img{position:absolute;left:-13.36%;top:0;width:113.36%;height:100%;max-width:none}
 .city-modal__card--metrics .city-modal__shade{z-index:1;background:linear-gradient(90deg,#0c6781 -4.07%,transparent 34.75%),linear-gradient(90deg,transparent 71.9%,#0c6781 106.85%)}
 .city-modal__card--metrics .city-modal__form{left:6.156%;top:25.07%;width:43.785%;gap:1.571cqw}
 .city-modal__card--metrics .city-modal__input{height:5.595cqw;font-size:2.676cqw;border-radius:1.216cqw;padding:0 1.8cqw}
 .city-modal__card--metrics .city-modal__consent{font-size:1.697cqw;gap:.529cqw;margin-top:-.13cqw}
 .city-modal__card--metrics .city-modal__consent input{width:1.692cqw;height:1.692cqw;border-radius:.423cqw}
 .city-modal__card--metrics .city-modal__submit{height:5.595cqw;font-size:2.895cqw;border-radius:1.216cqw;margin-top:1.32cqw}
}

/* Shared button feedback; resting geometry and typography remain component-owned. */
:root{--button-duration:220ms;--button-easing:cubic-bezier(.22,1,.36,1);--button-lift:-2px;--button-shadow-rgb:12,103,129;--button-shadow-alpha:.45;--button-focus:#56b4c0;--button-light-hover-text:#0a566b;--button-dark:#0c6781;--button-light:#6faaae}
.ui-button{cursor:pointer;transition:transform var(--button-duration) var(--button-easing),box-shadow var(--button-duration) var(--button-easing),background-position var(--button-duration) var(--button-easing),background-color var(--button-duration) var(--button-easing),color var(--button-duration) var(--button-easing)}
.ui-button.ui-button--gradient{--button-angle:90deg;--button-rest:100% 50%;--button-hover:0% 50%;background-image:linear-gradient(var(--button-angle),var(--button-dark) 0%,var(--button-dark) 50%,var(--button-light) 100%);background-size:200% 100%;background-position:var(--button-rest)}
.ui-button.ui-button--gradient-reverse{--button-rest:0% 50%;--button-hover:100% 50%;background-image:linear-gradient(var(--button-angle),var(--button-light) 0%,var(--button-dark) 50%,var(--button-dark) 100%)}
.promo__btn.ui-button{--button-angle:98deg;--button-dark:#006580}
.expert__tg.ui-button{--button-shadow-alpha:.6}
.hero__pills .ui-button,.city-check .ui-button,.mpr-site-footer .ui-button{--button-shadow-alpha:.6}
.ui-button--messenger>svg,.ui-button--messenger>img{transition:transform var(--button-duration) var(--button-easing)}
.ui-button--icon{display:inline-flex;border-radius:50%}
.close.ui-button{border:0;background:none;padding:0}
.ui-button:focus-visible{outline:2px solid var(--button-focus);outline-offset:3px}
@media(hover:hover) and (pointer:fine){
 .ui-button:not(:disabled):hover{transform:translateY(var(--button-lift));box-shadow:0 8px 20px -6px rgba(var(--button-shadow-rgb),var(--button-shadow-alpha))}
 .ui-button--light:not(:disabled):hover{background-color:#fff;color:var(--button-light-hover-text)}
 .ui-button--gradient:not(:disabled):hover{background-position:var(--button-hover)}
 .ui-button--choice:not(:disabled):hover{background-color:rgba(106,170,172,.34)}
 .ui-button--control:not(:disabled):hover{color:var(--button-focus)}
 .ui-button--telegram:hover>svg{transform:translate(2px,-2px)}
 .ui-button--max:hover>img{transform:scale(1.1)}
}
.ui-button:not(:disabled):active{transform:translateY(0) scale(.98);box-shadow:0 3px 8px -4px rgba(var(--button-shadow-rgb),var(--button-shadow-alpha));transition-duration:100ms}
@media(prefers-reduced-motion:reduce){
 .ui-button:not(:disabled):hover,.ui-button:not(:disabled):active{transform:none}
 .ui-button--messenger:hover>svg,.ui-button--messenger:hover>img{transform:none}
}
@media(prefers-reduced-motion:reduce) and (hover:hover) and (pointer:fine){
 .ui-button--gradient:not(:disabled):hover{background-position:var(--button-rest);background-color:var(--button-dark);background-image:none}
}

/* Gentle city-label hover without changing the flex layout. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .cchip,.cabinet__pills .cpill{transition:transform 220ms cubic-bezier(.22,1,.36,1);transform-origin:center}
 .cchip:hover,.cabinet__pills .cpill:hover{transform:scale(1.04)}
}

/* Story viewer, matching the about-company gallery. */
button.story{padding:0;border:0;text-align:inherit;cursor:pointer}
@media(min-width:601px){button.story{cursor:default}}
button.story:focus-visible{outline:2px solid var(--button-focus);outline-offset:3px}
.photo-viewer{position:fixed;inset:0;width:min(92vw,420px);height:min(98dvh,730px);max-width:none;max-height:none;margin:auto;padding:0;border:0;border-radius:20px;background:#101719;color:white;overflow:hidden;overscroll-behavior:contain;box-shadow:0 12px 40px #0006}
.photo-viewer{touch-action:pan-y pinch-zoom}
.photo-viewer::backdrop{background:#0009}
.photo-viewer__bar{position:absolute;inset:20px 10px auto;z-index:4;display:flex;justify-content:flex-end;pointer-events:none}
.photo-viewer__count{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.photo-viewer__close{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:white;font:400 28px/1 Montserrat,sans-serif;pointer-events:auto}
.photo-viewer__stage{position:absolute;inset:0;touch-action:pan-y pinch-zoom;user-select:none}
.photo-viewer__image{display:block;width:100%;height:100%;object-fit:cover;user-select:none}
.photo-viewer__progress{position:absolute;top:0;left:0;right:0;z-index:4;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;padding:14px 16px 0;pointer-events:none}
.photo-viewer__segment{height:3px;border-radius:999px;overflow:hidden;background:#ffffff59}
.photo-viewer__segment span{display:block;height:100%;background:#0c6781;transform:scaleX(0);transform-origin:left}
.photo-viewer__prev,.photo-viewer__next{position:absolute;top:30%;height:40%;width:35%;z-index:3;display:flex;align-items:center;border:0;background:transparent;color:white;font:400 36px/1 sans-serif;cursor:pointer}
.photo-viewer__prev{left:0;justify-content:flex-start;padding-left:14px}.photo-viewer__next{right:0;justify-content:flex-end;padding-right:14px}
.photo-viewer__chevron{width:22px;height:22px;fill:currentColor;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));pointer-events:none}
.photo-viewer__prev .photo-viewer__chevron{transform:scaleX(-1)}
.photo-viewer .ui-button:hover,.photo-viewer .ui-button:active{transform:none;box-shadow:none;color:white}
@media(min-width:901px){.photo-viewer{width:clamp(360px,25vw,480px)}}
@media(max-width:600px),(hover:none) and (pointer:coarse){
  .photo-viewer__progress{display:none}
  .photo-viewer__bar{inset:14px 12px auto}
  .photo-viewer__close{width:52px;height:52px;font-size:44px}
}

/* Close icons from the updated desktop/mobile Figma modal frames. */
.city-modal__close{margin-right:0}
.city-modal__close-picture{position:absolute;top:11px;right:12.92px;display:block;line-height:0;pointer-events:none}
.city-modal__close-picture img{display:block;max-width:none}
.city-modal__card[data-kind="net"] .city-modal__close-picture{right:10.92383px}
.city-modal__card--metrics .city-modal__close{height:28px}
.city-modal__card--metrics .city-modal__close-picture{top:9px;right:11.84766px}
@media(min-width:601px){
 .city-modal__close,.city-modal__card--metrics .city-modal__close{width:44px;height:44px;top:calc(var(--close-center-y,7.75421%) - 22px);right:calc(var(--close-center-right,5.00068%) - 22px)}
 .city-modal__card[data-kind="net"]{--close-center-y:6.54802%;--close-center-right:4.97612%}
 .city-modal__card--metrics{--close-center-y:6.36616%;--close-center-right:3.48416%}
 .city-modal__close-picture,.city-modal__card[data-kind="net"] .city-modal__close-picture,.city-modal__card--metrics .city-modal__close-picture{position:static}
 .city-modal__close-picture img{width:21px;height:21px}
}

/* Larger mobile forms: scale the existing composition, retain viewport scrolling. */
@media(max-width:600px){
 .city-modal{padding:12px}
 .city-modal__card{zoom:var(--modal-scale,1);max-width:none;max-height:var(--modal-card-height,calc(100dvh - 24px))}
}

/* Composite the poster and shade before clipping rounded desktop card edges. */
@media(min-width:601px){
 .mcard{-webkit-mask-image:linear-gradient(#fff,#fff);mask-image:linear-gradient(#fff,#fff)}
 .mcard::after{inset:-1px;pointer-events:none}
}