/* ===========================================================================
   PREP.UZ — design system v2 · "editorial language school"
   ---------------------------------------------------------------------------
   Loads after the legacy sheets and restyles existing markup by cascade.
   No template structure, form action, or JS hook is renamed or removed.

   Direction (researched against Lingoda / Preply and 2026 landing standards):
   outcome-first hero set in a Cyrillic-native serif, warm paper, near-black
   ink, ONE deep green accent, hairline rules, borderless cards, rectangular
   buttons, no gradients, no pills, no decorative chrome. The single flourish
   is the ghost letterform "Я" — the product itself.
   =========================================================================== */

:root {
    --paper:   #FBFAF8;
    --card:    #FFFFFF;
    --ink:     #131711;
    --ink-2:   #4C554D;
    --ink-3:   #8A9188;
    --green:   #0B5B3B;
    --green-2: #094C31;
    --tint:    #EFF4EF;
    --line:    #E6E4DC;
    --amber:   #E8A33D;

    --serif: "Literata", Georgia, "Times New Roman", serif;
    --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    --r: 12px;
    --ease: cubic-bezier(.22, .8, .3, 1);

    /* Breathing room between the end of page content and the footer. */
    --page-end: clamp(64px, 9vw, 112px);
}

/* ---------------------------------------------------------------------------
   1 · Base
   --------------------------------------------------------------------------- */

body {
    font-family: var(--sans);
    color: var(--ink);
    background-color: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size: 16px;
    line-height: 1.65;
}

h1, h2, h3, h4 { color: var(--ink); line-height: 1.15; }

a { color: var(--green); transition: color .16s var(--ease); }
a:hover { color: var(--green-2); text-decoration: none; }

