/* ==========================================================================
   Course page
   Same visual language as the home page: dark background, poster headings,
   thin lines. Adds its own blocks: the course hero, curriculum, bonuses,
   the price block and the sticky buy bar. Requires system.css.
   ========================================================================== */

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

.chero { position: relative; overflow: hidden; padding: 0 0 calc(var(--step) * 0.25); }   /* together with the next section's top, gives the same gap as between blocks */



.chero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    /* Like the home page hero: text on the left, cover window on the right. */
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: clamp(26px, 4vw, 64px);
    align-items: center;
    /* top only: the shorthand reset .wrap's side padding, and on phones the text hit the edge */
    padding-top: clamp(36px, 5vw, 72px);
}

.chero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-label);
    font-size: var(--fs-label);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--sand);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 7px 16px;
    margin: 0 0 20px;
}

.chero__title { font-size: clamp(38px, 5.6vw, 78px); }
.chero__lead { margin-top: clamp(18px, 2.4vw, 26px); max-width: 44ch; }
.chero__lead p { margin: 0 0 10px; }
.chero__lead p:last-child { margin-bottom: 0; }

/* Price and the button pair on one line need up to 606 px. On wide screens
   the text column gets at least 612 px, taken from the cover window. */
@media (min-width: 1200px) {
    .chero__grid { grid-template-columns: minmax(612px, 1.02fr) minmax(0, 0.98fr); }
}

/* Cover in a window with the same ratio as the home page portrait (606:780).
   Uses the vertical course cover; framing is set in the image files. */
