/* ============================================================
   МАКСАТ · тема для квиз-посадок на движке НОВЫ
   Подключается ПОСЛЕ site.css (он взят с /nova-assets/ без правок).
   На <body> стоят оба класса: theme-nova (раскладка nova-business)
   и theme-maksat (цвета, шрифты и графика бренда «Максат»).
   Подложка белая, вязь из логотипа вшита в неё персиковым.
   Бренд: персиковый #DBAF9C, шоколадный #3A2119, карамель #B4917B,
   коричневый #97694E. Заголовки — Unbounded (вместо фирменного
   Benzin: файлов нет), текст — Montserrat.
   ============================================================ */

.theme-maksat{
  --font-ui:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Unbounded','Arial Black',system-ui,sans-serif;
  --bg:#FFFFFF;
  --bg-2:#FAF3EF;
  --bg-3:#F3E4DC;
  --line:rgba(58,33,25,.16);
  --txt:#3A2119;
  --dim:#6B4A3D;
  --paper:#3A2119;
  --accent:#3A2119;
  --accent-hi:#5A3A2E;
  --on-accent:#FFFFFF;
  --scrim:255,255,255;
  --card:#FFFFFF;
  --input-bg:#FBF6F3;
  --grain-opacity:0;
  --peach:#DBAF9C;
  --peach-soft:#F6E7DF;
  color-scheme:light;
}
body.theme-maksat{font-weight:500}

/* ---------- логотипы ---------- */
.theme-maksat .brand{align-items:center;gap:16px}
.brand__logo{height:84px;width:auto;flex:none;margin:-12px 0 -12px -14px}
.brand--compact .brand__logo{height:70px}
.theme-maksat .brand__sub{color:var(--dim);font-weight:600}
.theme-maksat .intro__dev-logo{height:20px}
.theme-maksat .intro__official{color:var(--dim);font-weight:600}
@media(max-width:700px){
  .brand__logo{height:64px}
  .theme-maksat .brand{align-items:flex-start;gap:6px}
  .theme-maksat .intro__dev-logo{height:14px}
}

/* ---------- вязь: не под текстом ----------
   На первом экране — белым поверх угла видео; в квизе и форме —
   персиковым в свободном углу экрана (только на десктопе). */
.theme-maksat .intro__content,
.theme-maksat .screen--quiz,
.theme-maksat .screen--form{position:relative;isolation:isolate;background-color:var(--bg)}
.theme-maksat .intro__media::after{
  content:"";position:absolute;z-index:1;pointer-events:none;
  left:-46px;top:-34px;width:min(380px,58%);aspect-ratio:402/322;
  background:url(img/vyaz_white.svg) no-repeat left top/contain;opacity:.92;
}
@media (min-width:1100px){
  .theme-maksat .screen--quiz::after,
  .theme-maksat .screen--form::after{
    content:"";position:absolute;z-index:-1;pointer-events:none;
    right:-70px;bottom:-60px;width:min(340px,24vw);aspect-ratio:402/322;
    background:url(img/vyaz_peach.svg) no-repeat right bottom/contain;opacity:.55;
  }
}

