@charset "UTF-8";
/* WEBEGE v9 */
@font-face{font-family:"InterLocal";src:url("/static/fonts/inter-v20-cyrillic_latin-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"InterLocal";src:url("/static/fonts/inter-v20-cyrillic_latin-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"InterLocal";src:url("/static/fonts/inter-v20-cyrillic_latin-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"InterLocal";src:url("/static/fonts/inter-v20-cyrillic_latin-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"InterLocal";src:url("/static/fonts/inter-v20-cyrillic_latin-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

/* Layout: shop grid of square course covers; course page = content column + sticky buy box (bottom bar on phones) */
:root {
  --bg: #F5F8F6;
  --surface: #FFFFFF;
  --surface-2: #EEF3F0;
  --line: #E1E8E3;
  --ink: #070908;
  --muted: #444B5E;
  --faint: #646C78;
  --green: #00B34F;
  --green-ink: #007A35;
  --green-soft: #E9FBEF;
  --on-green: #FFFFFF;
  --chip: #FFFFFF;
  --shadow-1: 0 1px 2px rgba(7, 20, 12, .05), 0 6px 18px rgba(7, 20, 12, .06);
  --shadow-2: 0 2px 4px rgba(7, 20, 12, .06), 0 18px 40px rgba(7, 20, 12, .12);
  --sans: "InterLocal", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;
  --logo-bg: transparent;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --logo-bg: transparent;
    --bg: #0B0F0D; --surface: #131A16; --surface-2: #1A231E; --line: #25302A;
    --ink: #EDF3EF; --muted: #AAB4AE; --faint: #808B85;
    --green: #1FC866; --green-ink: #52DE8E; --green-soft: #0F2A1B; --on-green: #03150A; --chip: #161E1A;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 22px rgba(0, 0, 0, .3);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, .4), 0 20px 44px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --logo-bg: transparent;
  --bg: #0B0F0D; --surface: #131A16; --surface-2: #1A231E; --line: #25302A;
  --ink: #EDF3EF; --muted: #AAB4AE; --faint: #808B85;
  --green: #1FC866; --green-ink: #52DE8E; --green-soft: #0F2A1B; --on-green: #03150A; --chip: #161E1A;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 22px rgba(0, 0, 0, .3);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .4), 0 20px 44px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--surface); }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 8px; }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.num { font-variant-numeric: tabular-nums; }

.note { background: var(--green-soft); color: var(--green-ink); font-size: 12.5px; font-weight: 600; }
.note .wrap { padding-block: 7px; display: flex; gap: 8px; align-items: center; justify-content: center; text-align: center; }

/* header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 20px; padding-block: 12px; }
.logo { display: flex; align-items: center; flex: 0 0 auto; }
.logo { background: var(--logo-bg); border-radius: 999px; padding: 3px 8px; margin-left: -8px; }
.logo img { height: 30px; width: auto; display: block; }
.logo-d { display: none !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-l { display: none !important; } :root:not([data-theme="light"]) .logo-d { display: block !important; } }
:root[data-theme="dark"] .logo-l { display: none !important; } :root[data-theme="dark"] .logo-d { display: block !important; }
.nav { display: flex; gap: 4px; margin-right: auto; }
.nav a { padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 14.5px; color: var(--muted); }
.nav a.on { background: var(--green-soft); color: var(--green-ink); }
.nav a:hover { color: var(--ink); }
.tbtn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 14px; cursor: pointer; }
.tbtn svg { width: 18px; height: 18px; }
.tbtn .cnt { min-width: 22px; height: 22px; border-radius: 999px; background: var(--green); color: var(--on-green); font-size: 12px; display: inline-grid; place-items: center; padding: 0 6px; }
.tbtn.login { background: var(--green); color: var(--on-green); border-color: transparent; }
@media (max-width: 760px) { .nav { display: none; } .logo { margin-right: auto; } .tbtn.login span { display: none; } .tbtn.login { padding: 0 12px; } }

/* hero */
.hero { padding-block: 34px 18px; }
.hero h1 { margin: 0; font-size: clamp(30px, 5.4vw, 52px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--green); }
.hero p { margin: 14px 0 0; color: var(--muted); font-size: clamp(15px, 1.8vw, 17.5px); max-width: 62ch; }
.perks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.perk { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; }
.perk svg { width: 18px; height: 18px; color: var(--green); flex: 0 0 auto; }

/* filters */
.filters { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 65px); z-index: 15; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.filters .wrap { padding-block: 12px; display: grid; gap: 10px; }
.frow { display: flex; gap: 10px; align-items: center; min-width: 0; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface-2); flex: 0 0 auto; }
.seg button { border: 0; background: transparent; padding: 7px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; cursor: pointer; color: var(--muted); }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; padding-block: 2px; mask-image: linear-gradient(90deg, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; border: 1px solid var(--line); background: var(--chip); padding: 7px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--muted); white-space: nowrap; }
.chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.search { flex: 1 1 220px; min-width: 0; position: relative; }
.search input { width: 100%; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); padding: 0 14px 0 38px; font-size: 14px; }
.search svg { position: absolute; left: 13px; top: 11px; width: 18px; height: 18px; color: var(--faint); }
.sel { height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); padding: 0 34px 0 14px; font-size: 14px; font-weight: 600; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--faint) 50%), linear-gradient(135deg, var(--faint) 50%, transparent 50%); background-position: calc(100% - 18px) 17px, calc(100% - 13px) 17px; background-size: 5px 5px; background-repeat: no-repeat; min-width: 0; }
@media (max-width: 640px) {
  .filters { position: static; }
  .frow.r1 { flex-wrap: wrap; } .frow.r1 .chips { flex-basis: 100%; }
  .frow.r2 { flex-wrap: wrap; } .search { flex-basis: 100%; order: -1; } .sel { flex: 1 1 0; }
  .hero { padding-block: 22px 14px; }
  .perks { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px))); padding-right: 16px; }
  .perks::-webkit-scrollbar { display: none; }
  .perk { flex: 0 0 auto; white-space: nowrap; }
  .note .full { display: none; }
}
@media (min-width: 641px) { .note .short { display: none; } }

/* grid */
.listhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-block: 20px 12px; }
.listhead h2 { margin: 0; font-size: 20px; letter-spacing: -0.02em; }
.listhead span { color: var(--faint); font-size: 14px; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding-bottom: 40px; }
@media (max-width: 1080px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

.card { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; min-width: 0; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.cover { position: relative; aspect-ratio: 1 / 1; background: var(--surface-2); overflow: hidden; }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.card:hover .cover img { transform: scale(1.035); }
.cbody { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.cmeta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); font-weight: 700; min-width: 0; }
.cmeta img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; background: #fff; flex: 0 0 auto; }
.cmeta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cteach { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; margin-top: 2px; }
.clabel { font-size: 13.5px; color: var(--muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cprice { margin-top: auto; padding-top: 12px; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.cprice b { font-size: 21px; letter-spacing: -0.02em; }
.cprice span { color: var(--faint); font-size: 13px; font-weight: 600; }
.cfull { font-size: 12.5px; color: var(--green-ink); font-weight: 600; }
@media (max-width: 760px) {
  .cbody { padding: 10px 11px 12px; }
  .cteach { font-size: 15px; }
  .clabel { font-size: 12.5px; }
  .cprice b { font-size: 18px; }
}

/* featured: итоговое сочинение */
.feat { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--surface); border: 1.5px solid var(--green); margin-bottom: 18px; transition: box-shadow .18s; }
.feat:hover { box-shadow: var(--shadow-2); }
.feat .logos { display: flex; }
.feat .logos img { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--surface); margin-left: -10px; background: #fff; object-fit: cover; }
.feat .logos img:first-child { margin-left: 0; }
.feat h3 { margin: 0; font-size: 18px; letter-spacing: -0.015em; }
.feat p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.feat .fp { text-align: right; }
.feat .fp b { font-size: 24px; letter-spacing: -0.02em; display: block; }
.feat .fp span { font-size: 12.5px; color: var(--green-ink); font-weight: 700; }
@media (max-width: 640px) { .feat { grid-template-columns: 1fr auto; gap: 12px; } .feat .logos { grid-column: 1 / -1; } }

.empty { grid-column: 1 / -1; text-align: center; padding: 48px 16px; color: var(--muted); }
.empty button { margin-top: 12px; }

/* course page */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13.5px; color: var(--faint); padding-block: 18px 6px; }
.crumbs a:hover { color: var(--ink); }
.crumbs i { font-style: normal; opacity: .5; }
.course { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; padding-bottom: 60px; }
@media (max-width: 980px) { .course { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-bottom: 110px; } }
.chero { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: center; }
.chero .cover { border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
.chero .cover::after { display: none; }
@media (max-width: 640px) { .chero { grid-template-columns: minmax(0, 1fr); gap: 16px; } .chero .cover { max-width: 420px; } }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--surface-2); font-size: 12.5px; font-weight: 700; color: var(--muted); }
.tag img { width: 18px; height: 18px; border-radius: 50%; background: #fff; object-fit: cover; }
.tag.g { background: var(--green-soft); color: var(--green-ink); }
.chero h1 { margin: 0; font-size: clamp(28px, 4.4vw, 42px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 800; text-wrap: balance; }
.chero h1 small { display: block; font-size: .5em; letter-spacing: -0.015em; color: var(--muted); font-weight: 600; margin-top: 8px; line-height: 1.25; }
.chero .lead { margin: 14px 0 0; color: var(--muted); font-size: 16px; max-width: 56ch; }

.sec { margin-top: 30px; }
.sec h2 { font-size: 21px; letter-spacing: -0.02em; margin: 0 0 14px; }
.box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; }

.teacher { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: start; }
.teacher img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.teacher h3 { margin: 4px 0 6px; font-size: 18px; letter-spacing: -0.015em; }
.ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ul li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; color: var(--muted); font-size: 14.5px; }
.ul li svg { width: 20px; height: 20px; color: var(--green); margin-top: 1px; }

.months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 520px) { .months { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mt { position: relative; text-align: left; border: 1.5px solid var(--line); background: var(--surface); border-radius: var(--r-md); padding: 12px 14px; cursor: pointer; display: grid; gap: 2px; transition: border-color .15s, box-shadow .15s; }
.mt:hover { border-color: color-mix(in srgb, var(--green) 50%, var(--line)); }
.mt .mn { font-weight: 700; font-size: 15px; }
.mt .mp { font-size: 14px; color: var(--muted); font-weight: 600; }
.mt .ms { font-size: 11.5px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; }
.mt .ms.now { color: var(--green-ink); }
.mt.on { border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent); }
.mt.on::after { content: ""; position: absolute; right: 12px; top: 12px; width: 18px; height: 18px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.mt.full { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 40%, var(--line)); padding: 14px 16px; }
.mt.full .mn { font-size: 16.5px; }
.mt.full .mp { color: var(--green-ink); }
.mt.full .fr { text-align: right; padding-right: 26px; }
.mt.full .fr b { font-size: 20px; letter-spacing: -0.02em; display: block; }
.mt.full .fr s { color: var(--faint); font-size: 13px; }

.sched { margin-top: 14px; }
.sched img { width: 100%; border-radius: var(--r-md); display: block; border: 1px solid var(--line); }
.sched .ph { border: 1.5px dashed var(--line); border-radius: var(--r-md); padding: 22px; text-align: center; color: var(--faint); font-size: 14px; }

.guar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 520px) { .guar { grid-template-columns: minmax(0, 1fr); } }
.g1 { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; }
.g1 .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--green-soft); color: var(--green-ink); display: grid; place-items: center; }
.g1 .ic svg { width: 20px; height: 20px; }
.g1 b { display: block; font-size: 14.5px; }
.g1 span { font-size: 13.5px; color: var(--muted); }

/* buy box */
.buy { align-content: start; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 84px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-1); display: grid; gap: 14px; }
.buy .bl { font-size: 12px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.buy .bsel { width: 100%; }
.buy .bp { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.buy .bp b { font-size: 32px; letter-spacing: -0.03em; }
.buy .bp s { color: var(--faint); font-size: 15px; }
.buy .hint { font-size: 13.5px; color: var(--green-ink); font-weight: 600; background: var(--green-soft); border-radius: 12px; padding: 9px 12px; cursor: pointer; border: 0; text-align: left; }
.btn { height: 50px; border-radius: 14px; border: 0; font-weight: 700; font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.btn.pri { background: var(--green); color: var(--on-green); box-shadow: 0 6px 18px color-mix(in srgb, var(--green) 35%, transparent); }
.btn.pri:hover { filter: brightness(1.05); }
.btn.alt { background: var(--surface-2); color: var(--ink); }
.btn svg { width: 19px; height: 19px; }
.bact { display: flex; flex-direction: column; gap: 10px; }
.buy .small { font-size: 12.5px; color: var(--faint); line-height: 1.45; }
@media (max-width: 980px) { .buy { display: none; } }

.mbar { display: none; }
@media (max-width: 980px) {
  .mbar { display: flex; position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; gap: 12px; align-items: center; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: 10px max(16px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
  .mbar .mi { flex: 1; min-width: 0; }
  .mbar .mi span { display: block; font-size: 12.5px; color: var(--faint); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mbar .mi b { font-size: 21px; letter-spacing: -0.02em; }
  .mbar .btn { width: auto; padding: 0 26px; height: 48px; }
}

.rel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 220px); gap: 12px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }

/* sheet */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(4, 10, 6, .48); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.sheet { width: min(440px, 100%); background: var(--surface); border-radius: 24px; padding: 22px; box-shadow: var(--shadow-2); display: grid; gap: 14px; max-height: calc(100% - 32px); overflow: auto; }
@media (max-width: 640px) { .scrim { place-items: end stretch; padding: 0; } .sheet { width: 100%; border-radius: 24px 24px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); } }
.sheet h3 { margin: 0; font-size: 20px; letter-spacing: -0.02em; }
.sheet .sum { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--surface-2); border-radius: 16px; padding: 10px; }
.sheet .sum img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.sheet .sum b { display: block; font-size: 14.5px; }
.sheet .sum span { font-size: 13px; color: var(--muted); }
.sheet .sum .tot { font-size: 18px; font-weight: 800; }
.sheet label { font-size: 13px; font-weight: 700; color: var(--muted); }
.sheet input[type=email] { width: 100%; height: 48px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); padding: 0 14px; font-size: 16px; margin-top: 6px; }
.sheet .or { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 12.5px; }
.sheet .or::before, .sheet .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sheet .done { text-align: center; padding: 8px 0; }
.sheet .done svg { width: 48px; height: 48px; color: var(--green); }
.x { justify-self: end; border: 0; background: var(--surface-2); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 1; }

.toast { position: fixed; z-index: 50; left: 50%; bottom: calc(72px + max(14px, env(safe-area-inset-bottom, 0px))); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow-2); }



/* ---------- home ---------- */
.hm-hero { padding-block: 40px 28px; }
.hm-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; }
@media (max-width: 900px) { .hm-hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; } .hm-hero { padding-block: 26px 18px; } }
.hm-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--green-ink); background: var(--green-soft); border-radius: 999px; padding: 6px 12px; }
.hm-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.hm-hero h1 { margin: 16px 0 0; font-size: clamp(36px, 6vw, 64px); line-height: 0.98; letter-spacing: -0.045em; font-weight: 800; text-wrap: balance; }
.hm-hero h1 em { font-style: normal; color: var(--green); }
.hm-hero p { margin: 18px 0 0; color: var(--muted); font-size: clamp(15.5px, 1.7vw, 18px); max-width: 52ch; }
.hm-prices { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.hm-prices div { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 12px 16px; min-width: 150px; }
.hm-prices b { display: block; font-size: 24px; letter-spacing: -0.03em; }
.hm-prices span { font-size: 13px; color: var(--faint); font-weight: 600; }
.hm-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.hm-ctas .btn { width: auto; padding: 0 24px; }
@media (max-width: 480px) { .hm-ctas { flex-wrap: nowrap; } .hm-ctas .btn { flex: 1 1 0; padding: 0 10px; font-size: 15px; white-space: nowrap; } }

.hm-art { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 520px; justify-self: end; width: 100%; }
.hm-art a { position: relative; display: block; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-2); aspect-ratio: 1 / 1; background: var(--surface-2); transition: transform .2s ease; }
.hm-art a:nth-child(2n) { transform: translateY(28px); }
.hm-art a:hover { transform: translateY(-4px); }
.hm-art a:nth-child(2n):hover { transform: translateY(24px); }
.hm-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-art span { position: absolute; left: 10px; bottom: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; gap: 6px; background: rgba(255, 255, 255, .94); color: #070908; border-radius: 12px; padding: 7px 10px; font-size: 12.5px; font-weight: 700; box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.hm-art span b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-art span em { font-style: normal; color: #007A35; white-space: nowrap; }
@media (max-width: 900px) { .hm-art { justify-self: stretch; max-width: none; gap: 10px; padding-bottom: 22px; } .hm-art a { border-radius: 18px; } .hm-art a:nth-child(2n) { transform: translateY(18px); } .hm-art span { font-size: 11.5px; padding: 6px 8px; left: 7px; right: 7px; bottom: 7px; } }

.hm-sec { padding-block: 34px 6px; }
.hm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.hm-head h2 { margin: 0; font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.03em; line-height: 1.1; }
.hm-head p { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
.hm-more { color: var(--green-ink); font-weight: 700; font-size: 15px; white-space: nowrap; }
.hm-more:hover { text-decoration: underline; }

.hm-subj { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
@media (max-width: 640px) { .hm-subj { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.hm-subj button { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 18px; padding: 14px 15px; cursor: pointer; display: grid; gap: 2px; transition: transform .15s, box-shadow .15s, border-color .15s; }
.hm-subj button:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); border-color: color-mix(in srgb, var(--green) 45%, var(--line)); }
.hm-subj b { font-size: 15.5px; letter-spacing: -0.01em; }
.hm-subj span { font-size: 13px; color: var(--faint); font-weight: 600; }
.hm-subj em { font-style: normal; color: var(--green-ink); }

.hm-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 14px; }
.hm-tabs::-webkit-scrollbar { display: none; }

.hm-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: st; }
@media (max-width: 760px) { .hm-steps { grid-template-columns: minmax(0, 1fr); } }
.hm-step { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 20px; position: relative; }
.hm-step::before { counter-increment: st; content: counter(st); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--green); color: var(--on-green); font-weight: 700; font-size: 17px; margin-bottom: 14px; }
.hm-step b { display: block; font-size: 17px; letter-spacing: -0.015em; }
.hm-step span { display: block; margin-top: 4px; color: var(--muted); font-size: 14.5px; }

