/* /materials — лендинг «3 бесплатных гайда» в стиле «Олимпологии» v2 (база — olimp-v2.css, классы mt-) */
.mt{--mt-page:#fff;--mt-page-line:rgba(21,50,66,.12)}
html.dark .mt{--mt-page:#fff;--mt-page-line:rgba(0,0,0,.4)}

/* ---------- первый экран ---------- */
.mt-hero{padding:22px 0 8px}
.mt-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:center}
.mt-hero-text{display:flex;flex-direction:column;min-width:0}
.mt-h1{margin:8px 0 0;font-size:29px;line-height:1.1;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.mt-h1 b{display:block;color:var(--accent);text-wrap:balance}
.mt-sub{margin:12px 0 0;font-size:15.5px;line-height:1.4;font-weight:600;color:var(--muted);text-wrap:balance;max-width:560px}
.mt-cta{margin-top:22px;display:flex}
.mt-cta .ov-btn{flex:1}

.mt-hero-visual{position:relative;min-width:0;aspect-ratio:1/.9;margin:6px 0 0}
.mt-glow{position:absolute;left:50%;top:50%;width:78%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 30%,#3fb7ec 0%,#0098DB 55%,#0077ad 100%);opacity:.95}
html.dark .mt-glow{opacity:.8}
.mt-fan{position:absolute;inset:0}
.mt-fan img{position:absolute;width:38%;height:auto;border-radius:8px;background:#fff;box-shadow:0 18px 40px -16px rgba(0,30,50,.55),0 0 0 1px var(--mt-page-line)}
.mt-fan .b1{left:5%;top:40%;transform:rotate(-4deg);z-index:3}
.mt-fan .b2{left:31%;top:20%;transform:rotate(-1deg);z-index:2}
.mt-fan .b3{left:57%;top:0;transform:rotate(3deg);z-index:1}

/* ---------- блоки ---------- */
.mt-sec{padding:48px 0}
.mt-h2{margin:0;font-size:25px;line-height:1.12;font-weight:800;letter-spacing:-.015em;text-wrap:balance}
.mt-h2 b{color:var(--accent)}
.mt-lead{margin:10px 0 0;font-size:15px;font-weight:600;color:var(--muted)}
.mt-sec-cta{display:flex;justify-content:center;margin-top:22px}
.mt-sec-cta .ov-btn{flex:1}

/* что внутри: карточка гайда — развороты страниц + список */
.mt-guides{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:22px}
.mt-guide{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:16px 18px 20px;border-radius:24px;background:var(--card);border:1px solid var(--card-line);min-width:0}
.mt-pages{position:relative;aspect-ratio:1/.72;margin:0 0 6px;border-radius:16px;background:linear-gradient(160deg,#d6edf9,#eaf6fc);overflow:hidden}
html.dark .mt-pages{background:linear-gradient(160deg,rgba(0,152,219,.28),rgba(0,152,219,.08))}
.mt-pages img{position:absolute;top:12%;width:40%;height:auto;border-radius:6px;background:#fff;box-shadow:0 14px 30px -14px rgba(0,30,50,.55),0 0 0 1px var(--mt-page-line);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.mt-pages .p0{left:6%;transform:rotate(-7deg) translateY(8%);z-index:1}
.mt-pages .p1{left:30%;z-index:3}
.mt-pages .p2{left:54%;transform:rotate(7deg) translateY(8%);z-index:2}
.mt-guide:hover .mt-pages .p0{transform:rotate(-10deg) translate(-6%,6%)}
.mt-guide:hover .mt-pages .p2{transform:rotate(10deg) translate(6%,6%)}
.mt-guide:hover .mt-pages .p1{transform:translateY(-3%)}
.mt-h3{margin:8px 0 0;font-size:19px;line-height:1.2;font-weight:800;letter-spacing:-.01em;text-wrap:balance}
.mt-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:9px}
.mt-list li{position:relative;padding-left:28px;font-size:14.5px;line-height:1.4;font-weight:600}
.mt-list li::before{content:'';position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;background:var(--primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%230098DB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
html:not(.dark) .mt-list li::before{background-color:#d6edf9}

/* форма */
/* фон блока формы — как у остальных разделов сайта (без своей заливки) */
.mt-form-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:center}
.mt-form-text{min-width:0}
.mt-row3{display:none}
.mt-form{min-width:0}
/* виджет GetCourse: белая карточка (в тёмной теме тоже — у анкеты свои светлые стили), верхний отступ виджета срезан */
.mt-gc{color-scheme:light;background:#fff;border:1px solid var(--card-line);border-radius:24px;overflow:hidden;padding:0 8px 6px;box-shadow:var(--shadow-soft);min-height:300px}
.mt-gc iframe{display:block;width:100%!important;border:0;margin-top:-16px}
/* анкета Learn (credo-form.js): карточку рисует сама анкета — без своей рамки */
.mt-lf{min-height:420px}
.mt-lf iframe{background:transparent}
.mt-lf-nojs{margin:12px;text-align:center}

/* закреплённая кнопка на телефоне: после первого экрана и пока форма не на экране */
.mt-float{position:fixed;left:12px;right:12px;bottom:max(12px,calc(env(safe-area-inset-bottom) + 6px));z-index:40;pointer-events:none}
.mt-sticky{pointer-events:auto;transition:transform .25s,opacity .25s}
.mt-sticky[hidden]{display:block;transform:translateY(140%);opacity:0;pointer-events:none}
.mt-sticky .ov-btn{width:100%;box-shadow:0 14px 30px -12px rgba(0,60,90,.55)}
/* общий блок «наверх» + чат встаёт над закреплённой кнопкой, пока та на экране */
@media (max-width:999px){body:has(.mt-sticky:not([hidden])) .site-float{bottom:calc(max(12px,calc(env(safe-area-inset-bottom) + 6px)) + 66px)}}

/* ---------- планшет ---------- */
@media (min-width:640px){
  .mt-guides{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .mt-guide:last-child{grid-column:1/-1}
  .mt-sec-cta .ov-btn,.mt-cta .ov-btn{flex:none;padding:17px 34px}
}

/* ---------- ноутбук ---------- */
@media (min-width:1000px){
  .mt-hero{padding:40px 0 30px}
  .mt-hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;min-height:calc(100svh - 160px);max-height:760px}
  .mt-h1{font-size:50px;line-height:1.06;margin-top:12px}
  .mt-sub{font-size:19px;margin-top:18px}
  .mt-cta{margin-top:40px}
  .mt-cta .ov-btn{font-size:16px;padding:19px 40px}
  .mt-hero-visual{margin:0;aspect-ratio:1/.95}
  .mt-glow{width:80%}
  .mt-fan .b1{top:43%}
  .mt-fan .b2{top:21.5%}
  .mt-fan .b3{top:0}

  .mt-sec{padding:80px 0}
  .mt-h2{font-size:40px;max-width:1000px}
  .mt-lead{font-size:18px;margin-top:14px}
  .mt-sec-cta{margin-top:40px}
  .mt-sec-cta .ov-btn{font-size:16px;padding:19px 40px}
  .mt-guides{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:36px}
  .mt-guide:last-child{grid-column:auto}
  .mt-guide{padding:18px 22px 26px;border-radius:28px;align-content:start}
  .mt-h3{font-size:21px;margin-top:10px}
  .mt-list{gap:11px;margin-top:16px}
  .mt-list li{font-size:15px}

  .mt-form-sec{padding-top:48px}
  .mt-form-grid{grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:64px}
  .mt-row3{display:flex;gap:16px;margin-top:40px;max-width:480px}
  .mt-row3 img{flex:1;min-width:0;height:auto;border-radius:8px;background:#fff;box-shadow:0 18px 36px -18px rgba(0,30,50,.55),0 0 0 1px var(--mt-page-line)}
  .mt-row3 img:nth-child(1){transform:rotate(-4deg)}
  .mt-row3 img:nth-child(2){transform:translateY(-10px)}
  .mt-row3 img:nth-child(3){transform:rotate(4deg)}
  .mt-float{display:none}
}
@media (prefers-reduced-motion:reduce){.mt-pages img{transition:none}}