/* ---------- типографика ---------- */
.theme-maksat .slogan,
.theme-maksat .eyebrow{color:#97694E;font-weight:700}
.theme-maksat .intro__title,
.theme-maksat .quiz__question,
.theme-maksat .lead__title,
.theme-maksat .plans-band__title,
.theme-maksat .terms__title{font-weight:600;letter-spacing:-.025em}
/* ключевое слово — персиковым маркером */
.theme-maksat .intro__title .accent,
.theme-maksat .lead__title .accent{
  color:var(--paper);font-weight:600;background:var(--peach);padding:.02em .18em .06em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* ---------- два оффера: выгода и семейная ипотека ---------- */
.offers{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;
  gap:0;margin-top:clamp(16px,2.4vh,26px);max-width:720px;
}
.offer{
  background:var(--peach-soft);padding:clamp(12px,1.8vh,18px) clamp(14px,1.5vw,20px);
  display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;
  container-type:inline-size;
}
.offer--main{background:var(--paper);color:#fff}
.offers__or{
  align-self:center;justify-self:center;z-index:1;margin:0 -13px;
  width:44px;height:44px;border-radius:50%;display:grid;place-content:center;
  background:#fff;border:1px solid var(--line);
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
}
.offer__cap{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#97694E}
.offer--main .offer__cap{color:var(--peach)}
.offer__big{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.025em;line-height:1.05;white-space:nowrap;
  font-size:clamp(20px,2.05vw,29px);
}
/* ПСК и ставка — одним кеглем, ПСК выше */
.offer__law{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;line-height:1.18;
  font-size:clamp(11px,4.9cqw,16px);white-space:nowrap;
}
.offer__hl{background:var(--peach);color:var(--paper);padding:0 .22em}
.offer__sub{font-size:13.5px;font-weight:600;line-height:1.35;margin-top:3px}
.offer__sub b{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em}
.offer__note{font-size:11.5px;line-height:1.35;color:var(--dim)}
.offer--main .offer__note{color:rgba(255,255,255,.72)}
.offer sup{font-size:.55em;line-height:0;vertical-align:super}
@media(max-width:700px){
  .offers{grid-template-columns:minmax(0,1fr);gap:0}
  .offers__or{margin:-13px 0;width:40px;height:40px}
  .offer__big{font-size:26px}
  .offer__law{font-size:clamp(12px,4.6cqw,16px)}
}

/* ---------- чипы, кнопки ---------- */
.theme-maksat .chip{background:var(--bg-2);border-color:transparent;font-weight:600;color:var(--paper)}
.theme-maksat .btn{color:var(--accent);font-family:var(--font-display);font-weight:600;letter-spacing:.08em}
.theme-maksat .btn--primary,.theme-maksat .btn--submit{color:#fff}
.theme-maksat .btn--primary::before,.theme-maksat .btn--submit::before{background:#97694E}
.theme-maksat .btn--ghost{color:var(--dim);border-color:var(--line);font-family:var(--font-ui);letter-spacing:.14em}
.theme-maksat .btn--ghost::before{background:var(--bg-2)}
.theme-maksat .hint-quiz{color:var(--dim)}
.theme-maksat .hint-quiz::before{background:var(--peach)}

/* ---------- видео: без затемнения ---------- */
.theme-maksat .intro__photo{filter:none}
.theme-maksat .intro__scrim{background:none}
.intro__mark{
  position:absolute;right:12px;top:12px;z-index:2;font-size:10.5px;font-weight:600;
  background:rgba(255,255,255,.86);color:#3A2119;padding:4px 8px;letter-spacing:.02em;
}

/* ---------- плашка «О проекте»: три равные колонки, текст не выходит за края ---------- */
.theme-maksat .fact-card{
  container-type:inline-size;
  left:50%;right:auto;transform:translateX(-50%);
  width:min(520px,calc(100% - 2 * clamp(18px,3vw,40px)));max-width:none;
  background:rgba(255,255,255,.94);border-color:transparent;
  padding:clamp(14px,2vh,22px) clamp(16px,2vw,26px);
}
.theme-maksat .fact-card__label{color:#97694E;margin-bottom:10px}
.theme-maksat .fact-card__grid{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr) 1px minmax(0,1fr);gap:0 clamp(10px,3cqw,20px);align-items:start}
.theme-maksat .fact-card__rule{align-self:stretch}
.theme-maksat .fact-card__num{
  font-weight:600;white-space:nowrap;
  font-size:clamp(14px,4.3cqw,21px);
}
.theme-maksat .fact-card__cap{font-weight:600;font-size:clamp(9px,2.3cqw,10.5px);line-height:1.35}
.theme-maksat .fact-card__num--text{white-space:nowrap}
@media(max-width:960px){
  .theme-maksat .metrics{container-type:inline-size;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .theme-maksat .metrics__num{font-weight:600;font-size:clamp(12px,4.2cqw,16px);white-space:nowrap}
  .theme-maksat .metrics__cap{font-weight:600;line-height:1.35}
}

/* ---------- квиз ---------- */
.theme-maksat .progress{background:var(--bg-3);height:3px}
.theme-maksat .progress__fill{background:var(--paper)}
.theme-maksat .option{background:#fff;font-weight:600;color:var(--paper);border-color:var(--line)}
.theme-maksat .option:hover{border-color:var(--paper)}
.theme-maksat .option.is-selected{background:var(--peach-soft);border-color:var(--paper)}
.theme-maksat .usp{background:rgba(250,243,239,.92);border-color:transparent}
.theme-maksat .usp__text{opacity:1;font-weight:600}
.theme-maksat .quiz__counter,.theme-maksat .quiz__hint{color:var(--dim);font-weight:600}

/* ---------- форма ---------- */
.theme-maksat .form-card{box-shadow:0 26px 60px -36px rgba(58,33,25,.5);border-color:var(--line)}
.theme-maksat .form__title{font-weight:600}
.theme-maksat .field__input{background:#fff;color:var(--paper);font-weight:500}
.theme-maksat .channel span:last-child{background:#fff;font-weight:600}
.theme-maksat .channel input:checked ~ span:last-child{color:#fff;background:var(--accent);border-color:var(--accent)}
.theme-maksat .check a{color:var(--paper)}
.theme-maksat .lead__usps li{color:var(--paper);font-weight:600}
.theme-maksat .lead__usps li::before{background:var(--peach)}
.theme-maksat .lead__lede{font-weight:500}
.theme-maksat .lead__legal{color:var(--dim)}
.theme-maksat .field__err,.theme-maksat .form__senderr,.theme-maksat .consents.is-invalid .check{color:#A8322B}
.theme-maksat .field.is-invalid .field__input{border-color:#A8322B}

/* ---------- планировки: 3D на цветном поле, выгода крупнее цены ---------- */
.theme-maksat .plans-band{background:var(--bg-2)}
.theme-maksat .plan{border-color:transparent;background:#fff}
.theme-maksat .plan__fig{background:var(--peach-soft);aspect-ratio:16/11;overflow:hidden}
.theme-maksat .plan:nth-child(2) .plan__fig{background-color:#EBCFC0}
.theme-maksat .plan:nth-child(3) .plan__fig{background-color:#DBAF9C}
.theme-maksat .plan__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:34px 18px 14px;filter:drop-shadow(0 14px 18px rgba(58,33,25,.22))}
.theme-maksat .plan__meta{color:#3A2119;font-weight:600}
.theme-maksat .plan__body{gap:5px;padding:14px 16px 16px}
.theme-maksat .plan__type{order:0;color:var(--dim);font-weight:700}
.theme-maksat .plan__gain{
  order:1;font-family:var(--font-display);font-weight:600;font-size:clamp(16px,1.45vw,21px);line-height:1.1;
  letter-spacing:-.02em;color:var(--paper);
}
.theme-maksat .plan__gain::first-letter{text-transform:uppercase}
.theme-maksat .plan__old{order:2;color:var(--dim);font-weight:500;margin-top:4px}
.theme-maksat .plan__new{order:3;font-size:15px;font-weight:600;align-self:flex-start;background:var(--peach-soft);padding:6px 9px}
.theme-maksat .plan__tag{order:4;color:var(--dim);font-weight:600;margin-top:2px}
.theme-maksat .lead__plans .plan__gain{font-size:14.5px}
.theme-maksat .lead__plans .plan__new{font-size:13px}
.theme-maksat .lead__plans .plan__type{font-size:10.5px;letter-spacing:.08em}
.theme-maksat .lead__plans .plan__img{padding:26px 8px 8px}
@media (min-width:961px){
  .theme-maksat .plans-band .plans{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- подвал, диалог, предупреждение ---------- */
.theme-maksat .disclaimer{background:var(--bg-2)}
.theme-maksat .disclaimer__legal,.theme-maksat .credit__label{color:var(--dim)}
.theme-maksat .credit__mark{color:#97694E}
.theme-maksat .terms__box{background:#fff}
.theme-maksat .terms__eyebrow{color:#97694E}
.theme-maksat .terms::backdrop{background:rgba(58,33,25,.6)}
.theme-maksat .risk-note{background:#fff;border-left-color:#3A2119;box-shadow:0 22px 50px -24px rgba(58,33,25,.7)}
.theme-maksat .risk-note__text{font-weight:600}

/* ---------- размеры первого экрана ---------- */
/* Unbounded шире Montserrat — заголовок чуть мельче, чем у НОВЫ */
@media (min-width:961px){
  .theme-maksat .intro__title{font-size:clamp(28px,3vw,44px);line-height:1.12;margin-top:14px}
  .theme-maksat .intro__pitch{max-width:min(760px,100%)}
  .theme-maksat .chips{margin-top:clamp(14px,2.2vh,24px);gap:8px}
  .theme-maksat .chip{font-size:13.5px;padding:8px 15px}
  .theme-maksat .intro__cta{margin-top:clamp(18px,2.8vh,34px)}
}
@media (min-width:961px) and (max-height:880px){
  .theme-maksat .intro__title{font-size:clamp(22px,3.9vh,36px);margin-top:10px}
  .brand__logo{height:72px}
  .theme-maksat .chips{margin-top:14px;gap:6px}
  .theme-maksat .chip{font-size:12.5px;padding:6px 12px}
  .offer{padding:11px 15px}
  .offer__big{font-size:clamp(19px,3.1vh,26px)}
  .offer__sub{font-size:12.5px}
  .offer__note{font-size:11px}
  .theme-maksat .fact-card__num{font-size:clamp(14px,4.3cqw,21px)}
}
@media (min-width:961px) and (max-height:700px){
  .theme-maksat .chip:nth-child(n+5){display:none}
  .theme-maksat .hint-quiz{display:none}
  .brand__logo{height:60px}
}
@media(max-width:960px){
  .theme-maksat .intro__title{font-size:clamp(22px,6.4vw,32px)}
}

/* ============================================================
   ТЕЛЕФОН (до 960 px)
   Кнопка квиза всегда под рукой, первый экран короче,
   ничего не выходит за края при ширине от 320 px.
   ============================================================ */
@media(max-width:960px){
  .theme-maksat .intro__media{min-height:0;height:36svh;max-height:340px}
  .theme-maksat .intro__content{padding-top:16px;padding-bottom:0;gap:18px;overflow:visible}
  .theme-maksat .intro__head{align-items:center}
  .theme-maksat .brand{flex-direction:row;align-items:center;gap:10px}
  .brand__logo{height:62px;margin:-10px 0 -10px -10px}
  .theme-maksat .brand__sub{font-size:10px;letter-spacing:.12em}
  .theme-maksat .slogan{font-size:12px;letter-spacing:.12em}
  .theme-maksat .intro__title{margin-top:8px;line-height:1.12}
  .offers{margin-top:16px}
  .offer{padding:14px 16px}
  .theme-maksat .chips{margin-top:16px;gap:6px}
  .theme-maksat .chip{font-size:12px;padding:6px 11px}
  .theme-maksat .metrics{margin-top:16px;padding-top:14px}
  /* кнопка прилипает к низу экрана, пока человек читает первый экран */
  .theme-maksat .intro__cta{
    position:sticky;bottom:0;z-index:20;align-items:stretch;gap:0;
    margin:0 calc(-1 * var(--pad));padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);border-top:1px solid var(--line);
  }
  .theme-maksat .intro__cta .btn{width:100%;padding:16px 12px;font-size:13px}
  .theme-maksat .intro__cta .hint-quiz{display:none}
  /* предупреждение о рисках — над кнопкой, а не поверх неё */
  .theme-maksat[data-view="intro"] .risk-note{bottom:calc(84px + env(safe-area-inset-bottom))}
  /* в квизе и форме — сверху, чтобы не закрывать «Назад» и кнопку отправки */
  .theme-maksat[data-view="quiz"] .risk-note,
  .theme-maksat[data-view="form"] .risk-note{bottom:auto;top:calc(8px + env(safe-area-inset-top))}
  /* планировки листаются пальцем: видно, что справа есть ещё */
  .theme-maksat .plans-band{padding-top:26px;padding-bottom:26px}
  .theme-maksat .plans-band__head{margin-bottom:14px}
  .theme-maksat .plans-band__head .btn{display:none}
  .theme-maksat .plans{grid-auto-columns:78%;gap:10px;margin-right:calc(-1 * var(--pad));padding-right:var(--pad)}
  .theme-maksat .lead__plans .plans{grid-auto-columns:62%}
  .theme-maksat .plan__gain{font-size:18px}
  /* квиз и форма */
  .theme-maksat .quiz{padding-top:14px}
  .theme-maksat .quiz__question{font-size:22px}
  .theme-maksat .option{padding:15px 16px}
  .theme-maksat .usps{gap:8px}
  .theme-maksat .usp{flex:1 1 100%;padding:8px 12px 8px 8px}
  .theme-maksat .usp__img{width:52px;height:52px}
  .theme-maksat .lead{padding-top:20px;gap:22px}
  .theme-maksat .form-card{padding:18px 16px}
  /* длинный юрблок в подвале — в прокручиваемом окне, полный текст по ссылке */
  .theme-maksat .disclaimer__legal--full{display:block;max-height:calc(7 * 1.6em);overflow-y:auto;padding-right:6px}
  .theme-maksat .disclaimer{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
}
@media(max-width:360px){
  .offer__big{font-size:23px}
  .theme-maksat .intro__title{font-size:21px}
  .theme-maksat .brand__sub{display:none}
}