.hm-price { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .hm-price { grid-template-columns: minmax(0, 1fr); } }
.hm-pc { background: var(--surface); border: 1.5px solid var(--line); border-radius: 24px; padding: 22px; display: grid; gap: 6px; align-content: start; }
.hm-pc.best { border-color: var(--green); background: linear-gradient(180deg, var(--green-soft), var(--surface) 70%); }
.hm-pc .lab { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.hm-pc.best .lab { color: var(--green-ink); }
.hm-pc .big { font-size: 40px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
.hm-pc .big small { font-size: 16px; font-weight: 600; color: var(--faint); letter-spacing: 0; }
.hm-pc .alt100 { font-size: 14px; color: var(--muted); font-weight: 600; }
.hm-pc p { margin: 8px 0 0; color: var(--muted); font-size: 14.5px; }

.hm-schools { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
@media (max-width: 640px) { .hm-schools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.hm-schools button { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 18px; padding: 10px 12px; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.hm-schools button:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.hm-schools img { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; background: #fff; }
.hm-schools .ph { width: 40px; height: 40px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; font-weight: 700; color: var(--muted); }
.hm-schools b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-schools span { font-size: 12.5px; color: var(--faint); font-weight: 600; }
.hm-seo { color: var(--faint); font-size: 14px; max-width: 80ch; margin: 16px 0 0; }

.hm-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .hm-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hm-why { grid-template-columns: minmax(0, 1fr); } }

.hm-free { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; background: var(--ink); color: var(--bg); border-radius: 28px; padding: 26px 28px; }
.hm-free h3 { margin: 0; font-size: clamp(20px, 2.6vw, 26px); letter-spacing: -0.025em; }
.hm-free p { margin: 6px 0 0; opacity: .75; font-size: 15px; max-width: 56ch; }
.hm-free .btn { width: auto; padding: 0 24px; background: var(--green); color: var(--on-green); }
@media (max-width: 640px) { .hm-free { grid-template-columns: minmax(0, 1fr); padding: 22px; } }

.hm-rev { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; }
.hm-rev > * { scroll-snap-align: start; }
.hm-vids { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 18px; }
.hm-vid { border: 0; background: none; padding: 0; cursor: pointer; display: grid; justify-items: center; gap: 8px; color: var(--ink); }
.hm-vid .ring { position: relative; width: 168px; height: 168px; border-radius: 50%; padding: 4px; background: conic-gradient(from 210deg, var(--green), #63DD88, var(--green)); display: block; }
.hm-vid .ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; border: 3px solid var(--bg); }
.hm-vid .pl { position: absolute; right: 8px; bottom: 8px; width: 42px; height: 42px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-1); display: grid; place-items: center; }
.hm-vid .pl svg { width: 18px; height: 18px; color: var(--green-ink); margin-left: 2px; }
.hm-vid .vn { font-weight: 700; font-size: 15px; text-align: center; line-height: 1.25; }
.hm-vid .vn small { display: block; font-weight: 600; color: var(--faint); font-size: 12.5px; }
@media (max-width: 560px) { .hm-vids { gap: 12px; justify-content: space-between; flex-wrap: nowrap; } .hm-vid .ring { width: 104px; height: 104px; padding: 3px; } .hm-vid .pl { width: 32px; height: 32px; right: 2px; bottom: 2px; } .hm-vid .pl svg { width: 14px; height: 14px; } }
.hm-txt { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.hm-txt .stars { color: #F5B400; letter-spacing: 2px; font-size: 14px; }
.hm-txt q { quotes: none; color: var(--ink); font-size: 14.5px; line-height: 1.5; flex: 1; }
.hm-txt .who { display: flex; align-items: center; gap: 10px; }
.hm-txt .ava { width: 36px; height: 36px; border-radius: 50%; background: var(--green-soft); color: var(--green-ink); display: grid; place-items: center; font-weight: 700; }
.hm-txt .who b { display: block; font-size: 14px; }
.hm-txt .who span { font-size: 12.5px; color: var(--faint); font-weight: 600; }

.hm-faq { display: grid; gap: 8px; max-width: 860px; }
.hm-faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 0 18px; }
.hm-faq summary { cursor: pointer; list-style: none; padding: 16px 0; font-weight: 700; font-size: 16px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.hm-faq summary::-webkit-details-marker { display: none; }
.hm-faq summary::after { content: "+"; font-size: 22px; font-weight: 500; color: var(--faint); transition: transform .2s; }
.hm-faq details[open] summary::after { transform: rotate(45deg); }
.v9-home #faq { content-visibility: auto; contain-intrinsic-size: auto 860px; }
.hm-faq details p { margin: 0 0 16px; color: var(--muted); font-size: 15px; max-width: 70ch; }

.foot { margin-top: 48px; }
.foot .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 24px; padding-block: 30px; }
@media (max-width: 760px) { .foot .wrap { grid-template-columns: minmax(0, 1fr); } }
.foot b { display: block; color: var(--ink); font-size: 14px; margin-bottom: 8px; }
.foot a { display: block; color: var(--muted); font-size: 14px; padding: 3px 0; }
.foot p { margin: 8px 0 0; font-size: 13.5px; max-width: 40ch; }

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

/* ---------- v5: база (тема, первый экран, шапка) ---------- */
.tbtn.theme { width: 40px; min-width: 40px; flex: 0 0 40px; padding: 0; justify-content: center; }
.tbtn.theme .sun { display: none; }
:root[data-theme="dark"] .tbtn.theme .sun { display: block; }
:root[data-theme="dark"] .tbtn.theme .moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tbtn.theme .sun { display: block; } :root:not([data-theme="light"]) .tbtn.theme .moon { display: none; } }
.hm-hero .wrap { grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr); }
.hm-phone { width: 100%; justify-self: end; }
@media (max-width: 900px) { .hm-phone { max-width: 400px; justify-self: center; } }
#courses { scroll-margin-top: 76px; }
.hm-subjchips { margin-bottom: 14px; }
.hm-subjchips .chip { padding: 8px 14px; font-size: 14px; }
.hm-subjchips .chip i { font-style: normal; opacity: .55; margin-left: 2px; font-weight: 700; }
.hm-subjchips .chip.on i { opacity: .7; }
#hgrid { padding-bottom: 0; }
.hm-allrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; color: var(--faint); font-size: 14px; font-weight: 600; }
.hm-kick { display: block; margin-bottom: 6px; color: #63DD88; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
/* подпись над заголовком на фоне страницы (а не в тёмном баннере) — цвет текста-ссылки, читается в обеих темах */
.hm-head .hm-kick { color: var(--green-ink); }
.hm-free { background: #0B110E; color: #fff; border: 1px solid var(--line); }
.hm-free p { color: rgba(255, 255, 255, .72); opacity: 1; }
.hm-logos { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-logos button { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; text-align: left; transition: transform .15s, box-shadow .15s; }
.hm-logos button:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.hm-logos img, .hm-logos .ph { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #fff; display: grid; place-items: center; font-weight: 700; color: var(--muted); }
.hm-logos b { display: block; font-size: 14px; line-height: 1.2; }
.hm-logos small { display: block; font-size: 12px; color: var(--faint); font-weight: 600; }

@media (max-width: 900px) { .hm-hero .wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .top .wrap { gap: 8px; } .logo img { height: 28px; } }
@media (max-width: 359px) { .logo img { height: 22px; } .tbtn { padding: 0 9px; } .top .wrap { gap: 6px; } }
@media (max-width: 359px) { .hm-ctas { flex-wrap: wrap; } .hm-ctas .btn { flex: 1 1 100%; } }
@media (max-width: 900px) { .tbtn.login span { display: none; } .tbtn.login { padding: 0 12px; } .top .wrap { gap: 10px; } .nav a { padding: 8px 10px; } }

body { margin: 0; }

/* ---------- v5: главная, каталог и страница курса ---------- */
.chips.sch { margin: -4px 0 14px; }
.chip.schip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 5px; }
.chip.schip img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: #fff; }
.chip i { font-style: normal; opacity: .55; margin-left: 2px; font-weight: 700; }
.chip.on i { opacity: .75; }
.hm-subjchips .chip { display: inline-flex; align-items: center; gap: 7px; }
.hm-subjchips .csi { display: inline-grid; width: 20px; height: 20px; color: var(--ink); }
.hm-subjchips .chip.on .csi { color: var(--bg); }
.hm-subjchips .csi svg { width: 20px; height: 20px; }

/* ИС 5 в 1 — как в нашем магазине */
.isb { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 16px; margin: 0 0 14px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--green) 45%, var(--line)); border-radius: 20px; background: linear-gradient(90deg, color-mix(in srgb, #fff3b0 55%, var(--surface)), var(--green-soft)); color: var(--ink); transition: box-shadow .18s; }
:root[data-theme="dark"] .isb { background: linear-gradient(90deg, #1c2412, var(--green-soft)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .isb { background: linear-gradient(90deg, #1c2412, var(--green-soft)); } }
.isb:hover { box-shadow: var(--shadow-2); }
.isb-l { display: flex; gap: 4px; }
.isb-l img { width: 40px; height: 40px; border-radius: 12px; background: #fff; object-fit: contain; padding: 4px; box-shadow: 0 2px 6px rgba(7,20,12,.08); }
.isb-t { display: grid; gap: 2px; min-width: 0; }
.isb-t em { justify-self: start; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--green-ink); background: color-mix(in srgb, var(--green) 16%, transparent); border-radius: 999px; padding: 2px 8px; }
.isb-t b { font-size: 19px; letter-spacing: -.02em; }
.isb-t small { color: var(--muted); font-size: 13.5px; }
.isb-p { font-size: 20px; font-weight: 800; }
.isb-a { width: 44px; height: 44px; border-radius: 14px; background: var(--green); color: #fff; display: grid; place-items: center; }
.isb-a svg { width: 20px; height: 20px; }
@media (max-width: 640px) { .isb { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; } .isb-l { grid-column: 1 / -1; } .isb-l img { width: 34px; height: 34px; } .isb-t small { display: none; } .isb-a { display: none; } .isb-t b { font-size: 17px; } }

/* как получить доступ — зелёная полоса с номерами */
.flow { border-radius: 28px; padding: 30px; background: linear-gradient(135deg, var(--green-soft), color-mix(in srgb, var(--green-soft) 40%, var(--surface))); border: 1px solid color-mix(in srgb, var(--green) 22%, var(--line)); }
.flow-head h2 { margin: 0; font-size: clamp(24px, 3vw, 32px); letter-spacing: -.03em; line-height: 1.1; }
.flow-head p { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
.flow-steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; position: relative; }
.flow-steps::before { content: ""; position: absolute; left: 26px; right: 16%; top: 25px; border-top: 2px dashed color-mix(in srgb, var(--green) 45%, transparent); }
.flow-steps li { position: relative; display: grid; gap: 6px; align-content: start; }
.flow-steps .n { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; font-size: 22px; font-weight: 700; box-shadow: 0 0 0 6px var(--green-soft), 0 8px 20px color-mix(in srgb, var(--green) 35%, transparent); margin-bottom: 8px; }
.flow-steps b { font-size: 19px; letter-spacing: -.02em; }
.flow-steps span:not(.n) { color: var(--muted); font-size: 15px; line-height: 1.5; max-width: 32ch; }
.flow-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 26px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--green) 20%, var(--line)); }
.flow-foot .btn { width: auto; padding: 0 28px; }
.flow-help { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.flow-help .ic { width: 42px; height: 42px; border-radius: 50%; background: var(--surface); color: #2AABEE; display: grid; place-items: center; box-shadow: var(--shadow-1); }
.flow-help .ic svg { width: 21px; height: 21px; }
.flow-help b { display: block; font-size: 15px; }
.flow-help small { display: block; color: var(--muted); font-size: 13.5px; }
@media (max-width: 760px) {
  .flow { padding: 22px 18px; border-radius: 24px; }
  .flow-steps { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .flow-steps::before { left: 25px; right: auto; top: 26px; bottom: 26px; border-top: 0; border-left: 2px dashed color-mix(in srgb, var(--green) 45%, transparent); }
  .flow-steps li { grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; }
  .flow-steps .n { grid-row: 1 / 3; margin: 0; }
  .flow-foot .btn { width: 100%; }
}

/* преимущества — белые плитки с крупной иконкой */
.adv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.adv-i { display: grid; gap: 6px; align-content: start; padding: 22px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-1); }
.adv-i .ic { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: var(--green); color: var(--on-green); margin-bottom: 8px; }
.adv-i .ic svg { width: 24px; height: 24px; }
.adv-i b { font-size: 17px; letter-spacing: -.015em; line-height: 1.3; }
.adv-i span:not(.ic) { color: var(--muted); font-size: 15px; line-height: 1.5; }
@media (max-width: 900px) { .adv { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .adv { grid-template-columns: minmax(0, 1fr); gap: 10px; } .adv-i { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 16px; } .adv-i .ic { grid-row: 1 / 3; width: 44px; height: 44px; margin: 0; } .adv-i b { font-size: 16px; } .adv-i span:not(.ic) { font-size: 14px; } }

/* отзывы — как на нашем сайте: видео между текстовыми */
.revs-head { text-align: center; margin-bottom: 22px; }
.pill { display: inline-block; padding: 5px 14px; border-radius: 999px; background: var(--green-soft); color: var(--green-ink); font-size: 13px; font-weight: 700; border: 1px solid color-mix(in srgb, var(--green) 25%, transparent); }
.revs-head h2 { margin: 12px 0 0; font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -.035em; line-height: 1.1; }
.revs-head p { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
.rv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: center; }
.rv-txt { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); min-height: 200px; }
.rv-top { display: flex; align-items: center; gap: 10px; }
.rv-ava { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; }
.rv-top b { display: block; font-size: 15px; }
.rv-top small { display: block; font-size: 12px; color: var(--faint); font-weight: 700; }
.rv-txt p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rv-stars { color: var(--green); letter-spacing: 2px; font-size: 15px; }
.rv-more { align-self: flex-start; border: 0; cursor: pointer; padding: 7px 12px; border-radius: 999px; background: var(--green-soft); color: var(--green-ink); font-weight: 700; font-size: 12.5px; }
.rv-vid { display: grid; justify-items: center; gap: 10px; border: 0; background: none; padding: 0; cursor: pointer; color: var(--muted); }
.rv-circ { position: relative; width: min(180px, 100%); aspect-ratio: 1; border-radius: 50%; overflow: visible; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--green) 55%, transparent); background: var(--surface-2); }
.rv-circ img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.rv-dur { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 2px 7px; border-radius: 9px; background: rgba(0,0,0,.45); color: #fff; font-size: 11px; font-weight: 700; }
.rv-mute { position: absolute; right: 2px; bottom: 6px; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #43544a; display: grid; place-items: center; box-shadow: 0 3px 12px rgba(0,0,0,.12); }
.rv-mute svg { width: 17px; height: 17px; }
.rv-cap { font-size: 13px; }
.revs-more { text-align: center; margin-top: 18px; }
.pill-btn { display: inline-block; padding: 9px 18px; border-radius: 999px; background: var(--green-soft); color: var(--green-ink); font-weight: 700; font-size: 14px; border: 1px solid color-mix(in srgb, var(--green) 25%, transparent); }
.rv-sheet .rv-top { margin: 4px 0 10px; }
.rv-full { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ink); white-space: pre-line; }
@media (max-width: 900px) { .rv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .rv-grid { grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: 74%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px))); padding-right: max(16px, env(safe-area-inset-right, 0px)); scrollbar-width: none; }
  .rv-grid::-webkit-scrollbar { display: none; }
  .rv-grid > * { scroll-snap-align: start; }
  .rv-txt { min-height: 190px; }
  .rv-circ { width: 150px; }
}

/* вопросы — во всю ширину */
.hm-faq { max-width: none; }

/* подвал — как на старом сайте (partials/footer.html + base.css): тёмный в обеих темах, логотип в белой плашке,
   «Навигация» и «Связь», компактная карточка поддержки справа. Без полосы между страницей и подвалом. */
.foot { display: none; }
.sfoot { position: relative; overflow: hidden; margin-top: 72px; background: #07130c; color: #fff; }
.sfoot::after { content: ""; position: absolute; left: -160px; bottom: -220px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(27,207,86,.14) 0%, rgba(27,207,86,0) 70%); pointer-events: none; }
.sf-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(260px, 1.4fr) 1fr 1fr minmax(0, 1.2fr); gap: 48px; align-items: start; padding-block: 64px 32px; }
.sf-brand { display: flex; flex-direction: column; gap: 14px; max-width: 340px; }
.sf-logo { display: inline-flex; align-items: center; width: fit-content; margin-bottom: 4px; padding: 7px 12px; border-radius: 14px; background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.sf-logo img { display: block; width: auto; height: 32px; }
.sf-brand p { margin: 0; color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.65; }
.sf-brand .sf-slogan { color: #fff; font-weight: 700; }
.sf-col { display: flex; flex-direction: column; align-items: flex-start; }
.sf-col h3 { position: relative; margin: 0 0 18px; padding-left: 14px; color: #fff; font-size: 15px; font-weight: 800; letter-spacing: -.015em; line-height: 1; }
.sf-col h3::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 14px; border-radius: 2px; background: #1bcf56; }
.sfoot .sf-col a { margin-bottom: 11px; color: rgba(255,255,255,.72); font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; transition: color .2s ease, transform .2s ease; }
.sfoot .sf-col a:hover { color: #fff; transform: translateX(3px); }
.sf-contact { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.sf-eye { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.5); font-size: 12px; font-weight: 700; letter-spacing: .01em; line-height: 1; }
.sf-eye::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #1bcf56; box-shadow: 0 0 0 3px rgba(27,207,86,.18); }
.sf-contact strong { color: #fff; font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.45; }
.sfoot .sf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; height: 42px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: -.01em; line-height: 1; transition: .2s ease; }
.sfoot .sf-btn:hover { background: #1bcf56; border-color: #1bcf56; transform: translateY(-2px); }
.sf-btn svg { width: 14px; height: 14px; }
.sf-bottom { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; padding-block: 18px 32px; }
.sf-bottom::before { content: ""; position: absolute; top: 0; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); border-top: 1px solid rgba(255,255,255,.08); }
.sf-bottom > span { color: rgba(255,255,255,.52); font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.sf-bottom nav { display: flex; gap: 8px; flex-wrap: wrap; }
.sfoot .sf-bottom nav a { padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.55); font-size: 12.5px; font-weight: 700; transition: .2s ease; }
.sfoot .sf-bottom nav a:hover { color: #fff; border-color: rgba(27,207,86,.4); }
@media (max-width: 980px) { .sf-in { grid-template-columns: 1fr 1fr; gap: 36px; } .sf-brand, .sf-contact { grid-column: 1 / -1; max-width: none; } }
@media (max-width: 640px) { .sf-in { gap: 28px 22px; padding-block: 48px 24px; } .sf-bottom { padding-block: 16px 24px; } }
@media (max-width: 980px) { body:has(.mbar) .sfoot { padding-bottom: calc(62px + max(14px, env(safe-area-inset-bottom, 0px))); } }

/* каталог в стиле нашего магазина */
.shop { padding-bottom: 20px; }
.shop .crumbs span { color: var(--ink); }
.shop-hero { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 6px 0 14px; }
.shop-hero h1 { margin: 0; font-size: clamp(34px, 5.6vw, 60px); letter-spacing: -.045em; line-height: 1; font-weight: 800; }
.shop-hero p { margin: 12px 0 0; color: var(--muted); font-size: 16px; }
.shop-masc { width: 190px; height: auto; margin: -20px 120px -40px 0; position: relative; z-index: 1; }
.years { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.yr { border: 1px solid var(--line); background: var(--surface); border-radius: 22px; padding: 14px; cursor: pointer; display: grid; justify-items: center; gap: 2px; color: var(--ink); }
.yr b { font-size: 28px; letter-spacing: -.03em; }
.yr span { font-size: 13px; font-weight: 700; color: var(--faint); }
.yr.on { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 45%, var(--line)); }
.yr.on b, .yr.on span { color: var(--green-ink); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 26px; padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-1); }
.ph { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.stepn { padding: 3px 11px; border-radius: 999px; background: var(--green-soft); color: var(--green-ink); font-size: 13px; font-weight: 700; }
.ph h2 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
.phr { margin-left: auto; color: var(--faint); font-size: 13px; font-weight: 700; }
.subjs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.stile { display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); cursor: pointer; color: var(--ink); transition: border-color .15s, box-shadow .15s, transform .15s; }
.stile:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.stile .si { flex: 0 0 auto; width: 40px; height: 40px; color: var(--ink); }
.stile .si svg { width: 40px; height: 40px; }
.stile b { display: block; font-size: 16.5px; letter-spacing: -.015em; }
.stile small { display: block; font-size: 12.5px; color: var(--faint); font-weight: 700; }
.stile.on { border-color: var(--green); background: var(--green-soft); }
.stile.on b { color: var(--green-ink); }
#step2 { scroll-margin-top: 76px; }
#sgrid { padding-bottom: 0; }
@media (max-width: 1000px) { .subjs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .subjs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .stile { padding: 11px 12px; gap: 10px; } .stile .si, .stile .si svg { width: 32px; height: 32px; } .stile b { font-size: 15px; } .shop-masc { width: 120px; margin: 0 0 -30px; } .panel { padding: 14px; border-radius: 22px; } .phr { display: none; } }
@media (max-width: 420px) { .shop-masc { display: none; } }

/* страница курса — наш блок «Оформление курса» */
.cpage { padding-bottom: 60px; }
.cp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; grid-template-areas: "top buy" "more buy"; grid-template-rows: auto 1fr; gap: 14px 20px; align-items: start; }
.cp-top { grid-area: top; }
.cp-more { grid-area: more; }
.cp-more:empty { display: none; }
.cp-buy { grid-area: buy; }
.cp-more > :first-child { margin-top: 0; }
.cp-card { background: var(--surface); border: 1px solid var(--line); border-radius: 26px; padding: 24px; box-shadow: var(--shadow-1); min-width: 0; }
.cp-head { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.cp-cover { display: block; width: 110px; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: var(--surface-2); box-shadow: 0 10px 24px rgba(7,20,12,.14); }
.cp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-head h1 { margin: 0; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.03em; line-height: 1.12; }
.cp-sub { margin: 8px 0 0; color: var(--faint); font-size: 14.5px; font-weight: 700; }
.cp-sub .sch-ic { width: 22px; height: 22px; vertical-align: -6px; margin-right: 7px; }
.cp-sub em { font-style: normal; color: var(--green-ink); }
.cp-intro { margin: 18px 0 0; font-size: 15.5px; color: var(--muted); }
.cp-intro b { color: var(--ink); }
.cp-inc h3 { margin: 0 0 12px; font-size: 16px; }
.cp-ul.cp-ul2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; }
.wl i { font-style: normal; color: var(--green); }
.cp-ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cp-ul li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 15px; color: var(--muted); line-height: 1.45; }
.cp-ul svg { width: 20px; height: 20px; color: var(--green); margin-top: 1px; }
.cp-acc { margin-top: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg); overflow: hidden; }
.cp-acc summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; }
.cp-acc summary::-webkit-details-marker { display: none; }
.cp-acc summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: rotate(45deg); transition: transform .2s; }
.cp-acc[open] summary::after { transform: rotate(-135deg); }
.cp-acc summary b { display: block; font-size: 16px; }
.cp-acc summary small { display: block; font-size: 12.5px; color: var(--faint); font-weight: 600; }
.cp-tph { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; }
.cp-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--green-soft); color: var(--green-ink); flex: 0 0 auto; }
.cp-ic svg { width: 21px; height: 21px; }
.cp-ic.y { background: #fde68a; color: #92400e; }
.cp-acc > .cp-ul { padding: 4px 16px 16px; }
.cp-acc .sched { padding: 0 14px 14px; }
.cp-acc .sched img { width: 100%; border-radius: 14px; display: block; }
.cp-acc .sched .ph { padding: 18px; border-radius: 14px; background: var(--surface-2); color: var(--muted); font-size: 14px; text-align: center; display: block; margin: 0; }
.cp-buy { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 84px); background: var(--surface); border: 1px solid var(--line); border-radius: 26px; padding: 22px; box-shadow: var(--shadow-1); display: grid; gap: 14px; overflow: hidden; }
.cp-buy::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--green), #63DD88); }
.cp-buy h2 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.cp-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cp-opt { display: grid; gap: 2px; text-align: left; padding: 14px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; color: var(--ink); min-width: 0; }
.cp-opt b { font-size: 16px; }
.cp-opt small { font-size: 12px; color: var(--faint); font-weight: 600; }
.cp-opt strong { margin-top: 14px; font-size: 22px; letter-spacing: -.02em; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cp-opt strong i { font-style: normal; font-size: 12px; font-weight: 700; color: #fff; background: var(--green); border-radius: 999px; padding: 2px 7px; }
.cp-opt.on { border-color: var(--green); background: var(--green-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 14%, transparent); }
.cp-opts:has(.cp-opt:only-child) { grid-template-columns: 1fr; }
.cp-other { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; }
.cp-other .cp-ic { width: 38px; height: 38px; }
.cp-other > span:last-child { flex: 1; display: grid; }
.cp-other small { font-size: 12px; color: var(--faint); font-weight: 700; }
.cp-other select { border: 0; background: transparent; font-weight: 700; font-size: 15px; padding: 0; color: var(--ink); cursor: pointer; }
.cp-buy .hint { width: 100%; text-align: left; border: 0; cursor: pointer; padding: 10px 12px; border-radius: 12px; background: var(--green-soft); color: var(--green-ink); font-weight: 700; font-size: 13.5px; }
.cp-lock { margin: 0; text-align: center; color: var(--faint); font-size: 12px; font-weight: 600; }
.cp-rel { margin-top: 34px; }
.cp-rel h2 { margin: 0 0 14px; font-size: 24px; letter-spacing: -.025em; }
.cp-rel .grid { padding-bottom: 0; }
@media (max-width: 980px) {
  .cp-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "buy" "more"; grid-template-rows: none; }
  .cp-buy { position: static; }
  .cp-buy .bact { display: none; }
}
@media (max-width: 640px) {
  .cp-card { padding: 16px; border-radius: 22px; }
  .cp-head { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; }
  .cp-cover { width: 84px; border-radius: 14px; }
  .cp-ul.cp-ul2 { grid-template-columns: minmax(0, 1fr); }
  .cp-buy { padding: 16px; border-radius: 22px; }
}
@media (max-width: 400px) { .stile { min-width: 0; } .stile > span:last-child { min-width: 0; } .stile b { font-size: 14px; overflow-wrap: anywhere; } .stile small { font-size: 11.5px; } .stile .si, .stile .si svg { width: 26px; height: 26px; } .stile { gap: 8px; padding: 10px; } }

/* ---------- карточка годового курса ---------- */
.uc .uc-top { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; margin: 6px 6px 0; background: var(--surface-2); }
.uc .uc-top img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .35s ease; }
.uc:hover .uc-top img { transform: scale(1.03); }
.uc .uc-big { position: absolute; inset: 22% 34%; color: var(--green-ink); opacity: .5; }
.uc .uc-big svg { width: 100%; height: 100%; }
.uc .cbody { padding: 12px 14px 14px; gap: 4px; }
.uc .uc-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--faint); font-size: 12.5px; font-weight: 600; min-width: 0; }
.uc .uc-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc .uc-meta em { flex: 0 0 auto; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.uc .cteach { margin-top: 2px; font-size: 17px; }
.uc .clabel { font-size: 13px; }
.uc .cprice { align-items: baseline; }
.uc .cprice .cfull { margin-left: auto; font-size: 12.5px; }
/* шапка страницы курса */
.cp-cover.uc { box-shadow: none; background: none; }
.uc .uc-sm { width: 100%; height: 100%; aspect-ratio: auto; margin: 0; border-radius: inherit; }
@media (max-width: 760px) {
  .uc .uc-top { margin: 4px 4px 0; border-radius: 14px; }
  .uc .cbody { padding: 9px 10px 11px; }
  .uc .uc-meta em { display: none; }
  .uc .uc-meta { font-size: 11.5px; }
  .uc .cteach { font-size: 15px; }
  .uc .cprice .cfull { margin-left: 0; flex-basis: 100%; }
}

/* вариант 1: компактный каталог */
.shopA { padding-bottom: 30px; }
.shopA .crumbs span { color: var(--ink); }
.ca-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 4px 0 16px; }
.ca-head h1 { margin: 0; font-size: clamp(30px, 4.6vw, 46px); line-height: 1.04; letter-spacing: -.04em; font-weight: 800; }
.ca-head h1 em { font-style: normal; color: var(--green); }
.ca-head p { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.ca-tabs { display: flex; gap: 8px; align-items: center; }
.seg a { display: inline-block; padding: 7px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--muted); }
.seg a.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.seg.sm button { padding: 6px 12px; font-size: 13px; }
.ca-bar { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 65px); z-index: 5; display: flex; gap: 10px; align-items: center; padding: 10px 0; margin-bottom: 8px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ca-bar .chips { flex: 1 1 auto; }
.ca-bar .chip { display: inline-flex; align-items: center; gap: 7px; }
.ca-bar .csi, .hm-subjchips .csi { display: inline-grid; width: 20px; height: 20px; color: var(--ink); }
.ca-bar .chip.on .csi { color: var(--bg); }
.ca-bar .csi svg { width: 20px; height: 20px; }
.ca-bar .sel { flex: 0 0 auto; }
#cafeat .isb { margin-top: 6px; }
@media (max-width: 760px) {
  .ca-bar { flex-wrap: wrap; top: calc(env(safe-area-inset-top, 0px) + 61px); }
  .ca-bar .chips { flex: 1 1 100%; }
  .ca-bar .sel { flex: 1 1 auto; }
  .ca-tabs { width: 100%; justify-content: space-between; }
}

