/* ===========================================================
   Аренда Плюс — выездные мастер-классы
   Базовый слой: токены брендбука + каркас
   Источник токенов: Downloads/redesign/brandbook/brandbook.html
   =========================================================== */

.mkl-root{
  /* бренд */
  --mkl-accent:#FE5D26;
  --mkl-accent-hover:#D95427;
  --mkl-accent-soft:#FFAE93;
  --mkl-accent-tint:#FFEFEA;
  --mkl-accent-light:#FF8B5F;

  /* нейтраль */
  --mkl-ink:#312D2B;
  --mkl-text:#272F3D;
  --mkl-text-secondary:rgba(49,45,43,.5);
  --mkl-text-muted:rgba(49,45,43,.4);

  /* поверхности */
  --mkl-surface-page:#F6F6F6;
  --mkl-surface-card:#FFFFFF;
  --mkl-surface-sunken:rgba(49,45,43,.05);
  --mkl-surface-hover:rgba(49,45,43,.06);
  --mkl-surface-placeholder:#EBEAEA;

  /* границы */
  --mkl-border-color:rgba(49,45,43,.1);
  --mkl-border-soft:rgba(49,45,43,.05);
  --mkl-border:1px solid var(--mkl-border-color);

  /* состояния */
  --mkl-success:#16A34A;
  --mkl-error:#E53E3E;
  --mkl-info:#4454EB;

  /* тени */
  --mkl-shadow-rest:0 1px 4px 0 rgba(49,45,43,.08);
  --mkl-shadow-hover:0 8px 24px rgba(49,45,43,.1);
  --mkl-shadow-focus:0 0 0 2px rgba(254,93,38,.16);
  --mkl-shadow-modal:0 24px 60px rgba(0,0,0,.45);

  /* скругления */
  --mkl-radius-xs:4px;
  --mkl-radius-sm:10px;
  --mkl-radius-md:12px;
  --mkl-radius-img:16px;
  --mkl-radius-lg:24px;
  --mkl-radius-thumb:8px;
  --mkl-radius-pill:999px;
  --mkl-radius-full:50%;

  /* сетка */
  --mkl-container:1327px;
  --mkl-container-inner:1297px;
  --mkl-container-pad:15px;

  /* отступы */
  --mkl-space-1:4px;  --mkl-space-2:8px;  --mkl-space-3:12px; --mkl-space-4:16px;
  --mkl-space-5:20px; --mkl-space-6:24px; --mkl-space-8:32px; --mkl-space-10:40px;
  --mkl-space-12:48px;--mkl-space-16:64px;
  --mkl-section-y:48px;
  --mkl-chapter-y:96px;
  --mkl-section-y-mob:24px;
  --mkl-grid-gap:16px;

  /* контролы */
  --mkl-control-h-lg:48px;
  --mkl-control-h-md:40px;
  --mkl-control-h-sm:32px;
  --mkl-field-pad:12px 14px;
  --mkl-icon-size:20px;
  --mkl-icon-box:40px;
  --mkl-transition:.2s ease;

  /* типографика */
  --mkl-font:"Inter",sans-serif;
  --mkl-font-head:"Comfortaa","Inter",sans-serif;
  --mkl-fw-regular:400;
  --mkl-fw-medium:500;
  --mkl-fw-semibold:600;

  /* скрим на фото — тёплый, на #312D2B, не на чёрном */
  --mkl-scrim:linear-gradient(to top,
    rgba(49,45,43,.78) 0%,
    rgba(49,45,43,.45) 28%,
    rgba(49,45,43,0) 62%);
}

/* ── СКОУП. Всё живёт внутри .mkl-root, html/body не трогаем:
      лендинг встраивается в сайтовый хедер/футер А+.               ── */
.mkl-root,
.mkl-root *,
.mkl-root *::before,
.mkl-root *::after{margin:0;padding:0;box-sizing:border-box}

.mkl-root{
  font-family:var(--mkl-font);
  font-size:16px;
  line-height:24px;
  font-weight:var(--mkl-fw-regular);
  color:var(--mkl-text);
  background:var(--mkl-surface-card);
  -webkit-font-smoothing:antialiased;
}

