/* Общий каркас лендингов: роли, форма записи, слоты, экран «Вы записаны».
   Цвета и шрифты — переменные; каждый лендинг задаёт их в своём style.css. */
:root {
  --lf-fg: #111;
  --lf-muted: #666;
  --lf-field: #fff;
  --lf-field-fg: #111;
  --lf-border: #d0d4dc;
  --lf-accent: #1f4fd8;
  --lf-accent-fg: #fff;
  --lf-chip: transparent;
  --lf-chip-active: var(--lf-accent);
  --lf-chip-active-fg: var(--lf-accent-fg);
  --lf-radius: 10px;
  --lf-font: inherit;
  --lf-error: #c62828;
  --lf-focus: color-mix(in srgb, var(--lf-accent) 35%, transparent);
}

/* роли: показываем тексты только текущей */
body[data-role="parent"] [data-for="student"],
body[data-role="student"] [data-for="parent"] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
img, video { max-width: 100%; }

/* ── форма ── */
.lf { font-family: var(--lf-font); color: var(--lf-fg); }
.lf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.lf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lf-label { font-size: 13px; font-weight: 600; color: var(--lf-fg); }
.lf-label em { font-style: normal; font-weight: 400; color: var(--lf-muted); margin-left: 4px; }
.lf-input {
  height: 42px; padding: 0 12px; font: inherit; font-size: 15px;
  color: var(--lf-field-fg); background: var(--lf-field);
  border: 1px solid var(--lf-border); border-radius: var(--lf-radius); outline: none; min-width: 0; width: 100%;
  box-sizing: border-box;
}
select.lf-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 17px) 18px, calc(100% - 12px) 18px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.lf-input:focus { border-color: var(--lf-accent); box-shadow: 0 0 0 3px var(--lf-focus); }
.lf-input::placeholder { color: var(--lf-muted); opacity: .75; }

.lf-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border: 1px solid var(--lf-border); border-radius: var(--lf-radius); background: var(--lf-field); height: 42px; box-sizing: border-box; }
.lf-seg--3 { grid-template-columns: 1fr 1fr 1fr; }
.lf-seg label { position: relative; display: flex; }
.lf-seg input { position: absolute; opacity: 0; pointer-events: none; }
.lf-seg span { flex: 1; display: grid; place-items: center; font-size: 14px; border-radius: calc(var(--lf-radius) - 3px); cursor: pointer; color: var(--lf-field-fg); white-space: nowrap; }
.lf-seg input:checked + span { background: var(--lf-chip-active); color: var(--lf-chip-active-fg); font-weight: 600; }
.lf-seg input:focus-visible + span { box-shadow: 0 0 0 3px var(--lf-focus); }

.lf-field--slots { margin-top: 14px; }
.lf-days { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.lf-days::-webkit-scrollbar { display: none; }
.lf-day, .lf-time {
  font: inherit; cursor: pointer; border: 1px solid var(--lf-border); background: var(--lf-chip);
  color: var(--lf-fg); border-radius: var(--lf-radius);
}
.lf-day { flex: 0 0 auto; min-width: 66px; padding: 6px 8px; display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.lf-day b { font-size: 13px; font-weight: 600; }
.lf-day span { font-size: 12px; color: var(--lf-muted); }
.lf-day.is-active, .lf-time.is-active { background: var(--lf-chip-active); color: var(--lf-chip-active-fg); border-color: var(--lf-chip-active); }
.lf-day.is-active span { color: inherit; opacity: .85; }
.lf-times { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lf-time { padding: 8px 14px; font-size: 14px; font-weight: 600; }
.lf-time:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.lf-day:focus-visible, .lf-time:focus-visible, .lf-submit:focus-visible, .lf-ghost:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--lf-focus); }

.lf-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 12.5px; line-height: 1.45; color: var(--lf-muted); cursor: pointer; }
.lf-consent input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--lf-accent); flex: 0 0 auto; }
.lf-consent a { color: inherit; text-decoration: underline; }
.lf-input.is-invalid, .lf-seg:has(.is-invalid) { border-color: var(--lf-error); }
.lf-consent:has(.is-invalid) { color: var(--lf-error); }
.lf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lf-noslots { margin: 6px 0 0; font-size: 13.5px; color: var(--lf-muted); }
.lf-error { margin-top: 10px; font-size: 13.5px; color: var(--lf-error); font-weight: 600; }

.lf-submit {
  margin-top: 14px; width: 100%; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; text-decoration: none;
  background: var(--lf-accent); color: var(--lf-accent-fg); border: 0; border-radius: var(--lf-radius); box-sizing: border-box; padding: 0 18px;
  transition: filter .15s, transform .15s;
}
.lf-submit:hover { filter: brightness(1.07); }
.lf-submit:active { transform: translateY(1px); }
.lf-submit.is-busy { opacity: .7; pointer-events: none; }
.lf-submit svg, .lf-ghost svg { width: 20px; height: 20px; flex: 0 0 auto; }
.lf-note { margin: 8px 0 0; font-size: 12.5px; color: var(--lf-muted); text-align: center; }