::selection { background: var(--green); color: #fff; }

:is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

img { max-width: 100%; }

.sr-only-seo {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------------
   2 · Header
   --------------------------------------------------------------------------- */

.header {
    position: sticky;
    top: 0;
    z-index: 900;
    margin-bottom: 0;
    background: transparent;
    border-bottom: 1px solid var(--line);
}
/* The frosted background lives on a pseudo-element: backdrop-filter on
   .header itself would make the header the containing block for
   position:fixed descendants - and the login/search modals are markup
   inside the header, so they would center in the 72px header strip
   instead of the viewport. */
.header::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: rgba(251, 250, 248, .92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.header.open { background: var(--paper); }
.header__inner { height: 72px; }
@media (max-width: 991px) { .header__inner { height: 60px; } }
.logo img { max-height: 38px; width: auto; }

nav.main-menu ul li { margin: 0 16px; }
nav.main-menu ul li a {
    font-family: var(--sans);
    color: var(--ink-2);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    padding: 6px 0;
    border-bottom: 1px solid transparent;
    transition: color .16s var(--ease), border-color .16s var(--ease);
}
nav.main-menu ul li a:hover { color: var(--ink); border-bottom-color: var(--ink); }
nav.main-menu ul li.active a { color: var(--ink); border-bottom-color: var(--green); }

.top-buttons__item { color: var(--ink-2); }
.top-buttons__item:hover { color: var(--ink); }

.dropdown-content {
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: 0 16px 48px rgba(19, 23, 17, .10);
    overflow: hidden;
}
.mobile-menu li a { border-radius: 8px; font-weight: 500; }
.mobile-menu li a:hover { background: var(--tint); color: var(--green); }

/* ---------------------------------------------------------------------------
   3 · Buttons — rectangular, quiet, confident
   --------------------------------------------------------------------------- */

.btn, button.btn, a.btn {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .01em;
    text-transform: none;
    border-radius: 8px;
    padding: 13px 26px;
    line-height: 1.2;
    box-shadow: none;
    transition: background-color .16s var(--ease), color .16s var(--ease),
                border-color .16s var(--ease), transform .16s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--green, .btn.btn--green {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}
.btn--green:hover, .btn--green:focus {
    background: var(--green-2);
    border-color: var(--green-2);
    color: #fff;
}

.btn--bordered, .btn-outline-primary {
    background: transparent;
    border: 1px solid var(--ink);
    color: var(--ink);
}
.btn--bordered:hover, .btn-outline-primary:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

.btn--sm { padding: 9px 18px; font-size: 13.5px; }
.btn--lg { padding: 16px 34px; font-size: 16px; }

/* ---------------------------------------------------------------------------
   4 · Forms
   --------------------------------------------------------------------------- */

input[type="text"], input[type="password"], input[type="email"],
input[type="tel"], input[type="number"], textarea {
    font-family: var(--sans);
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    color: var(--ink);
    padding: 12px 14px;
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
input:focus, textarea:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(11, 91, 59, .12);
    outline: none;
}
::placeholder { color: var(--ink-3); }

.jq-selectbox__select {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    box-shadow: none;
    color: var(--ink);
    text-shadow: none;
}
.jq-selectbox__dropdown {
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: 0 16px 48px rgba(19, 23, 17, .10);
}
.jq-selectbox__dropdown ul li.selected,
.jq-selectbox__dropdown ul li:hover { background: var(--tint); color: var(--green); }

/* ---------------------------------------------------------------------------
   5 · Editorial headings, breadcrumbs, pagination
   --------------------------------------------------------------------------- */

.title-3 h1, .title-3 h2, .title-3 h3,
.blog-index-title, .blog-category-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(24px, 3vw, 34px);
    letter-spacing: -.01em;
    color: var(--ink);
}

.breadcrumb { background: transparent; padding: 16px 0 0; font-size: 13.5px; }
.breadcrumb ul li, .breadcrumb ul li a { color: var(--ink-3); }
.breadcrumb ul li a:hover { color: var(--green); }

.pagination-crawlable { padding: 20px 0; }
.pagination-crawlable a, .pagination-crawlable span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; margin: 0 2px; padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--line);
    color: var(--ink-2); font-weight: 600; font-size: 14px;
}
.pagination-crawlable a:hover { border-color: var(--ink); color: var(--ink); }
.pagination-crawlable span[aria-current="page"] {
    background: var(--ink); border-color: var(--ink); color: var(--paper);
}

/* ---------------------------------------------------------------------------
   6 · Cards — borderless, image-led
   --------------------------------------------------------------------------- */

.course-ins__item {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: none;
    overflow: hidden;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.course-ins__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(19, 23, 17, .10);
}
.course-ins__image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.cins__title strong { font-size: 16.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.cins__author small, .cins__author a { font-size: 13px; }
.cins__author a { color: var(--ink-2); font-weight: 500; }
.cins__author a:hover { color: var(--green); }

.rating-stars .star .icon-star { color: #DDDACF; }
.rating-stars .star.selected .icon-star { color: var(--amber); }

.articles, .sm-article, .blog__item, .student-reviews__item, .how-blocks__item {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: none;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.articles:hover, .sm-article:hover, .blog__item:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(19, 23, 17, .08);
}
.articles { padding: 18px; margin-bottom: 22px; }
.sm-article { padding: 12px; }
.articles img, .sm-article img, .blog__item img, .fpost-img img { border-radius: 8px; }
.card-title a { color: var(--ink); font-weight: 600; }
.card-title a:hover { color: var(--green); }

.bc__banner { border-radius: var(--r); box-shadow: 0 12px 36px rgba(19,23,17,.12); }
.content-block { line-height: 1.75; }

/* ---------------------------------------------------------------------------
   7 · Modals
   --------------------------------------------------------------------------- */

.modal__content {
    border-radius: var(--r);
    border: none;
    box-shadow: 0 32px 96px rgba(19, 23, 17, .28);
}
.modal__content__title { font-family: var(--serif); font-weight: 600; }

/* ---------------------------------------------------------------------------
   8 · Footer
   --------------------------------------------------------------------------- */

/* Content wrappers own the space before the footer, so a full-bleed dark band
   at the end of a page (the homepage CTA) can still sit flush against it. */
.wrapper-content,
.wrapper > main { padding-bottom: var(--page-end); }

.wrapper-content > .p-cta:last-child { margin-bottom: calc(var(--page-end) * -1); }

.footer { background: #12160F; color: #A8B0A4; margin-top: 0; }
.footer a { color: #D9DED4; }
.footer a:hover { color: #fff; }
.footer-col-title h3 {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #7C857A;
}
.footer .fc-address, .footer p, .footer small { color: #7C857A; }
.footer-payments img { border-radius: 4px; }

/* ---------------------------------------------------------------------------
   9 · Owl chrome (used off-homepage: news)
   --------------------------------------------------------------------------- */

.owl-nav button.owl-prev, .owl-nav button.owl-next {
    width: 40px; height: 40px;
    border-radius: 8px !important;
    background: var(--card) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    transition: border-color .16s var(--ease);
}
.owl-nav button.owl-prev:hover, .owl-nav button.owl-next:hover { border-color: var(--ink) !important; }
.owl-dots .owl-dot span { background: var(--line) !important; }
.owl-dots .owl-dot.active span { background: var(--green) !important; }

/* ===========================================================================
   10 · Homepage v2 — the "p-" layer
   =========================================================================== */

.p-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 18px;
}

/* ---- hero ---------------------------------------------------------------- */

.p-hero {
    position: relative;
    padding: clamp(56px, 9vw, 128px) 0 clamp(40px, 6vw, 72px);
    overflow: visible;
}
.p-hero__inner { position: relative; max-width: 780px; }

.p-hero h1 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(38px, 6.4vw, 76px);
    line-height: 1.06;
    letter-spacing: -.02em;
    margin: 0 0 26px;
    text-wrap: balance;
}
.p-hero h1 em {
    font-style: italic;
    font-weight: 500;
    color: var(--green);
}

.p-hero__sub {
    color: var(--ink-2);
    font-size: clamp(16px, 1.7vw, 19px);
    line-height: 1.6;
    max-width: 52ch;
    margin: 0 0 34px;
}

.p-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.p-hero__cta .btn { display: inline-flex; align-items: center; width: auto; flex: 0 0 auto; }
.p-hero__more { font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.p-hero__more:hover { color: var(--green); border-color: var(--green); }

/* the ghost letterform — the product itself, and nothing else */
.p-hero::after {
    content: "Я";
    position: absolute;
    right: -1%;
    top: 46%;
    transform: translateY(-50%);
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(240px, 34vw, 560px);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--line);
    z-index: -1;
    pointer-events: none;
    user-select: none;
}
@media (max-width: 767px) { .p-hero::after { display: none; } }

/* ---- stats: one hairline row, serif numerals ----------------------------- */

.p-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px 32px;
    border-top: 1px solid var(--line);
    margin-top: clamp(44px, 6vw, 72px);
    padding-top: 30px;
}
@media (max-width: 767px) { .p-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.p-stats b {
    display: block;
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(26px, 3.2vw, 40px);
    letter-spacing: -.01em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    margin-bottom: 4px;
}
.p-stats span { font-size: 13.5px; color: var(--ink-3); }

/* ---- section scaffolding -------------------------------------------------- */

.p-section { padding: clamp(56px, 8vw, 104px) 0 0; }
.p-section__head { max-width: 640px; margin-bottom: clamp(28px, 4vw, 44px); }
.p-section__head h2 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(28px, 3.6vw, 44px);
    letter-spacing: -.015em;
    margin: 0 0 12px;
    text-wrap: balance;
}
.p-section__head p { color: var(--ink-2); font-size: 16.5px; margin: 0; }

/* ---- offer: why prep ------------------------------------------------------ */

.p-offer {
    background: var(--tint);
    border-radius: 20px;
    padding: clamp(32px, 5vw, 64px);
}
.p-offer__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 48px);
}
@media (max-width: 860px) { .p-offer__grid { grid-template-columns: 1fr; } }
.p-offer__item { border-top: 1px solid rgba(19, 23, 17, .14); padding-top: 20px; }
.p-offer__item h3 { font-family: var(--serif); font-weight: 600; font-size: 20px; margin: 0 0 10px; }
.p-offer__item p { color: var(--ink-2); font-size: 15px; margin: 0; line-height: 1.65; }

/* ---- video reviews -------------------------------------------------------- */

.p-videos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 24px;
}
@media (max-width: 991px) { .p-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .p-videos { grid-template-columns: 1fr; } }

.p-video { text-align: left; }
.p-video__frame {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    border-radius: var(--r);
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    background: var(--ink);
}
.p-video__frame img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s var(--ease), opacity .3s var(--ease);
    opacity: .92;
}
.p-video__frame:hover img { transform: scale(1.03); opacity: 1; }
.p-video__frame::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 58px; height: 58px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(251, 250, 248, .94) no-repeat 56% center / 20px
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l13-7.5z' fill='%230B5B3B'/%3E%3C/svg%3E");
    transition: transform .2s var(--ease);
}
.p-video__frame:hover::after { transform: translate(-50%, -50%) scale(1.08); }
.p-video__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.p-video__frame.is-playing::after { display: none; }