.mkl-root img,
.mkl-root video{max-width:100%;height:auto;display:block}
.mkl-root a{color:inherit;text-decoration:none;transition:color var(--mkl-transition)}
.mkl-root a:hover{color:var(--mkl-accent)}
.mkl-root button,
.mkl-root input,
.mkl-root select,
.mkl-root textarea{font:inherit;color:inherit}
.mkl-root button{background:none;border:0;cursor:pointer}
.mkl-root ul,
.mkl-root ol{list-style:none}

/* Скрытие через [hidden] должно побеждать наши display у блоков и форм:
   правило браузера по типу элемента слабее одиночного класса.        */
.mkl-root [hidden]{display:none}

/* Рубль ₽ (U+20BD) живёт в latin-ext. Базовые сабсеты Inter его не содержат —
   без этого блока в ценах вместо ₽ будет .notdef-квадрат.
   Образец — css/atrium.css в репозитории сайта.                     */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url(/fonts/inter/inter-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


/* Заголовки — Comfortaa, как на боевом сайте. Файлы у сайта свои,
   пути абсолютные: на проде они уже лежат по этим адресам. */
@font-face{
  font-family:"Comfortaa";font-style:normal;font-weight:500 700;font-display:swap;
  src:url(/fonts/comfortaa/comfortaa-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Comfortaa";font-style:normal;font-weight:500 700;font-display:swap;
  src:url(/fonts/comfortaa/comfortaa-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ——— контейнер ——— */
.mkl-container{
  width:100%;
  max-width:var(--mkl-container);
  margin-inline:auto;
  padding-inline:var(--mkl-container-pad);
}
.mkl-container--narrow{max-width:750px}

/* ——— секции ——— */
.mkl-section{padding:var(--mkl-section-y) 0}
.mkl-section--dark{background:var(--mkl-ink);color:#fff}
.mkl-section--page{background:var(--mkl-surface-page)}
.mkl-section--accent{background:var(--mkl-accent);color:#fff}
.mkl-section--flush{padding:0}

.mkl-section--dark .mkl-section__title,
.mkl-section--accent .mkl-section__title{color:#fff}
.mkl-section--dark .mkl-section__lead{color:rgba(255,255,255,.6)}
.mkl-section--accent .mkl-section__lead{color:rgba(255,255,255,.85)}

/* ——— типографика по шкале брендбука ——— */
.mkl-h1-hero{font-family:var(--mkl-font-head);font-size:64px;line-height:72px;font-weight:var(--mkl-fw-medium);letter-spacing:-.02em}
.mkl-h1{font-family:var(--mkl-font-head);font-size:32px;line-height:40px;font-weight:var(--mkl-fw-medium)}
.mkl-section__title{
  font-family:var(--mkl-font-head);
  font-size:32px;line-height:40px;font-weight:var(--mkl-fw-medium);
  letter-spacing:-.02em;margin-bottom:0;
}
.mkl-section__title--page{font-size:24px;line-height:32px;font-weight:var(--mkl-fw-semibold)}
.mkl-h3{font-family:var(--mkl-font-head);font-size:20px;line-height:28px;font-weight:var(--mkl-fw-semibold)}
.mkl-h4{font-size:16px;line-height:24px;font-weight:var(--mkl-fw-medium)}
.mkl-lead{font-size:18px;line-height:28px;color:var(--mkl-text-secondary)}
.mkl-text-ui{font-size:14px;line-height:20px}
.mkl-text-small{font-size:13px;line-height:18px;color:var(--mkl-text-secondary)}
.mkl-text-caption{font-size:12px;line-height:16px;font-weight:var(--mkl-fw-medium)}
.mkl-price{font-size:28px;line-height:36px;font-weight:var(--mkl-fw-medium);font-variant-numeric:tabular-nums}
.mkl-price--card{font-size:16px;line-height:24px;font-weight:var(--mkl-fw-medium)}

.mkl-section__head{margin-bottom:var(--mkl-space-6)}
.mkl-section__head--row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--mkl-space-4);flex-wrap:wrap}

/* ——— кнопки: ровно два стиля + иконочная ——— */
.mkl-root .mkl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--mkl-space-2);
  font-weight:var(--mkl-fw-medium);border:1px solid transparent;cursor:pointer;
  text-align:center;transition:background-color var(--mkl-transition),
    border-color var(--mkl-transition),color var(--mkl-transition);
}
/* Через .mkl-root: сброс .mkl-root button{background:none;border:0} специфичнее
   одиночного класса и иначе гасит заливку и рамку у кнопок-<button>. */
.mkl-root .mkl-btn--primary{background:var(--mkl-accent);color:#fff}
.mkl-root .mkl-btn--primary:hover{background:var(--mkl-accent-hover);color:#fff}
.mkl-root .mkl-btn--ghost{background:var(--mkl-surface-card);color:var(--mkl-ink);border-color:var(--mkl-border-color)}
.mkl-root .mkl-btn--ghost:hover{border-color:var(--mkl-accent);color:var(--mkl-accent)}
.mkl-btn--lg{height:var(--mkl-control-h-lg);padding:0 28px;font-size:16px;border-radius:var(--mkl-radius-md)}
.mkl-btn--md{height:var(--mkl-control-h-md);padding:0 20px;font-size:14px;border-radius:var(--mkl-radius-md)}
.mkl-btn--block{width:100%}
.mkl-btn:disabled{opacity:.4;cursor:not-allowed}

.mkl-btn-icon{
  width:var(--mkl-icon-box);height:var(--mkl-icon-box);border-radius:var(--mkl-radius-full);
  background:var(--mkl-surface-card);border:1px solid var(--mkl-border-color);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background-color var(--mkl-transition);
}
.mkl-btn-icon:hover{background:var(--mkl-surface-hover)}

/* ——— чипы ——— */
.mkl-chip{
  height:var(--mkl-control-h-sm);padding:0 18px;border-radius:var(--mkl-radius-pill);
  font-size:14px;font-weight:var(--mkl-fw-medium);
  background:var(--mkl-surface-card);border:1px solid var(--mkl-border-color);
  display:inline-flex;align-items:center;white-space:nowrap;
  transition:background-color var(--mkl-transition),color var(--mkl-transition),border-color var(--mkl-transition);
}
.mkl-chip:hover{border-color:var(--mkl-accent);color:var(--mkl-accent)}
.mkl-chip[aria-selected="true"]{background:var(--mkl-accent);border-color:var(--mkl-accent);color:#fff}

/* ——— бейдж ——— */
.mkl-badge{
  display:inline-flex;align-items:center;padding:4px 12px;border-radius:var(--mkl-radius-pill);
  font-size:12px;line-height:16px;font-weight:var(--mkl-fw-semibold);
  text-transform:uppercase;letter-spacing:.06em;
  background:var(--mkl-accent);color:#fff;
}
.mkl-badge--soft{background:var(--mkl-accent-tint);color:var(--mkl-accent)}

/* ——— карточка: один каркас ——— */
.mkl-card{
  background:var(--mkl-surface-card);
  border:1px solid var(--mkl-border-color);
  border-radius:var(--mkl-radius-lg);
  padding:var(--mkl-space-6);
  transition:transform var(--mkl-transition),box-shadow var(--mkl-transition);
}
.mkl-card--media{padding:0;overflow:hidden}
.mkl-card__media{
  position:relative;overflow:hidden;border-radius:var(--mkl-radius-img);
  background:var(--mkl-surface-placeholder);
}
.mkl-card--media .mkl-card__media{border-radius:0}
.mkl-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.mkl-card__body{padding:var(--mkl-space-6)}
.mkl-card__title{font-size:16px;line-height:24px;font-weight:var(--mkl-fw-medium)}
.mkl-card__meta{font-size:13px;line-height:18px;color:var(--mkl-text-secondary);margin-top:var(--mkl-space-2)}
.mkl-card:hover{transform:translateY(-4px);box-shadow:var(--mkl-shadow-hover)}
.mkl-card:hover .mkl-card__media img{transform:scale(1.04)}

/* пропорции медиа */
.mkl-ratio-16-9{aspect-ratio:16/9}
.mkl-ratio-4-5{aspect-ratio:4/5}
.mkl-ratio-4-3{aspect-ratio:4/3}
.mkl-ratio-3-2{aspect-ratio:3/2}
.mkl-ratio-1-1{aspect-ratio:1/1}

/* ——— сетки ——— */
.mkl-grid{display:grid;gap:var(--mkl-grid-gap)}
.mkl-grid--2{grid-template-columns:repeat(2,1fr)}
.mkl-grid--3{grid-template-columns:repeat(3,1fr)}
.mkl-grid--4{grid-template-columns:repeat(4,1fr)}

/* ——— формы ——— */
.mkl-field{display:flex;flex-direction:column;gap:var(--mkl-space-2)}
.mkl-field__label{font-size:13px;line-height:18px;font-weight:var(--mkl-fw-medium);color:var(--mkl-text-secondary)}
.mkl-field__control{
  height:var(--mkl-control-h-lg);
  padding:var(--mkl-field-pad);
  font-size:16px;line-height:24px;   /* 16px обязателен: меньше — iOS зумит */
  background:var(--mkl-surface-card);
  border:1px solid var(--mkl-border-color);
  border-radius:var(--mkl-radius-sm);
  width:100%;
  transition:border-color var(--mkl-transition),box-shadow var(--mkl-transition);
}
.mkl-field__control::placeholder{color:var(--mkl-text-secondary)}
.mkl-field__control:focus{outline:none;border-color:var(--mkl-accent);box-shadow:var(--mkl-shadow-focus)}
.mkl-field__control[aria-invalid="true"],
.mkl-field__control.mkl-bad{border-color:var(--mkl-error)}
.mkl-field__error{font-size:12px;line-height:16px;color:var(--mkl-error)}
textarea.mkl-field__control{height:auto;min-height:80px;resize:vertical}

.mkl-consent{display:flex;align-items:flex-start;gap:var(--mkl-space-2);font-size:13px;line-height:18px;color:var(--mkl-text-secondary)}
.mkl-consent input{width:16px;height:16px;border-radius:var(--mkl-radius-xs);accent-color:var(--mkl-accent);flex:0 0 auto;margin-top:1px}

/* ——— скрим и текст поверх фото ——— */
.mkl-media-overlay{position:relative;overflow:hidden;border-radius:var(--mkl-radius-lg)}
.mkl-media-overlay::after{content:"";position:absolute;inset:0;background:var(--mkl-scrim);pointer-events:none}
.mkl-media-overlay__text{
  position:absolute;left:0;bottom:0;z-index:1;
  padding:var(--mkl-space-8);color:#fff;max-width:640px;
}

/* ——— утилиты ——— */
.mkl-visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.mkl-stack{display:flex;flex-direction:column}
.mkl-stack--2{gap:var(--mkl-space-2)} .mkl-stack--3{gap:var(--mkl-space-3)}
.mkl-stack--4{gap:var(--mkl-space-4)} .mkl-stack--6{gap:var(--mkl-space-6)}
.mkl-row{display:flex;align-items:center}
.mkl-row--gap-3{gap:var(--mkl-space-3)} .mkl-row--gap-4{gap:var(--mkl-space-4)}
.mkl-row--wrap{flex-wrap:wrap}
.mkl-nowrap{white-space:nowrap}
.mkl-tabular{font-variant-numeric:tabular-nums}

/* ——— появление при скролле ——— */
.mkl-reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.mkl-reveal.mkl-is-visible{opacity:1;transform:none}

/* ===========================================================
   Адаптив. Брейкпоинты: 1260 / 991 / 768 / 480
   Мобильные правила живут только здесь.
   =========================================================== */

@media (max-width:991px){
  .mkl-grid--4{grid-template-columns:repeat(2,1fr)}
  .mkl-grid--3{grid-template-columns:repeat(2,1fr)}
  .mkl-h1-hero{font-size:48px;line-height:56px}
}

@media (max-width:768px){
  .mkl-section{padding:var(--mkl-section-y-mob) 0}
  .mkl-h1-hero{font-size:32px;line-height:38px}
  .mkl-h1,.mkl-section__title{font-size:24px;line-height:32px}
  .mkl-section__title--page{font-size:20px;line-height:28px}
  .mkl-h3{font-size:18px;line-height:26px}
  .mkl-lead{font-size:16px;line-height:24px}
  .mkl-price{font-size:24px;line-height:30px}
  .mkl-grid--2,.mkl-grid--3,.mkl-grid--4{grid-template-columns:1fr}
  .mkl-card:not(.mkl-card--media){padding:var(--mkl-space-4)}
  .mkl-card__body{padding:var(--mkl-space-4)}
  .mkl-btn--block-mob{width:100%}
  .mkl-media-overlay__text{padding:var(--mkl-space-4)}
}

@media (prefers-reduced-motion:reduce){
  .mkl-root *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}