/**
 * SEO text block.
 *
 * Values mirror the Tilda original (bebestschool.kz, record rec618440937):
 * 16 px text at 1.55 across the 1160 px of the grid, subheadings the same
 * size in bold, and three coral doodles at 15 % in the margins — a spiral top
 * left, an arrow turned 265° on the right, waves turned 343° lower left.
 *
 * The doodles' heights are shares of the section, since the text — and so
 * the section — grows as the screen narrows; the original moves them down
 * the same way at each of its widths.
 */

.bbs-seo {
    --bbs-seo-font: 'ApercuPro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --bbs-seo-container: 1160px;
    --bbs-seo-gutter: 20px;
    --bbs-seo-grid: 1200px;

    position: relative;
    overflow: hidden;
    padding: 20px 0 40px;
    background: #ffffff;
    color: #000000;
    font-family: var(--bbs-seo-font);
}

.bbs-seo *,
.bbs-seo *::before,
.bbs-seo *::after {
    box-sizing: border-box;
}

/* ── Doodles ── */
.bbs-seo__decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.bbs-seo__doodle {
    position: absolute;
    top: var(--y);
    left: calc(50% - var(--bbs-seo-grid) / 2 + var(--x));
    display: block;
    width: var(--w);
    max-width: none;
    height: auto;
    opacity: 0.15;
    transform: rotate(var(--turn, 0deg));
}

.bbs-seo__doodle--spiral { --x: -118px; --y: -10px; --w: 285px; }
.bbs-seo__doodle--arrow  { --x: 993px;  --y: 45.6%; --w: 230px; --turn: 265deg; }
.bbs-seo__doodle--waves  { --x: -100px; --y: 71%;   --w: 248px; --turn: 343deg; }