.p-video figcaption { margin-top: 12px; }
.p-video figcaption b { display: block; font-weight: 600; font-size: 15px; color: var(--ink); }
.p-video figcaption span { font-size: 13px; color: var(--ink-3); }

/* ---- steps: a real sequence ----------------------------------------------- */

.p-steps { border-top: 1px solid var(--line); }
.p-step {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 24px;
    padding: 30px 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
}
@media (max-width: 767px) { .p-step { grid-template-columns: 56px minmax(0, 1fr); } }
@media (max-width: 767px) { .p-step p { grid-column: 2; } }
.p-step i {
    font-style: normal;
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(22px, 2.6vw, 32px);
    color: var(--ink-3);
}
.p-step h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(19px, 2.2vw, 24px); margin: 0; }
.p-step p { color: var(--ink-2); font-size: 15px; margin: 0; line-height: 1.65; }

/* ---- tracks: quiet secondary nav ------------------------------------------ */

.p-tracks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 860px) { .p-tracks { grid-template-columns: 1fr; } }
.p-track { display: block; }
.p-track__img {
    aspect-ratio: 16 / 9;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--tint);
    margin-bottom: 14px;
}
.p-track__img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .3s var(--ease);
}
.p-track:hover .p-track__img img { transform: scale(1.04); }
.p-track b { font-weight: 600; font-size: 16.5px; color: var(--ink); }
.p-track span { display: block; font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }
.p-track:hover b { color: var(--green); }

/* ---- final CTA band -------------------------------------------------------- */