.chero__media { border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.chero__media img {
    display: block;
    width: 100%;
    aspect-ratio: 606 / 780;
    object-fit: cover;
    object-position: center top;
}

/* Course perks in the hero: a heading and a line of explanation,
   two per row, pink rule on the left. */
.perks {
    list-style: none;
    margin: clamp(22px, 2.6vw, 30px) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 28px;
    max-width: 560px;
}
.perks li { padding-left: 14px; border-left: 1px solid var(--accent); display: grid; gap: 4px; }
.perks b { font-weight: 500; font-size: var(--fs-small); color: var(--text); line-height: 1.3; }
.perks span { font-size: 14px; line-height: 1.45; color: var(--text-dim); }
@media (max-width: 600px) { .perks { grid-template-columns: 1fr; } }

/* Course facts on one framed line — the same detail as on the home page. */
.facts-row {
    display: flex;
    flex-wrap: nowrap;
    margin-top: clamp(24px, 3vw, 34px);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 13px clamp(16px, 2vw, 26px);
    gap: clamp(12px, 1.5vw, 18px);
    width: fit-content;
    max-width: 100%;
}
/* Number and label on one line, as in the home page stats. */
.fact { display: flex; align-items: baseline; gap: 8px; }
.fact + .fact { padding-left: clamp(12px, 1.5vw, 18px); border-left: 1px solid var(--line); }
/* On desktop the padding is ~50 px wider: air at the edges and the divider. */
@media (min-width: 1000px) {
    .facts-row { padding-inline: 40px; gap: 30px; }
    .fact + .fact { padding-left: 30px; }
}
/* Three facts (premium) cannot afford that air — the row would not fit
   on one line even at 1440. They keep tighter spacing. */
@media (min-width: 1000px) {
    .facts-row:has(> .fact:nth-child(3)) { padding-inline: 26px; gap: 18px; }
    .facts-row:has(> .fact:nth-child(3)) .fact + .fact { padding-left: 18px; }
}
.fact__num { font-family: var(--font-display); font-size: var(--fs-num); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
/* The grotesque's ∞ sits 0.15em (4 px at 27 px) above the baseline —
   pushed down so its bottom rests on the label's letter line. */
.fact__num--sign { position: relative; top: 0.15em; }
.fact__label { font-family: var(--font-label); font-size: var(--fs-label); white-space: nowrap; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }

/* The hero text column is a container: its width decides whether
   three facts fit on one line. Two facts fit everywhere from 360 px. */
.chero__grid > div:first-child { container-type: inline-size; }
@container (max-width: 650px) {   /* three facts on one line need 638 px */
    .facts-row:has(> .fact:nth-child(3)) .fact { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
}
/* Narrow column (phone): three facts become three equal full-width columns,
   number and label centred, like the home page stats. Columns of different
   widths, aligned left, sat unevenly inside the capsule. */
@container (max-width: 500px) {
    .facts-row:has(> .fact:nth-child(3)) {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        border-radius: var(--radius);
        padding: 16px 8px;
        gap: 0;
    }
    .facts-row:has(> .fact:nth-child(3)) .fact {
        align-items: center;
        text-align: center;
        padding: 0 6px;
    }
    .facts-row:has(> .fact:nth-child(3)) .fact + .fact { padding-left: 6px; }
    .facts-row:has(> .fact:nth-child(3)) .fact__label { white-space: normal; line-height: 1.35; letter-spacing: 0.04em; }
}

/* --- Price ---------------------------------------------------------------- */

/* Price, the "discount over old price" column and buttons: one height, --buy-h.
   Grotesque digits take 78% of the font size (canvas measurement), so the
   price size is height / 0.78: the digits, not the line box, match the button.
   A line of height --buy-h puts the baseline at the bottom and the digit tops
   0.024em below the top; the offset removes that. */
.chero__buy, .offerbox { --buy-h: 46px; }
.pricetag { display: flex; align-items: stretch; gap: 14px; margin: 0; height: var(--buy-h); }
.pricetag__now {
    font-family: var(--font-display);
    font-size: calc(var(--buy-h) / 0.78);
    line-height: var(--buy-h);
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    position: relative;
    top: -0.024em;
}
/* Badge on the top line, old-price digits on the bottom line; both share one
   width: the badge stretches across the column, the old price centred below. */
.pricetag__old {
    display: grid;
    grid-template-rows: auto auto;
    align-content: space-between;
    justify-items: stretch;
    text-align: center;
}
.pricetag__was {
    font-size: var(--fs-small);
    line-height: 1;
    color: var(--text-faint);
    text-decoration: line-through;
    position: relative;
    top: 0.14em;              /* 2 px gap under the digits — puts them on the bottom line */
}
.pricetag__off {
    font-family: var(--font-label);
    font-size: var(--fs-label);
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 999px;
    padding: 4px 4px 4px calc(4px + 0.1em);
}

/* Price and the button pair. The buttons always stay together: if they do not
   fit on the price line, both wrap below it at once, not one by one. */
.chero__buy { display: flex; align-items: center; gap: 24px 20px; flex-wrap: wrap; margin-top: clamp(24px, 3vw, 34px); }
.chero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.chero__actions .btn { height: var(--buy-h); padding-block: 0; }

/* --- Curriculum: lesson cards --------------------------------------------- */

.lessons { display: grid; gap: clamp(16px, 2vw, 24px); }
/* All lessons on the page share one height, set by the longest. Otherwise the
   card height followed the amount of text (from 260 to 660 px). */
@media (min-width: 1001px) {
    .lessons { grid-auto-rows: 1fr; }
}

.lesson {
    display: grid;
    /* Equal columns: with 0.9/1.1 the image in even (mirrored) lessons
       landed in the wide column and was 20% larger than in odd ones. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(20px, 2.6vw, 36px);
    align-items: start;
    --lesson-pad: clamp(20px, 2.4vw, 32px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
/* Even lessons are mirrored: otherwise a long list of cards reads as monotonous. */
.lesson:nth-child(even) .lesson__media { order: 2; }

/* All screenshots are 16:9. Some were taken on a 16:10 screen (Figma, Design);
   those are cropped from the bottom only: the tab bar is at the top, only
   the floating toolbar at the bottom. Centred cropping would cut both. */
.lesson__media img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: top;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}
/* The screenshot sits in a padded frame, aligned to the top — the same in
   every card. Each column is padded only on its outer side: the grid gap
   separates them. */
.lesson__media { padding: var(--lesson-pad) 0 var(--lesson-pad) var(--lesson-pad); }
.lesson__body {
    padding: var(--lesson-pad) var(--lesson-pad) var(--lesson-pad) 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.lesson:nth-child(even) .lesson__media { padding: var(--lesson-pad) var(--lesson-pad) var(--lesson-pad) 0; }
.lesson:nth-child(even) .lesson__body { padding: var(--lesson-pad) 0 var(--lesson-pad) var(--lesson-pad); }

.lesson__no {
    font-family: var(--font-label);
    font-size: var(--fs-label);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin: 0 0 8px;
}
.lesson__title {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    font-size: var(--fs-h3);
    line-height: 1.08;
    margin: 0 0 14px;
}
.lesson__list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 7px; }
.lesson__list li { padding-left: 16px; position: relative; font-size: var(--fs-small); color: var(--text-dim); }
.lesson__list li::before {
    content: '';
    position: absolute; left: 0; top: 0.66em;
    width: 7px; height: 1px; background: var(--text-faint);
}
.lesson__result {
    margin: auto 0 0;            /* lesson outcome at the bottom of the card */
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--text-dim);
}
.lesson__result b { color: var(--sand); }

/* --- Curriculum: modules -------------------------------------------------- */

.modules { border-top: 1px solid var(--line-strong); }
.module { border-bottom: 1px solid var(--line); }
.module__head {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: clamp(16px, 2vw, 22px) 0;
    background: none;
    border: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.module__no {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    font-size: clamp(17px, 1.8vw, 22px);
    line-height: 1;
    color: var(--text-faint);
    min-width: 2.4ch;
}
.module__name {
    font-family: var(--font-body);
    font-size: var(--fs-row);
    line-height: 1.3;
}
.module__sign { width: 22px; height: 22px; position: relative; }
.module__sign::before, .module__sign::after {
    content: '';
    position: absolute;
    background: var(--text-dim);
    transition: transform 0.26s ease;
}
.module__sign::before { left: 0; right: 0; top: 50%; height: 1px; }
.module__sign::after  { top: 0; bottom: 0; left: 50%; width: 1px; }
.module.is-open .module__sign::after { transform: scaleY(0); }

.module__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.module.is-open .module__body { grid-template-rows: 1fr; }
.module__body > div { overflow: hidden; }
.module__body ul { list-style: none; margin: 0 0 20px; padding: 0 0 0 calc(2.4ch + 16px); display: grid; gap: 7px; }
.module__body li { font-size: var(--fs-small); color: var(--text-dim); position: relative; padding-left: 16px; }
.module__body li::before {
    content: '';
    position: absolute; left: 0; top: 0.66em;
    width: 7px; height: 1px; background: var(--text-faint);
}

/* --- Bonus and result lists ----------------------------------------------- */

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
/* Two flowing columns rather than a grid: in a grid a short item next to
   a long one left a gap below it the full height of its neighbour. */
.checklist.is-two { display: block; columns: 2; column-gap: clamp(24px, 4vw, 56px); }
.checklist.is-two li { break-inside: avoid; margin-bottom: 14px; }
.checklist li {
    position: relative;
    padding-left: 30px;
    font-size: var(--fs-text);
    line-height: 1.55;
    color: var(--text-dim);
}
.checklist li b { color: var(--text); }
.checklist li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.42em;
    width: 15px; height: 8px;
    border-left: 1.5px solid var(--accent);
    border-bottom: 1.5px solid var(--accent);
    transform: rotate(-45deg);
}

/* --- Proof images --------------------------------------------------------- */

.figures { display: grid; gap: clamp(16px, 2vw, 24px); }
.figures--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.figures--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.figures img { width: 100%; height: auto; border-radius: var(--radius-sm); background: var(--surface); }
/* Deck on phones («Кому підійде»): like the course cards on the home page —
   each sticks slightly below the previous one; a covered card shrinks and darkens.
   --p is written by site.js. */
@media (max-width: 720px) {
    .figures--deck.is-scroll-driven img {
        position: sticky;
        top: calc(78px + var(--i, 0) * 10px);
        transform: scale(calc(1 - var(--p, 0) * 0.08));
        transform-origin: 50% 0;
        filter: brightness(calc(1 - var(--p, 0) * 0.45));
    }
}

/* --- Results, «Результати після навчання» (special, premium) --------------
   Six tiles: a chrome icon and a result line. The icons are fitted into a
   192 square with equal padding, so one side sets the size. */
.outcomes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 20px);
}
.outcomes__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: clamp(150px, 14vw, 190px);
    padding: clamp(24px, 2.6vw, 34px) clamp(16px, 2vw, 28px);
    text-align: center;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
    border-radius: var(--radius);
}
.outcomes__icon { width: clamp(56px, 4.8vw, 68px); height: auto; }
.outcomes__item p { margin: 0; max-width: 24ch; font-size: var(--fs-text); line-height: 1.35; color: var(--text); text-wrap: balance; }
@media (max-width: 720px) {
    .outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .outcomes__item { min-height: 0; gap: 12px; padding: 22px 12px; border-radius: 22px; }
    .outcomes__icon { width: 52px; }
    .outcomes__item p { font-size: var(--fs-small); }
}

