/* ══════════════════════════════════════════════════════════════
   «Твой репетитор» — страница «Для кого» (новый дизайн)
   Подключается только на ней (build.js → meta.css). Общие блоки нового дизайна
   (токены и цвета ролей .is-tutor/.is-student/.is-parent, первый экран .phero,
   .wrap/.eyebrow/.h2/.lead, появление [data-reveal], финальный призыв) — в site.css.
   ══════════════════════════════════════════════════════════════ */

/* Под заголовком — карточки ролей, секции ниже со своим отступом */
.phero { padding-bottom: clamp(8px, 2vw, 24px); }

/* Карточки ролей в герое — ссылки на секции ниже */
.rolecards { margin-top: clamp(32px, 4vw, 44px); width: 100%; max-width: 1000px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; animation: fadeUp .9s var(--ease-out) .7s both; }
.rolecard { display: flex; align-items: center; gap: 14px; height: 100%; padding: 16px; border-radius: 20px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(26, 26, 31, .07); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 14px 34px -22px rgba(26, 26, 31, .3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-align: left; color: var(--ink); transition: transform .25s var(--ease-out), box-shadow .25s ease, background .25s ease, border-color .25s ease; }
.rolecard:hover { color: var(--ink); background: #fff; transform: translateY(-3px); border-color: color-mix(in srgb, var(--rc) 35%, transparent); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 22px 40px -22px color-mix(in srgb, var(--rc) 70%, transparent); }
.rolecard__ic { flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--rc) 68%, #fff), var(--rc)); box-shadow: 0 8px 18px -8px var(--rc); }
.rolecard__ic svg { width: 22px; height: 22px; }
.rolecard__txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rolecard__txt b { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
.rolecard__txt span { font-size: 13.5px; line-height: 1.4; color: var(--text-secondary); }
.rolecard__go { flex-shrink: 0; margin-left: auto; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--rt); background: color-mix(in srgb, var(--rc) 12%, transparent); transition: transform .25s var(--ease-out); }
.rolecard:hover .rolecard__go { transform: translateY(3px); }

/* ─────────────── Секция роли: заголовок, возможности, телефон ─────────────── */
.rsec { position: relative; padding: clamp(64px, 8vw, 120px) 0; scroll-margin-top: 16px; }
.rsec--band { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .7) 16%, rgba(255, 255, 255, .7) 84%, transparent); }
.rsec__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); grid-template-areas: "head vis" "feats vis"; column-gap: clamp(32px, 6vw, 96px); align-items: center; }
.rsec--flip .rsec__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); grid-template-areas: "vis head" "vis feats"; }
.rsec__head { grid-area: head; align-self: end; }
.rsec__head .eyebrow { color: var(--rt); }
.rsec__feats { grid-area: feats; align-self: start; }
.rsec__vis { grid-area: vis; }

.feats { margin-top: 30px; max-width: 560px; list-style: none; display: grid; gap: 10px; }
.feat { --spot: color-mix(in srgb, var(--rc) 14%, transparent); display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 20px; border-radius: 20px; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-xs); }
.feat__ic { width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--rc) 12%, transparent); color: var(--rt); }
.feat__ic svg { width: 22px; height: 22px; }
.feat h3 { margin-top: 1px; font-size: 17px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; }
.feat p { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--text-secondary); }

/* Телефон с реальными экранами + уведомление, как на главной */
.rsec__vis { position: relative; isolation: isolate; display: flex; justify-content: center; padding: 24px 0; }
.rsec__vis::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 540px; height: 540px; margin: -270px 0 0 -270px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--rc) 24%, transparent), transparent); filter: blur(10px); pointer-events: none; }
.rsec .phone { width: 300px; padding: 10px; border-radius: 50px; background: linear-gradient(145deg, #2c2c35, #0f0f14 40%, #1d1d24); box-shadow: 0 60px 110px -40px rgba(26, 26, 31, .5), 0 30px 50px -30px color-mix(in srgb, var(--rc) 55%, transparent), inset 0 0 0 1.5px rgba(255, 255, 255, .08); }
.rsec .phone__screen { border-radius: 40px; }
.rnote { position: absolute; z-index: 2; top: 16%; left: calc(50% - 262px); width: 262px; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 11px; align-items: center; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, .88); border: 1px solid rgba(26, 26, 31, .06); box-shadow: 0 22px 44px -18px rgba(26, 26, 31, .35); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); text-align: left; animation: chipFloat 5.5s ease-in-out infinite; }
.rsec--flip .rnote { left: auto; right: calc(50% - 262px); top: auto; bottom: 18%; }
.rnote__ic { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--rc) 14%, transparent); color: var(--rt); }
.rnote__ic svg { width: 19px; height: 19px; }
.rnote__ic--logo { background: none; border-radius: 0; }
.rnote__ic--logo svg { width: 100%; height: 100%; }
.rnote b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.rnote div > span { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.35; color: var(--text-secondary); }

/* ─────────────── АДАПТИВ ─────────────── */
@media (max-width: 960px) {
  .rolecards { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
  .rsec__grid, .rsec--flip .rsec__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "vis" "feats"; }
  .rsec__vis { margin-top: 20px; }
  .feats { max-width: none; }
}
@media (max-width: 560px) {
  .rsec .phone { width: 248px; padding: 8px; border-radius: 42px; }
  .rsec .phone__screen { border-radius: 34px; }
  .rsec__vis { padding-bottom: 64px; }
  .rnote, .rsec--flip .rnote { top: auto; bottom: 0; left: 50%; right: auto; margin-left: -131px; }
  .feat { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .feat__ic { width: 40px; height: 40px; border-radius: 12px; }
  .feat h3 { font-size: 16.5px; }
  .feat p { font-size: 14.5px; }
}

/* ─────────────── Кому подойдёт ─────────────── */
.fit { padding: clamp(48px, 6vw, 88px) 0 clamp(8px, 2vw, 24px); }
.fit__head { max-width: 640px; }
.fit__head .eyebrow { color: var(--rt); }
.fit__list { margin-top: 30px; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fit__soon { margin-top: 16px; padding: 14px 20px; border-radius: 16px; border: 1px dashed var(--border); font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.fit__soon b { color: var(--ink); font-weight: 700; }
@media (max-width: 960px) { .fit__list { grid-template-columns: minmax(0, 1fr); } }