.p-cta {
    background: #12160F;
    margin-top: clamp(56px, 8vw, 104px);
    padding: clamp(56px, 8vw, 96px) 0;
    position: relative;
    overflow: hidden;
}
.p-cta::after {
    content: "Я";
    position: absolute;
    right: 2%;
    bottom: -18%;
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(200px, 24vw, 380px);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(251, 250, 248, .14);
    pointer-events: none;
}
.p-cta .p-label { color: #9FB3A2; }
.p-cta h2 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(30px, 4.4vw, 54px);
    letter-spacing: -.015em;
    color: var(--paper);
    max-width: 17ch;
    margin: 0 0 16px;
    text-wrap: balance;
}
.p-cta p { color: #A8B0A4; max-width: 52ch; margin: 0 0 32px; font-size: 16.5px; }
.p-cta .btn--green { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.p-cta .btn--green:hover { background: #fff; border-color: #fff; color: var(--ink); }
.p-cta .p-lead .btn--green { background: var(--green); border-color: var(--green); color: #fff; border-radius: 8px; }
.p-cta .p-lead .btn--green:hover { background: var(--green-2); border-color: var(--green-2); }
.p-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.p-cta__actions .btn { display: inline-flex; width: auto; flex: 0 0 auto; }
.p-cta__more { color: var(--paper); font-weight: 600; border-bottom: 1px solid rgba(251,250,248,.5); padding-bottom: 2px; }
.p-cta__more:hover { color: #fff; border-color: #fff; }

/* ---------------------------------------------------------------------------
   11 · News (inner pages)
   --------------------------------------------------------------------------- */

.fpost {
    overflow: hidden;
    border-radius: var(--r);
    background: var(--ink);
}
.fpost-img { min-height: 198px; }
.fposts-left .fpost-img { min-height: 400px; }
@media (max-width: 992px) { .fposts-left .fpost-img { min-height: 250px; } }

.fpost-text {
    background: linear-gradient(180deg, rgba(19, 23, 17, 0) 0%, rgba(19, 23, 17, .88) 100%);
    padding: 44px 18px 14px;
}
.fpost-text h3, .fpost-text h4 {
    color: #fff; font-size: 16px; font-weight: 600; line-height: 1.35; margin: 0 0 6px;
}
.fpost-text .bi__footer a { color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.4); }
.fpost-text .bi__footer small { color: rgba(255,255,255,.7); }

.blog-title-6 .h5 { border: none; }
.blog-title-6 .bg-primary {
    background: transparent !important;
    color: var(--green) !important;
    padding: 0;
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   12 · Motion discipline
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Scroll reveals — quiet, once, homepage only. Gated by the `m-motion`
   class that js/home-motion.js adds to <html> only when IntersectionObserver
   exists and the visitor has not asked for reduced motion; without the class
   (no JS, old browser) everything below renders fully static.
   Keep this selector list in sync with the GROUPS table in home-motion.js. */

/* :where() keeps every hidden state at minimal specificity, so the single
   `.m-in` rule below always outranks it. Browsers too old for :where()
   drop this rule entirely and simply render the page static. */
.m-motion :where(
    .p-hero__inner > .p-label,
    .p-hero__inner > h1,
    .p-hero__inner > .p-hero__sub,
    .p-hero__inner > .p-hero__cta,
    .p-stats > div,
    .p-who > div > .p-label,
    .p-who > div > h2,
    .p-who > div > p,
    .p-who__list > li,
    .p-section__head > *,
    .p-offer__item,
    .p-pkg > h3,
    .p-pkg li,
    .p-video,
    .p-step,
    .p-faq__list > details,
    .p-cta__grid > *,
    .a-hero__inner > *,
    .a-quote__cap,
    .a-quote__text,
    .a-method__p,
    .a-practice > h3,
    .a-practice__list > li,
    .a-week__item,
    .a-support > li,
    .a-diff__col,
    .a-team__count,
    .a-person,
    .a-geo > div > *,
    .a-links > *
) {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
}

.m-motion .m-in {
    opacity: 1;
    transform: none;
}

/* The mission rule draws in from the left rather than rising with the text.
   Both selectors outrank `.m-motion .m-in` above, so the order still holds. */
.m-motion .a-quote__rule {
    opacity: 1;
    transform: scaleX(0);
    transition: transform .7s var(--ease);
}
.m-motion .a-quote__rule.m-in { transform: scaleX(1); }

/* The ghost letterform surfaces slowly behind the hero, after the text. */
.m-motion .p-hero::after,
.m-motion .a-hero::after {
    animation: m-ghost 1.6s var(--ease) .3s both;
}
@keyframes m-ghost {
    from { opacity: 0; }
}

/* FAQ answers ease open. Ungated: harmless without JS, and the global
   reduced-motion rule above already zeroes it. */
.p-faq__list details[open] > p {
    animation: m-faq-answer .3s var(--ease);
}
@keyframes m-faq-answer {
    from { opacity: 0; transform: translateY(-4px); }
}

/* ---- lead form (inside the dark CTA band) --------------------------------- */

.p-cta__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    position: relative;
    z-index: 1;
}
@media (max-width: 860px) { .p-cta__grid { grid-template-columns: 1fr; } }

.p-lead {
    background: var(--paper);
    border-radius: 16px;
    padding: clamp(24px, 3vw, 36px);
    box-shadow: 0 32px 96px rgba(0, 0, 0, .35);
}
.p-lead label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    margin: 0 0 6px;
}
.p-lead input[type="text"] { width: 100%; margin-bottom: 16px; }
.p-lead .btn { width: 100%; display: block; text-align: center; margin-top: 4px; }
.p-lead small { display: block; text-align: center; color: var(--ink-3); margin-top: 12px; font-size: 12.5px; }

.p-lead__success { text-align: center; padding: 28px 8px; }
.p-lead__success b {
    display: grid; place-items: center;
    width: 52px; height: 52px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--tint);
    color: var(--green);
    font-size: 24px;
}
.p-lead__success p { color: var(--ink); font-weight: 600; margin: 0; }

/* ---- who it's for ---------------------------------------------------------- */

.p-who {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
}
@media (max-width: 860px) { .p-who { grid-template-columns: 1fr; } }
.p-who h2 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(28px, 3.6vw, 44px);
    letter-spacing: -.015em;
    margin: 0;
    text-wrap: balance;
}
.p-who__list { list-style: none; margin: 0; padding: 0; counter-reset: who; }
.p-who__list li {
    counter-increment: who;
    position: relative;
    padding: 18px 0 18px 64px;
    border-bottom: 1px solid var(--line);
    font-size: 16.5px;
    color: var(--ink);
}
.p-who__list li:first-child { border-top: 1px solid var(--line); }
.p-who__list li::before {
    content: counter(who, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--serif);
    font-weight: 500;
    font-size: 20px;
    color: var(--ink-3);
}

/* ---- package checklist (inside the offer band) ------------------------------ */

.p-pkg {
    margin-top: clamp(28px, 4vw, 44px);
    padding-top: clamp(22px, 3vw, 32px);
    border-top: 1px solid rgba(19, 23, 17, .14);
}
.p-pkg h3 { font-family: var(--serif); font-weight: 600; font-size: 20px; margin: 0 0 18px; }
.p-pkg ul {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 40px;
}
@media (max-width: 767px) { .p-pkg ul { grid-template-columns: 1fr; } }
.p-pkg li {
    position: relative;
    padding-left: 30px;
    color: var(--ink);
    font-size: 15.5px;
}
.p-pkg li::before {
    content: "";
    position: absolute;
    left: 0; top: .32em;
    width: 17px; height: 17px;
    background: no-repeat center / contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.4 9.4 18 20 6.5' fill='none' stroke='%230B5B3B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---- FAQ -------------------------------------------------------------------- */

.p-faq__list { border-top: 1px solid var(--line); max-width: 820px; }
.p-faq__list details { border-bottom: 1px solid var(--line); }
.p-faq__list summary {
    cursor: pointer;
    list-style: none;
    padding: 22px 44px 22px 0;
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(17px, 2vw, 21px);
    color: var(--ink);
    position: relative;
    transition: color .16s var(--ease);
}
.p-faq__list summary::-webkit-details-marker { display: none; }
.p-faq__list summary:hover { color: var(--green); }
.p-faq__list summary::after {
    content: "+";
    position: absolute;
    right: 4px; top: 50%;
    transform: translateY(-50%);
    font-family: var(--sans);
    font-weight: 400;
    font-size: 26px;
    color: var(--ink-3);
    transition: transform .2s var(--ease);
}
.p-faq__list details[open] summary::after { transform: translateY(-50%) rotate(45deg); color: var(--green); }
.p-faq__list details p {
    margin: 0;
    padding: 0 44px 24px 0;
    color: var(--ink-2);
    font-size: 15.5px;
    line-height: 1.7;
    max-width: 68ch;
}

/* ===========================================================================
   13 · Blog (new section; the legacy /news pages keep their own styling)
   =========================================================================== */

.b-head {
    max-width: 720px;
    padding: clamp(32px, 5vw, 56px) 0 clamp(28px, 4vw, 44px);
}
.b-head h1 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(30px, 4.4vw, 50px);
    letter-spacing: -.02em;
    margin: 0 0 14px;
    text-wrap: balance;
}
.b-head p { color: var(--ink-2); font-size: 17px; margin: 0; }

.b-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 40px) 28px;
}
@media (max-width: 991px) { .b-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .b-grid { grid-template-columns: 1fr; } }

.b-card { display: flex; flex-direction: column; }
.b-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--tint);
    margin-bottom: 16px;
}
.b-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s var(--ease);
}
.b-card:hover .b-card__media img { transform: scale(1.03); }

.b-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 12.5px;
    color: var(--ink-3);
    margin-bottom: 10px;
}
.b-meta span, .b-meta time { position: relative; }
.b-meta > * + *::before {
    content: "";
    position: absolute;
    left: -8px; top: 50%;
    width: 2px; height: 2px;
    border-radius: 50%;
    background: var(--ink-3);
}

.b-card h2, .b-card h3 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3;
    margin: 0 0 10px;
}
.b-card h3 { font-size: 17px; }
.b-card h2 a, .b-card h3 a { color: var(--ink); }
.b-card h2 a:hover, .b-card h3 a:hover { color: var(--green); }
.b-card__body p {
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 14px;
}
.b-more { font-weight: 600; font-size: 14.5px; }