/* --- Who it is for, «Кому підійде» (creative) ----------------------------
   Four cards: number in italics, who in the heading font, why in body text.
   A thin accent line on top is the only decoration. */
.audience {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* in 4 columns the titles broke */
    gap: clamp(14px, 1.6vw, 20px);
}
.audience__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(22px, 2.2vw, 30px);
    min-height: 210px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.audience__item::before {
    content: '';
    position: absolute;
    left: clamp(22px, 2.2vw, 30px); top: 0;
    width: 36px; height: 2px;
    background: var(--accent);
}
.audience__no {
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 500;
    font-size: 34px;
    line-height: 1;
    background: var(--silver);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.audience__who {
    margin: auto 0 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--fs-h3);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.audience__why { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--text-dim); }
@media (max-width: 560px) {
    .audience { grid-template-columns: 1fr; }
    .audience__item { min-height: 0; }
    .audience__who { margin-top: 4px; }
}

/* --- Video (premium) -----------------------------------------------------
   Cover and button first; the YouTube player loads only on click. */
.video {
    position: relative;
    max-width: 1040px;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}
.video__cover, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__cover { object-fit: cover; }
.video__play {
    position: absolute;
    left: 50%; top: 50%;
    width: 84px; height: 84px;
    margin: -42px 0 0 -42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(8, 8, 10, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    transition: transform 0.25s ease, background 0.25s ease;
}
.video__play::before {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    margin: -12px 0 0 -7px;
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #fff;
}
.video:hover .video__play { transform: scale(1.06); background: var(--accent); border-color: var(--accent); }
@media (max-width: 720px) {
    .video { margin: 0 calc(-1 * var(--gutter)); border-radius: 0; }
    .video__play { width: 68px; height: 68px; margin: -34px 0 0 -34px; }
}

/* --- Why Instagram design, «Чому інстадизайн» ----------------------------
   Heading and conclusion top left, image on the right, its top level with
   the heading. The image is nearly square with large text inside, so it
   gets half the width, not all of it (at full width it was 1280×1390).
   The top line is the same as on other section headings. */
.why {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "text media" "offer media";
    grid-template-rows: auto 1fr;
    gap: clamp(24px, 2.4vw, 32px) clamp(28px, 5vw, 80px);
    align-items: start;
    border-top: 1px solid var(--line-strong);
    padding-top: clamp(20px, 2.4vw, 28px);
}
.why__text .lead { margin-top: clamp(20px, 2.2vw, 28px); max-width: 40ch; }
.why__title {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 0 14px;
}
.why__text { grid-area: text; }
/* Anchor for the «Придбати» and «Ціна» links. On desktop it sits at the
   heading, so the whole section comes into view; on phones at the price
   block, which follows the image there. A zero-size element in the same
   grid cell as the target. */
.why__anchor { grid-area: text; align-self: start; width: 0; height: 0; scroll-margin-top: 90px; }
.why__media { grid-area: media; }
.why__media img { width: 100%; height: auto; border-radius: var(--radius-sm); }

/* Price in the space under the conclusion: the "why" arguments, then the
   price. Bottom level with the image.
   Narrow column, so everything stacks; buttons in a row below the text. */
.offerbox.offerbox--inline {   /* double class: the generic .offerbox below overrode the columns */
    grid-area: offer;
    align-self: end;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: clamp(22px, 2.2vw, 28px);
    --buy-h: 40px;     /* price and buttons a step smaller (46 elsewhere) for the narrow column */
}
.offerbox.offerbox--inline .offerbox__title { font-size: var(--fs-h3); margin-bottom: 12px; }
.offerbox.offerbox--inline .offerbox__note { margin-top: 12px; }
.offerbox.offerbox--inline .offerbox__side { display: flex; flex-wrap: wrap; gap: 12px; }
.offerbox.offerbox--inline .offerbox__side .btn { flex: 1 1 auto; }

/* --- Offer block ---------------------------------------------------------- */

.offerbox {
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: clamp(26px, 3.4vw, 46px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(22px, 3vw, 46px);
    align-items: center;
    background:
        radial-gradient(110% 120% at 4% 0%, rgba(198, 63, 127, 0.28), transparent 56%),
        linear-gradient(160deg, #1A0F18 0%, #0D0A0E 70%);
}
.offerbox__title { font-size: var(--fs-h2); margin-bottom: 14px; }
.offerbox__note { font-size: var(--fs-small); color: var(--text-dim); margin: 14px 0 0; max-width: 46ch; }
/* Seat-limit line with a pulsing dot. */
.seats { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; font-size: var(--fs-small); line-height: 1.4; color: var(--text); }
.seats__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: seats-pulse 2.4s ease-out infinite; }
@keyframes seats-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); }
    70%, 100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .seats__dot { animation: none; } }