/* вариант 2: наш пошаговый — плитки школ */
.stiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sctile { display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); cursor: pointer; color: var(--ink); }
.sctile img { grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 10px; object-fit: contain; background: #fff; }
.sctile b { font-size: 16px; }
.sctile small { font-size: 12.5px; color: var(--faint); font-weight: 700; }
.sctile.on { border-color: var(--green); background: var(--green-soft); }
.sctile.on b { color: var(--green-ink); }
#step2, #step3 { scroll-margin-top: 76px; }
#step3 .grid { padding-bottom: 0; }
@media (max-width: 760px) { .stiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }

.note .vsw { margin-right: 14px; }
.note .vsw a { text-decoration: underline; }
@media (max-width: 760px) {
  .uc .uc-school { left: 7px; top: 7px; gap: 4px; padding: 3px 8px 3px 3px; font-size: 11px; }
  .uc .uc-school img { width: 18px; height: 18px; }
  .uc .uc-ph { width: 46%; top: 61%; padding: 3px; box-shadow: 0 10px 22px -8px rgba(7,20,12,.35), 0 0 0 4px color-mix(in srgb, var(--surface) 45%, transparent); }
}
.sctile > b, .sctile > small { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 400px) { .stile { flex-direction: column; align-items: flex-start; gap: 6px; } .stile b { overflow-wrap: normal; font-size: 14.5px; } .sctile { padding: 10px; column-gap: 9px; grid-template-columns: 30px minmax(0, 1fr); } .sctile img { width: 30px; height: 30px; } .sctile b { font-size: 14.5px; } }

/* 01.11: 3 карточки в ряд на компьютере, поиск, пустой результат */
@media (min-width: 1081px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
.ca-search { position: relative; display: flex; align-items: center; margin: 4px 0 2px; }
.ca-search svg { position: absolute; left: 16px; width: 20px; height: 20px; color: var(--faint); pointer-events: none; }
.ca-search input { width: 100%; height: 52px; padding: 0 46px 0 46px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; outline: none; transition: border-color .15s, box-shadow .15s; }
.ca-search input:focus { border-color: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 18%, transparent); }
.ca-search input::-webkit-search-cancel-button { display: none; }
.ca-search button { position: absolute; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.ca-search input:placeholder-shown + button { display: none; }
.grid.empty { display: block; }
.ca-none { padding: 40px 20px; text-align: center; border: 1px dashed var(--line); border-radius: 20px; color: var(--muted); }
.ca-none b { display: block; font-size: 18px; color: var(--ink); margin-bottom: 6px; }
.ca-none a, .ca-other a { color: var(--green-ink); font-weight: 700; }
.ca-other { grid-column: 1 / -1; padding: 6px 2px 0; color: var(--muted); font-size: 15px; }
.uc .uc-top:not(:has(img)) { background: linear-gradient(135deg, var(--green-soft), var(--surface-2)); }
@media (max-width: 760px) { .ca-search input { height: 48px; font-size: 15px; } .ca-search input::placeholder { font-size: 13.5px; } }

.uc-arch { position: absolute; inset: 0; display: grid; place-items: center; }
.uc-arch-l { width: 34%; aspect-ratio: 1; border-radius: 28%; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 28px rgba(16,40,24,.12); }
.uc-arch-l img { width: 72%; height: 72%; object-fit: contain; }
.uc-arch-s { position: absolute; right: 7%; bottom: 9%; width: 18%; aspect-ratio: 1; color: var(--green-ink); opacity: .55; }
.uc-arch-s svg { width: 100%; height: 100%; }

/* 01.11 (2): главная без цен — три факта о сервисе */
.hm-facts { list-style: none; margin: 22px 0 0; padding: 0; display: flex; gap: 10px; flex-wrap: nowrap; }
@media (max-width: 560px) { .hm-facts { flex-wrap: wrap; } }
.hm-facts li { display: grid; gap: 2px; min-width: 0; flex: 0 1 auto; padding: 12px 15px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.hm-facts b { font-size: 22px; letter-spacing: -.03em; line-height: 1.15; }
.hm-facts span, .hm-facts b { white-space: nowrap; }
.hm-facts span { font-size: 13px; color: var(--faint); font-weight: 600; }
@media (max-width: 560px) { .hm-facts { gap: 8px; } .hm-facts li { min-width: 0; flex: 1 1 calc(50% - 8px); padding: 10px 12px; } .hm-facts li:first-child { flex-basis: 100%; } .hm-facts b { font-size: 19px; } }

/* строка предметов: на компьютере все чипы видны (перенос), на телефоне — свайп с подсказкой */
@media (min-width: 761px) {
  .ca-bar { align-items: flex-start; }
  .ca-bar .chips, .hm-subjchips, .chips.sch { flex-wrap: wrap; overflow: visible; mask-image: none; -webkit-mask-image: none; row-gap: 8px; }
}

/* карточки курса: лёгкая тень всегда — видно, что это кнопка */
.card.uc { box-shadow: 0 1px 2px rgba(16,40,24,.05), 0 6px 18px rgba(16,40,24,.07); border-color: color-mix(in srgb, var(--line) 70%, transparent); cursor: pointer; }
.card.uc:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(16,40,24,.06), 0 16px 34px rgba(16,40,24,.14); }
.card.uc:active { transform: translateY(-1px); }
:root[data-theme="dark"] .card.uc { box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.35); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card.uc { box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.35); } }