.b-empty { color: var(--ink-3); padding: 40px 0; }

/* ---- article ------------------------------------------------------------- */

.b-article { max-width: 860px; margin: 0 auto; }
.b-article__head { padding: clamp(20px, 3vw, 34px) 0 clamp(20px, 3vw, 30px); }
.b-article__head h1 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(30px, 4.6vw, 52px);
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 0 0 16px;
    text-wrap: balance;
}
.b-article__lead {
    font-size: clamp(17px, 1.9vw, 20px);
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0;
    max-width: 62ch;
}
.b-article__cover {
    margin: 0 0 clamp(28px, 4vw, 44px);
    border-radius: var(--r);
    overflow: hidden;
}
.b-article__cover img { width: 100%; height: auto; display: block; }

/* long-form typography: the one place the serif runs at body size */
.b-prose { max-width: 68ch; font-size: 17.5px; line-height: 1.75; color: var(--ink); }
.b-prose > * + * { margin-top: 1.15em; }
.b-prose h2 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(22px, 2.6vw, 30px);
    letter-spacing: -.01em;
    margin-top: 1.9em;
    margin-bottom: .1em;
}
.b-prose p { margin-bottom: 0; }
.b-prose strong { font-weight: 600; }
.b-prose em { font-style: italic; color: var(--ink-2); }
.b-prose ul, .b-prose ol { padding-left: 1.4em; }
.b-prose li + li { margin-top: .5em; }
.b-prose ol { list-style: decimal; }
.b-prose ul { list-style: none; padding-left: 0; }
.b-prose ul li {
    position: relative;
    padding-left: 28px;
}
.b-prose ul li::before {
    content: "";
    position: absolute;
    left: 2px; top: .62em;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--green);
}
.b-prose a { border-bottom: 1px solid currentColor; }

/* Elements the admin editor can produce. Without these, anything an author
   writes beyond a paragraph, an H2 or a list would render unstyled. */
.b-prose h3 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(19px, 2vw, 23px);
    letter-spacing: -.005em;
    margin-top: 1.5em;
    margin-bottom: .1em;
}
.b-prose h4 {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 17.5px;
    margin-top: 1.4em;
    margin-bottom: .1em;
}
.b-prose blockquote {
    margin: 1.6em 0;
    padding: 2px 0 2px 20px;
    border-left: 3px solid var(--green);
    color: var(--ink-2);
    font-family: var(--serif);
    font-style: italic;
    font-size: 19px;
}
.b-prose blockquote p:last-child { margin-bottom: 0; }
.b-prose img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--r);
}
.b-prose figure { margin: 1.8em 0; }
.b-prose figcaption {
    margin-top: .6em;
    font-size: 14px;
    color: var(--ink-3);
    text-align: center;
}
.b-prose hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 2.2em 0;
}
/* Tables can outgrow the column on a phone, so the wrapper scrolls
   rather than the page. */
.b-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15.5px;
    display: block;
    overflow-x: auto;
}
.b-prose th,
.b-prose td {
    border: 1px solid var(--line);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}
.b-prose th { background: var(--tint); font-weight: 600; }
.b-prose a:hover { color: var(--green); }
.b-prose code {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: .9em;
    background: var(--tint);
    padding: .12em .35em;
    border-radius: 4px;
}

/* ---- in-article CTA ------------------------------------------------------- */

.b-cta {
    max-width: 860px;
    margin: clamp(44px, 6vw, 72px) auto 0;
    padding: clamp(26px, 3.5vw, 40px);
    background: var(--tint);
    border-radius: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.b-cta h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(20px, 2.4vw, 26px); margin: 0 0 6px; }
.b-cta p { color: var(--ink-2); margin: 0; max-width: 46ch; font-size: 15px; }
.b-cta .btn { display: inline-flex; width: auto; flex: 0 0 auto; }

.b-related { max-width: 860px; margin: clamp(44px, 6vw, 72px) auto 0; }
.b-related > h2 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(20px, 2.4vw, 26px);
    margin: 0 0 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

/* ===========================================================================
   14 · Course detail page
   ---------------------------------------------------------------------------
   Layout repair first. The purchase card shipped as `position: absolute` with
   a jQuery-driven `position: fixed` on scroll and no lower bound, so it left
   its column's flow (leaving a tall blank gap beside short content) and, once
   fixed, kept floating over everything below - including the footer.

   Native `position: sticky` is clipped by its own parent, so the card cannot
   escape. The JS still toggles the `.sticky` class; these rules make that
   class visually inert rather than removing the script, which is shared with
   the purchased-course page.
   =========================================================================== */

@media (min-width: 992px) {
    .course-details-info.floating-div,
    .floating-div {
        position: sticky;
        top: 92px;              /* clears the sticky site header */
        align-self: flex-start;
    }
}

/* Neutralise the legacy fixed-position states at every breakpoint. */
.floating-div.sticky .floating-div__inner,
.floating-div .floating-div__inner,
.course-details-info.floating-div .course-details-info__inner {
    position: static;
    bottom: auto;
    width: 100%;
}

.course-details-info__inner {
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-md, 0 12px 36px rgba(19, 23, 17, .10));
    overflow: hidden;
}

/* ---- course header --------------------------------------------------------- */

.course-details-about .cda__header h1 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(28px, 3.8vw, 44px);
    line-height: 1.12;
    letter-spacing: -.02em;
    margin: 0 0 12px;
    text-wrap: balance;
}

.content-block.course-details-about {
    background: transparent;
    box-shadow: none;
    border: none;
    padding-left: 0;
    padding-right: 0;
}

/* ---- the "what's included" list -------------------------------------------- */