.offerbox__side { display: grid; gap: 12px; justify-items: stretch; }
/* The legal note must not compete with the buttons: smallest size on the scale, links in the same colour. */
.offerbox__legal { flex-basis: 100%; margin: 2px 0 0; font-size: var(--fs-btn); line-height: 1.45; color: var(--text-faint); text-wrap: balance; }
.offerbox__legal a { color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; }

/* --- Sticky buy bar -------------------------------------------------------- */

.buybar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    /* Content as one centred group. Spread to the edges, on a wide
       screen it drifted 1700 px apart: price on the left, button on the right. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 3vw, 40px);
    padding: 12px var(--gutter);
    background: rgba(8, 8, 10, 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    transform: translateY(110%);
    transition: transform 0.28s ease;
    --bar-h: 44px;
}
.buybar.is-shown { transform: translateY(0); }
.buybar__price { display: flex; align-items: center; gap: 14px; height: var(--bar-h); }
/* The name is set off by a thin rule, like the facts in the hero. */
.buybar__name {
    font-family: var(--font-label);
    font-size: var(--fs-label);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding-right: 14px;
    border-right: 1px solid var(--line-strong);
    line-height: 20px;
}
/* Price digits are 78% of the font size (measured for the hero): 28 px gives
   22 px tall digits, exactly half the button. */