.lf-done { text-align: center; padding: 10px 0; }
.lf-done-icon { width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: var(--lf-chip-active); color: var(--lf-chip-active-fg); }
.lf-done-icon svg { width: 30px; height: 30px; }
.lf-done-title { margin: 0 0 6px; font-size: 26px; }
.lf-done-slot { margin: 0 0 8px; font-weight: 700; font-size: 16px; }
.lf-done-text { margin: 0 auto; max-width: 440px; font-size: 14px; line-height: 1.5; color: var(--lf-muted); }
.lf-done-actions { display: flex; gap: 10px; margin-top: 8px; }
.lf-done-actions .lf-submit { flex: 1.4; }
.lf-ghost { margin-top: 14px; flex: 1; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--lf-fg); border: 1px solid var(--lf-border); border-radius: var(--lf-radius); }

@media (max-width: 640px) {
  .lf-grid { grid-template-columns: 1fr; }
  .lf-done-actions { flex-direction: column; gap: 0; }
}

/* строка про аналитику в подвале — одинаковая у всех */
.analytics-note { font-size: 12px; opacity: .75; }
.analytics-note a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* фото основателя (подставляется founder.js, если есть _shared/founder.jpg) — поверх графики лендинга */
.has-founder-photo { width: 200px !important; height: auto !important; min-height: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; display: block !important; flex: 0 0 auto !important; align-self: flex-start; transform: none !important; }
.has-founder-photo::before, .has-founder-photo::after { display: none !important; }
.founder-photo { margin: 0; }
.founder-photo img { display: block; width: 200px; height: 250px; object-fit: cover; object-position: center 20%; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.founder-photo figcaption { margin-top: 8px; font-size: 12.5px; line-height: 1.4; opacity: .85; max-width: 200px; }
@media (max-width: 640px) { .has-founder-photo { width: 150px !important; } .founder-photo img { width: 150px; height: 188px; } .founder-photo figcaption { max-width: 100%; } }

/* «Другое время» */
.lf-time--other { font-weight: 500; border-style: dashed; }
.lf-other { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.lf-other[hidden] { display: none; }

/* ── анимации (motion.js) ─────────────────────────────────── */
/* первый экран на всю высоту окна минус шапка, контент по центру */
#top { position: relative; min-height: calc(100svh - var(--hdr, 60px)); display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
#top > .wrap, #top > div:not([data-hero-bg]) { width: 100%; }
#top > .scroll-cue { width: 44px; }
/* тексты ролей в одной клетке: высота = большей, смена плавная */
.role-swap { display: grid; }
.role-swap > * { grid-area: 1 / 1; transition: opacity .35s ease, transform .35s ease; }
body[data-role] #top .role-swap > [data-for] { display: revert !important; }
#top .role-swap > ul[data-for], #top .role-swap > ol[data-for] { display: grid !important; }
body[data-role="parent"] #top .role-swap > [data-for="student"],
body[data-role="student"] #top .role-swap > [data-for="parent"] { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); }
/* стрелка «листай вниз» */
.scroll-cue { position: absolute; left: 50%; bottom: 14px; width: 44px; height: 44px; margin-left: -22px; display: grid; place-items: center; color: inherit; opacity: .7; border-radius: 50%; transition: opacity .3s; z-index: 3; }
.scroll-cue svg { width: 26px; height: 26px; }
.motion .scroll-cue svg { animation: cue-bob 1.8s ease-in-out infinite; }
.scroll-cue.is-gone { opacity: 0; pointer-events: none; }
@keyframes cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (max-height: 760px), (max-width: 640px) { .scroll-cue { display: none; } }
/* появление */
.motion .rv { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1); transition-delay: var(--rv-d, 0ms); }
.motion .rv.rv-in { opacity: 1; transform: none; }
.motion .rv-hero { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--rv-d, 0ms); }
.motion .hero-ready .rv-hero { opacity: 1; transform: none; }
/* главная кнопка — мягкое свечение */
.motion .cta-glow { position: relative; animation: cta-glow 2.8s ease-in-out infinite; }
@keyframes cta-glow { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cta-glow, var(--lf-accent)) 0%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--cta-glow, var(--lf-accent)) 22%, transparent), 0 8px 26px color-mix(in srgb, var(--cta-glow, var(--lf-accent)) 35%, transparent); } }
.motion .cta-glow:hover { animation-play-state: paused; }
/* картинка первого экрана: плавает и наклоняется */
.motion .tilt { transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .5s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.motion .tilt > * { animation: float-y 6s ease-in-out infinite; }
@keyframes float-y { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
/* фон первого экрана: canvas/слой под контентом */
[data-hero-bg] { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
/* контент первого экрана выше фона — каждый лендинг задаёт сам (position/z-index), здесь не трогаем */
@media (prefers-reduced-motion: reduce) { .rv, .rv-hero { opacity: 1 !important; transform: none !important; } }

/* A/B первого экрана: до применения варианта экран скрыт (без мигания), страховка — 1,5 с в <head> */
.js-hero:not(.hero-shown) #top > :not([data-hero-bg]) { opacity: 0; }
.ab-hide, body[data-role] #top .role-swap > .ab-hide, body[data-role] #top .ab-hide { display: none !important; }
#top.hero--short h1 { margin-bottom: .2em; }