.course-details-info__inner .cdi__title,
.course-details-info__inner h4 {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.cdi__list li,
.course-details-info__inner li {
    color: var(--ink);
    font-size: 15px;
}

/* "Til: <strong>O'zbekcha</strong>" renders as "Til:O'zbekcha" because the
   flex <li> drops the whitespace text node between label and value. A gap
   restores it without touching the markup. */
.cdi__footer__list ul li { display: flex; gap: .38em; align-items: baseline; }
.cdi__footer__list ul li strong { font-weight: 600; }

.course-details-info__inner .btn { border-radius: 8px; }

/* ---- rating summary --------------------------------------------------------- */

.course-rate-review-student .rating-bar,
.course-rate-review-student .progress,
.crrs__bar {
    background: var(--line);
    border-radius: 999px;
    overflow: hidden;
    height: 8px;
}
.course-rate-review-student .rating-bar > span,
.crrs__bar > span { background: var(--green); display: block; height: 100%; }

/* ---- lessons accordion ------------------------------------------------------ */

.course-lessons-accordion .accordion__item,
.course-about-full .caf__item {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--card);
    margin-bottom: 10px;
    overflow: hidden;
}
.course-lessons-accordion .accordion__header {
    padding: 16px 18px;
    font-weight: 600;
    color: var(--ink);
}
.course-lessons-accordion .accordion__header:hover { background: var(--tint); }

/* ---- section titles on this page -------------------------------------------- */

.course-about-full h2,
.course-about-full h3,
.course-lessons-accordion h2,
.course-lessons-accordion h3 {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: -.01em;
}

/* The purchase card sits beside the lessons on desktop, but stacking order
   would push it below them on mobile - so it is pulled back above the lesson
   list, where the buy decision is actually made. */
@media (max-width: 991px) {
    .course-side { order: -1; }
    .course-details-info { margin-bottom: 24px; }
}

/* ===========================================================================
   15 · Level placement quiz (/level-test)
   =========================================================================== */

.p-quiz {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(40px, 6vw, 72px) 0 0;
}
.p-quiz__card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: clamp(24px, 4vw, 44px);
}
.p-quiz__card + .p-quiz__card { margin-top: 20px; }

.p-quiz h1, .p-quiz__verdict h2 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(26px, 3.4vw, 38px);
    letter-spacing: -.015em;
    margin: 0 0 12px;
    text-wrap: balance;
}
.p-quiz__sub { color: var(--ink-2); font-size: 16.5px; margin: 0 0 28px; max-width: 48ch; }
.p-quiz__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.p-quiz__actions .btn { display: inline-flex; width: auto; flex: 0 0 auto; }
.p-quiz__actions small { color: var(--ink-3); font-size: 13px; }

/* progress: one hairline, green fill */
.p-quiz__meter {
    height: 2px;
    background: var(--line);
    border-radius: 1px;
    margin-bottom: 26px;
    overflow: hidden;
}
.p-quiz__meter span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--green);
    transition: width .3s var(--ease);
}

.p-quiz__list { list-style: none; margin: 0; padding: 0; }
.p-quiz__q { animation: quiz-q .3s var(--ease); }
@keyframes quiz-q {
    from { opacity: 0; transform: translateY(8px); }
}
.p-quiz__count {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--ink-3);
    margin-bottom: 10px;
}
.p-quiz__q h2 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(19px, 2.4vw, 25px);
    line-height: 1.3;
    margin: 0 0 22px;
}

.p-quiz__opts { display: grid; gap: 10px; }
.p-quiz__opt {
    text-align: left;
    font-family: var(--sans);
    font-size: 16px;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 18px;
    cursor: pointer;
    transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.p-quiz__opt:hover { border-color: var(--ink); }
.p-quiz__opt.is-picked {
    border-color: var(--green);
    background: var(--tint);
}

.p-quiz__back {
    margin-top: 22px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-2);
}
.p-quiz__back:hover { color: var(--ink); }

/* result */
.p-quiz__verdict { padding-bottom: 24px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.p-quiz__score {
    display: inline-block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--green);
    margin-bottom: 12px;
}
.p-quiz__verdict p { color: var(--ink-2); font-size: 15.5px; margin: 0; max-width: 56ch; }

/* result chart - one column per CEFR band, filled to the share answered
   correctly there; the band matching the verdict is flagged under the axis */
.p-quiz__verdict { animation: quiz-q .35s var(--ease); }
.p-quiz__chart { margin: 26px 0 0; padding: 0; }
.p-quiz__chart figcaption {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 16px;
}
.p-quiz__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 3vw, 22px); }
.p-quiz__col { text-align: center; }
.p-quiz__col-val {
    display: block;
    font-family: var(--serif);
    font-size: clamp(17px, 2.4vw, 21px);
    font-weight: 600;
    color: var(--ink-3);
    margin-bottom: 8px;
}
.p-quiz__col-track {
    display: flex;
    align-items: flex-end;
    height: clamp(96px, 14vw, 132px);
    max-width: 92px;
    max-width: min(92px, 76%); /* keeps the bar slimmer than its label column */
    margin: 0 auto;
    background: var(--tint);
    border-radius: 8px 8px 2px 2px;
    overflow: hidden;
    /* hairline baseline - reads as the axis the columns stand on */
    box-shadow: 0 1px 0 0 var(--line);
}
.p-quiz__col-fill {
    display: block;
    width: 100%;
    height: 0;
    background: var(--green);
    transition: height .8s var(--ease);
}
.p-quiz__col-cef { display: block; font-size: 13.5px; font-weight: 600; margin-top: 12px; }
.p-quiz__col-lbl { display: block; font-size: 12.5px; line-height: 1.35; color: var(--ink-3); margin-top: 2px; }
.p-quiz__col-you {
    display: none;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--green);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--green);
}
.p-quiz__col.is-you .p-quiz__col-val { color: var(--ink); }
.p-quiz__col.is-you .p-quiz__col-you { display: block; }

/* what the matching stage of the course covers */
.p-quiz__next { margin-top: 30px; }
.p-quiz__next-t {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 4px;
}
.p-quiz__can { list-style: none; margin: 0; padding: 0; }
.p-quiz__can li {
    position: relative;
    padding: 11px 0 11px 30px;
    border-bottom: 1px solid var(--line);
    font-size: 15.5px;
    line-height: 1.45;
    color: var(--ink-2);
}
.p-quiz__can li:last-child { border-bottom: none; padding-bottom: 0; }
.p-quiz__can li::before {
    content: "\2713";
    position: absolute;
    left: 3px;
    top: 11px;
    font-size: 14px;
    font-weight: 700;
    color: var(--green);
}

@media (prefers-reduced-motion: reduce) {
    .p-quiz__verdict { animation: none; }
    .p-quiz__col-fill { transition: none; }
}