/* ── Text ── */
.bbs-seo__inner {
    position: relative;
    max-width: calc(var(--bbs-seo-container) + var(--bbs-seo-gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--bbs-seo-gutter);
}

.bbs-seo__content {
    font-size: 16px;
    line-height: 1.55;
    font-weight: 400;
}

.bbs-seo__content > * {
    margin: 0;
}

/* An empty line between paragraphs, as the original's double line break. */
.bbs-seo__content > * + * {
    margin-top: 1.55em;
}

/* Subheadings the size of the text, in bold, a little clear of what comes before. */
.bbs-seo__content h2,
.bbs-seo__content h3,
.bbs-seo__content h4 {
    font-size: 16px;
    line-height: 1.55;
    font-weight: 700;
}

.bbs-seo__content > * + h2,
.bbs-seo__content > * + h3,
.bbs-seo__content > * + h4 {
    margin-top: 18px;
}

/* A heading leads straight into its text. */
.bbs-seo__content h2 + *,
.bbs-seo__content h3 + *,
.bbs-seo__content h4 + * {
    margin-top: 0;
}

/* Lists read like the original's numbered lines: "1. …" at the text's own
   edge, straight under the line that introduces them. */
.bbs-seo__content > p + ul,
.bbs-seo__content > p + ol {
    margin-top: 0;
}

.bbs-seo__content ul,
.bbs-seo__content ol {
    padding-left: 0;
    list-style: none;
}

.bbs-seo__content ol {
    counter-reset: bbs-seo-list;
}

.bbs-seo__content ol > li {
    counter-increment: bbs-seo-list;
}

.bbs-seo__content ol > li::before {
    content: counter(bbs-seo-list) ". ";
}

.bbs-seo__content ul > li::before {
    content: "— ";
}

.bbs-seo__content li + li {
    margin-top: 0;
}

.bbs-seo__content strong,
.bbs-seo__content b {
    font-weight: 700;
}

.bbs-seo__content a {
    color: #1cb65a;
}

/* ── 1199 and below: the 960 px grid ── */
@media (max-width: 1199px) {
    .bbs-seo {
        --bbs-seo-grid: 960px;
    }

    .bbs-seo__doodle--spiral { --x: -130px; --y: -20px; }
    .bbs-seo__doodle--arrow  { --x: 710px;  --y: 30%; --w: 233px; }
    .bbs-seo__doodle--waves  { --x: -90px;  --y: 69%; }
}

@media (max-width: 959px) {
    .bbs-seo {
        --bbs-seo-grid: 640px;
    }

    .bbs-seo__doodle--arrow  { --x: 459px; --y: 42%; }
    .bbs-seo__doodle--waves  { --x: -98px; --y: 75%; }
}

@media (max-width: 639px) {
    .bbs-seo {
        --bbs-seo-grid: 480px;
        --bbs-seo-gutter: 16px;
    }

    .bbs-seo__doodle--spiral { --x: -41px; --w: 272px; }
    .bbs-seo__doodle--arrow  { --x: 337px; --y: 30%; --w: 215px; }
    .bbs-seo__doodle--waves  { --x: -94px; --y: 76%; --w: 244px; }

    .bbs-seo__content,
    .bbs-seo__content h2,
    .bbs-seo__content h3,
    .bbs-seo__content h4 {
        font-size: 14px;
    }
}

@media (max-width: 479px) {
    .bbs-seo {
        --bbs-seo-grid: 320px;
    }

    .bbs-seo__doodle--spiral { --w: 186px; }
    .bbs-seo__doodle--arrow  { --x: 219px; --y: 23%; --w: 175px; }
    .bbs-seo__doodle--waves  { --x: -60px; --y: 83%; --w: 210px; }

    /* The original drops to 1.2 here; a touch more air reads better at length. */
    .bbs-seo__content,
    .bbs-seo__content h2,
    .bbs-seo__content h3,
    .bbs-seo__content h4 {
        line-height: 1.45;
    }
}

/* ── Card look ──
   bebestschool.kz/kursy-matematiki, rec869800278: the text in white on a
   #f66746 card rounded 20 px, 1163 px wide, 39 px down a band 550 px high;
   subheadings 20 px black-weight, the text 16 px at 25 px. No doodles. */
.bbs-seo--card {
    padding: 39px 0 41px;
}

.bbs-seo--card .bbs-seo__decor {
    display: none;
}

.bbs-seo--card .bbs-seo__inner {
    max-width: 1203px;
}

.bbs-seo--card .bbs-seo__content {
    padding: 22px 18px 39px;
    border-radius: 20px;
    background: #f66746;
    color: #ffffff;
    font-size: 16px;
    line-height: 25px;
}

.bbs-seo--card .bbs-seo__content h2,
.bbs-seo--card .bbs-seo__content h3,
.bbs-seo--card .bbs-seo__content h4 {
    font-size: 20px;
    line-height: 31px;
    font-weight: 900;
}

.bbs-seo--card .bbs-seo__content > * + * {
    margin-top: 8px;
}

.bbs-seo--card .bbs-seo__content > * + h2,
.bbs-seo--card .bbs-seo__content > * + h3,
.bbs-seo--card .bbs-seo__content > * + h4 {
    margin-top: 19px;
}

.bbs-seo--card .bbs-seo__content a {
    color: inherit;
}

@media (max-width: 959px) {
    .bbs-seo--card {
        padding: 33px 0 43px;
    }

    .bbs-seo--card .bbs-seo__inner {
        max-width: 660px;
    }

    .bbs-seo--card .bbs-seo__content {
        padding: 28px 26px 30px;
    }

    .bbs-seo--card .bbs-seo__content > * + h2,
    .bbs-seo--card .bbs-seo__content > * + h3,
    .bbs-seo--card .bbs-seo__content > * + h4 {
        margin-top: 28px;
    }
}

@media (max-width: 639px) {
    .bbs-seo--card {
        padding: 24px 0 53px;
    }

    .bbs-seo--card .bbs-seo__content {
        padding: 26px 16px 33px;
        font-size: 14px;
        line-height: 22px;
    }

    .bbs-seo--card .bbs-seo__content h2,
    .bbs-seo--card .bbs-seo__content h3,
    .bbs-seo--card .bbs-seo__content h4 {
        line-height: 24px;
    }

    .bbs-seo--card .bbs-seo__content > * + * {
        margin-top: 11px;
    }

    .bbs-seo--card .bbs-seo__content > * + h2,
    .bbs-seo--card .bbs-seo__content > * + h3,
    .bbs-seo--card .bbs-seo__content > * + h4 {
        margin-top: 33px;
    }
}

/* ── Larger look ──
   bebestschool.kz/german, rec677060361: 20 px bold subheadings at 31 px,
   17 px text at 26 px straight under them, 11 px between one part's text
   and the next subheading. */
.bbs-seo--large .bbs-seo__content {
    font-size: 17px;
    line-height: 26px;
}

.bbs-seo--large .bbs-seo__content h2,
.bbs-seo--large .bbs-seo__content h3,
.bbs-seo--large .bbs-seo__content h4 {
    font-size: 20px;
    line-height: 31px;
}

.bbs-seo--large .bbs-seo__content > * + * {
    margin-top: 26px;
}

.bbs-seo--large .bbs-seo__content > * + h2,
.bbs-seo--large .bbs-seo__content > * + h3,
.bbs-seo--large .bbs-seo__content > * + h4 {
    margin-top: 11px;
}

.bbs-seo--large .bbs-seo__content h2 + *,
.bbs-seo--large .bbs-seo__content h3 + *,
.bbs-seo--large .bbs-seo__content h4 + * {
    margin-top: 0;
}

@media (max-width: 959px) {
    .bbs-seo--large .bbs-seo__content > * + h2,
    .bbs-seo--large .bbs-seo__content > * + h3,
    .bbs-seo--large .bbs-seo__content > * + h4 {
        margin-top: 15px;
    }
}

/* ── Columns look ──
   bebestschool.kz/kursy-anglijskogo-s-nositelem-yazyka, rec800864260: each
   subheading with its text is a part, two parts to a row 40 px apart and a
   lone last part across both; subheadings 20 px bold #f66746, 7 px above
   16 px text at 22 px; 40 px between rows. One column below 640 px. */
.bbs-seo--columns {
    padding: 20px 0 56px;
}

.bbs-seo--columns .bbs-seo__decor {
    display: none;
}

.bbs-seo--columns .bbs-seo__content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    font-size: 16px;
    line-height: 22px;
}