/* «Преимущества»: живые карточки при наведении */
.adv-i { transition: transform .22s ease, box-shadow .22s ease; }
.adv-i .ic { transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
@media (hover: hover) {
  .adv-i:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(16,40,24,.14); }
  .adv-i:hover .ic { transform: rotate(-8deg) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) { .card.uc, .adv-i, .adv-i .ic { transition: none; } }

/* 01.11 (3): фильтры каталога одной строкой — поиск + «Предмет» + «Школа» */
.ca-tools { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 65px); z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) 230px 210px; gap: 10px; align-items: center; padding: 10px 0; margin: 4px 0 10px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ca-tools .ca-search { margin: 0; }
.ca-pick { position: relative; display: block; height: 52px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); transition: border-color .15s, background .15s; }
.ca-pick span { position: absolute; left: 16px; top: 8px; font-size: 11.5px; font-weight: 700; color: var(--faint); pointer-events: none; }
.ca-pick select { appearance: none; -webkit-appearance: none; width: 100%; height: 100%; padding: 20px 38px 4px 16px; border: 0; border-radius: 16px; background: transparent; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; outline: none; }
.ca-pick::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); pointer-events: none; }
.ca-pick:focus-within { border-color: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 18%, transparent); }
.ca-pick.on { border-color: color-mix(in srgb, var(--green) 55%, var(--line)); background: var(--green-soft); }
.ca-pick select option { color: #111; }
@media (max-width: 760px) {
  .ca-tools { grid-template-columns: 1fr 1fr; top: calc(env(safe-area-inset-top, 0px) + 61px); gap: 8px; }
  .ca-tools .ca-search { grid-column: 1 / -1; }
  .ca-pick { height: 48px; } .ca-pick select { font-size: 14px; }
}

.hm-tools { display: grid; grid-template-columns: 280px 240px; gap: 10px; margin: 0 0 18px; }
.ca-pick:has(select:disabled) { opacity: .6; } .ca-pick select:disabled { cursor: default; }
@media (max-width: 760px) { .hm-tools { grid-template-columns: 1fr 1fr; gap: 8px; } }

/* 01.11 (4): строка фильтров — ЕГЭ/ОГЭ + поиск + наши выпадающие списки */
.ca-tools { grid-template-columns: auto 240px 220px minmax(0, 1fr); }
.hm-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; grid-template-columns: none; }
.hm-tools .ca-dd { width: 260px; }
.ex-seg { height: 52px; align-items: center; padding: 5px; border-radius: 16px; background: var(--surface-2); }
.ex-seg button { height: 42px; padding: 0 20px; border-radius: 12px; font-size: 15px; }
.dd { position: relative; }
.dd-btn { width: 100%; height: 52px; display: grid; grid-template-columns: minmax(0, 1fr) 20px; grid-template-rows: auto auto; align-content: center; column-gap: 8px; text-align: left; padding: 0 14px 0 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.dd-btn:hover { border-color: color-mix(in srgb, var(--green) 40%, var(--line)); }
.dd-l { grid-column: 1; font-size: 11.5px; font-weight: 700; color: var(--faint); line-height: 1.2; }
.dd-v { grid-column: 1; display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 15px; font-weight: 700; line-height: 1.3; }
.dd-v .dd-vt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-ch { grid-column: 2; grid-row: 1 / 3; width: 20px; height: 20px; color: var(--muted); transition: transform .2s; }
.dd.open .dd-ch { transform: rotate(180deg); }
.dd.on .dd-btn { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 55%, var(--line)); }
.dd.open .dd-btn { border-color: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 18%, transparent); }
.dd-i { display: inline-grid; place-items: center; flex: 0 0 auto; width: 20px; height: 20px; color: var(--green-ink); }
.dd-i:empty { display: none; }
.dd-i svg { width: 20px; height: 20px; }
.dd-pop { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; min-width: 100%; width: max-content; max-width: min(340px, calc(100vw - 32px)); max-height: min(420px, 60vh); overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 18px 50px rgba(16,40,24,.18), 0 2px 6px rgba(16,40,24,.06); opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top; pointer-events: none; visibility: hidden; transition: opacity .16s ease, transform .16s ease, visibility 0s .16s; }
.dd.open .dd-pop { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .16s ease, transform .16s ease; }
.dd-o { width: 100%; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.dd-o .dd-i { width: 22px; height: 22px; display: inline-grid; }
.dd-o .dd-i:empty { display: inline-grid; }
.dd-o .dd-i svg, .dd-o .dd-i img { width: 22px; height: 22px; }
/* логотипы школ везде одинаково: маленькая белая плитка (у иконок свои цвета, на тёмном фоне они тоже читаются) */
.sch-ic { display: inline-block; box-sizing: border-box; width: 20px; height: 20px; padding: 2px; border-radius: 6px; background: #fff; object-fit: contain; box-shadow: 0 0 0 1px rgba(7, 20, 12, .1); }
.dd-o i { font-style: normal; font-size: 13px; font-weight: 700; color: var(--faint); min-width: 24px; text-align: right; }
.dd-o:hover { background: var(--surface-2); }
.dd-o.on { background: var(--green-soft); color: var(--green-ink); font-weight: 700; }
.dd-o.on i { color: var(--green-ink); }
.dd-o.zero { opacity: .45; }
.dd-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lnk { border: 0; background: none; padding: 0; font: inherit; color: var(--green-ink); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
:root[data-theme="dark"] .dd-pop { box-shadow: 0 18px 50px rgba(0,0,0,.55); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dd-pop { box-shadow: 0 18px 50px rgba(0,0,0,.55); } }
@media (max-width: 1080px) { .ca-tools { grid-template-columns: auto 1fr 1fr minmax(0, 1.2fr); } }
@media (max-width: 860px) {
  .ca-tools { grid-template-columns: 1fr 1fr; }
  .ca-tools .ex-seg { grid-column: 1 / -1; justify-self: start; }
  .ca-tools .ca-search { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .hm-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .hm-tools .ex-seg { grid-column: 1 / -1; justify-self: start; }
  .hm-tools .ca-dd { width: auto; }
  .ex-seg { height: 46px; } .ex-seg button { height: 36px; }
  .dd-btn { height: 48px; padding: 0 10px 0 12px; }
  .dd-v { font-size: 14px; }
  #caschw .dd-pop, #hschw .dd-pop { left: auto; right: 0; }
}
@media (max-width: 420px) { .dd-v .dd-i { display: none; } }

/* 01.11 (5): месяц на странице курса — наш выпадающий список; 100Б белым в тёмной теме */
.cp-mdd { margin-top: 10px; }
.cp-mdd .dd-btn { height: 56px; background: var(--bg); }
.cp-mdd:empty { min-height: 56px; }
.cp-mdd .dd-v { font-size: 16px; }
.cp-mdd .dd-pop { width: 100%; max-width: none; }
.cp-mdd .dd-o i { font-size: 14px; color: var(--muted); }

.cp-buy { overflow: visible; }
.cp-buy::before { border-radius: 26px 26px 0 0; left: 14px; right: 14px; }
.cp-mdd .dd-pop { max-height: min(460px, 70vh); }
.cp-buy:has(.dd.open) { z-index: 20; }


/* Школы под первым экраном: логотип, число курсов, лица преподавателей */
.hm-sch-sec { }
.hm-sch { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.sch-c { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 14px 14px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-1); color: inherit; text-decoration: none; transition: transform .18s, box-shadow .18s, border-color .18s; }
.sch-c:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--green) 40%, var(--line)); }
.sch-top { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; }
.sch-logo { box-sizing: border-box; width: 40px; height: 40px; border-radius: 12px; object-fit: contain; background: #fff; padding: 5px; box-shadow: 0 0 0 1px rgba(7, 20, 12, .1); }
.sch-top b { display: block; font-size: 15px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-top small { display: block; margin-top: 2px; font-size: 12px; color: var(--faint); font-weight: 600; line-height: 1.3; }
.sch-faces { display: flex; align-items: center; padding-left: 8px; }
.sch-faces img, .sch-faces i { width: 38px; height: 38px; border-radius: 50%; margin-left: -8px; border: 2.5px solid var(--surface); object-fit: cover; background: var(--chip); }
.sch-faces i { display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; color: var(--green-ink); background: var(--green-soft); }
.sch-go { position: absolute; right: 12px; bottom: 16px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: var(--chip); transition: background .18s, color .18s, transform .18s; }
.sch-go svg { width: 15px; height: 15px; }
.sch-c:hover .sch-go { background: var(--green); color: var(--on-green); transform: translateX(2px); }
@media (max-width: 1080px) { .hm-sch { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px) { .hm-sch { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .hm-sch { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -16px; padding: 2px 16px 10px; scrollbar-width: none; }
  .hm-sch::-webkit-scrollbar { display: none; }
  .sch-c { flex: 0 0 62%; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .sch-c, .sch-go { transition: none; } .sch-c:hover { transform: none; } }

/* Ссылки на страницы предметов и школ (SEO) */
.hm-subjl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hs-c { padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.hs-c h3 { margin: 6px 0 4px; font-size: 19px; letter-spacing: -0.01em; }
.hs-c p { margin: 0; color: var(--muted); font-size: 14px; }
.hs-links { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0; }
.hs-links a { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--chip); color: var(--ink); font-size: 13.5px; font-weight: 600; text-decoration: none; transition: background .15s, border-color .15s, color .15s; }
.hs-links a:hover { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 45%, var(--line)); color: var(--green-ink); }
.hm-allsch { margin: 14px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.8; }
.hm-allsch a { color: var(--green-ink); font-weight: 600; text-decoration: none; }
.hm-allsch a:hover { text-decoration: underline; }
@media (max-width: 760px) { .hm-subjl { grid-template-columns: 1fr; } }

/* Страница курса: что будет после оплаты */
.sch-faces em { margin-left: 10px; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.25; padding-right: 34px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hs-c .hm-kick { color: var(--green-ink); }

/* телефон с каналом курса — в стиле Telegram (iOS, тёмная тема) */
/* компьютер: телефон у правого края, карточки уведомлений заходят на его левую сторону */
.ph-art{position:relative;width:100%;aspect-ratio:34/46;container-type:inline-size;margin-inline:auto}
.ph-art .pa-in{position:absolute;inset:0;font-size:calc(100cqw / 34)}
.ph-art .pa-glow{position:absolute;left:8%;top:8%;width:84%;height:84%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--green) 22%,transparent),transparent);filter:blur(1.5em)}
.ph-phone{position:absolute;left:12em;top:.6em;width:21.4em;height:44.6em;border-radius:3.7em;background:#1b1d20;padding:.62em;box-shadow:0 0 0 .14em #3a3d42 inset,0 2.6em 4.4em -1em rgba(7,20,12,.38),0 .8em 1.6em rgba(7,20,12,.18)}
.pa-card{position:absolute;display:flex;align-items:center;gap:.8em;padding:.85em 1.1em;border-radius:1.4em;background:var(--surface);color:var(--ink);border:.08em solid var(--line);box-shadow:0 1.4em 2.6em -1em rgba(7,20,12,.28),0 .3em .8em rgba(7,20,12,.08);font-family:var(--sans);line-height:1.25;z-index:1}
.pa-card b{display:block;font-size:1.05em;font-weight:700;white-space:nowrap}
.pa-card span{display:block;font-size:.9em;color:var(--muted);white-space:nowrap}
.pa-card .c-ava{width:2.9em;height:2.9em;border-radius:50%;overflow:hidden;flex:0 0 auto}
.pa-card .c-ava img{width:100%;height:100%;display:block}
.pa-card .c-ic{width:2.6em;height:2.6em;border-radius:.9em;display:grid;place-items:center;flex:0 0 auto;background:var(--green-soft);color:var(--green-ink)}
.pa-card .c-ic svg{width:1.35em;height:1.35em}
.pa-cur{left:1.8em;top:21.2em}
.pa-new{left:-.6em;top:33em}
.pa-dot{width:.55em;height:.55em;border-radius:50%;background:var(--green);box-shadow:0 0 0 .3em color-mix(in srgb,var(--green) 22%,transparent);margin-left:auto}
/* телефон (одна колонка): телефон по центру, две карточки по бокам */
@media (max-width: 900px) {
  .ph-art { aspect-ratio: 35 / 48; }
  .ph-art .pa-in { font-size: calc(100cqw / 35); }
  .ph-phone { left: 6.5em; top: 2.2em; }
  .pa-cur { left: -.2em; top: 27.5em; }
  .pa-new { display: none; }
  .pa-card { padding: .7em .9em; }
}


/* ---------- дополнения ---------- */
.v9 a { color: inherit; text-decoration: none; }
.sch-faces i.sch-face { background-repeat: no-repeat; background-color: var(--chip); }
.tbtn .tava { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--green-soft); color: var(--green-ink); font-weight: 700; font-size: 12.5px; object-fit: cover; flex: 0 0 auto; }
.tbtn.login { max-width: 200px; } .tbtn.login span:not(.tava) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbtn .cnt.zero { opacity: .55; }
.toast { transition: opacity .3s, transform .3s; } .toast.out { opacity: 0; transform: translateX(-50%) translateY(8px); }
.rv-circ video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; opacity: 0; transition: opacity .3s; }
.rv-vid.has-video-frame .rv-circ video { opacity: 1; }
.rv-full { white-space: pre-line; }
.v9-none:empty { display: none; }
.grid .v9-none { grid-column: 1 / -1; }
.seg a { display: inline-flex; align-items: center; justify-content: center; }
.uc-top img.uc-sq { object-fit: contain; background: var(--surface-2); }
.hm-phone .ph-screen img { max-width: none; }
.v9 [hidden] { display: none !important; }
.v9 main .school-ui-icon, .v9 footer .school-ui-icon { display: none !important; } .v9 main .school-icon-label { display: contents; }
/* шапка: меню по центру, как на сайте */
.top .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.top .nav { margin: 0; justify-self: center; }
.top .logo { justify-self: start; }
.top .tacts { display: flex; align-items: center; gap: 10px; justify-self: end; }
@media (max-width: 760px) { .top .wrap { grid-template-columns: 1fr auto; } .top .tacts { gap: 8px; } }
/* отзывы: фото-аватарки */
.rv-ava { overflow: hidden; flex: 0 0 auto; }
.rv-ava img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
/* страницы предметов */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ca-intro { margin: 8px 0 0; max-width: 760px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.ca-tools.ca-tools-subj { grid-template-columns: 260px minmax(0, 1fr); }
@media (max-width: 760px) { .ca-tools.ca-tools-subj { grid-template-columns: 1fr; } }
.lh-sm { font-size: 18px; }
.subj-programs summary { display: flex; align-items: center; gap: 10px; }
.subj-programs summary small { margin-left: auto; margin-right: 28px; color: var(--faint); font-weight: 600; font-size: 13px; }
/* «Школы и программы» на странице предмета: фото · текст · кнопка, ровные колонки */
.subj-plist { list-style: none; margin: 0; padding: 0 2px 8px; display: grid; gap: 0; }
.subj-plist li.sp-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 16px; align-items: start; padding: 18px 0; border-top: 1px solid var(--line); }
.subj-plist li.sp-row:first-child { border-top: 0; padding-top: 6px; }
.sp-ava { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--green-soft); color: var(--green-ink); }
.sp-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-main { min-width: 0; }
.sp-name { display: block; font-weight: 700; font-size: 16.5px; line-height: 1.3; color: var(--ink); }
.sp-name:hover { color: var(--green-ink); }
.sp-teacher { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; font-weight: 600; }
.sp-sum { margin: 8px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; max-width: 80ch; }
.sp-meta { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--muted); }
.sp-meta span { padding: 4px 10px; border-radius: 999px; background: var(--surface-2, color-mix(in srgb, var(--ink) 6%, transparent)); border: 1px solid var(--line); line-height: 1.35; }
.sp-meta .sp-price { color: var(--ink); font-weight: 700; }
.sp-meta .sp-alias { color: var(--green-ink); font-weight: 700; background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 30%, var(--line)); }
.sp-go { align-self: center; white-space: nowrap; font-weight: 700; color: var(--green-ink); font-size: 14.5px; padding: 10px 16px; border-radius: 12px; background: var(--green-soft); transition: background-color .2s, color .2s; }
.sp-go:hover { background: var(--green); color: var(--on-green); }
.hm-faq .sp-bio, .hm-faq details.sp-bio[open] { background: none; border: 0; border-radius: 0; padding: 0; margin-top: 10px; }
.hm-faq .sp-bio summary { display: inline-flex; align-items: center; gap: 6px; padding: 0; font-size: 14px; font-weight: 700; color: var(--green-ink); }
.hm-faq .sp-bio summary::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.hm-faq .sp-bio[open] summary::after { transform: translateY(1px) rotate(225deg); }
.hm-faq .sp-bio p { margin: 8px 0 0; white-space: pre-line; color: var(--muted); font-size: 14.5px; line-height: 1.6; max-width: 80ch; }
.subj-guide .hm-head p { max-width: 980px; }
@media (max-width: 640px) {
  .subj-plist li.sp-row { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; }
  .sp-ava { width: 44px; height: 44px; }
  .sp-go { grid-column: 1 / -1; justify-self: stretch; text-align: center; margin-top: 12px; }
}
.hm-free .h3like { font-size: 22px; margin: 4px 0 6px; color: inherit; }