.buybar__now { font-family: var(--font-display); font-size: 28px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.buybar__was { font-size: 14px; line-height: 1; color: var(--text-faint); text-decoration: line-through; }
.buybar .btn { height: var(--bar-h); padding-block: 0; }

/* The bar covers the end of the page — compensated with padding. */
body.has-buybar { padding-bottom: 76px; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1000px) {
    .chero__grid { grid-template-columns: 1fr; }
    .chero__media { order: -1; }
    .chero__media img { aspect-ratio: 4 / 3; }   /* tablet: full width above the text, 606:780 was taller than the screen */
    .lesson { grid-template-columns: 1fr; gap: 0; }
    .lesson:nth-child(even) .lesson__media { order: 0; }
    .lesson .lesson__media,
    .lesson:nth-child(even) .lesson__media { padding: var(--lesson-pad) var(--lesson-pad) 0; }
    .lesson .lesson__body,
    .lesson:nth-child(even) .lesson__body { padding: var(--lesson-pad); }
    .lesson__result { margin-top: 0; }
    .offerbox { grid-template-columns: 1fr; }
    .why { grid-template-columns: 1fr; grid-template-areas: "text" "media" "offer"; grid-template-rows: auto; }
    .why__anchor { grid-area: offer; }
    .why__text .lead { max-width: none; }
    .figures--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .checklist.is-two { columns: 1; }
    .figures--two, .figures--three { grid-template-columns: 1fr; }
    .fact__label { letter-spacing: 0.04em; }
    .module__body ul { padding-left: 16px; }
    .buybar__name { display: none; }
}

/* Phone: full-width cover in the background, text laid over it, as on the
   home page. Image and text share one grid cell; the image is clear at the
   top and fades into the page background under the text. */
@media (max-width: 720px) {
    .chero__grid { padding-top: 0; }
    .chero__grid > div:first-child { grid-row: 1; grid-column: 1; position: relative; z-index: 2; padding-top: 52vh; }
    .chero__media {
        grid-row: 1; grid-column: 1;
        align-self: stretch;
        position: relative;
        margin: 0 calc(-1 * var(--gutter));
        border-radius: 0;
        background: none;
    }
    .chero__media img {
        position: absolute;
        inset: 0 0 auto 0;
        width: 100%;
        height: auto;
        aspect-ratio: auto;
    }
    .chero__media::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom,
            rgba(8, 8, 10, 0.55) 0,
            rgba(8, 8, 10, 0.05) 12vh,
            rgba(8, 8, 10, 0.55) 38vh,
            rgba(8, 8, 10, 0.92) 54vh,
            var(--bg) 72vh);
    }
}