.bbs-seo--columns .bbs-seo__content > * + * {
    margin-top: 0;
}

.bbs-seo--columns .bbs-seo__part:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.bbs-seo--columns .bbs-seo__part > * {
    margin: 0;
}

.bbs-seo--columns .bbs-seo__part > * + * {
    margin-top: 1lh;
}

.bbs-seo--columns .bbs-seo__part h2,
.bbs-seo--columns .bbs-seo__part h3,
.bbs-seo--columns .bbs-seo__part h4 {
    color: #f66746;
    font-size: 20px;
    line-height: 31px;
    font-weight: 700;
}

.bbs-seo--columns .bbs-seo__part > h2 + *,
.bbs-seo--columns .bbs-seo__part > h3 + *,
.bbs-seo--columns .bbs-seo__part > h4 + * {
    margin-top: 7px;
}

/* "bbs-seo--columns-big" (the block's Additional CSS class), with the
   columns look: 17 px text at 26 px, as on
   bebestschool.kz/anglikij-dlya-puteshestvij (rec854287426). */
@media (min-width: 640px) {
    .bbs-seo--columns.bbs-seo--columns-big .bbs-seo__content {
        font-size: 17px;
        line-height: 26px;
    }
}

@media (max-width: 639px) {
    .bbs-seo--columns .bbs-seo__content {
        grid-template-columns: minmax(0, 1fr);
        gap: 29px;
        font-size: 14px;
        line-height: 19px;
    }

    .bbs-seo--columns .bbs-seo__part h2,
    .bbs-seo--columns .bbs-seo__part h3,
    .bbs-seo--columns .bbs-seo__part h4 {
        font-size: 17px;
        line-height: 26px;
    }
}

/* ── Blobs ──
   bebestschool.kz/korporativnyj-anglijskij, rec649504323: a pink-and-coral
   shape 360 px wide, 940 px into the grid and 13 % down, and a green-and-pink
   one turned 257°, half off the grid's left edge, 69 % down — behind the
   text, so it stays readable. */
.bbs-seo__decor--blobs {
    z-index: 0;
}

