/* StudyAI — общие блоки посадочных: /shared/blocks.css
   Блоки: howto3.html (3 шага), why-studyai.html (сравнение), reviews.html (отзывы + «Про нас в медиа»), tg-bot.html (бот в Telegram).
   Дизайн взят с https://study24.ai/oblozhka-dlya-treka/ (instruction, section_6, reviews); картинки — /shared/img/blocks/.
   Все классы с префиксом sb-, ничего не зависит от CSS раздела (chrome.css не затрагивается).
   Подключение: <link rel="stylesheet" href="/shared/blocks.css?v=...">; версию в ?v= менять при каждой правке файла (в songs-factory считается из md5 файла).
   Шрифты: Inter (текст) страница уже грузит; подпись «Наши преимущества» набрана Caveat 700 — добавить family=Caveat:wght@700 в ссылку на Google Fonts страницы,
   без него подпись выводится системным рукописным шрифтом (блок от этого не ломается). */
.sb{--sb-blue:#0a7cff;--sb-teal:#1dd6c1;--sb-orange:#ff8b00;--sb-ink:#0d0d0d;--sb-muted:#5a5a5a;--sb-soft:rgba(13,13,13,.03);--sb-line:rgba(13,13,13,.08);--sb-star:#ffd304;
  --sb-star-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19'%3E%3Cpath d='M7.36615 4.30014C8.3164 2.59614 8.79115 1.74414 9.5014 1.74414C10.2116 1.74414 10.6864 2.59614 11.6366 4.30014L11.8826 4.74114C12.1526 5.22564 12.2876 5.46789 12.4976 5.62764C12.7076 5.78739 12.9701 5.84664 13.4951 5.96514L13.9721 6.07314C15.8171 6.49089 16.7389 6.69939 16.9586 7.40514C17.1776 8.11014 16.5491 8.84589 15.2914 10.3166L14.9659 10.6969C14.6089 11.1146 14.4296 11.3239 14.3494 11.5819C14.2691 11.8406 14.2961 12.1196 14.3501 12.6769L14.3996 13.1846C14.5894 15.1474 14.6846 16.1284 14.1101 16.5641C13.5356 16.9999 12.6716 16.6024 10.9451 15.8074L10.4974 15.6019C10.0069 15.3754 9.76165 15.2629 9.5014 15.2629C9.24115 15.2629 8.9959 15.3754 8.5054 15.6019L8.0584 15.8074C6.33115 16.6024 5.46715 16.9999 4.8934 16.5649C4.31815 16.1284 4.4134 15.1474 4.60315 13.1846L4.65265 12.6776C4.70665 12.1196 4.73365 11.8406 4.65265 11.5826C4.57315 11.3239 4.3939 11.1146 4.0369 10.6976L3.7114 10.3166C2.45365 8.84664 1.82515 8.11089 2.04415 7.40514C2.26315 6.69939 3.1864 6.49014 5.0314 6.07314L5.5084 5.96514C6.03265 5.84664 6.2944 5.78739 6.50515 5.62764C6.7159 5.46789 6.85015 5.22564 7.12015 4.74114L7.36615 4.30014Z'/%3E%3C/svg%3E");
  display:block;margin:0 0 64px;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.5;color:var(--sb-ink);text-align:left;-webkit-text-size-adjust:100%}
.sb *,.sb *::before,.sb *::after{box-sizing:border-box}
:where(.sb) :is(h2,h3,p,figure,blockquote,ul,ol){margin:0;padding:0}
:where(.sb) :is(ul,ol){list-style:none}
.sb img{max-width:100%}