.p-quiz__form h3 { font-family: var(--serif); font-weight: 600; font-size: 21px; margin: 0 0 8px; }
.p-quiz__form > p { color: var(--ink-2); font-size: 15px; margin: 0 0 20px; max-width: 52ch; }
.p-quiz__form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    margin: 0 0 6px;
}
.p-quiz__form input[type="text"] { width: 100%; margin-bottom: 16px; }
.p-quiz__form .btn { width: 100%; display: block; text-align: center; margin-top: 4px; }
.p-quiz__form small { display: block; text-align: center; color: var(--ink-3); margin-top: 12px; font-size: 12.5px; }

/* indexable explainer under the quiz */
.p-quiz__about { margin-top: clamp(44px, 6vw, 72px); }
.p-quiz__about h2 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(22px, 2.8vw, 30px);
    letter-spacing: -.01em;
    margin: 0 0 14px;
    text-wrap: balance;
}
.p-quiz__about > p { color: var(--ink-2); font-size: 16px; line-height: 1.7; margin: 0 0 28px; max-width: 62ch; }
.p-quiz__about h3 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 19px;
    margin: 0 0 14px;
}
.p-quiz__lvls { list-style: none; margin: 0 0 32px; padding: 0; border-top: 1px solid var(--line); }
.p-quiz__lvls li {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 15.5px;
    color: var(--ink);
}
.p-quiz__about .p-faq__list { border-top: none; }
.p-quiz__links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 28px 0 0; }
.p-quiz__links a { font-weight: 600; font-size: 15px; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* ===========================================================================
   16 · Free topic tests (/test + /test/{slug})
   =========================================================================== */

/* Answer feedback on topic quizzes: the picked option turns green/red, the
   correct one is always flagged, and the explanation box carries the rule. */
.p-quiz__opt:disabled { cursor: default; }
.p-quiz__opt:disabled:hover { border-color: var(--line); }
.p-quiz__opt.is-right,
.p-quiz__opt.is-right:disabled:hover {
    border-color: var(--green);
    color: var(--green);
    font-weight: 600;
}
.p-quiz__opt.is-wrong,
.p-quiz__opt.is-wrong:disabled:hover {
    border-color: #C0392B;
    color: #C0392B;
    text-decoration: line-through;
}
.p-quiz__why {
    margin-top: 18px;
    padding: 16px 18px;
    border-left: 3px solid var(--green);
    background: rgba(47, 110, 78, .06);
    animation: quiz-q .3s var(--ease);
}
.p-quiz__why.is-wrong { border-left-color: #C0392B; background: rgba(192, 57, 43, .06); }
.p-quiz__why-t { display: block; font-size: 14px; margin-bottom: 6px; }
.p-quiz__why p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.p-quiz__why .btn { display: inline-flex; width: auto; }
@media (prefers-reduced-motion: reduce) {
    .p-quiz__why { animation: none; }
}

/* /test listing: the catalog is wider than a single quiz column */
.p-tests { max-width: 860px; }
.p-tests__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 20px;
}
@media (max-width: 700px) {
    .p-tests__grid { grid-template-columns: 1fr; }
}
.p-tests__card {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line);
    padding: 24px 26px;
    color: var(--ink);
    transition: border-color .15s var(--ease);
}
.p-tests__card:hover { border-color: var(--ink); color: var(--ink); }
.p-tests__card h2 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -.01em;
    margin: 0 0 8px;
}
.p-tests__card p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.p-tests__meta { margin-top: auto; font-size: 12.5px; color: var(--ink-3); }
.p-tests__go {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--green);
}

/* certificate exam (mobile app) card */
.p-tests__app {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    margin-top: 20px;
}
.p-tests__app h2 { font-family: var(--serif); font-weight: 600; font-size: 19px; margin: 0 0 6px; }
.p-tests__app p { margin: 0; font-size: 14.5px; color: var(--ink-2); max-width: 52ch; }
.p-tests__app .btn { flex: 0 0 auto; }

/* ===========================================================================
   17 · About (/about) — the "a-" layer
   ---------------------------------------------------------------------------
   Same design language as the homepage: hairline rules, serif headings, one
   green accent, no cards-with-icons. Several homepage components are reused
   as-is (.p-label, .p-stats, .p-who, .p-section__head, .p-cta) so the two
   pages stay one system; only what the about page adds lives here.
   Motion: the reveal groups are registered in js/home-motion.js and the
   hidden states are in section 12 — keep the three lists in sync.
   =========================================================================== */

/* ---- opening ------------------------------------------------------------- */

.a-hero {
    position: relative;
    padding: clamp(48px, 7vw, 96px) 0 0;
}
.a-hero__inner { position: relative; max-width: 760px; }

.a-hero h1 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(38px, 6vw, 68px);
    line-height: 1.06;
    letter-spacing: -.02em;
    margin: 0 0 24px;
    text-wrap: balance;
}
.a-hero__lead {
    font-family: var(--serif);
    font-size: clamp(19px, 2.3vw, 26px);
    line-height: 1.45;
    color: var(--ink);
    margin: 0 0 22px;
    max-width: 40ch;
    text-wrap: pretty;
}
.a-hero__intro {
    color: var(--ink-2);
    font-size: clamp(15.5px, 1.6vw, 17px);
    line-height: 1.65;
    max-width: 56ch;
    margin: 0;
}

/* The same ghost letterform the homepage hero carries. */
.a-hero::after {
    content: "Я";
    position: absolute;
    right: -1%;
    top: 42%;
    transform: translateY(-50%);
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(240px, 30vw, 480px);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--line);
    z-index: -1;
    pointer-events: none;
    user-select: none;
}
@media (max-width: 991px) { .a-hero::after { display: none; } }

/* ---- mission pull-quote --------------------------------------------------- */

.a-quote {
    margin-top: clamp(56px, 8vw, 104px);
    max-width: 900px;
}
.a-quote__rule {
    display: block;
    height: 1px;
    background: var(--green);
    margin-bottom: 26px;
    transform-origin: left center;
}
.a-quote__cap {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 16px;
}
.a-quote__text {
    font-family: var(--serif);
    font-weight: 500;
    font-style: italic;
    font-size: clamp(24px, 3.4vw, 40px);
    line-height: 1.28;
    letter-spacing: -.015em;
    color: var(--ink);
    margin: 0;
    text-wrap: pretty;
}