.bbs-seo__blob {
    position: absolute;
    display: block;
    width: 360px;
    max-width: none;
    height: auto;
}

.bbs-seo__blob--top {
    top: 13%;
    left: calc(50% - var(--bbs-seo-grid) / 2 + 940px);
}

.bbs-seo__blob--bottom {
    top: 69%;
    left: calc(50% - var(--bbs-seo-grid) / 2 - 240px);
    transform: rotate(257deg);
}

@media (max-width: 1199px) {
    .bbs-seo__blob--top {
        top: 3%;
        left: calc(50% - var(--bbs-seo-grid) / 2 + 710px);
    }

    .bbs-seo__blob--bottom {
        top: 64%;
        left: calc(50% - var(--bbs-seo-grid) / 2 - 181px);
    }
}

@media (max-width: 959px) {
    .bbs-seo__blob {
        width: 262px;
    }

    .bbs-seo__blob--top {
        top: 5%;
        left: calc(50% + 114px);
    }

    .bbs-seo__blob--bottom {
        top: 58%;
        left: calc(50% - 420px);
    }
}

@media (max-width: 639px) {
    .bbs-seo__blob {
        width: 165px;
    }

    .bbs-seo__blob--top {
        top: 2%;
        left: calc(50% + 34px);
    }

    .bbs-seo__blob--bottom {
        top: 55%;
        left: calc(50% - 202px);
    }
}

/* ── Coral subheadings, one column ──
   bebestschool.kz/anglijskij-dlya-it, rec796281081: 20 px bold #f66746
   subheadings at 31 px straight over 16 px text at 25 px, 15 px between parts. */
.bbs-seo--coral {
    padding: 20px 0 50px;
}

.bbs-seo--coral .bbs-seo__content {
    font-size: 16px;
    line-height: 25px;
}

.bbs-seo--coral .bbs-seo__content h2,
.bbs-seo--coral .bbs-seo__content h3,
.bbs-seo--coral .bbs-seo__content h4 {
    color: #f66746;
    font-size: 20px;
    line-height: 31px;
}

.bbs-seo--coral .bbs-seo__content > * + h2,
.bbs-seo--coral .bbs-seo__content > * + h3,
.bbs-seo--coral .bbs-seo__content > * + h4 {
    margin-top: 15px;
}

.bbs-seo--coral .bbs-seo__content > * + * {
    margin-top: 15px;
}

.bbs-seo--coral .bbs-seo__content h2 + *,
.bbs-seo--coral .bbs-seo__content h3 + *,
.bbs-seo--coral .bbs-seo__content h4 + * {
    margin-top: 0;
}

@media (max-width: 639px) {
    .bbs-seo--coral .bbs-seo__content {
        font-size: 14px;
        line-height: 21px;
    }

    .bbs-seo--coral .bbs-seo__content h2,
    .bbs-seo--coral .bbs-seo__content h3,
    .bbs-seo--coral .bbs-seo__content h4 {
        font-size: 17px;
        line-height: 26px;
    }
}

/* "bbs-seo--spaced" (the block's Additional CSS class), with the large look:
   each subheading starts a section of its own, as the separate records on
   bebestschool.kz/english-test — 39 px above a subheading, 16 px under it;
   on phones 18 px subheadings and 14 px text. */
.bbs-seo--large.bbs-seo--spaced .bbs-seo__content > * + h2,
.bbs-seo--large.bbs-seo--spaced .bbs-seo__content > * + h3,
.bbs-seo--large.bbs-seo--spaced .bbs-seo__content > * + h4 {
    margin-top: 39px;
}

.bbs-seo--large.bbs-seo--spaced .bbs-seo__content h2 + *,
.bbs-seo--large.bbs-seo--spaced .bbs-seo__content h3 + *,
.bbs-seo--large.bbs-seo--spaced .bbs-seo__content h4 + * {
    margin-top: 16px;
}

/* With "bbs-seo--loose" too, on a computer: 49 px above a subheading and
   29 px under the text, as on bebestschool.kz/german-test and /spanish-test. */