/* кнопки: спокойные тени при наведении */
.btn { transition: background-color .18s, box-shadow .18s, transform .18s, color .18s; }
.btn.pri { box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--green) 45%, transparent); }
.btn.pri:hover { filter: none; background: color-mix(in srgb, var(--green) 88%, #000); box-shadow: 0 10px 22px -6px color-mix(in srgb, var(--green) 55%, transparent); transform: translateY(-1px); }
.btn.alt { box-shadow: inset 0 0 0 1px var(--line); }
.btn.alt:hover { background: var(--green-soft); color: var(--green-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 40%, var(--line)), 0 8px 18px -10px rgba(7, 20, 12, .35); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* телефон на первом экране — объёмный (2.5D), как на прежней главной */
@media (min-width: 761px) {
  .ph-art { perspective: 2200px; }
  .ph-art .pa-in { transform-style: preserve-3d; transform: rotateY(-15deg) rotateX(6deg) rotateZ(1.5deg); transform-origin: 45% 50%; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
  .ph-art:has(.ph-phone:hover, .pa-card:hover) .pa-in { transform: rotateY(-10deg) rotateX(4deg) rotateZ(1deg); }
  .ph-phone {
    background: linear-gradient(135deg, #3a3e44 0%, #15171a 38%, #23262a 62%, #4a4f56 100%);
    box-shadow:
      0 0 0 .1em #5b6068 inset, 0 0 0 .32em #0d0e10 inset,
      .12em .06em 0 #2f3338, .24em .12em 0 #26292d, .36em .18em 0 #1f2226, .48em .24em 0 #191b1e, .6em .3em 0 #141618,
      1.6em 2.6em 3.6em -1em rgba(7, 20, 12, .45), 0 .8em 1.6em rgba(7, 20, 12, .2);
  }
  .ph-phone .ph-screen { box-shadow: 0 0 0 .06em rgba(255,255,255,.06); }
  .pa-card { transform: translateZ(70px); }
  .pa-glow { transform: translateZ(-80px); }
}
@media (min-width: 761px) and (prefers-reduced-motion: reduce) { .ph-art .pa-in { transition: none; } }
.v9-badge { position: fixed; z-index: 60; left: max(12px, env(safe-area-inset-left, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 7px 12px; border-radius: 999px; background: var(--ink); color: var(--bg) !important; font-size: 12.5px; font-weight: 700; box-shadow: var(--shadow-2); opacity: .85; }
.v9-badge:hover { opacity: 1; }
@media (max-width: 760px) { .v9-badge { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
.v9 img[src*="school-icons"] { object-fit: contain; }
/* переменные старых стилей корзины/окон (v9-cart.css), чтобы модальные окна работали на новых страницах */
:root { --bg-soft: var(--surface-2); --border: var(--line); --border-soft: var(--line); --card-bg: var(--surface-2); --danger: #ef4444; --ease: cubic-bezier(.2,.8,.2,1); --font-sans: var(--sans);
  --primary: var(--green); --primary-dark: #15a344; --primary-edge: color-mix(in srgb, var(--green) 16%, transparent); --primary-soft: var(--green-soft);
  --radius-md: 14px; --radius-sm: 12px; --shadow-modal: 0 30px 90px rgba(0,0,0,.22); --shadow-sm: 0 8px 24px rgba(0,0,0,.05);
  --text-body: var(--ink); --text-muted: var(--muted); --text-strong: var(--ink); --z-auth: 6500; --z-cart: 5500; --z-schedule: 7000; --z-topup: 6800; }
/* шапка на телефоне: у вошедшего — круглая аватарка */
@media (max-width: 900px) { .tbtn.login .tava { display: inline-grid !important; } .tbtn.login:has(.tava) { padding: 0 6px; background: var(--surface); border: 1px solid var(--line); } }

/* 01.11 (QA): служебный класс старых скриптов корзины/окон — как в старом CSS магазина */
.hidden { display: none !important; }

/* 01.11 (QA): разделы сайта на телефоне — строка под шапкой с горизонтальной прокруткой */
.mnav { display: none; }
@media (max-width: 760px) {
  .mnav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 4px max(16px, env(safe-area-inset-right, 0px)) 4px max(16px, env(safe-area-inset-left, 0px)); background: var(--surface); border-bottom: 1px solid var(--line); }
  .mnav::-webkit-scrollbar { display: none; }
  .mnav a { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; text-align: center; padding: 0 10px; border-radius: 999px; font-weight: 600; font-size: 13.5px; line-height: 1.2; color: var(--muted); background: var(--surface-2); white-space: nowrap; }
  .mnav a.on { background: var(--green-soft); color: var(--green-ink); }
}

/* 01.11 (QA): плашка предпросмотра не перекрывает нижнюю панель покупки (она есть до 980 px) */
@media (max-width: 980px) { body:has(.mbar) .v9-badge { bottom: calc(66px + max(14px, env(safe-area-inset-bottom, 0px))); } }

/* 01.11 (QA): страница курса — «Уже куплен», увеличение расписания */
.btn.is-bought, .btn:disabled { cursor: default; opacity: .6; box-shadow: none; filter: none; }
.cp-acc .sched { position: relative; }
.sched img[data-zoom] { cursor: zoom-in; }
.sched-zoom { position: absolute; right: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-1); }
.sched-zoom svg { width: 16px; height: 16px; }
.scrim.v9-lb { place-items: center; padding: 16px; background: rgba(4, 10, 6, .86); cursor: zoom-out; }
.scrim.v9-lb img { max-width: 100%; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); object-fit: contain; border-radius: 12px; background: #fff; }
.scrim.v9-lb .x { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); z-index: 1; color: var(--ink); }

/* ---------- правки 02.11 ---------- */
/* затемнение под окнами (корзина, вход, отзыв): страница темнее и слегка размыта — внимание на окне */
:root { --scrim: rgba(7, 20, 12, .4); --scrim-blur: blur(3px); --h2: clamp(26px, 3vw, 34px); --sec-gap: clamp(52px, 6.5vw, 84px); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --scrim: rgba(0, 0, 0, .6); } }
:root[data-theme="dark"] { --scrim: rgba(0, 0, 0, .6); }
/* место под полосу прокрутки занято всегда: корзина блокирует прокрутку — страница не сдвигается вбок
   (на телефонах полоса прокрутки поверх страницы, там это не нужно) */
@media (hover: hover) and (min-width: 761px) { html { scrollbar-gutter: stable; } }
.scrim { background: var(--scrim); -webkit-backdrop-filter: var(--scrim-blur); backdrop-filter: var(--scrim-blur); }
.v9 .wea-modal::backdrop { background: rgba(7, 20, 12, .4); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .v9 .wea-modal::backdrop { background: rgba(0, 0, 0, .6); } }
:root[data-theme="dark"] .v9 .wea-modal::backdrop { background: rgba(0, 0, 0, .6); }

/* аватарки отзывов: те же цвета на карточке и в окне «Читать полностью» */
.rv-c0 { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.rv-c1 { background: linear-gradient(135deg, #22c55e, #15803d); }
.rv-c2 { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.rv-c3 { background: linear-gradient(135deg, #38bdf8, #2563eb); }
.rv-c4 { background: linear-gradient(135deg, #f472b6, #db2777); }

/* каталог: третий список «Формат» (годовые курсы / летняя школа) */
.ca-tools.has-fmt { grid-template-columns: auto 220px 190px 220px minmax(0, 1fr); }
@media (max-width: 1320px) { .ca-tools.has-fmt { grid-template-columns: auto 206px 176px 206px minmax(0, 1fr); } }
@media (max-width: 1080px) {
  .ca-tools.has-fmt { grid-template-columns: auto repeat(3, minmax(0, 1fr)); }
  .ca-tools.has-fmt .ca-search { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .ca-tools.has-fmt { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "ex fmt" "subj sch" "q q"; }
  .ca-tools.has-fmt .ex-seg { grid-area: ex; justify-self: stretch; }
  .ca-tools.has-fmt .ex-seg a { flex: 1 1 0; }
  .ca-tools.has-fmt #cafmtw { grid-area: fmt; }
  .ca-tools.has-fmt #casubjw { grid-area: subj; }
  .ca-tools.has-fmt #caschw { grid-area: sch; }
  .ca-tools.has-fmt .ca-search { grid-area: q; }
  #cafmtw .dd-pop { left: auto; right: 0; }
}

/* главная: первый экран на всю высоту окна (без шапки), текст и телефон по центру по вертикали */
@media (min-width: 901px) {
  .hm-hero { min-height: calc(100vh - 65px); min-height: calc(100svh - 65px); display: flex; flex-direction: column; justify-content: center; padding-block: 28px; }
  .hm-hero > .wrap { width: 100%; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; }
  .hm-phone { width: min(calc((100svh - 65px - 100px) * 34 / 46), 44vw, 560px); }
  .hm-hero > .wrap { grid-template-columns: minmax(0, 620px) auto; justify-content: space-between; column-gap: 32px; }
}

/* заголовки разделов: один размер на всех страницах, по центру вместе с подзаголовком, больше воздуха между блоками */
.hm-sec { padding-block: var(--sec-gap) 0; }
.sc-sec { padding-block: var(--sec-gap) 0; }
.hm-head, .sc-head, .flow-head, .revs-head { display: block; max-width: 820px; margin: 0 auto 28px; text-align: center; }
.hm-head h2, .sc-head h2, .flow-head h2, .revs-head h2, .sc-split h2, .cp-rel h2 { margin: 0; font-size: var(--h2); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; text-wrap: balance; }
.revs-head h2 { margin-top: 12px; }
.hm-head p, .sc-head p, .flow-head p, .revs-head p { max-width: 68ch; margin: 10px auto 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.hm-head .hm-kick, .sc-head .sc-k { margin-bottom: 8px; }
.cp-rel { margin-top: var(--sec-gap); }
.cp-rel h2 { margin-bottom: 24px; text-align: center; }
/* ссылки-чипы сразу под центрированным заголовком — тоже по центру (страница предмета: «Другие предметы») */
.hm-head + .hs-links { justify-content: center; }
.sp-bio summary { cursor: pointer; list-style: none; }
.sp-bio summary::-webkit-details-marker { display: none; }


/* ---------- экран телефона: канал курса в Telegram (iOS, тёмная тема) ---------- */
.ph-screen{position:relative;display:flex;flex-direction:column;height:100%;border-radius:3.05em;overflow:hidden;color:#fff;font-family:-apple-system,"SF Pro Text",var(--sans);font-size:1em;line-height:1.28;
  background:radial-gradient(120% 70% at 80% 30%,#2a1f3d 0%,transparent 60%),radial-gradient(90% 60% at 10% 90%,#1d1830 0%,transparent 60%),#0b0b10;}
.tg2::before{content:"";position:absolute;inset:0;opacity:.16;background-image:radial-gradient(circle at 20% 20%,#8d7bd6 .09em,transparent .1em),radial-gradient(circle at 70% 65%,#8d7bd6 .09em,transparent .1em);background-size:3.4em 3.4em,4.6em 4.6em;pointer-events:none}
.t-island{position:absolute;left:50%;top:.7em;width:6.6em;height:1.9em;margin-left:-3.3em;border-radius:1.2em;background:#000;z-index:3}
.t-status{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;height:3em;padding:.3em 1.9em 0 2.3em;font-size:.92em;font-weight:600}
.t-ind{display:flex;align-items:center;gap:.35em}
.t-ind svg{display:block;fill:currentColor}
.t-sig{width:1.12em;height:.75em}
.t-wifi{width:1em;height:.75em}
.t-bat{width:1.62em;height:.78em}
.t-head{position:relative;z-index:2;display:grid;grid-template-columns:2.9em 1fr 2.9em;gap:.45em;align-items:center;padding:.35em .65em .3em}
.t-pill{display:flex;align-items:center;justify-content:center;border-radius:1.6em;background:rgba(44,40,58,.82);box-shadow:inset 0 0 0 .06em rgba(255,255,255,.08);backdrop-filter:blur(6px)}
.t-back{height:2.6em}
.t-back i{width:.62em;height:.62em;border-left:.15em solid #fff;border-bottom:.15em solid #fff;transform:rotate(45deg);margin-left:.25em}
.t-ttl{flex-direction:column;height:2.6em;min-width:0;padding:0 .7em}
.t-ttl b{max-width:100%;font-size:.86em;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-ttl span{font-size:.66em;color:#a19fb0}
.t-ava{width:2.6em;height:2.6em;border-radius:50%;overflow:hidden;box-shadow:0 0 0 .1em rgba(255,255,255,.12)}
.t-ava img{display:block;width:100%;height:100%;object-fit:cover}
.t-pin{position:relative;z-index:2;display:flex;align-items:center;gap:.55em;margin:.2em .65em .1em;padding:.45em .7em .45em .6em;border-radius:1.4em;background:rgba(44,40,58,.82);box-shadow:inset 0 0 0 .06em rgba(255,255,255,.08)}
.t-pin::before{content:"";flex:0 0 auto;width:.12em;height:2.1em;border-radius:.1em;background:#fff}
.t-pin-th{flex:0 0 auto;width:2.1em;height:2.1em;border-radius:.35em;background:#5d5478 linear-gradient(#fff,#fff) .3em .45em/1.5em .12em no-repeat;box-shadow:inset .3em .75em 0 -.15em #5d5478,inset 0 0 0 .3em #5d5478}
.t-pin-th{background:repeating-linear-gradient(#fff 0 .22em,#5d5478 .22em .38em) .3em .55em/1.5em 1.25em no-repeat,#5d5478;box-shadow:none}
.t-pin-tx{flex:1;min-width:0;font-size:.72em;line-height:1.3}
.t-pin-tx b{display:block;font-weight:700}
.t-pin-tx span{display:block;color:#d9d7e2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-x{flex:0 0 auto;width:.8em;height:.8em;background:linear-gradient(45deg,transparent 45%,#cfcde0 45% 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,#cfcde0 45% 55%,transparent 55%)}
.t-chat{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:.32em;padding:.4em .55em 0;overflow:hidden}
.t-date{align-self:center;padding:.15em .65em;border-radius:1em;background:rgba(40,36,52,.85);font-size:.68em;font-weight:600;color:#e9e7f2}
.t-msg{position:relative;flex:0 0 auto;max-width:88%;border-radius:1em;background:#282436;box-shadow:0 .06em .1em rgba(0,0,0,.35)}
.t-vid{width:88%;overflow:hidden}
.t-media{position:relative;aspect-ratio:16/9;overflow:hidden}
.t-media img{display:block;width:100%;height:100%;object-fit:cover}
.t-dl{position:absolute;left:.45em;top:.45em;display:flex;align-items:center;gap:.4em;padding:.25em .5em .25em .35em;border-radius:.7em;background:rgba(110,110,110,.28);color:rgba(255,255,255,.85);backdrop-filter:blur(4px);font-size:.52em;line-height:1.2;font-weight:500}
.t-dl i{width:1.5em;height:1.5em;border-radius:50%;box-shadow:inset 0 0 0 .12em rgba(255,255,255,.8);background:linear-gradient(rgba(255,255,255,.8),rgba(255,255,255,.8)) center 40%/.12em .65em no-repeat}
.t-play{position:absolute;left:50%;top:50%;width:2.6em;height:2.6em;margin:-1.3em 0 0 -1.3em;border-radius:50%;background:rgba(0,0,0,.42);backdrop-filter:blur(6px);box-shadow:0 0 0 .08em rgba(255,255,255,.25);display:grid;place-items:center}
.t-play::after{content:"";margin-left:.2em;border-left:.85em solid #fff;border-top:.52em solid transparent;border-bottom:.52em solid transparent}
.t-text{display:flex;flex-direction:column;gap:.25em;padding:.5em .65em .1em;font-size:.76em;line-height:1.3}
.t-text b{font-weight:700}
.t-ln a{color:#b8a8ff;font-weight:600}
.t-meta{display:flex;align-items:flex-end;justify-content:space-between;gap:.4em;padding:.3em .55em .4em}
.t-rx{display:flex;gap:.25em}
.t-rx span{padding:.15em .5em;border-radius:1em;background:rgba(255,255,255,.08);font-size:.66em;font-weight:600}
.t-v{display:inline-flex;align-items:center;gap:.3em;margin-left:auto;color:#a19fb0;font-size:.58em;white-space:nowrap}
.t-eye{width:1.1em;height:.7em;border:.12em solid #a19fb0;border-radius:50%/60%;position:relative}
.t-eye::after{content:"";position:absolute;left:50%;top:50%;width:.3em;height:.3em;margin:-.15em 0 0 -.15em;border-radius:50%;background:#a19fb0}
.t-line{display:flex;align-items:center;gap:.5em;padding:.4em .6em}
.t-line b{font-size:.76em;font-weight:700;white-space:nowrap}
.t-file{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:.55em;padding:.45em .6em .35em .45em}
.t-fi{grid-row:1/3;width:2.4em;height:2.4em;border-radius:50%;background:#9d8cf2 linear-gradient(#fff,#fff) center 38%/.14em .75em no-repeat;position:relative}
.t-fi::after{content:"";position:absolute;left:50%;top:58%;width:.5em;height:.5em;margin-left:-.25em;border-right:.14em solid #fff;border-bottom:.14em solid #fff;transform:translateY(-50%) rotate(45deg)}
.t-doc{background:#9d8cf2}
.t-doc::after{top:50%;width:.8em;height:1em;margin:-.5em 0 0 -.4em;border:0;border-radius:.12em;background:#fff;transform:none;clip-path:polygon(0 0,62% 0,100% 30%,100% 100%,0 100%)}
.t-fn{min-width:0}
.t-fn b{display:block;color:#b8a8ff;font-size:.74em;font-weight:600;white-space:nowrap}
.t-fn span{font-size:.6em;color:#a19fb0}
.t-file .t-v{grid-column:2;justify-self:end;margin-top:.1em}
.t-bottom{position:relative;z-index:2;display:flex;justify-content:center;padding:.5em 0 1.3em}
.t-bottom .t-pill{padding:.6em 1.6em;font-size:.78em;font-weight:600}
/* карточки уведомлений: две, по очереди «прилетают» */
.pa-cur{left:.6em;top:14.8em}
.pa-new{left:-.4em;top:31.8em}
@keyframes paIn{from{opacity:0;translate:-1.2em 0}to{opacity:1;translate:0 0}}
.pa-card{animation:paIn .55s cubic-bezier(.2,.7,.2,1) both}
.pa-cur{animation-delay:.5s}.pa-new{animation-delay:1.1s}
@media (prefers-reduced-motion: reduce){.pa-card{animation:none}}
@media (max-width: 900px) {
  .ph-phone { left: 6.8em; top: 1.6em; }
  .pa-cur { left: -.2em; top: 18em; }
  .pa-new { display: flex; left: auto; right: -.2em; top: 33em; }
}

/* первый экран: заметная вторая кнопка и строка отзывов */
.hm-ctas .btn.alt { background: var(--surface); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 18%, var(--line)), 0 2px 6px rgba(7, 20, 12, .05); }
.hm-ctas .btn.alt:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--green) 55%, var(--line)), 0 8px 18px -10px rgba(7, 20, 12, .35); }
.hm-proof { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 6px 14px 6px 6px; border-radius: 999px; color: var(--ink); transition: background-color .18s; }
.hm-proof:hover { background: var(--surface); }
.hp-avas { display: flex; padding-left: 8px; }
.hp-avas img, .hp-avas i { width: 38px; height: 38px; margin-left: -10px; border-radius: 50%; border: 2.5px solid var(--bg); object-fit: cover; flex: 0 0 auto; }
.hp-avas img { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--green) 60%, transparent); }
.hp-avas i { display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 15px; color: #fff; }
.hp-tx b { display: block; font-size: 15px; line-height: 1.2; }
.hp-tx small { display: block; font-size: 13px; color: var(--muted); }
.hp-go { color: var(--green-ink); font-weight: 700; transition: transform .18s; }
.hm-proof:hover .hp-go { transform: translateX(3px); }
@media (max-width: 480px) { .hm-proof { margin-top: 16px; } .hp-tx small { font-size: 12px; } }

/* корпус телефона ближе к настоящему: металлическая рамка с бликами */
@media (min-width: 761px) {
  .ph-phone {
    background:
      linear-gradient(118deg, rgba(255,255,255,0) 0 6%, rgba(255,255,255,.55) 8%, rgba(255,255,255,0) 11% 82%, rgba(255,255,255,.4) 86%, rgba(255,255,255,0) 90%),
      linear-gradient(160deg, #9aa0a8 0%, #3b3f45 14%, #1d1f23 40%, #2c3036 64%, #6e747c 88%, #b9bec5 100%);
    box-shadow:
      0 0 0 .06em #c8cdd3 inset, 0 0 0 .2em #2a2d31 inset, 0 0 0 .34em #050506 inset,
      .1em .05em 0 #6a7078, .2em .1em 0 #4c5157, .3em .15em 0 #34383d, .4em .2em 0 #25282c, .5em .25em 0 #1a1c1f, .6em .3em 0 #131416,
      1.6em 2.6em 3.6em -1em rgba(7, 20, 12, .45), 0 .8em 1.6em rgba(7, 20, 12, .2);
  }
}
/* первый экран: «Выбрать курс» — главная, «Бесплатные курсы» — второстепенная */
.hm-ctas .btn.pri { padding: 0 34px; min-width: 260px; font-size: 17px; box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--green) 65%, transparent); }
.hm-ctas .btn.alt { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); font-weight: 600; }
.hm-ctas .btn.alt:hover { background: var(--surface); }
/* рамка телефона темнее, блики мягче */
@media (min-width: 761px) {
  .ph-phone {
    background:
      linear-gradient(118deg, rgba(255,255,255,0) 0 6%, rgba(255,255,255,.22) 8%, rgba(255,255,255,0) 11% 82%, rgba(255,255,255,.16) 86%, rgba(255,255,255,0) 90%),
      linear-gradient(160deg, #5a5f66 0%, #2a2d32 14%, #141518 40%, #1e2125 64%, #3e4248 88%, #6a6f76 100%);
    box-shadow:
      0 0 0 .06em #7b8088 inset, 0 0 0 .2em #1c1e21 inset, 0 0 0 .34em #050506 inset,
      .1em .05em 0 #45494f, .2em .1em 0 #35383d, .3em .15em 0 #282b2f, .4em .2em 0 #1f2124, .5em .25em 0 #17181b, .6em .3em 0 #111214,
      1.6em 2.6em 3.6em -1em rgba(7, 20, 12, .45), 0 .8em 1.6em rgba(7, 20, 12, .2);
  }
}
/* карточки уведомлений у телефона — тёмные в обеих темах, как уведомления iPhone */
.ph-art .pa-card { background: rgba(30, 27, 40, .92); color: #fff; border-color: rgba(255, 255, 255, .08); backdrop-filter: blur(10px); box-shadow: 0 1.4em 2.6em -1em rgba(7, 20, 12, .45), 0 .3em .8em rgba(7, 20, 12, .15); }
.ph-art .pa-card b { color: #fff; }
.ph-art .pa-card span { color: #b9b6c8; }
.ph-art .pa-card .c-ic { background: rgba(31, 200, 102, .18); color: #52de8e; }

/* телефон в светлой теме — классический светлый Telegram (зелёные обои), в тёмной — тёмный */
@media (prefers-color-scheme: light){
:root:not([data-theme="dark"]) .ph-art .ph-screen{background:linear-gradient(160deg,#cfe6a6 0%,#9fd08a 35%,#7cc08a 65%,#a9d8a0 100%);color:#000}
:root:not([data-theme="dark"]) .ph-art .tg2::before{opacity:.22;background-image:radial-gradient(circle at 20% 20%,#3f7f3a .09em,transparent .1em),radial-gradient(circle at 70% 65%,#3f7f3a .09em,transparent .1em)}
:root:not([data-theme="dark"]) .ph-art .t-status{color:#000}
:root:not([data-theme="dark"]) .ph-art .t-ind{color:#000}
:root:not([data-theme="dark"]) .ph-art .t-pill,:root:not([data-theme="dark"]) .ph-art .t-pin{background:rgba(244,250,236,.82);box-shadow:inset 0 0 0 .06em rgba(255,255,255,.6),0 .1em .4em rgba(40,80,30,.12)}
:root:not([data-theme="dark"]) .ph-art .t-back i{border-color:#000}
:root:not([data-theme="dark"]) .ph-art .t-ttl b{color:#000}
:root:not([data-theme="dark"]) .ph-art .t-ttl span{color:#6d7a6a}
:root:not([data-theme="dark"]) .ph-art .t-pin::before{background:#000}
:root:not([data-theme="dark"]) .ph-art .t-pin-tx b{color:#000}
:root:not([data-theme="dark"]) .ph-art .t-pin-tx span{color:#2b2b2b}
:root:not([data-theme="dark"]) .ph-art .t-x{background:linear-gradient(45deg,transparent 45%,#333 45% 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,#333 45% 55%,transparent 55%)}
:root:not([data-theme="dark"]) .ph-art .t-date{background:rgba(70,140,60,.75);color:#fff}
:root:not([data-theme="dark"]) .ph-art .t-msg{background:#fff;color:#000;box-shadow:0 .06em .12em rgba(30,60,20,.18)}
:root:not([data-theme="dark"]) .ph-art .t-text b,:root:not([data-theme="dark"]) .ph-art .t-line b{color:#000}
:root:not([data-theme="dark"]) .ph-art .t-ln a,:root:not([data-theme="dark"]) .ph-art .t-fn b{color:#1f7fd8}
:root:not([data-theme="dark"]) .ph-art .t-rx span{background:#e4f0fb;color:#1f2a33}
:root:not([data-theme="dark"]) .ph-art .t-v{color:#8a9097}
:root:not([data-theme="dark"]) .ph-art .t-eye{border-color:#8a9097}
:root:not([data-theme="dark"]) .ph-art .t-eye::after{background:#8a9097}
:root:not([data-theme="dark"]) .ph-art .t-fi,:root:not([data-theme="dark"]) .ph-art .t-doc{background-color:#2f8fe8}
:root:not([data-theme="dark"]) .ph-art .t-fn span{color:#8a9097}
:root:not([data-theme="dark"]) .ph-art .t-bottom .t-pill{color:#000}
:root:not([data-theme="dark"]) .ph-art .pa-card{background:var(--surface);color:var(--ink);border-color:var(--line);backdrop-filter:none;box-shadow:0 1.4em 2.6em -1em rgba(7,20,12,.28),0 .3em .8em rgba(7,20,12,.08)}
:root:not([data-theme="dark"]) .ph-art .pa-card b{color:var(--ink)}
:root:not([data-theme="dark"]) .ph-art .pa-card span{color:var(--muted)}
:root:not([data-theme="dark"]) .ph-art .pa-card .c-ic{background:var(--green-soft);color:var(--green-ink)}
}
@media (prefers-color-scheme: dark){
:root[data-theme="light"] .ph-art .ph-screen{background:linear-gradient(160deg,#cfe6a6 0%,#9fd08a 35%,#7cc08a 65%,#a9d8a0 100%);color:#000}
:root[data-theme="light"] .ph-art .tg2::before{opacity:.22;background-image:radial-gradient(circle at 20% 20%,#3f7f3a .09em,transparent .1em),radial-gradient(circle at 70% 65%,#3f7f3a .09em,transparent .1em)}
:root[data-theme="light"] .ph-art .t-status{color:#000}
:root[data-theme="light"] .ph-art .t-ind{color:#000}
:root[data-theme="light"] .ph-art .t-pill,:root[data-theme="light"] .ph-art .t-pin{background:rgba(244,250,236,.82);box-shadow:inset 0 0 0 .06em rgba(255,255,255,.6),0 .1em .4em rgba(40,80,30,.12)}
:root[data-theme="light"] .ph-art .t-back i{border-color:#000}
:root[data-theme="light"] .ph-art .t-ttl b{color:#000}
:root[data-theme="light"] .ph-art .t-ttl span{color:#6d7a6a}
:root[data-theme="light"] .ph-art .t-pin::before{background:#000}
:root[data-theme="light"] .ph-art .t-pin-tx b{color:#000}
:root[data-theme="light"] .ph-art .t-pin-tx span{color:#2b2b2b}
:root[data-theme="light"] .ph-art .t-x{background:linear-gradient(45deg,transparent 45%,#333 45% 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,#333 45% 55%,transparent 55%)}
:root[data-theme="light"] .ph-art .t-date{background:rgba(70,140,60,.75);color:#fff}
:root[data-theme="light"] .ph-art .t-msg{background:#fff;color:#000;box-shadow:0 .06em .12em rgba(30,60,20,.18)}
:root[data-theme="light"] .ph-art .t-text b,:root[data-theme="light"] .ph-art .t-line b{color:#000}
:root[data-theme="light"] .ph-art .t-ln a,:root[data-theme="light"] .ph-art .t-fn b{color:#1f7fd8}
:root[data-theme="light"] .ph-art .t-rx span{background:#e4f0fb;color:#1f2a33}
:root[data-theme="light"] .ph-art .t-v{color:#8a9097}
:root[data-theme="light"] .ph-art .t-eye{border-color:#8a9097}
:root[data-theme="light"] .ph-art .t-eye::after{background:#8a9097}
:root[data-theme="light"] .ph-art .t-fi,:root[data-theme="light"] .ph-art .t-doc{background-color:#2f8fe8}
:root[data-theme="light"] .ph-art .t-fn span{color:#8a9097}
:root[data-theme="light"] .ph-art .t-bottom .t-pill{color:#000}
:root[data-theme="light"] .ph-art .pa-card{background:var(--surface);color:var(--ink);border-color:var(--line);backdrop-filter:none;box-shadow:0 1.4em 2.6em -1em rgba(7,20,12,.28),0 .3em .8em rgba(7,20,12,.08)}
:root[data-theme="light"] .ph-art .pa-card b{color:var(--ink)}
:root[data-theme="light"] .ph-art .pa-card span{color:var(--muted)}
:root[data-theme="light"] .ph-art .pa-card .c-ic{background:var(--green-soft);color:var(--green-ink)}
}
@media (prefers-color-scheme: light){
:root:not([data-theme="dark"]) .ph-art .t-pin-th{background:repeating-linear-gradient(#2f8fe8 0 .22em,#fff .22em .38em) .3em .55em/1.5em 1.25em no-repeat,#fff;box-shadow:inset 0 0 0 .06em #cfd8e3}
:root:not([data-theme="dark"]) .ph-art .t-ava{box-shadow:0 0 0 .14em #fff,0 .15em .4em rgba(30,60,20,.25)}
:root:not([data-theme="dark"]) .ph-art .pa-glow{left:-28%;top:-4%;width:156%;height:108%;opacity:1;background:radial-gradient(closest-side,color-mix(in srgb,var(--green) 46%,transparent),transparent);filter:blur(2.4em)}
}
@media (prefers-color-scheme: dark){
:root[data-theme="light"] .ph-art .t-pin-th{background:repeating-linear-gradient(#2f8fe8 0 .22em,#fff .22em .38em) .3em .55em/1.5em 1.25em no-repeat,#fff;box-shadow:inset 0 0 0 .06em #cfd8e3}
:root[data-theme="light"] .ph-art .t-ava{box-shadow:0 0 0 .14em #fff,0 .15em .4em rgba(30,60,20,.25)}
:root[data-theme="light"] .ph-art .pa-glow{left:-28%;top:-4%;width:156%;height:108%;opacity:1;background:radial-gradient(closest-side,color-mix(in srgb,var(--green) 46%,transparent),transparent);filter:blur(2.4em)}
}
.pa-new{top:36.6em}
@media (max-width: 900px){.pa-new{top:36em}}
.ph-art .pa-card{border-color:rgba(255,255,255,.18)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .ph-art .pa-card{border-color:rgba(7,20,12,.16)}}
@media (prefers-color-scheme: dark){:root[data-theme="light"] .ph-art .pa-card{border-color:rgba(7,20,12,.16)}}
@media (max-width: 480px){.hm-ctas .btn.pri{min-width:0;flex:1.35 1 0}}
.hm-ctas .btn.alt{background:var(--surface);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 20%,var(--line)),0 2px 6px rgba(7,20,12,.05)}
.hm-ctas .btn.alt:hover{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--green) 55%,var(--line)),0 8px 18px -10px rgba(7,20,12,.35)}
@media (min-width: 901px){.ph-phone{left:10.6em}.pa-cur{top:11.4em}.pa-new{top:29em}}
@media (min-width: 901px){.hm-hero-text{margin-top:-48px}}
/* прокрутка «Выбрать курс»: заголовок каталога сразу под шапкой */
#courses .hm-head{scroll-margin-top:88px}
/* «Как получить доступ»: шаги по центру, линия только между кружками */
@media (min-width: 761px){
.flow{padding:36px 34px 30px}
.flow-steps li{justify-items:center;text-align:center}
.flow-steps span:not(.n){max-width:30ch}
.flow-steps::before{left:16.67%;right:16.67%;top:25px}
.flow-steps .n{position:relative;z-index:1}
.flow-foot{justify-content:center;gap:22px}
}
/* фирменный блик на кнопках «Смотреть бесплатно» и «Все отзывы» */
.btn-shine{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.45em;transition:transform .2s,box-shadow .2s,background-color .2s,color .2s}
.btn-shine::after{content:"";position:absolute;inset:-20% auto -20% -60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);animation:btnShine 4.2s ease-in-out infinite;z-index:-1;pointer-events:none}
.btn-shine .arr{display:inline-block;transition:transform .2s}
.btn-shine:hover{transform:translateY(-2px)}
.btn-shine:hover .arr{transform:translateX(4px)}
.hm-free .btn-shine:hover{box-shadow:0 12px 26px -10px color-mix(in srgb,var(--green) 75%,transparent)}
.pill-btn.btn-shine{padding:11px 22px;font-size:15px}
.pill-btn.btn-shine:hover{background:var(--green);color:var(--on-green);border-color:var(--green);box-shadow:0 10px 22px -10px color-mix(in srgb,var(--green) 75%,transparent)}
.pill-btn.btn-shine::after{background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--green) 30%,transparent),transparent)}
@keyframes btnShine{0%,62%{left:-60%}100%{left:130%}}
@media (prefers-reduced-motion: reduce){.btn-shine::after{animation:none;display:none}.btn-shine,.btn-shine .arr{transition:none}}
/* отзывы на главной: неполный последний ряд по центру */
@media (min-width: 901px){.rv-grid{display:flex;flex-wrap:wrap;justify-content:center}.rv-grid>*{flex:0 0 calc((100% - 48px)/4)}}
/* частые вопросы: колонка по центру, ответ во всю ширину, открытый вопрос подсвечен */
#faq .hm-faq{max-width:900px;margin-inline:auto}
.hm-faq details p{max-width:none}
.hm-faq details{transition:border-color .2s,background-color .2s}
.hm-faq details[open]{border-color:color-mix(in srgb,var(--green) 40%,var(--line))}
.hm-faq details[open] summary::after{color:var(--green)}
.hm-faq summary:hover::after{color:var(--green)}
/* свечение телефона не должно давать горизонтальную прокрутку */
.hm-hero{overflow-x:clip}
/* телефоны: удобные зоны нажатия у ссылок подвала и «Все курсы» */
@media (max-width: 640px){.sfoot .sf-col a{display:block;padding:11px 0;margin-bottom:0}.hm-more{display:inline-block;padding:11px 0}}
/* 04.11: телефон — нижние ссылки подвала (документы) высотой 40 px для пальца */
@media (max-width: 640px){.sfoot .sf-bottom nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 13px}}
.crumbs{padding-block:18px 16px}
/* меню в шапке: лёгкая анимация при наведении (обе темы) */
.nav a{transition:background-color .22s ease,color .22s ease,transform .22s ease}
.nav a:not(.on):hover{background:color-mix(in srgb,var(--green-soft) 60%,transparent);color:var(--green-ink);transform:translateY(-1px)}
.nav a:active{transform:translateY(0) scale(.97)}
@media (prefers-reduced-motion: reduce){.nav a{transition:none}.nav a:not(.on):hover{transform:none}}
/* логотипы школ в тёмной теме: без белой плашки, на мягкой тёмной подложке; чёрный «100Б» — светлым */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .sch-ic,:root:not([data-theme="light"]) .sch-logo{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
:root:not([data-theme="light"]) .sch-ic{background:transparent;box-shadow:none;padding:0}
}
:root[data-theme="dark"] .sch-ic,:root[data-theme="dark"] .sch-logo{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
:root[data-theme="dark"] .sch-ic{background:transparent;box-shadow:none;padding:0}
/* каталог v2: предметы кнопками сверху (липкий ряд), курсы группами по предметам */
.ca-subj{position:sticky;top:calc(env(safe-area-inset-top,0px) + 65px);z-index:6;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:12px 0;margin:6px 0 2px;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ca-subj::-webkit-scrollbar{display:none}
.ca-chip{flex:0 0 auto;min-height:40px;padding:8px 15px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:700 14.5px/1.1 var(--sans);cursor:pointer;white-space:nowrap;transition:border-color .2s,background-color .2s,color .2s,transform .2s}
.ca-chip i{font-style:normal;font-weight:600;color:var(--faint);margin-left:3px}
.ca-chip:hover{border-color:color-mix(in srgb,var(--green) 50%,var(--line));transform:translateY(-1px)}
.ca-chip.on{background:var(--green);border-color:var(--green);color:var(--on-green)}
.ca-chip.on i{color:inherit;opacity:.75}
@media (min-width:761px){.ca-subj{flex-wrap:wrap;row-gap:8px}}
@media (max-width:760px){.ca-subj{top:calc(env(safe-area-inset-top,0px) + 61px);margin-inline:-16px;padding-inline:16px;mask-image:linear-gradient(90deg,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent)}.ca-chip{min-height:38px;padding:7px 13px;font-size:14px}}
.ca-tools.ca-v2{position:static;backdrop-filter:none;-webkit-backdrop-filter:none;background:none;grid-template-columns:240px minmax(0,1fr);grid-template-areas:none;padding:0;margin:4px 0 0}
.ca-tools.ca-v2.has-fmt{grid-template-columns:230px 230px minmax(0,1fr)}
.ca-tools.ca-v2 .ca-search{grid-column:auto}
@media (max-width:760px){.ca-tools.ca-v2,.ca-tools.ca-v2.has-fmt{grid-template-columns:1fr 1fr;grid-template-areas:none}.ca-tools.ca-v2 .ca-search{grid-column:1/-1}}
.ca-ghead{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:22px 2px 2px;border-top:1px solid var(--line);margin-top:6px}
.ca-ghead:first-of-type{border-top:0;margin-top:0;padding-top:0}
.ca-ghead h3{margin:0;font-size:22px;letter-spacing:-.02em}
.ca-ghead h3 span{font-size:14px;font-weight:600;color:var(--faint);letter-spacing:0;margin-left:6px}
.ca-gall{border:0;background:none;padding:6px 0;color:var(--green-ink);font:700 14px var(--sans);cursor:pointer;white-space:nowrap}
.ca-gall:hover{text-decoration:underline}
@media (max-width:760px){.ca-ghead h3{font-size:19px}.ca-gall{font-size:13.5px}}
.listhead.is-grouped{padding-block:8px 0}
.listhead.is-grouped h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.listhead.is-grouped span{display:none}
.ca-ghead{padding-top:26px}
@media (max-width: 1080px){.ca-tools.ca-v2.has-fmt{grid-template-columns:1fr 1fr minmax(0,1.3fr)}.ca-tools.ca-v2.has-fmt .ca-search{grid-column:auto}}
@media (max-width: 860px){.ca-tools.ca-v2.has-fmt{grid-template-columns:1fr 1fr;grid-template-areas:"sch fmt" "q q"}.ca-tools.ca-v2.has-fmt #caschw{grid-area:sch}.ca-tools.ca-v2.has-fmt #cafmtw{grid-area:fmt}.ca-tools.ca-v2.has-fmt .ca-search{grid-area:q}}
@media (max-width: 760px){.ca-ghead{align-items:center}.ca-ghead h3 span{display:block;margin:2px 0 0;font-size:13px}}
/* каталог v3: все предметы видны сразу (перенос строк), при прокрутке — компактный ряд под шапкой */
.ca-subj{position:static;flex-wrap:wrap;overflow:visible;row-gap:8px;mask-image:none;-webkit-mask-image:none;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;margin:4px 0 0;padding:8px 0 12px}
@media (max-width:760px){.ca-subj{margin-inline:0;padding-inline:0;gap:6px}.ca-subj .ca-chip{min-height:36px;padding:6px 11px;font-size:13.5px}}
a.ca-chip{display:inline-flex;align-items:center;text-decoration:none}
.ca-subj-fix{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 65px);z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transform:translateY(-110%);opacity:0;visibility:hidden;pointer-events:none;transition:transform .25s ease,opacity .2s ease,visibility 0s linear .25s}
.ca-subj-fix.show{transform:none;opacity:1;visibility:visible;pointer-events:auto;transition:transform .25s ease,opacity .2s ease,visibility 0s}
.ca-subj-row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:8px 0;mask-image:linear-gradient(90deg,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent)}
.ca-subj-row::-webkit-scrollbar{display:none}
.ca-subj-row .ca-chip{min-height:34px;padding:5px 12px;font-size:13.5px}
@media (max-width:760px){.ca-subj-fix{top:calc(env(safe-area-inset-top,0px) + 61px)}}
@media (prefers-reduced-motion:reduce){.ca-subj-fix{transition:none}}
/* «Все N курсов · предмет →» под первым рядом блока */
.ca-gmore{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:999px;border:1px solid color-mix(in srgb,var(--green) 30%,var(--line));background:var(--green-soft);color:var(--green-ink);font:700 14.5px/1.2 var(--sans);text-decoration:none;transition:transform .2s,background-color .2s,color .2s}
.ca-gmore b{font-weight:inherit;transition:transform .2s}
.ca-gmore:hover{background:var(--green);color:var(--on-green);transform:translateY(-1px)}
.ca-gmore:hover b{transform:translateX(3px)}
@media (max-width:760px){.ca-gmore{justify-self:stretch;justify-content:center;text-align:center;text-wrap:balance}}
/* итоговое сочинение 5в1 — отдельная длинная плашка над каталогом */
.ca-promo{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:16px;margin:14px 0 4px;padding:14px 18px;border-radius:20px;background:linear-gradient(120deg,var(--green-soft),color-mix(in srgb,var(--green-soft) 35%,var(--surface)));border:1px solid color-mix(in srgb,var(--green) 28%,var(--line));color:var(--ink);text-decoration:none;transition:transform .2s,box-shadow .2s}
.ca-promo:hover{transform:translateY(-2px);box-shadow:0 12px 26px -14px color-mix(in srgb,var(--green) 70%,transparent)}
.ca-promo .cp-ics{display:flex}
.ca-promo .cp-ics img{width:34px;height:34px;padding:5px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--surface),0 2px 6px rgba(7,20,12,.12);object-fit:contain;margin-left:-8px}
.ca-promo .cp-ics img:first-child{margin-left:0}
.ca-promo .cp-tx{display:grid;gap:2px;min-width:0}
.ca-promo em{font-style:normal;font-size:12px;font-weight: 700;color:var(--green-ink);text-transform:uppercase;letter-spacing:.04em}
.ca-promo b{font-size:18px;letter-spacing:-.02em}
.ca-promo small{color:var(--muted);font-size:13.5px}
.ca-promo .cp-pr{font-size:22px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.ca-promo .cp-go{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:var(--on-green);font-weight: 700}
@media (max-width:760px){.ca-promo{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding:12px 14px}.ca-promo .cp-ics{grid-column:1/-1}.ca-promo .cp-ics img{width:28px;height:28px;padding:4px}.ca-promo .cp-go{display:none}.ca-promo b{font-size:16px}.ca-promo small{font-size:12.5px}.ca-promo .cp-pr{font-size:19px;align-self:end}}
/* подписи к году */
.ca-tabs .seg a{display:inline-flex;flex-direction:column;align-items:center;line-height:1.1;padding:6px 16px}
.ca-tabs .seg a small{font-size:11px;font-weight:600;color:var(--faint);margin-top:1px}
.ca-tabs .seg a.on small{color:var(--green-ink)}
/* год: вместо переключателя — тихая ссылка на архив */
.ca-arch{align-self:center;display:inline-flex;align-items:baseline;gap:6px;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font:700 14px/1.2 var(--sans);text-decoration:none;white-space:nowrap;transition:color .2s,border-color .2s}
.ca-arch small{font-weight:600;font-size:12.5px;color:var(--faint)}
.ca-arch:hover{color:var(--ink);border-color:color-mix(in srgb,var(--green) 45%,var(--line))}
@media (max-width:760px){.ca-arch{align-self:flex-start;margin-top:10px;padding:7px 13px;font-size:13.5px}}
/* 100Б на плашке 5в1 в тёмной теме — на белом круге, без инверсии */
/* карточка: логотип школы — круглый значок на нижнем краю фото; маленькая стрелка справа внизу */
.uc-cov{position:relative}
.uc-logo{position:absolute;left:14px;bottom:-18px;z-index:2;width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 3px var(--surface),0 4px 12px rgba(7,20,12,.22)}
.uc-logo img{width:28px;height:28px;object-fit:contain}
.uc-cov:has(.uc-logo)+.cbody .uc-meta{padding-left:50px;min-height:22px}
.uc .cprice{position:relative;padding-right:40px}
.uc-go{position:absolute;right:0;bottom:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--muted);transition:background-color .2s,color .2s,transform .2s}
.uc-go svg{width:15px;height:15px}
.card.uc:hover .uc-go{background:var(--green);color:var(--on-green);transform:translateX(2px)}
.uc .cprice .cfull{margin-left:auto}
@media (max-width:640px){.uc-logo{left:8px;bottom:-14px;width:32px;height:32px;box-shadow:0 0 0 2px var(--surface),0 3px 8px rgba(7,20,12,.22)}.uc-logo img{width:22px;height:22px}.uc-cov:has(.uc-logo)+.cbody .uc-meta{padding-left:38px}.uc-go{width:26px;height:26px}.uc .cprice{padding-right:32px}}
.uc .uc-meta .uc-sn{color:var(--ink);font-weight:700}
/* v4: логотип школы слева от названия, в строке над именем */
.uc-logo{display:none}
.uc-cov:has(.uc-logo)+.cbody .uc-meta{padding-left:0}
.uc .uc-meta .uc-sl{display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden}
.uc-si{flex:0 0 auto;width:24px;height:24px;border-radius:8px;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 1px rgba(7,20,12,.1),0 1px 3px rgba(7,20,12,.08)}
.uc-si img{width:17px;height:17px;object-fit:contain}
.uc .uc-meta .uc-sn{font-size:13.5px;white-space:nowrap}
.uc .uc-meta .uc-ss{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uc .cbody{padding-top:12px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .uc-si{box-shadow:0 0 0 1px rgba(255,255,255,.12)}}
:root[data-theme="dark"] .uc-si{box-shadow:0 0 0 1px rgba(255,255,255,.12)}
@media (max-width:640px){.uc-si{width:20px;height:20px;border-radius:6px}.uc-si img{width:14px;height:14px}.uc .uc-meta .uc-sn{font-size:12.5px}.uc .uc-meta .uc-sl{gap:5px}}
.uc .uc-meta .uc-sl{gap:0}.uc-si{margin-right:7px}.uc .uc-meta .uc-ss{margin-left:4px}@media (max-width:640px){.uc-si{margin-right:5px}}
/* название курса полностью + краткое описание (2 строки) */
.uc .cteach{line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.uc-intro{margin-top:2px;color:var(--muted);font-size:13.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:640px){.uc-intro{font-size:12.5px;-webkit-line-clamp:3}}
/* логотип школы: вариант для тёмной темы (если загружен в админке) */
.lg-d{display:none!important}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lg-l:has(+ .lg-d){display:none!important}:root:not([data-theme="light"]) .lg-d{display:inline-block!important}}
:root[data-theme="dark"] .lg-l:has(+ .lg-d){display:none!important}
:root[data-theme="dark"] .lg-d{display:inline-block!important}
/* логотип на карточке курса — без подложки, одного размера */
.uc-si{width:22px;height:22px;border-radius:0;background:none!important;box-shadow:none!important;padding:0}
.uc-si img{width:22px;height:22px;object-fit:contain}
@media (max-width:640px){.uc-si,.uc-si img{width:18px;height:18px}}
/* плашка 5в1: картинка набора */
.ca-promo .cp-img img{display:block;width:56px;height:56px;border-radius:14px;object-fit:cover}
@media (max-width:760px){.ca-promo .cp-img{grid-column:auto}.ca-promo .cp-img img{width:44px;height:44px;border-radius:12px}.ca-promo{grid-template-columns:auto minmax(0,1fr) auto}}
/* 5в1: логотипы школ без белых кругов — на мягкой подложке цвета карточки, в тёмной теме — тёмные варианты из админки */
.ca-promo .cp-ics i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 2px color-mix(in srgb,var(--green-soft) 70%,var(--surface)),0 2px 6px rgba(7,20,12,.12);margin-left:-8px}
.ca-promo .cp-ics i:first-child{margin-left:0}
.ca-promo .cp-ics i img{width:24px;height:24px;object-fit:contain}
@media (max-width:760px){.ca-promo .cp-ics{grid-column:1/-1}.ca-promo{grid-template-columns:minmax(0,1fr) auto}.ca-promo .cp-ics i{width:30px;height:30px}.ca-promo .cp-ics i img{width:19px;height:19px}}
.ca-promo .cp-ics i img{background:none!important;padding:0!important;box-shadow:none!important;margin:0!important;border-radius:0!important;filter:none!important}
/* логотипы школ: одинаково в обеих темах — без белых плашек и рамок (светлые/тёмные варианты — из админки) */
.sch-ic{background:none!important;box-shadow:none!important;padding:0!important;border-radius:0!important;object-fit:contain}
.sch-logo{background:color-mix(in srgb,var(--ink) 5%,transparent)!important;box-shadow:none!important}
.uc-arch-l{background:var(--surface-2)!important;box-shadow:none!important}
/* главная: экзамен + школа в строку, предметы кнопками ниже */
#htools.hm-tools{display:block}
.hm-trow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hm-trow .ca-dd{width:260px}
.hm-subj{margin:10px 0 6px}
@media (max-width:760px){.hm-trow{display:grid;grid-template-columns:auto 1fr}.hm-trow .ca-dd{width:auto}}
@media (max-width:760px){.hm-trow .ex-seg{grid-column:auto!important;justify-self:start}.hm-trow{gap:8px}}
.hm-trow .ca-fmt{width:220px}
@media (max-width:760px){.hm-trow{grid-template-columns:1fr 1fr}.hm-trow .ex-seg{grid-column:1/-1!important}.hm-trow .ca-fmt{width:auto}#hfmtw .dd-pop{left:auto;right:0}}
/* главная в стиле магазина: экзамен → предметы → школа и формат */
.hm-exrow{margin:0 0 4px}
.hm-subj{margin:6px 0 4px}
.hm-trow{margin:0 0 18px}
@media (max-width:760px){.hm-trow{margin-bottom:14px}}
/* главная: ЕГЭ/ОГЭ справа в строке фильтров (компьютер), на телефоне — первой строкой */
#htools.hm-tools{display:grid!important;grid-template-columns:260px 220px 1fr;grid-template-areas:"subj subj subj" "sch fmt ex";align-items:center;gap:0 10px;margin:0 0 18px}
#htools .hm-subj{grid-area:subj;margin:0 0 6px}
#htools #hschw{grid-area:sch;width:auto}
#htools #hfmtw{grid-area:fmt;width:auto}
#htools .ex-seg{grid-area:ex;justify-self:end}
@media (max-width:760px){
#htools.hm-tools{grid-template-columns:1fr 1fr;grid-template-areas:"ex ex" "subj subj" "sch fmt";gap:0 8px;margin-bottom:14px}
#htools .ex-seg{justify-self:stretch;display:flex;margin-bottom:8px}#htools .ex-seg button{flex:1 1 0}
#hfmtw .dd-pop{left:auto;right:0}}
/* шапка: лёгкие анимации кнопок темы, корзины и профиля */
.tbtn{transition:transform .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease}
.tbtn:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--green) 45%,var(--line));box-shadow:0 6px 16px -10px rgba(7,20,12,.45)}
.tbtn:active{transform:translateY(0) scale(.96)}
.tbtn.theme svg{transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.tbtn.theme:hover svg{transform:rotate(-25deg) scale(1.08)}
#cartBtn svg{transition:transform .25s ease}
#cartBtn:hover svg{transform:translateX(2px) rotate(-6deg)}
#cartBtn .cnt{transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
#cartBtn:hover .cnt{transform:scale(1.12)}
.tbtn.login:hover{box-shadow:0 8px 20px -8px color-mix(in srgb,var(--green) 80%,transparent);border-color:transparent}
.tbtn.login .tava{transition:transform .25s ease}
.tbtn.login:hover .tava,.tbtn.login:hover svg{transform:scale(1.08)}
@keyframes cntPop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
#cartBtn .cnt.pop{animation:cntPop .45s ease}
@media (prefers-reduced-motion:reduce){.tbtn,.tbtn svg,#cartBtn .cnt{transition:none!important;animation:none!important}.tbtn:hover{transform:none}}
/* 1. логотип: при наведении чуть приподнимается */
.logo img{transition:transform .25s ease}
.logo:hover img{transform:translateY(-2px)}
.logo:active img{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.logo img{transition:none}.logo:hover img{transform:none}}
/* 02.11: на телефоне открытый список «Месяц обучения» не уходит под нижнюю панель «Купить» —
   пока список открыт, панель прячется вниз; список прокручивается, если месяцев много */
.mbar { transition: transform .2s ease; }
body:has(#cpmw .dd.open) .mbar { transform: translateY(110%); pointer-events: none; }
@media (max-width: 760px) { #cpmw .dd.open .dd-pop { max-height: min(60vh, 420px); overflow-y: auto; } }
/* 02.11: магазин сразу в серверной раскладке (до запуска v9.js) — сколько карточек видно в блоке предмета:
   3 на ПК, 2 на телефоне; «Все 3 курса» — только на телефоне. Скрипт снимает data-ssr и дальше ставит hidden сам. */
#cagrid[data-ssr] .ssr-x3,#hgrid[data-ssr] .ssr-x3{display:none}
#cagrid[data-ssr] .ssr-m,#hgrid[data-ssr] .ssr-m{display:none}
@media (max-width:760px){#cagrid[data-ssr] .ssr-x2,#hgrid[data-ssr] .ssr-x2{display:none}#cagrid[data-ssr] .ssr-m,#hgrid[data-ssr] .ssr-m{display:inline-flex}}
#hcount .hc2{display:none}
@media (max-width:760px){#hcount .hc3{display:none}#hcount .hc2{display:inline}}

/* ===== 02.11: отзывы — общий вид для главной и /reviews ===== */
/* текстовый отзыв: ровная высота в ряду, кавычка, крупный аватар, кнопка внизу */
.rv-grid, .rvp-mix { align-items: stretch; }
.rv-txt { position: relative; height: 100%; min-height: 236px; gap: 12px; padding: 20px; border-radius: 22px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.rv-txt:hover { transform: translateY(-3px); box-shadow: var(--shadow-2, 0 14px 34px rgba(0,0,0,.18)); border-color: color-mix(in srgb, var(--green) 35%, var(--line)); }
.rv-q { position: absolute; top: 14px; right: 16px; width: 38px; height: 38px; color: var(--green); opacity: .16; pointer-events: none; transition: opacity .25s, transform .25s; }
.rv-txt:hover .rv-q { opacity: .3; transform: translateY(-2px) rotate(-4deg); }
.rv-ava { width: 42px; height: 42px; border-radius: 50%; font-size: 17px; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px color-mix(in srgb, var(--green) 45%, transparent); }
.rv-top { padding-right: 36px; }
.rv-top b { font-size: 15.5px; }
.rv-top small { font-weight: 600; margin-top: 1px; }
.rv-txt .rv-stars { font-size: 14px; letter-spacing: 3px; line-height: 1; }
.rv-txt p { -webkit-line-clamp: 4; font-size: 14.5px; line-height: 1.55; color: color-mix(in srgb, var(--ink) 88%, var(--muted)); }
.rv-more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 13.5px; transition: background-color .2s, color .2s, transform .2s, box-shadow .2s; }
.rv-more .arr { display: inline-block; transition: transform .25s cubic-bezier(.3,1.5,.5,1); }
.rv-more:hover { background: var(--green); color: var(--on-green); box-shadow: 0 8px 18px color-mix(in srgb, var(--green) 28%, transparent); }
.rv-more:hover .arr { transform: translateX(4px); }
.rv-more:active { transform: scale(.97); }

/* видео-кружок: кольцо, кнопка ▶ при наведении, значок звука — ровно на кольце */
.rv-vid { align-self: center; }
.rv-circ { box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 70%, transparent), 0 0 0 6px color-mix(in srgb, var(--green) 12%, transparent), 0 14px 30px rgba(0,0,0,.18); transition: transform .3s ease, box-shadow .3s ease; }
.rv-vid:hover .rv-circ { transform: scale(1.03); box-shadow: 0 0 0 2px var(--green), 0 0 0 8px color-mix(in srgb, var(--green) 18%, transparent), 0 18px 36px rgba(0,0,0,.22); }
.rv-play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; display: grid; place-items: center; background: rgba(8,12,10,.45); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transform: scale(.8); transition: opacity .25s, transform .25s; pointer-events: none; }
.rv-play svg { width: 24px; height: 24px; margin-left: 3px; }
.rv-vid:hover .rv-play, .rv-circ:focus-visible .rv-play { opacity: 1; transform: none; }
.rv-vid[data-state="playing"] .rv-play { opacity: 0; }
/* точка кольца под 45°: 14,6% от края минус половина кнопки */
.rv-mute { right: calc(14.6% - 17px); bottom: calc(14.6% - 17px); width: 34px; height: 34px; background: rgba(12,18,14,.72); color: #fff; border: 1.5px solid rgba(255,255,255,.85); box-shadow: 0 4px 12px rgba(0,0,0,.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background-color .2s, transform .2s; }
.rv-mute svg { width: 17px; height: 17px; }
.rv-mute .rv-i-on { display: none; }
.rv-vid[data-state="playing"] .rv-mute { background: var(--green); border-color: var(--green); color: var(--on-green); }
.rv-vid[data-state="playing"] .rv-mute .rv-i-on { display: block; }
.rv-vid[data-state="playing"] .rv-mute .rv-i-off { display: none; }
.rv-vid:hover .rv-mute { transform: scale(1.08); }
.rv-dur { bottom: 12px; }
.rv-cap { font-weight: 600; transition: color .2s; }
.rv-vid:hover .rv-cap, .rv-vid[data-state="playing"] .rv-cap { color: var(--green-ink); }

/* заголовок блока отзывов на главной — текст во всю ширину заголовка */
.revs-head p { max-width: 920px; text-wrap: balance; }
.revs-head p a, .rvp-lead a { color: var(--green-ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* окно отзыва: плавно появляется и исчезает */
.rv-scrim { opacity: 0; transition: opacity .22s ease; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.rv-scrim .rv-sheet { width: min(560px, 100%); padding: 26px; transform: translateY(14px) scale(.97); opacity: 0; transition: transform .26s cubic-bezier(.2,.9,.3,1.15), opacity .22s ease; position: relative; }
.rv-scrim.on { opacity: 1; }
.rv-scrim.on .rv-sheet { transform: none; opacity: 1; }
.rv-sheet .rv-top { margin: 0; padding-right: 40px; }
.rv-sheet .rv-ava { width: 50px; height: 50px; font-size: 20px; }
.rv-sheet .rv-stars { color: var(--green); letter-spacing: 3px; }
.rv-sheet .rv-full { margin: 0; font-size: 15.5px; line-height: 1.65; }
.rv-sheet .x { position: absolute; top: 16px; right: 16px; }
.rv-src { justify-self: start; display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; font-weight: 700; color: var(--green-ink); padding-top: 12px; border-top: 1px solid var(--line); width: 100%; }
.rv-src .arr { transition: transform .2s; }
.rv-src:hover .arr { transform: translateX(3px); }
@media (max-width: 640px) {
  .rv-scrim .rv-sheet { transform: translateY(40px); padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px)); }
  .rv-txt { min-height: 220px; padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-txt, .rv-q, .rv-more, .rv-more .arr, .rv-circ, .rv-play, .rv-mute, .rv-scrim, .rv-scrim .rv-sheet { transition: none !important; }
  .rv-txt:hover, .rv-vid:hover .rv-circ, .rv-vid:hover .rv-mute { transform: none; }
}

/* значки предметов в кнопках (магазин, главная): двухцветные из v9-sicons.json; у выбранной кнопки — цвет текста */
.ca-chip .sj-ic { width: 20px; height: 20px; flex: none; margin: -4px 6px -4px -4px; --sj-acc: var(--green-ink); --sj-bg: var(--surface); }
.ca-chip.on .sj-ic { --sj-acc: currentColor; --sj-bg: var(--green); }
/* линии значка одной толщины при любом размере (тонкие детали не сливаются и не пропадают) */
.ca-chip .sj-ic [stroke] { vector-effect: non-scaling-stroke; stroke-width: 1.1px; }
.sj-ic [stroke="var(--green)"] { stroke: var(--sj-acc); }
.sj-ic [fill="var(--green)"] { fill: var(--sj-acc); }
.sj-ic [fill="#fff"] { fill: var(--sj-bg); }
.sj-ic [stroke="#B9C6BE"] { stroke: currentColor; stroke-opacity: .3; }
@media (max-width: 760px) { .ca-chip .sj-ic { width: 18px; height: 18px; margin-right: 5px; } }

/* телефон: кнопки предметов в 2 строки, листаются вбок; на ПК ряды не видны — кнопки переносятся как раньше */
.ca-sr { display: contents; }
@media (max-width: 760px) {
  .ca-subj.is-2r { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 6px; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; mask-image: linear-gradient(90deg, #000 86%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); }
  .ca-subj.is-2r::-webkit-scrollbar { display: none; }
  .ca-subj.is-2r .ca-sr { display: flex; gap: 6px; width: max-content; padding-right: 16px; }
  #htools .ca-subj.is-2r { margin-inline: -16px; }
}


/* архив 2026: баннер преподавателя + тёмная плашка «Архив 2026» снизу слева */
.uc-archmark { position: absolute; left: 10px; bottom: 10px; z-index: 1; display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; background: rgba(12, 18, 15, .78); color: #fff; font: 700 12.5px/1 var(--sans); letter-spacing: .01em; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); pointer-events: none; }
@media (max-width: 640px) { .uc-archmark { left: 7px; bottom: 7px; padding: 4px 8px; font-size: 11.5px; } .cp-cover .uc-archmark { white-space: nowrap; left: 4px; right: 4px; bottom: 4px; justify-content: center; padding: 4px 0; } }

/* зелёная точка после заголовка — как «Вход•» в окне входа: профиль, 404 */
.pf2-head .acc-title h1::after, .nf-card h1::after { content: ""; display: inline-block; width: .3em; height: .3em; max-width: 12px; max-height: 12px; min-width: 9px; min-height: 9px; margin-left: .1em; border-radius: 50%; background: #00cb51; vertical-align: top; margin-top: .2em; }

/* лендинг TG-кампании (?tg_landing=1): «Перейти в Telegram» + копирование ссылки + подсказка про VPN */
.tg-ctas { flex-wrap: nowrap; }
.tg-ctas .direct-tg-help-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.tg-ctas .direct-tg-help-btn .ic { display: inline-flex; width: 19px; height: 19px; }
.tg-ctas .direct-tg-help-btn .ic svg { width: 100%; height: 100%; }
.hm-ctas .tg-copy-link-btn { flex: 0 0 auto; width: 56px; min-width: 56px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.tg-copy-link-btn svg { width: 22px; height: 22px; }
.tg-copy-link-btn .i-ok { display: none; color: var(--green-ink); }
.tg-copy-link-btn.copied .i-copy { display: none; }
.tg-copy-link-btn.copied .i-ok { display: block; }
.hm-hero-text .tg-help-note { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; max-width: 520px; font-size: 14px; line-height: 1.45; color: var(--muted); }
@media (max-width: 480px) { .hm-ctas.tg-ctas .btn.pri { flex: 1 1 auto; } .hm-ctas .tg-copy-link-btn { flex: 0 0 56px; } }

/* персонаж в пустых и итоговых состояниях: 404, оплата прошла, нет курсов, ничего не найдено */
.v9-state { display: block; width: 180px; height: auto; margin: 0 auto 8px; user-select: none; pointer-events: none; }
.ca-none .v9-state { width: 140px; margin-bottom: 10px; }
.pd-empty .v9-state { width: 150px; margin-bottom: 6px; }
.go-hero .go-state { width: 132px; margin: 0; flex: 0 0 auto; }
@media (max-width: 640px) { .v9-state { width: 150px; } .ca-none .v9-state { width: 120px; } .go-hero .go-state { width: 104px; } }

/* ---------- страница курса: чище панель покупки (03.11) ---------- */
.cp-opt { display: flex; flex-direction: column; align-items: flex-start; }
.cp-opt strong { margin-top: auto; padding-top: 14px; }
.cp-opt .cp-save { margin-top: 8px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--on-green, #fff); background: var(--green); border-radius: 999px; padding: 2px 8px; }
.cp-opt .cp-save + strong { padding-top: 4px; }
.cp-mdd { margin-top: 0; }
.cp-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; justify-items: center; }
.cp-notes li { display: flex; align-items: center; gap: 7px; color: var(--faint); font-size: 13px; font-weight: 600; line-height: 1.35; text-align: left; }
.cp-notes svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--green); }
@media (min-width: 761px) { .cp-rel .grid > :nth-child(n+4) { display: none; } }

/* «Весь курс»: поле «Месяц обучения» на месте, недоступно (03.11) */
.cp-mdd .dd-off .dd-btn { cursor: default; opacity: .6; }
.cp-mdd .dd-off .dd-ch { visibility: hidden; }

/* телефон: у поля «Месяц обучения» значок календаря остаётся (03.11) */
@media (max-width: 420px) { .cp-mdd .dd-v .dd-i { display: inline-grid; } }

/* шапка: имя в кнопке профиля визуально по центру (у шрифта нижний отступ больше верхнего), 03.11 */
.tbtn.login span:not(.tava) { position: relative; top: -1px; }


/* телефон: страница курса компактнее, крошки в одну строку (03.11) */
@media (max-width: 640px) {
  .crumbs { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; gap: 5px; font-size: 12.5px; padding-block: 14px 12px; }
  .crumbs > * { flex: 0 0 auto; }
  .crumbs > a:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .cp-head h1 { font-size: 19px; line-height: 1.2; letter-spacing: -.02em; }
  .cp-sub { font-size: 13px; margin-top: 6px; }
  .cp-intro { font-size: 14px; margin-top: 14px; }
  .cp-ul li { font-size: 14px; }
  .cp-buy h2 { font-size: 18px; }
  .cp-opt b { font-size: 15px; }
  .cp-opt strong { font-size: 20px; }
  .cp-opt .cp-save { white-space: nowrap; }
  .cp-notes li { font-size: 12.5px; }
}
/* маленькие телефоны: меню разделов помещается целиком, плитки цен не ломаются */
@media (max-width: 400px) {
  .mnav { gap: 3px; }
  .mnav a { flex: 1 1 auto; padding-inline: clamp(5px, 1.8vw, 10px); font-size: clamp(12px, 3.5vw, 13.5px); }
  .cp-opt small { font-size: 12px; }
  .cp-opt .cp-save { font-size: 12px; padding-inline: 6px; }
}
/* 03.11 (владелец): телефон — строка разделов закреплена под шапкой (шапка 65 px), липкие панели ниже на её высоту */
@media (max-width: 760px) {
  .mnav { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 65px); z-index: 19; }
  /* 04.11: высота строки разделов 49 px (кнопки 40 px + 4 + 4 + граница) → всё липкое ниже шапки и строки: 65 + 49 = 114 px */
  .filters, .ca-bar, .ca-tools, .ca-subj { top: calc(env(safe-area-inset-top, 0px) + 114px); }
  /* 04.11: строка предметов магазина (при прокрутке вверх) встаёт под строку разделов и выезжает из-под неё */
  .ca-subj-fix { top: calc(env(safe-area-inset-top, 0px) + 114px); z-index: 18; }
  #courses, #step2, #step3 { scroll-margin-top: 126px; }
  #courses .hm-head { scroll-margin-top: 138px; }
}
/* 03.11: первый экран главной на телефоне — дальше от шапки */
@media (max-width: 640px) { .hm-hero { padding-top: 56px; } }
/* 03.11: круг значка Telegram не сжимается рядом с длинным текстом */
.flow-help .ic { flex: none; }
/* 03.11: школы на телефоне — первая карточка с отступом, как остальной текст (прокрутка с привязкой к краю) */
@media (max-width: 640px) { .hm-sch { scroll-padding-inline: 16px; } }
/* 03.11 (владелец): магазин на телефоне — «Архив 2026» маленькой кнопкой справа от поиска, большая кнопка в шапке скрыта */
.ca-arch-m { display: none; }
@media (max-width: 760px) {
  .ca-head .ca-arch { display: none; }
  .ca-tools.ca-v2 { position: relative; top: auto; }
  .ca-tools.ca-v2 > .ca-search { margin-right: 120px; }
  .ca-arch-m { position: absolute; right: 0; bottom: 0; display: inline-flex; justify-content: center; align-items: center; gap: 4px; width: 112px; height: 48px; padding: 0 6px; border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); border-radius: 16px; background: var(--green-soft); color: var(--green-ink); font-size: 13px; font-weight: 700; white-space: nowrap; }
  .ca-arch-m span { color: inherit; }
}
/* 04.11 (проверка на телефоне): кнопка входа в шапке — ровный круг 40 × 40, как кнопка темы (значок без подписи до 900 px) */
@media (max-width: 900px) { .tbtn.login:not(:has(.tava)) { width: 40px; min-width: 40px; padding: 0; justify-content: center; } }
/* 04.11: карточка бесплатного курса на узком телефоне — «Бесплатно» не заходит под кнопку-стрелку */
@media (max-width: 359px) { .card.uc[data-f] .cprice b { font-size: 15px; } }
/* 04.11: «Школы и программы» — «Программ: 2» не переносится, переносится только название */
.subj-programs summary > span { min-width: 0; }
.subj-programs summary small { flex: none; white-space: nowrap; }
/* 04.11: телефон — подписи не мельче 12 px (плитки цены, «Месяц обучения», школа · предмет в карточке, «Архив 2026», длительность видео) */
@media (max-width: 640px) {
  .dd-l, .uc .uc-meta, .uc-archmark, .rv-dur { font-size: 12px; }
}
/* 03.11 (владелец, вариант A): меню разделов на телефоне — вкладки без капсул, выбранная — зелёный текст и зелёная линия снизу.
   Высота строки прежняя (49 px), от неё считаются отступы липких панелей. */
@media (max-width: 760px) {
  .mnav { gap: 0; padding-block: 0; }
  .mnav a { min-height: 48px; border-radius: 0; background: transparent; color: var(--muted); box-shadow: inset 0 -2px 0 transparent; transition: color .18s, box-shadow .18s; }
  .mnav a.on { background: transparent; color: var(--green-ink); box-shadow: inset 0 -2.5px 0 var(--green); }
  .mnav a:active { color: var(--ink); }
}