/* ---- shared small parts --------------------------------------------------- */

/* A quiet closing remark under a list or a two-column block. */
.a-note {
    margin: 22px 0 0;
    color: var(--ink-3);
    font-size: 14.5px;
    line-height: 1.65;
    max-width: 62ch;
}
.a-note--wide { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); max-width: 78ch; }

/* Green check list — same mark as the homepage package list. */
.a-check { list-style: none; margin: 0; padding: 0; }
.a-check li {
    position: relative;
    padding: 0 0 0 30px;
    margin-bottom: 14px;
    color: var(--ink);
    font-size: 15.5px;
    line-height: 1.55;
}
.a-check li:last-child { margin-bottom: 0; }
.a-check li::before {
    content: "";
    position: absolute;
    left: 0; top: .3em;
    width: 17px; height: 17px;
    background: no-repeat center / contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.4 9.4 18 20 6.5' fill='none' stroke='%230B5B3B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* The audience block reuses .p-who; only this intro line is new. */
.a-who__lead {
    margin: 16px 0 0;
    color: var(--ink-2);
    font-size: 15.5px;
    line-height: 1.7;
    max-width: 40ch;
}

/* ---- methodology ---------------------------------------------------------- */

.a-method {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
    border-top: 1px solid var(--line);
    padding-top: clamp(26px, 3.5vw, 40px);
}
@media (max-width: 860px) { .a-method { grid-template-columns: 1fr; } }
.a-method__p {
    margin: 0;
    color: var(--ink-2);
    font-size: clamp(15.5px, 1.7vw, 17.5px);
    line-height: 1.7;
}
.a-practice h3 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 19px;
    margin: 0 0 16px;
}
.a-practice__list { list-style: none; margin: 0; padding: 0; counter-reset: prac; }
.a-practice__list li {
    counter-increment: prac;
    position: relative;
    padding: 13px 0 13px 44px;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
    color: var(--ink);
}
.a-practice__list li:first-child { border-top: 1px solid var(--line); }
.a-practice__list li::before {
    content: counter(prac, decimal-leading-zero);
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    font-family: var(--serif);
    font-size: 15px;
    color: var(--ink-3);
}

/* ---- weekly format -------------------------------------------------------- */

.a-week {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
@media (max-width: 767px) { .a-week { grid-template-columns: 1fr; } }
.a-week__item { padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 40px) clamp(24px, 3vw, 36px) 0; }
.a-week__item + .a-week__item {
    border-left: 1px solid var(--line);
    padding-left: clamp(20px, 3vw, 40px);
}
@media (max-width: 767px) {
    .a-week__item + .a-week__item { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
}
.a-week__item i {
    display: block;
    font-style: normal;
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(44px, 6vw, 72px);
    line-height: 1;
    color: var(--green);
    margin-bottom: 10px;
    font-variant-numeric: tabular-nums;
}
.a-week__item h3 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(19px, 2.2vw, 23px);
    margin: 0 0 10px;
}
.a-week__item p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.65; }

.a-support {
    list-style: none;
    margin: clamp(24px, 3vw, 36px) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px clamp(24px, 3vw, 48px);
}
@media (max-width: 767px) { .a-support { grid-template-columns: 1fr; } }
.a-support li { border-top: 1px solid var(--line); padding-top: 16px; }
.a-support b { display: block; font-weight: 600; font-size: 15.5px; color: var(--ink); margin-bottom: 5px; }
.a-support span { display: block; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }

/* ---- what is different ---------------------------------------------------- */

.a-diff {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
}
@media (max-width: 860px) { .a-diff { grid-template-columns: 1fr; } }
.a-diff__col h3 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 20px;
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.a-diff__col--prob { color: var(--ink-3); }
.a-diff__col--prob h3 { color: var(--ink-3); }
.a-diff__col--prob p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ink-3);
}
/* ---- teachers -------------------------------------------------------------- */

.a-team {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
    border-top: 1px solid var(--line);
    padding-top: clamp(26px, 3.5vw, 40px);
}
@media (max-width: 860px) { .a-team { grid-template-columns: 1fr; } }
.a-team__count { margin: 0; }
.a-team__count b {
    display: block;
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(56px, 9vw, 104px);
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    margin-bottom: 10px;
}
.a-team__count span { display: block; color: var(--ink-3); font-size: 14.5px; line-height: 1.6; max-width: 26ch; }

.a-person { border-left: 1px solid var(--line); padding-left: clamp(20px, 3vw, 40px); }
@media (max-width: 860px) { .a-person { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 24px; } }
.a-person__role {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 12px;
}
.a-person h3 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(24px, 3vw, 34px);
    letter-spacing: -.015em;
    margin: 0 0 18px;
}
.a-person p {
    margin: 0 0 14px;
    color: var(--ink-2);
    font-size: 15.5px;
    line-height: 1.72;
    max-width: 68ch;
}
.a-person p:last-child { margin-bottom: 0; }

/* ---- studying from anywhere ------------------------------------------------ */

.a-geo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
}
@media (max-width: 860px) { .a-geo { grid-template-columns: 1fr; } }
.a-geo h2 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(28px, 3.6vw, 42px);
    letter-spacing: -.015em;
    margin: 0;
    text-wrap: balance;
}
.a-geo__p { margin: 0 0 24px; color: var(--ink-2); font-size: 16.5px; line-height: 1.7; }
.a-geo__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.a-geo__list li {
    padding: 16px clamp(14px, 1.6vw, 22px);
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
}
.a-geo__list li:first-child { padding-left: 0; }
.a-geo__list li + li { border-left: 1px solid var(--line); }
@media (max-width: 767px) {
    .a-geo__list { display: block; }
    .a-geo__list li { padding: 14px 0; border-bottom: 1px solid var(--line); }
    .a-geo__list li + li { border-left: 0; }
    .a-geo__list li:last-child { border-bottom: 0; }
}

/* ---- internal links --------------------------------------------------------- */

.a-links { margin-top: clamp(48px, 7vw, 88px); }
.a-links p {
    display: flex;
    flex-wrap: wrap;
    gap: 12px clamp(24px, 3vw, 44px);
    margin: 0;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.a-links a { font-weight: 600; font-size: 15.5px; }