@media (min-width: 640px) {
    .bbs-seo--large.bbs-seo--spaced.bbs-seo--loose {
        padding-bottom: 29px;
    }

    .bbs-seo--large.bbs-seo--spaced.bbs-seo--loose .bbs-seo__content > * + h2,
    .bbs-seo--large.bbs-seo--spaced.bbs-seo--loose .bbs-seo__content > * + h3,
    .bbs-seo--large.bbs-seo--spaced.bbs-seo--loose .bbs-seo__content > * + h4 {
        margin-top: 49px;
    }
}

@media (max-width: 639px) {
    .bbs-seo--large.bbs-seo--spaced .bbs-seo__content {
        font-size: 14px;
        line-height: 22px;
    }

    .bbs-seo--large.bbs-seo--spaced .bbs-seo__content h2,
    .bbs-seo--large.bbs-seo--spaced .bbs-seo__content h3,
    .bbs-seo--large.bbs-seo--spaced .bbs-seo__content h4 {
        font-size: 18px;
        line-height: 28px;
    }

    .bbs-seo--large.bbs-seo--spaced .bbs-seo__content h2 + *,
    .bbs-seo--large.bbs-seo--spaced .bbs-seo__content h3 + *,
    .bbs-seo--large.bbs-seo--spaced .bbs-seo__content h4 + * {
        margin-top: 7px;
    }

    .bbs-seo--large.bbs-seo--spaced .bbs-seo__content > * + * {
        margin-top: 22px;
    }
}

/* "bbs-seo--compact" (the block's Additional CSS class): the lines close
   together with no empty line between paragraphs, 20 px at 31 px, as the
   text on grey on bebestschool.kz/speaking-club (rec1230024331). */
.bbs-seo--compact {
    padding: 12px 0 20px;
}

.bbs-seo--compact .bbs-seo__content {
    font-size: 20px;
    line-height: 31px;
}

.bbs-seo--compact .bbs-seo__content > * + *,
.bbs-seo--compact .bbs-seo__content > * + h2,
.bbs-seo--compact .bbs-seo__content > * + h3 {
    margin-top: 0;
}

.bbs-seo--compact .bbs-seo__content > .bbs-seo__gap {
    margin-top: 31px;
}

.bbs-seo--compact .bbs-seo__content ul {
    padding-left: 18px;
    list-style: square;
}

.bbs-seo--compact .bbs-seo__content ul > li::before {
    content: none;
}

.bbs-seo--compact .bbs-seo__content a {
    color: #f66746;
    text-decoration: none;
}

/* "bbs-seo--small" (the block's Additional CSS class): 18 px subheadings in
   semibold over 14 px light text, the lines close together, as the text
   records on bebestschool.kz/anglijskij-dlya-pereezda (rec740273523). */
.bbs-seo--small {
    padding: 60px 0;
}

.bbs-seo--small .bbs-seo__content {
    font-size: 14px;
    line-height: 1.55;
    font-weight: 300;
}

.bbs-seo--small .bbs-seo__content h2,
.bbs-seo--small .bbs-seo__content h3,
.bbs-seo--small .bbs-seo__content h4 {
    font-size: 18px;
    line-height: 1.35;
    font-weight: 600;
}

.bbs-seo--small .bbs-seo__content > * + * {
    margin-top: 0;
}

.bbs-seo--small .bbs-seo__content > * + h2,
.bbs-seo--small .bbs-seo__content > * + h3,
.bbs-seo--small .bbs-seo__content > * + h4 {
    margin-top: 15px;
}

.bbs-seo--small .bbs-seo__content h2 + *,
.bbs-seo--small .bbs-seo__content h3 + *,
.bbs-seo--small .bbs-seo__content h4 + * {
    margin-top: 16px;
}

.bbs-seo--small .bbs-seo__content strong,
.bbs-seo--small .bbs-seo__content b {
    font-weight: 600;
}

.bbs-seo--small .bbs-seo__content ol > li {
    padding-left: 12px;
}

@media (max-width: 639px) {
    .bbs-seo--small {
        padding: 45px 0;
    }

    .bbs-seo--small .bbs-seo__content h2,
    .bbs-seo--small .bbs-seo__content h3,
    .bbs-seo--small .bbs-seo__content h4 {
        font-size: 18px;
    }
}