/* заголовок блока: по центру, акцент-градиент в <span> */
.sb-head{text-align:center;margin:0 0 40px}
.sb-label{margin:0 0 6px;font-family:Caveat,"Segoe Script","Comic Sans MS",cursive;font-size:28px;line-height:1.1;font-weight:700;color:var(--sb-orange)}
.sb-title{margin:0;font-family:inherit;font-size:44px;line-height:1.05;font-weight:600;letter-spacing:-.027em;text-align:center;color:var(--sb-ink)}
.sb-title span{background:linear-gradient(90deg,#0a7cff 32.69%,#1dd6c1 54.33%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.sb-sub:empty{display:none}
.sb-sub{max-width:640px;margin:16px auto 0;font-size:18px;line-height:1.45;color:var(--sb-muted);text-align:center}
.sb-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border:0;border-radius:14px;background:var(--sb-blue);color:#fff;font:500 15px/1 Inter,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .2s}
.sb-btn:hover{background:#0a65d1}
.sb-btn svg{width:18px;height:18px;flex:none}

/* (а) howto3 — «Как пользоваться…»: 3 карточки с иллюстрациями */
.sb-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:40px 0 0}
.sb-step{display:flex;flex-direction:column;min-width:0;padding:28px 24px 24px;border-radius:40px;background:var(--sb-soft)}
.sb-step-n{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#0a7cff,#1dd6c1);color:#fff;font-size:16px;font-weight:700;line-height:1}
.sb-step-t{margin:20px 0 12px;font-family:inherit;font-size:24px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.sb-step-d{margin:0 0 28px;font-size:16px;line-height:1.5;color:var(--sb-muted)}
.sb-step-img{display:block;width:100%;height:auto;aspect-ratio:3/2;margin-top:auto;object-fit:contain;object-position:center bottom}

/* (б) why-studyai — сравнение: критерии слева, синяя карточка StudyAI, белая «Другие AI-сервисы» */
.sb-why-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) minmax(0,1.15fr);column-gap:24px;align-items:stretch}
.sb-why-row{display:contents}
.sb-why-hd,.sb-why-crit,.sb-why-us,.sb-why-them{display:flex;align-items:center;gap:12px;min-width:0}
.sb-why-hd{padding:26px 28px 20px;font-size:24px;font-weight:600;line-height:1.1}
.sb-why-hd--us{border-radius:32px 32px 0 0;background:var(--sb-blue);color:#fff;font-size:28px}
.sb-why-hd--us img{width:32px;height:auto;flex:none;filter:brightness(0) invert(1)}
.sb-why-hd--them{border:1.5px solid #dcdcdc;border-bottom:0;border-radius:32px 32px 0 0;background:#fff}
.sb-why-crit{padding:14px 12px 14px 0;min-height:66px;border-bottom:1.5px solid var(--sb-line);font-family:inherit;font-size:15px;font-weight:500;line-height:1.3;letter-spacing:0}
.sb-why-us,.sb-why-them{padding:14px 28px;min-height:66px;font-size:15px;line-height:1.35;background-repeat:no-repeat;background-position:50% 100%;background-size:calc(100% - 56px) 1.5px}
.sb-why-us{background-color:var(--sb-blue);color:#fff;font-weight:500;background-image:linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.3))}
.sb-why-them{background-color:#fff;color:var(--sb-ink);border-left:1.5px solid #dcdcdc;border-right:1.5px solid #dcdcdc;background-image:linear-gradient(var(--sb-line),var(--sb-line))}
.sb-why-ic{flex:none;display:block;max-width:none}
.sb-why-ic--ok{width:54px;height:54px;margin:-13px}   /* бейдж с тенью: 54px рамка, сам знак ~28px */
.sb-why-ic--no{width:28px;height:29px}
.sb-why-tag{display:none}
.sb-why-row:last-child .sb-why-crit{border-bottom:0}
.sb-why-row:last-child .sb-why-us{border-radius:0 0 32px 32px;background-image:none;padding-bottom:24px}
.sb-why-row:last-child .sb-why-them{border-bottom:1.5px solid #dcdcdc;border-radius:0 0 32px 32px;background-image:none;padding-bottom:24px}

/* (в) reviews — карусель отзывов + плашка «Про нас в медиа» */
.sb-rate{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;margin:16px 0 0;font-size:16px;color:var(--sb-muted);text-align:center}
.sb-rate b{font-weight:600;color:var(--sb-ink)}
.sb-rate a{color:var(--sb-blue);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.sb-stars{display:inline-block;flex:none;width:95px;height:19px;background:var(--sb-star);-webkit-mask:var(--sb-star-mask) 0 0/19px 19px repeat-x;mask:var(--sb-star-mask) 0 0/19px 19px repeat-x}
.sb-rev{margin:40px 0 24px}
.sb-rev-track{display:flex;gap:16px;overflow-x:auto;padding:2px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.sb-rev-track::-webkit-scrollbar{display:none}
.sb-rev-track:focus-visible{outline:2px solid var(--sb-blue);outline-offset:2px;border-radius:32px}
.sb-rev-slide{display:flex;flex:0 0 min(580px,86%);align-items:center;gap:24px;padding:8px 28px 8px 8px;border-radius:32px;background:var(--sb-soft);scroll-snap-align:start}
.sb-rev-ava{display:flex;flex:none;align-items:center;justify-content:center;width:152px;height:152px;border-radius:26px;font-size:44px;font-weight:600;letter-spacing:-.02em;color:hsl(var(--h,210) 55% 30%);background:linear-gradient(135deg,hsl(var(--h,210) 90% 93%),hsl(calc(var(--h,210) + 45) 85% 86%))}
.sb-rev-ava-img{overflow:hidden}
.sb-rev-ava-img img{display:block;width:100%;height:100%;object-fit:cover}
.sb-rev-body{display:flex;flex-direction:column;min-width:0}
.sb-rev-text{margin:0 0 16px;font-size:16px;line-height:1.5}
.sb-rev-rt{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:14px;color:var(--sb-muted)}
.sb-rev-by{font-size:15px;line-height:1.4;color:var(--sb-muted)}
.sb-rev-by b{font-weight:600;color:var(--sb-ink)}
.sb-rev-by a{color:var(--sb-muted);text-decoration:underline;text-underline-offset:3px}
.sb-rev-by a:hover{color:var(--sb-blue)}
.sb-rev-nav{display:flex;justify-content:center;gap:12px;margin-top:16px}
.sb-rev-nav[hidden]{display:none}
.sb-rev-nav button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1.5px solid #dcdcdc;border-radius:50%;background:#fff;color:var(--sb-ink);cursor:pointer;transition:border-color .2s,color .2s}
.sb-rev-nav button:hover{border-color:var(--sb-blue);color:var(--sb-blue)}
.sb-rev-nav svg{width:18px;height:18px}
.sb-media{display:flex;align-items:center;justify-content:center;gap:32px;padding:24px 28px;border-radius:32px;background:var(--sb-soft)}
.sb-media-t{flex:none;white-space:nowrap;font-size:18px;font-weight:600;line-height:1.2}
.sb-media-list{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 28px}
.sb-media .sb-media-list img{display:block;width:auto;height:26px;max-width:none}
.sb-media .sb-media-list a{display:block;line-height:0}

/* tg-bot — «Все генерации в Telegram» */
.sb-tg-card{display:flex;align-items:center;gap:24px;padding:28px 32px;border-radius:32px;border:1px solid rgba(10,124,255,.16);background:linear-gradient(135deg,#eaf4ff 0%,#e7fbf8 100%)}
.sb-tg-ic{display:flex;flex:none;align-items:center;justify-content:center;width:64px;height:64px;border-radius:20px;background:#229ed9;color:#fff}
.sb-tg-ic svg{width:34px;height:34px}
.sb-tg-txt{flex:1 1 auto;min-width:0}
.sb-tg-t{margin:0 0 6px;font-family:inherit;font-size:28px;font-weight:600;line-height:1.15;letter-spacing:-.015em}
.sb-tg-d{font-size:16px;line-height:1.5;color:var(--sb-muted)}

@media (max-width:1023px){
  .sb-title{font-size:36px}
  .sb-steps{gap:16px}
  .sb-step{padding:24px 20px 20px;border-radius:32px}
  .sb-step-t{font-size:21px}
}
@media (max-width:899px){
  .sb-steps{grid-template-columns:minmax(0,1fr);max-width:520px;margin-left:auto;margin-right:auto}
  .sb-step-img{aspect-ratio:auto}
}
/* (б) на узком экране: по слайду на критерий, как на сайте */
@media (max-width:906px){
  .sb-why-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(86%,1fr);gap:16px;padding:2px 2px 12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .sb-why-hd{display:none}
  .sb-why-row{display:block;padding:16px;border:1.5px solid #e8e8e8;border-radius:28px;background:#f4f4f4;scroll-snap-align:start}
  .sb-why-crit{display:block;min-height:0;margin:0 0 12px;padding:0;border:0;font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
  .sb-why-us,.sb-why-them{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 12px;min-height:0;padding:16px;border:1.5px solid #eaeaea;border-radius:20px;background:#fff;background-image:none;color:var(--sb-ink);font-size:16px;line-height:1.45;font-weight:400}
  .sb-why-them{margin-top:12px}
  .sb-why-tag{display:flex;grid-area:1/1;align-items:center;gap:8px;font-size:20px;font-weight:600;line-height:1.1}
  .sb-why-tag img{width:28px;height:auto}
  .sb-why-them .sb-why-tag{color:#9aa0a6}
  .sb-why-ic{grid-area:1/2}
  .sb-why-txt{grid-area:2/1/3/3}
  .sb-why-row:last-child .sb-why-us,.sb-why-row:last-child .sb-why-them{padding-bottom:16px;border-bottom:1.5px solid #eaeaea;border-radius:20px}
  .sb-why-row:last-child .sb-why-crit{border-bottom:0}
}
@media (max-width:767px){
  .sb{margin-bottom:48px}
  .sb-head{margin-bottom:28px}
  .sb-title{font-size:28px}
  .sb-label{font-size:24px}
  .sb-sub{font-size:16px}
  .sb-steps{margin-top:28px}
  .sb-rev{margin-top:28px}
  .sb-rev-slide{flex-basis:88%;flex-direction:column;align-items:flex-start;gap:14px;padding:16px}
  .sb-rev-ava{width:72px;height:72px;border-radius:20px;font-size:26px}
  .sb-media{flex-direction:column;gap:16px;padding:20px}
  .sb-media-list{gap:14px 22px}
  .sb-tg-card{flex-wrap:wrap;align-items:flex-start;padding:22px 20px}
  .sb-tg-ic{width:52px;height:52px;border-radius:16px}
  .sb-tg-ic svg{width:28px;height:28px}
  .sb-tg-txt{flex:1 1 calc(100% - 76px)}
  .sb-tg-t{font-size:22px}
  .sb-tg-card .sb-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.sb-rev-track{scroll-behavior:auto}}
/* подпись к логотипам СМИ: название и адрес публикации текстом, по наведению/фокусу */
.sb-media-i{position:relative;display:inline-flex;outline:none}
.sb-media-tip{display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:5;min-width:180px;max-width:280px;padding:8px 10px;border-radius:10px;background:#0d0d0d;color:#fff;font-size:12px;line-height:1.35;text-align:left;box-shadow:0 8px 20px rgba(0,0,0,.2)}
.sb-media-tip b{display:block;font-size:13px;margin-bottom:2px}
.sb-media-tip span{display:block;color:#c9d4e5;word-break:break-all}
.sb-media-i:hover .sb-media-tip,.sb-media-i:focus .sb-media-tip{display:block}