/* Home — children's learning landing */

.home-page {
    --paper: #F3EBDD;
    --ink: #2A241C;
    --soft: #6A6156;
    --lilac: #C9C4F0;
    --violet: #514CA6;
    background: var(--paper);
    color: var(--ink);
}

.home-page .nav {
    background: rgba(243, 235, 221, .9);
    border-bottom: 1px solid rgba(42, 36, 28, .08);
    color: var(--ink);
}

.home-page .nav__brand,
.home-page .nav__link,
.home-page .nav__icon,
.home-page .nav__learner { color: var(--soft); }

.home-page .nav__link:hover,
.home-page .nav__icon:hover { background: rgba(42, 36, 28, .06); color: var(--ink); }

.home-page .nav__link[aria-current="page"] {
    background: var(--ink);
    color: var(--paper);
}

.home-page .btn--ghost { color: var(--ink); border-color: rgba(42, 36, 28, .12); }

.home {
    font-family: 'Outfit', sans-serif;
    /* `clip`, not `hidden`. Both trim what runs off the side, but `hidden`
       makes this a scroll container, and a `position: sticky` descendant then
       sticks to a box that never scrolls — which is to say, never. The sheet
       clips the rounded corners the same way and for the same reason. */
    overflow-x: clip;
}

.home__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 28px;
}

.home__brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    padding: 8px 10px 0 0;
    overflow: visible;
}


.home__nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.home__nav a {
    text-decoration: none;
    color: var(--soft);
    font-weight: 600;
    font-size: 14px;
    padding: 8px 12px;
}

.home__cta,
.home__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 18px;
    /* Most of these are links, which have no border; the ones that submit a
       form are <button>, which the browser draws a border on unless told not
       to. Said here so the two look the same wherever the class is used. */
    border: 0;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper) !important;
    /* `font` before `font-weight`: the shorthand resets weight, so the other
       way round it would quietly undo the 650. */
    font: inherit;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
}

.home__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 1.05fr);
    gap: 36px;
    align-items: center;
    padding: 20px 28px 56px;
    max-width: 1180px;
    margin: 0 auto;
}

.home__kicker {
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--sky);
    font-weight: 700;
    margin-bottom: 10px;
}

.home__copy h1,
.home__coaches h2,
.home__foot h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 650;
    letter-spacing: -.035em;
    line-height: 1.05;
}

.home__copy h1 { font-size: clamp(36px, 5.4vw, 62px); margin: 0 0 14px; }

.home__lead {
    font-size: 17px;
    color: var(--soft);
    max-width: 40ch;
    line-height: 1.55;
    margin-bottom: 24px;
}

.home__ask {
    display: flex;
    gap: 8px;
    /* The pull quote above ends flush against this, and a white field pressed
       to the last line of a sentence reads as part of it. The gap matches the
       one under the field, so the form sits in its own air. */
    margin-top: 30px;
    background: #fff;
    border-radius: 18px;
    padding: 8px 8px 8px 18px;
    box-shadow: 0 10px 30px rgba(42, 36, 28, .06);
}

.home__ask input {
    flex: 1;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 16px;
    min-width: 0;
    color: var(--ink);
}

.home__ask input:focus { outline: none; }

.home__ask button {
    border: 0;
    border-radius: 14px;
    background: var(--sky);
    color: #fff;
    font: inherit;
    font-weight: 650;
    padding: 12px 16px;
    cursor: pointer;
}

.home__links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.home__links a {
    color: var(--sky);
    font-weight: 650;
    text-decoration: none;
    font-size: 14px;
}

.home__media { position: relative; }

.home__film {
    width: 100%;
    border-radius: 28px;
    display: block;
    background: var(--lilac);
    aspect-ratio: 16 / 10;
    object-fit: cover;
}


.home__coaches {
    max-width: 1180px;
    margin: 0 auto;
    /* Even top and bottom. The 10px it used to open with was the remainder of
       a hero that carried its own 56px below it; once that became a band the
       band's edge was all that was left, and the section sat hard against it. */
    padding: 64px 28px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 36px;
    align-items: center;
}

.home__pip {
    position: relative;
    width: 100%;
    max-width: 320px;
}

.home__pip-mount {
    position: relative;
    height: 360px;
    border-radius: 28px;
    overflow: hidden;
    background: #C2C7F4;
}

.home__pip-mount img,
.home__pip-mount canvas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 16%;
}

.home__cast {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0 20px;
}

.home__cast button {
    border: 0;
    padding: 0;
    font: inherit;
    text-decoration: none;
    color: inherit;
    background: transparent;
    display: block;
    text-align: center;
    cursor: pointer;
    transition: transform .2s ease;
}

.home__cast button:hover { transform: translateY(-3px); }

/* Sits on the video, because that is the thing it makes talk. */
.home__narrate {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: #23272C;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(20, 24, 32, .22);
    transition: transform .15s ease, background .15s ease;
}

.home__narrate:hover { transform: translateX(-50%) translateY(-1px); background: #fff; }
.home__narrate svg { width: 17px; height: 17px; }

/* A quiet pulse while it talks, so the button reads as active. */
.home__narrate.is-speaking {
    background: #23272C;
    color: #fff;
    animation: narrate-pulse 1.6s ease-in-out infinite;
}

@keyframes narrate-pulse {
    0%, 100% { box-shadow: 0 6px 20px rgba(20, 24, 32, .22); }
    50%      { box-shadow: 0 6px 26px rgba(20, 24, 32, .42); }
}

@media (prefers-reduced-motion: reduce) {
    .home__narrate.is-speaking { animation: none; }
}

.home__coaches h2 { font-size: clamp(28px, 3.4vw, 40px); margin: 6px 0 10px; }
.home__coaches p { color: var(--soft); max-width: 42ch; margin-bottom: 16px; }

.home__foot {
    text-align: center;
    padding: 20px 28px 80px;
}

.home__foot h2 { font-size: clamp(28px, 4vw, 44px); margin-bottom: 10px; }
.home__foot p { color: var(--soft); margin-bottom: 20px; }

.home__foot-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.home__ghost {
    display: inline-flex;
    align-items: center;
    padding: 11px 18px;
    color: var(--ink);
    font-weight: 650;
    text-decoration: none;
}

@media (max-width: 860px) {
    .home__hero,
    .home__coaches { grid-template-columns: 1fr; }
    .home__hero { padding-top: 8px; }
    .home__pip { max-width: 280px; }
    .home__cast { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
    .home__bar { padding: 14px 16px; flex-wrap: wrap; }
    .home__nav { width: 100%; justify-content: flex-start; }
}

.site-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 12px 28px 40px;
}

.site-page h1 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(32px, 5vw, 48px);
    letter-spacing: -.03em;
    margin: 0 0 12px;
}

.site-lead {
    font-size: 18px;
    color: var(--soft);
    max-width: 48ch;
    margin-bottom: 28px;
    line-height: 1.5;
}

.site-prose h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 24px;
    margin: 28px 0 8px;
}

.site-prose p { color: var(--soft); max-width: 58ch; line-height: 1.6; }

.site-steps { list-style: none; display: grid; gap: 22px; }
.site-steps li {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 18px;
    align-items: center;
    background: #fff8ee;
    border-radius: 22px;
    padding: 14px;
}
.site-steps img { width: 100%; border-radius: 16px; aspect-ratio: 1; object-fit: cover; }
.site-steps h2 { font-family: 'Fraunces', Georgia, serif; font-size: 22px; margin-bottom: 6px; }
.site-steps p { color: var(--soft); margin-bottom: 8px; }
.site-steps a { color: var(--sky); font-weight: 650; text-decoration: none; }

.site-cast {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}
.site-cast article {
    background: #fff8ee;
    border-radius: 22px;
    padding: 14px;
}
.site-cast img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 16%;
    border-radius: 16px;
    background: var(--lilac);
}
.site-cast h2 { font-family: 'Fraunces', Georgia, serif; font-size: 22px; margin: 10px 0 4px; }
.site-cast p { color: var(--soft); font-size: 14px; }

.site-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.site-form { display: grid; gap: 14px; max-width: 480px; }
.site-form label { display: grid; gap: 6px; font-weight: 650; font-size: 14px; }
.site-form input,
.site-form textarea {
    border: 1px solid rgba(42, 36, 28, .14);
    border-radius: 12px;
    padding: 12px 14px;
    font: inherit;
    background: #fff;
    color: var(--ink);
}
.site-form button { border: 0; cursor: pointer; justify-self: start; }

.site-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.site-chips a {
    text-decoration: none;
    color: var(--soft);
    background: #fff8ee;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 650;
}
.site-chips a.is-on { background: var(--ink); color: var(--paper); }

.site-foot {
    border-top: 1px solid rgba(42, 36, 28, .08);
    padding: 36px 28px 28px;
    margin-top: 20px;
}
.site-foot__grid {
    max-width: 1180px;
    margin: 0 auto 24px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 24px;
}
.site-foot p { color: var(--soft); font-size: 14px; margin-top: 8px; max-width: 32ch; }
.site-foot .home__kicker { margin-bottom: 8px; }
.site-foot a { display: block; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; padding: 4px 0; }
/* Written as `p.` for the same reason the column headings are: the rule for
   this footer's paragraphs caps them at 32ch, and being the more specific of
   the two it was breaking this line in half. */
.site-foot p.site-foot__copy {
    text-align: center;
    max-width: 1180px;
    margin: 0 auto;
    font-size: 13px;
    color: var(--soft);
}

/* Whose product this is, under the copyright. Same `p.` guard as the line
   above it, for the same 32ch cap. */
.site-foot p.site-foot__by {
    max-width: 1180px;
    margin: 4px auto 0;
    text-align: center;
    font-size: 13px;
    color: var(--soft);
}

.site-foot p.site-foot__by a {
    display: inline-block;
    color: var(--ink);
    text-decoration: none;
    transition: opacity .15s ease;
}

.site-foot p.site-foot__by a:hover { opacity: .65; }

/* The AiOpt mark sits on the text baseline beside the words, at the height of
   a capital rather than at its own 42-unit box. */
.aiopt-mark {
    height: 15px;
    width: auto;
    display: inline-block;
    vertical-align: -3px;
}


@media (max-width: 860px) {
    .site-steps li { grid-template-columns: 1fr; }
    .site-foot__grid { grid-template-columns: 1fr; }
    .site-page { padding: 8px 16px 32px; }
}


/* ---------------------------------------------------------------- header --
   The bar carries eight links, a language switcher and a call to action. On a
   phone that wrapped into four ragged rows, so below 900px it collapses into a
   burger. The toggle is a checkbox, not a script: the menu has to work on the
   first paint. */

.home__bar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(243, 235, 221, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(42, 36, 28, .07);
}

.home__nav a:hover { color: var(--ink); }

.home__nav a[aria-current="page"] {
    color: var(--ink);
    box-shadow: inset 0 -2px 0 var(--sky);
    border-radius: 0;
}

/* Language switcher ------------------------------------------------------ */

.home__lang { position: relative; }

.home__lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid rgba(42, 36, 28, .14);
    border-radius: 999px;
    background: transparent;
    color: var(--soft);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.home__lang-btn:hover { color: var(--ink); border-color: rgba(42, 36, 28, .3); }

.home__lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 190px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 6px;
    background: #FFFDF8;
    border: 1px solid rgba(42, 36, 28, .1);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(42, 36, 28, .16);
    display: none;
    z-index: 50;
}

/* Opens on hover and on keyboard focus, so it is reachable without a pointer. */
.home__lang:hover .home__lang-menu,
.home__lang:focus-within .home__lang-menu { display: block; }

.home__lang-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 9px;
    font-size: 14px;
    white-space: nowrap;
}

.home__lang-menu a:hover { background: rgba(42, 36, 28, .06); }
.home__lang-menu a[aria-current="true"] { background: var(--lilac); color: var(--ink); }

/* Who is signing in ------------------------------------------------------ */

.auth__who {
    display: flex;
    gap: 4px;
    margin-bottom: 18px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(42, 36, 28, .05);
}

.auth__who input { position: absolute; opacity: 0; pointer-events: none; }

.auth__who label {
    flex: 1;
    padding: 9px 12px;
    border-radius: 999px;
    color: var(--soft);
    font-weight: 600;
    font-size: 14.5px;
    text-align: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.auth__who label:hover { color: var(--ink); }

/* The tab that is on is drawn from the radio, so there is one source of truth
   for which of the two is showing. */
.auth__who input:checked + label {
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(42, 36, 28, .10);
}

/* `hidden` is only display:none at the weakest possible strength, and both
   .auth__google and .auth__or set a display of their own further down, which
   beats it. The child tab hides them through this. */
.auth [hidden] { display: none !important; }

/* Burger ----------------------------------------------------------------- */

.home__nav-toggle { display: none; }

.home__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0 9px;
    border-radius: 12px;
    cursor: pointer;
}

.home__burger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform .2s ease, opacity .2s ease;
}

@media (max-width: 900px) {
    .home__burger { display: flex; }

    .home__nav {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 10px 0 4px;
    }

    .home__nav-toggle:checked ~ .home__nav { display: flex; }

    .home__nav a {
        padding: 12px 4px;
        font-size: 16px;
        border-bottom: 1px solid rgba(42, 36, 28, .06);
    }

    .home__nav a[aria-current="page"] { box-shadow: none; color: var(--sky); }

    /* Why the reordering: the menu is a column, and in source order the
       languages come before signing in. Thirty-two flags are taller than a
       phone, so "Log in" landed below the fold and the menu looked like it had
       none. The two things someone opens this menu to do go first; the flags
       go last, where scrolling to them is the point. */
    .home__nav a.home__login { order: -2; }
    .home__nav a.home__cta { order: -1; }
    .home__lang { order: 10; }

    .home__nav a.home__login {
        margin-top: 4px;
        border-bottom: 0;
        font-weight: 650;
        color: var(--ink);
    }

    .home__cta {
        margin-top: 6px;
        margin-bottom: 8px;
        align-self: stretch;
        justify-content: center;
    }

    /* A dropdown is the wrong shape on a phone; the languages just stand in
       the menu as a scrollable strip. */
    .home__lang { padding: 10px 0; border-top: 1px solid rgba(42, 36, 28, .06); }
    .home__lang-btn { display: none; }
    .home__lang-menu {
        display: flex;
        position: static;
        flex-wrap: wrap;
        gap: 6px;
        min-width: 0;
        max-height: none;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
    }
    .home__lang-menu a {
        border: 1px solid rgba(42, 36, 28, .14);
        border-radius: 999px;
        padding: 7px 12px;
    }

    .home__nav-toggle:checked ~ .home__burger span:first-child { transform: translateY(7px) rotate(45deg); }
    .home__nav-toggle:checked ~ .home__burger span:nth-child(2) { opacity: 0; }
    .home__nav-toggle:checked ~ .home__burger span:last-child { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------------------------------------------------------------- pricing */

.price-card {
    max-width: 560px;
    margin: 0 auto 28px;
    padding: 30px;
    background: #FFFDF8;
    border: 1px solid rgba(42, 36, 28, .1);
    border-radius: 26px;
    box-shadow: 0 24px 60px rgba(42, 36, 28, .1);
    text-align: center;
}

.price-card__plan {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--lilac);
    color: var(--sky);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 14px;
}

.price-card__amount {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(48px, 9vw, 72px);
    font-weight: 700;
    line-height: 1;
}

.price-card__period { color: var(--soft); margin-bottom: 20px; }
.price-card__note { color: var(--soft); font-size: 14px; margin-top: 12px; }

.price-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 620px;
    display: grid;
    gap: 10px;
}

.price-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 16px;
    background: rgba(255, 253, 248, .7);
    border: 1px solid rgba(42, 36, 28, .07);
    border-radius: 14px;
    font-size: 15px;
}

.price-list li::before {
    content: '✓';
    color: var(--sky);
    font-weight: 700;
    flex: none;
}

/* -------------------------------------------------------------- languages */

.lang-legend {
    display: grid;
    gap: 10px;
    max-width: 700px;
    margin: 0 auto;
}

.lang-legend div {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-size: 15px;
    color: var(--soft);
}

.lang-legend b { color: var(--ink); white-space: nowrap; }

.lang-card__note { font-size: 12px; }
.lang-card--native .lang-card__note { color: var(--sky); }
.lang-card--borrowed .lang-card__note { color: #9A6B1E; }
.lang-card--none .lang-card__note { color: #A05252; }

/* .section-title is coloured for the dark app shell; on the cream landing it
   came out almost invisible. */
.home-page .section-title {
    color: var(--soft);
    margin-top: 26px;
}

/* Blinking thumbnails -----------------------------------------------------
   The chosen coach is alive on the big sprite; the others were flat stills,
   so the strip read as a row of stickers rather than as a cast waiting to be
   picked. Each unchosen face blinks on its own timer. */


/* ==========================================================================
   Marketing subpages
   ==========================================================================
   The landing page had a designed look and the subpages did not, so moving
   from one to the other felt like leaving the product. These share its paper,
   its serif headings and its lilac. */

.site-hero {
    max-width: 1180px;
    margin: 0 auto;
    padding: 34px 28px 10px;
    text-align: center;
}

.site-hero h1 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 650;
    letter-spacing: -.035em;
    line-height: 1.04;
    font-size: clamp(34px, 5.6vw, 60px);
    margin: 0 0 16px;
    max-width: 18ch;
    margin-inline: auto;
}

.site-hero .site-lead {
    color: var(--soft);
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.6;
    max-width: 56ch;
    margin: 0 auto;
}

/* Small facts under a hero, so the page says something before it explains. */
.site-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 26px;
}

.site-stats span {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(255, 253, 248, .8);
    border: 1px solid rgba(42, 36, 28, .09);
    font-size: 14px;
    color: var(--soft);
}

.site-stats b {
    color: var(--sky);
    font-weight: 700;
    font-size: 15px;
}

/* 1180 of content, not 1180 including the gutter. The band that closes these
   pages is 1180 edge to edge, so a section that spent 28px a side on padding
   left its cards standing a little inside it. */
.site-section {
    max-width: 1236px;
    margin: 0 auto;
    padding: 0 28px 56px;
}

.site-section > h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 650;
    letter-spacing: -.03em;
    font-size: clamp(26px, 3.2vw, 36px);
    margin: 44px 0 8px;
}

.site-section > .site-sub {
    color: var(--soft);
    margin: 0 0 26px;
    max-width: 60ch;
}

/* --------------------------------------------------------------- price ---- */

.price-hero {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 28px;
    /* Both columns end on the same line. The panel used to stop well short of
       the list beside it and left the corner of the page empty. */
    align-items: stretch;
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 28px 8px;
}

.price-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 34px 30px;
    border-radius: 28px;
    background: var(--sky);
    color: var(--ink);
    text-align: center;
    overflow: hidden;
}

.price-panel > * { position: relative; }

.price-panel__plan {
    display: inline-block;
    padding: 6px 15px;
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.price-panel__amount {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(56px, 10vw, 82px);
    font-weight: 700;
    line-height: .95;
    letter-spacing: -.04em;
}

.price-panel__period {
    font-size: 16px;
    opacity: .75;
    margin: 6px 0 22px;
}

.price-panel .home__btn {
    width: 100%;
    padding: 14px 20px;
    font-size: 16px;
}

.price-panel__note {
    font-size: 13.5px;
    opacity: .8;
    margin-top: 14px;
    line-height: 1.5;
}

/* What the price buys, beside the panel rather than under it. */
.price-includes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    align-content: start;
}

.price-includes li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 15px 17px;
    background: #FFFDF8;
    border: 1px solid rgba(42, 36, 28, .08);
    border-radius: 16px;
    font-size: 14.5px;
    line-height: 1.5;
    box-shadow: 0 6px 18px rgba(42, 36, 28, .04);
}

.price-includes li::before {
    content: '✓';
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--tangerine);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: grid;
    place-items: center;
}

.price-includes { list-style: none; margin: 0; padding: 0; }

/* An odd number of items leaves the last one alone in a two-column grid. It
   takes the full width instead, so the block ends on a straight edge. */
.price-includes li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* --------------------------------------------------------- feature cards -- */

.site-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.site-cards article {
    background: #FFFDF8;
    border: 1px solid rgba(42, 36, 28, .08);
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 26px rgba(42, 36, 28, .05);
}

.site-cards img,
.site-cards video {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: var(--lilac);
    display: block;
}

.site-cards .site-cards__body { padding: 18px 20px 22px; }

.site-cards h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 20px;
    font-weight: 650;
    margin: 0 0 8px;
}

.site-cards p { color: var(--soft); font-size: 14.5px; line-height: 1.55; margin: 0; }

/* A card with no picture — a numbered or lettered step. */
.site-cards article.is-plain .site-cards__body { padding: 24px 22px; }

.site-cards__num {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--lilac);
    color: var(--sky);
    font-weight: 700;
    margin-bottom: 12px;
}

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

.site-faq { display: grid; gap: 10px; }

.site-faq details {
    background: #FFFDF8;
    border: 1px solid rgba(42, 36, 28, .08);
    border-radius: 16px;
    padding: 0 20px;
    overflow: hidden;
}

.site-faq summary {
    cursor: pointer;
    list-style: none;
    padding: 17px 34px 17px 0;
    font-weight: 650;
    font-size: 16px;
    position: relative;
}

.site-faq summary::-webkit-details-marker { display: none; }

/* The plus and the minus are drawn, not typed.
   As letters they were centred on the font's own metrics — where the glyph
   sits between baseline and cap height — which is not the middle of a 24px
   circle, and both sat visibly low. Two bars have no metrics to argue with. */
.site-faq summary::after {
    content: '';
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background:
        linear-gradient(#fff, #fff) center / 10px 2px no-repeat,
        linear-gradient(#fff, #fff) center / 2px 10px no-repeat,
        var(--lilac);
}

/* Open: the upright bar goes and a minus is left. */
.site-faq details[open] summary::after {
    background:
        linear-gradient(#fff, #fff) center / 10px 2px no-repeat,
        var(--lilac);
}

.site-faq p {
    color: var(--soft);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    padding: 0 0 18px;
    max-width: 70ch;
}

/* ------------------------------------------------------------- cta band --- */

.site-band {
    max-width: 1180px;
    margin: 0 auto 64px;
    padding: 46px 28px;
    border-radius: 28px;
    background: linear-gradient(150deg, #2F2A24 0%, #3D3226 100%);
    color: #F6EFE3;
    text-align: center;
}

.site-band h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 650;
    letter-spacing: -.03em;
    font-size: clamp(26px, 3.4vw, 38px);
    margin: 0 0 10px;
}

.site-band p {
    color: rgba(246, 239, 227, .74);
    max-width: 52ch;
    margin: 0 auto 22px;
    line-height: 1.6;
}

.site-band__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.site-band .home__ghost {
    display: inline-flex;
    align-items: center;
    padding: 11px 18px;
    border-radius: 999px;
    border: 1px solid rgba(246, 239, 227, .3);
    color: rgba(246, 239, 227, .9);
    text-decoration: none;
    font-weight: 650;
}

/* --------------------------------------------------------------- prose ---- */

.site-prose h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 650;
    letter-spacing: -.03em;
    font-size: clamp(22px, 2.6vw, 28px);
    margin: 34px 0 10px;
}

.site-prose p { color: var(--soft); line-height: 1.7; max-width: 68ch; }

/* A long text page reads better on a card than loose on the paper. */
.site-sheet {
    /* The same width as the band that closes the page, so the two stack as
       one column rather than as a narrow card over a wide one. The lines
       inside keep their own measure — the prose is capped at 68ch. */
    max-width: 1180px;
    margin: 0 auto 56px;
    padding: 12px 38px 34px;
    background: #FFFDF8;
    border: 1px solid rgba(42, 36, 28, .08);
    border-radius: 26px;
    box-shadow: 0 14px 40px rgba(42, 36, 28, .05);
}

/* ------------------------------------------------------------- responsive - */

@media (max-width: 900px) {
    .price-hero { grid-template-columns: 1fr; padding-bottom: 0; }
    .site-hero { padding-top: 22px; }
    .site-sheet { padding: 8px 22px 26px; border-radius: 20px; }
    .site-band { border-radius: 22px; padding: 36px 22px; margin-bottom: 40px; }
}

/* A link inside a feature card, so it reads as an action rather than as text. */
.site-cards__link {
    color: var(--sky);
    font-weight: 650;
    font-size: 14px;
    text-decoration: none;
}

.site-cards__link:hover { text-decoration: underline; }

.site-cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.site-cta-row .home__ghost {
    display: inline-flex;
    align-items: center;
    padding: 11px 18px;
    border-radius: 999px;
    border: 1px solid rgba(42, 36, 28, .16);
    color: var(--ink);
    text-decoration: none;
    font-weight: 650;
}

/* A hero running straight into the next block left no room to breathe. */
.site-hero + .site-section,
.site-hero + .site-sheet { padding-top: 26px; }


/* ==========================================================================
   Palette
   ==========================================================================
   Pale lavender ground, deep purple type, one purple for action and orange as
   the second voice. The cream paper is gone; the warm tone survives only
   inside the illustrations. */

.home-page {
    --paper: #F3F1FB;
    --ink: #2B1B4E;
    --soft: #6B6484;
    --lilac: #DDD6FA;
    --violet: #6C3FE0;
    --violet-deep: #2E1B5B;
    /* The pale violet the mascot stands on. Named here because the hero band
       takes it too, and the two have to stay the same colour. */
    --periwinkle: #B9AEF6;
    --tangerine: #FF6B35;
    --sunshine: #FFC93C;
    --sky: #3BA9F4;
    --card: #FFFFFF;
    background: var(--paper);
    color: var(--ink);
}

body.home-page { background: var(--paper); }

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

.home__bar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(243, 241, 251, .86);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(43, 27, 78, .07);
}

/* The bar sits above the drawings and the page, but under an open menu. */
.home-page > header { z-index: 40; }

.home__nav a { color: var(--soft); }
.home__nav a:hover { color: var(--ink); }

.home__nav a[aria-current="page"] {
    color: var(--sky);
    box-shadow: inset 0 -2px 0 var(--sky);
}

.brand-logo__word { color: var(--ink); }

/* Signing in is the quieter of the two things the bar offers; the blue keeps
   it a step below the orange beside it while still reading as an action. */
.home__nav a.home__login { color: var(--sky); font-weight: 650; }
.home__nav a.home__login:hover { color: var(--ink); }

/* Action is orange across the site — the bar's button, the closing band, the
   buttons on the subpages. The violet it used to be is not one of the five
   colours behind the cast, and white on it was the only thing that read;
   ink on orange is 5.4:1 and matches every other band's words. */
.home__cta,
.home__btn {
    background: var(--tangerine);
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(255, 107, 53, .3);
    gap: 10px;
}

/* The bar styles its links, and the call to action is one of them, so it was
   being laid out with a link's padding rather than a button's. More room on
   the side the disc is on than the side the letters are on: a letter carries
   its own side bearing, a hard-edged circle carries none. */
.home__nav a.home__cta { padding: 10px 16px 10px 18px; }

.home__cta::after,
.home__btn--dot::after {
    content: '';
    width: 22px;
    height: 22px;
    border-radius: 50%;
    /* The chevron is drawn in a box of its own size rather than floated in a
       24-unit square: at 11px of a 24 viewBox the arrow itself came out under
       3px across, a speck in a 22px disc, and any rounding pushed it visibly
       off centre. */
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14' fill='none' stroke='%23E85520' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 13 6-6-6-6'/%3E%3C/svg%3E") center/7px no-repeat;
    flex: none;
}

/* Press ------------------------------------------------------------------
   Rising a little under the cursor and going down under the finger. The press
   is quicker than the release on purpose: a button that takes as long to go
   down as it does to come back up feels soft, as though it were thinking
   about it. The arrow leans the way it points while the cursor is on it. */
.home__cta,
.home__btn {
    transition: transform .22s cubic-bezier(.2, .8, .3, 1),
                box-shadow .22s ease,
                background .15s ease;
}

.home__cta::after,
.home__btn--dot::after { transition: transform .22s cubic-bezier(.2, .8, .3, 1); }

.home__btn:hover,
.home__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(255, 107, 53, .38);
}

.home__cta:hover::after,
.home__btn--dot:hover::after { transform: translateX(2px); }

.home__btn:active,
.home__cta:active {
    transform: translateY(1px) scale(.97);
    box-shadow: 0 4px 10px rgba(255, 107, 53, .3);
    transition-duration: .07s;
}

.home__cta:active::after,
.home__btn--dot:active::after { transform: translateX(0); }

/* The colour and the shadow still answer; only the moving stops. */
@media (prefers-reduced-motion: reduce) {
    .home__cta,
    .home__btn,
    .home__cta::after,
    .home__btn--dot::after { transition: box-shadow .2s ease, background .15s ease; }

    .home__btn:hover,
    .home__cta:hover,
    .home__btn:active,
    .home__cta:active { transform: none; }

    .home__cta:hover::after,
    .home__btn--dot:hover::after { transform: none; }
}

.home__ghost,
.site-cta-row .home__ghost {
    color: var(--sky);
    border-color: rgba(59, 169, 244, .3);
    background: transparent;
}

.home__burger span { background: var(--ink); }
.home__lang-btn { color: var(--soft); border-color: rgba(43, 27, 78, .14); }

/* ----------------------------------------------------------------- type -- */

.home__kicker { color: var(--tangerine); }

.home__copy h1,
.home__coaches h2,
.home__foot h2,
.site-hero h1,
.site-section > h2,
.site-cards h3,
.site-sheet h2 { color: var(--ink); }

.home__lead,
.site-lead,
.home__coaches p { color: var(--soft); }

.home__links a { color: var(--sky); }

/* A short line of copy in a white pill, as the reference does under its
   headline — it reads as a caption rather than as more body text. */
.home__tagpill {
    display: inline-block;
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid rgba(43, 27, 78, .07);
    color: var(--ink);
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 20px;
    box-shadow: 0 6px 18px rgba(43, 27, 78, .05);
}

/* ---------------------------------------------------------------- stats -- */

.home__figures {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 30px;
}

.home__figure {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    max-width: 230px;
}

.home__figure-icon {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 18px rgba(43, 27, 78, .08);
    overflow: hidden;
}

.home__figure-icon img {
    width: 78%;
    height: 78%;
    object-fit: contain;
    display: block;
}

.home__figure b {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
}

/* Named rather than matched on the element: the icon wrapper is a span too,
   and a bare `.home__figure span` overrode its centring and its size. */
.home__figure-label {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    color: var(--soft);
    line-height: 1.45;
    max-width: 22ch;
}

/* --------------------------------------------------------------- media --- */

/* A picture cut to a circle on a coloured disc, the way the reference frames
   its pupils. The disc is offset so it reads as a shape behind, not a ring. */
.home__disc {
    position: relative;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1;
    margin-inline: auto;
}

.home__disc::before {
    content: '';
    position: absolute;
    inset: 6% 6% 10% 6%;
    border-radius: 50%;
    background: var(--disc, var(--sunshine));
}

.home__disc img,
.home__disc canvas {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 14%;
    border-radius: 50%;
}

.home__film { border-radius: 26px; }

/* --------------------------------------------------------------- doodles - */

.home__doodle {
    position: absolute;
    color: rgba(59, 169, 244, .34);
    pointer-events: none;
    user-select: none;
}

.home__doodle svg { width: 100%; height: 100%; display: block; }

.home__doodle--1 { width: 62px; height: 62px; top: 12%; left: -8px; }
.home__doodle--2 { width: 48px; height: 48px; top: 4%; right: 6%; color: rgba(255, 107, 53, .35); }
.home__doodle--3 { width: 70px; height: 70px; bottom: 6%; left: 44%; color: rgba(59, 169, 244, .3); }

@media (max-width: 900px) { .home__doodle { display: none; } }

/* ---------------------------------------------------------------- cards -- */

.site-cards article,
.site-faq details,
.site-sheet,
.price-includes li {
    background: var(--card);
    border-color: rgba(43, 27, 78, .07);
    box-shadow: 0 12px 30px rgba(43, 27, 78, .06);
}

.site-cards p,
.site-prose p,
.site-faq p { color: var(--soft); }

/* No card behind the portraits: they are circles on coloured discs, and a
   white square under each one was the tile they used to sit in. The chosen
   one is marked by a ring on the circle itself, further down. */
.home__cast button { background: transparent; box-shadow: none; }

/* The three little markers the pages use — the tick beside a line, the number
   on a step, the plus on a question — all in the action colour. */
.site-cards__num,
.price-includes li::before { background: var(--tangerine); color: #fff; }

/* Only the last layer — the disc — is repainted; the two bars above it stay. */
.site-faq summary::after {
    background:
        linear-gradient(#fff, #fff) center / 10px 2px no-repeat,
        linear-gradient(#fff, #fff) center / 2px 10px no-repeat,
        var(--tangerine);
}

.site-faq details[open] summary::after {
    background:
        linear-gradient(#fff, #fff) center / 10px 2px no-repeat,
        var(--tangerine);
}

.site-cards__link { color: var(--sky); }

.site-stats span {
    background: var(--card);
    border-color: rgba(43, 27, 78, .07);
    color: var(--soft);
}

.site-stats b { color: var(--sky); }

.home-page .section-title { color: var(--soft); }

/* ------------------------------------------------------------- cta band -- */

/* Tangerine, and the words dark on it — 5.4:1, which carries the small print
   as well as the heading. Not the yellow: the closing offer sits directly
   under this on the home page and the two ran together. The button goes white
   for the same reason the rail's does — nothing in the palette stands out on
   an orange ground. */
.site-band,
.home__foot {
    background: var(--tangerine);
    color: #fff;
    border: 0;
}

.site-band h2,
.home__foot h2 { color: #fff; }
.site-band p,
.home__foot p { color: rgba(255, 255, 255, .92); }

.site-band .home__btn,
.home__foot .home__btn {
    background: #fff;
    color: var(--ink) !important;
    box-shadow: 0 10px 26px rgba(20, 12, 2, .18);
}

.site-band .home__btn:hover,
.home__foot .home__btn:hover { background: #FFFDF8; }

.site-band .home__ghost,
.home__foot .home__ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }

.home__foot {
    max-width: 1180px;
    margin: 0 auto 64px;
    border-radius: 28px;
    padding: 52px 28px;
}

/* --------------------------------------------------------------- price --- */

/* The one card on the site that was a gradient with a glow inside it and a
   coloured shadow under it. Everything else is a flat colour from the five
   the cast stands on, so this is too: the blue, with the page's ink on it. */
.price-panel {
    background: var(--sky);
    color: #fff;
    box-shadow: none;
}

/* White, the way the pill in the closing band is, rather than a wash of the
   card's own colour. */
.price-panel__plan {
    background: #fff;
    color: var(--ink);
}

.price-panel__amount { color: #fff; }
.price-panel__period { color: rgba(255, 255, 255, .92); }
.price-panel__note { color: rgba(255, 255, 255, .86); }

.price-panel .home__btn {
    background: var(--violet);
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(108, 63, 224, .34);
}

.price-panel .home__btn:hover { background: #5B32C8; }

/* --------------------------------------------------------------- footer -- */

.site-foot {
    background: transparent;
    border-top: 1px solid rgba(43, 27, 78, .08);
    color: var(--soft);
}

/* The sign-in pages run a picture to the edge of their column. The 20px of
   air the footer normally keeps above itself shows there as a strip of paper
   under the picture, which reads as the column stopping short. On those pages
   the two meet. */
.home:has(.auth) + .site-foot { margin-top: 0; }

.site-foot a { color: var(--soft); }
.site-foot a:hover { color: var(--sky); }
.site-foot .home__kicker { color: var(--tangerine); }
.site-foot__copy { color: rgba(107, 100, 132, .8); }

/* ------------------------------------------------------------ ask field -- */

.home__ask {
    background: var(--card);
    box-shadow: 0 12px 30px rgba(43, 27, 78, .07);
}

.home__ask input { color: var(--ink); }

/* The round arrows in the two ask fields take the action colour too, and the
   chevron on them goes dark: white on orange is 2.8:1, under the bar even for
   an icon. */
.home__ask button,
.sunband__form button { background: var(--tangerine); color: #fff; }

.home__ask button:hover,
.sunband__form button:hover { background: #F4571E; }

/* ----------------------------------------------------------- lang cards -- */

.lang-card { background: var(--card); border-color: rgba(43, 27, 78, .07); }
.lang-card--native .lang-card__note { color: var(--sky); }
.lang-card--borrowed .lang-card__note { color: #B4641B; }
.lang-card--none .lang-card__note { color: #B0483F; }
.lang-legend div { color: var(--soft); }
.lang-legend b { color: var(--ink); }

/* ==========================================================================
   Doodles
   ==========================================================================
   Loose line drawings of school subjects, drifting behind the page. They sit
   in the margins and never take a pointer, so nothing on top of them changes
   behaviour. Each keeps its own tilt and drifts on its own clock — a row of
   them moving in step would read as a carousel rather than as scribbles. */

.doodles {
    /* One layer over the whole document, not a decoration on one section.
       Everything with a background of its own paints over it, so the drawings
       appear in the gaps rather than under the words. */
    position: absolute;
    inset: 0;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

body.home-page { position: relative; }

/* The content has to sit above the layer, or the cards fall behind it. The
   header is left out on purpose: it is sticky, and naming it here would
   override that with `position: relative`. Its own rule gives it a z-index. */
.home-page > .home,
.home-page > footer { position: relative; z-index: 1; }

.doodle {
    position: absolute;
    display: block;
    opacity: 0;
    transition: opacity .4s ease;
    transform: rotate(var(--spin, 0deg));
    animation-name: doodle-drift;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.doodle.is-placed { opacity: .85; }

.doodle svg { width: 100%; height: 100%; display: block; }

.doodle--violet { color: rgba(70, 38, 150, .5); }
.doodle--tangerine { color: rgba(197, 74, 28, .48); }
.doodle--sunshine { color: rgba(160, 112, 12, .45); }
.doodle--sky { color: rgba(22, 108, 170, .45); }

@keyframes doodle-drift {
    0%, 100% { transform: rotate(var(--spin, 0deg)) translateY(0); }
    50%      { transform: rotate(calc(var(--spin, 0deg) + 6deg)) translateY(-14px); }
}

/* No room for them beside the text on a phone. */
/* Placement is measured, not guessed, so there is no width to hide at — a
   narrow window simply has fewer gaps and fewer drawings get placed. */

@media (prefers-reduced-motion: reduce) {
    .doodle { animation: none; }
}


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

/* A line set off by an orange rule, the way the reference marks its aside. */
.home__aside {
    display: flex;
    gap: 14px;
    margin-top: 22px;
    max-width: 42ch;
}

.home__aside::before {
    content: '';
    flex: none;
    width: 26px;
    height: 3px;
    margin-top: 11px;
    border-radius: 3px;
    background: var(--tangerine);
}

.home__aside p { color: var(--soft); font-size: 15px; line-height: 1.6; margin: 0; }

/* ------------------------------------------------------------ portraits -- */


/* The cast as a row of faces with a line about each, as the reference lists
   its pupils. */
.cast-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 22px;
}

.cast-row article { text-align: center; }
.cast-row .face { max-width: 132px; margin: 0 auto 14px; }

.cast-row h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 19px;
    font-weight: 650;
    margin: 0 0 4px;
    color: var(--ink);
}

.cast-row p { color: var(--soft); font-size: 13.5px; margin: 0; line-height: 1.5; }

/* ---------------------------------------------------------- checklist ---- */

.home__split {
    max-width: 1180px;
    margin: 0 auto 64px;
    padding: 0 28px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: 40px;
    align-items: center;
}

.home__split h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 650;
    letter-spacing: -.03em;
    margin: 8px 0 20px;
    color: var(--ink);
    max-width: 18ch;
}

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

.checklist li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 15.5px;
    color: var(--ink);
}

.checklist li::before {
    content: '✓';
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--tangerine);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: grid;
    place-items: center;
}

/* ------------------------------------------------------------ duo card --- */

/* Two-tone library banner: tangerine picture half, deep violet words,
   circular badges sitting on the rim the way the reference does. */
.duo {
    position: relative;
    max-width: 1180px;
    margin: 0 auto 80px;
    padding: 0 28px;
}

.duo__card {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    border-radius: 32px;
    overflow: hidden;
    min-height: 340px;
    box-shadow: 0 22px 50px rgba(43, 27, 78, .14);
}

.duo__pic {
    position: relative;
    background: var(--tangerine);
    min-height: 280px;
    overflow: hidden;
}

.duo__pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 18%;
    display: block;
}

.duo__scribble {
    position: absolute;
    color: rgba(90, 24, 8, .38);
    pointer-events: none;
}

.duo__scribble--hat { width: 56px; top: 18px; left: 22px; transform: rotate(-12deg); }
.duo__scribble--book { width: 48px; top: 22px; right: 28px; transform: rotate(14deg); }
.duo__scribble--planet { width: 54px; bottom: 22px; left: 18px; transform: rotate(-8deg); }
.duo__scribble--chat { width: 46px; bottom: 28px; right: 36px; transform: rotate(10deg); }

.duo__say {
    background: var(--violet-deep);
    color: #EFEAFB;
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.duo__say h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 650;
    margin: 0 0 14px;
    color: #fff;
    max-width: 16ch;
    line-height: 1.15;
}

.duo__say p {
    color: rgba(239, 234, 251, .74);
    margin: 0 0 22px;
    line-height: 1.6;
    max-width: 36ch;
}

.duo__say .home__btn {
    align-self: flex-start;
    background: var(--tangerine);
    box-shadow: 0 10px 22px rgba(255, 107, 53, .32);
}

.duo__orb {
    position: absolute;
    z-index: 2;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    box-shadow: 0 10px 22px rgba(43, 27, 78, .16);
    overflow: hidden;
    animation: icon-pulse 4.6s ease-in-out infinite;
}

.duo__orb img {
    width: 78%;
    height: 78%;
    object-fit: contain;
    display: block;
    animation: icon-bob 3.4s ease-in-out infinite;
    transform-origin: center;
}

.duo__orb--chat img { animation-duration: 3.1s; }
.duo__orb--heart { animation-delay: .8s; }
.duo__orb--heart img { animation-delay: .8s; animation-duration: 3.8s; }
.duo__orb--quiz { animation-delay: 1.5s; }
.duo__orb--quiz img { animation-delay: 1.5s; animation-duration: 4.2s; }
.duo__orb--world { animation-delay: 2.1s; }
.duo__orb--world img { animation-delay: 2.1s; animation-duration: 3.6s; }

.duo__orb:hover,
.duo__orb:hover img { animation-play-state: paused; }

.duo__orb--chat { top: 18px; left: 10px; }
.duo__orb--heart { top: 28%; right: 6px; }
.duo__orb--quiz { bottom: -18px; left: 46%; }
.duo__orb--world { bottom: 22px; right: 10px; }

/* ---------------------------------------------------------- sun band ----- */

/* The closing offer is not another card: it runs the full width of the sheet,
   square-cornered, and butts onto the footer as one solid block — a yellow
   half carrying the ask, a picture filling the other. */

.sunband {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    margin: 48px 0 0;
    background: linear-gradient(135deg, #FFD764 0%, #FFC93C 100%);
    color: #3A2A05;
    overflow: hidden;
}

/* The footer follows straight on, with no gap and no rule between them. */
.home:has(> .sunband:last-child) + .site-foot {
    margin-top: 0;
    border-top: 0;
}

.sunband__copy {
    align-self: center;
    /* Measured off the window, not off the half it sits in: the half is
       already half a very wide screen, and a percentage of it walks the text
       away from where the rest of the page starts. */
    padding: var(--band-pad-y) var(--band-pad-x);
}

.sunband h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: var(--band-title);
    font-weight: 650;
    line-height: 1.12;
    margin: 0 0 12px;
    color: #2E2103;
    max-width: 14ch;
}

.sunband p {
    margin: 0 0 24px;
    font-size: var(--band-text);
    color: rgba(58, 42, 5, .82);
    max-width: 32ch;
}

.sunband__form {
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(100%, clamp(340px, 24vw, 470px));
    background: #fff;
    border-radius: 999px;
    padding: 7px 7px 7px 22px;
    box-shadow: 0 10px 26px rgba(94, 68, 5, .16);
}

/* The ring goes on the pill, not on the field inside it: the field has no
   edge of its own to draw one against. */
.sunband__form:focus-within {
    box-shadow: 0 0 0 3px rgba(59, 169, 244, .3), 0 10px 26px rgba(94, 68, 5, .16);
}

.sunband__form input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: clamp(15px, .95vw, 18px);
    color: var(--ink);
}

.sunband__form input:focus { outline: none; }

.sunband__form button {
    flex: none;
    display: grid;
    place-items: center;
    width: 64px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: var(--tangerine);
    color: #fff;
    cursor: pointer;
    transition: background .15s ease;
}

.sunband__form button svg { width: 18px; height: 18px; }


.sunband__pic {
    position: relative;
    min-height: var(--band-h);
}

.sunband__pic img,
.sunband__pic video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 32%;
}

@media (max-width: 900px) {
    .home__split,
    .duo__card,
    .sunband { grid-template-columns: minmax(0, 1fr); }
    .duo { padding-inline: 20px; }
    .duo__pic { min-height: 240px; }
    .duo__pic img { object-position: center 8%; }
    .duo__say { padding: 28px 24px 36px; }
    .duo__orb { width: 48px; height: 48px; }
    .duo__orb--chat { top: 8px; left: 4px; }
    .duo__orb--heart { top: auto; bottom: 38%; right: 4px; }
    .sunband__pic { min-height: 220px; }
}


/* ------------------------------------------------------- the cast picker -
   The five faces are the picker, not a decoration beside one. Circles on
   coloured discs, the way the reference frames its pupils — and the same
   markup carries the blink, so the unchosen ones still come alive. */

.home__cast { align-items: start; }

.home__cast .face {
    max-width: 132px;
    margin: 0 auto 14px;
    transition: transform .2s ease;
}

.home__cast .face img { box-shadow: 0 0 0 0 rgba(59, 169, 244, 0); transition: box-shadow .2s ease; }

.home__cast button[aria-pressed="true"] { box-shadow: none; }

.home__cast-name {
    display: block;
    font-weight: 650;
    font-size: 15px;
    color: var(--ink);
}

/* The blink frame lies over the portrait inside the same circle. */
.home__cast .home__cast-blink {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 12%;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 70ms linear;
}

.home__cast button.is-blinking .home__cast-blink { opacity: 1; }


@media (prefers-reduced-motion: reduce) {
    .home__cast .home__cast-blink { display: none; }
}


/* ---------------------------------------------------------------- shelf -- */

.shelf {
    max-width: 1180px;
    margin: 0 auto 64px;
    padding: 0 28px;
    position: relative;
}

.shelf__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 22px;
}

.shelf__head h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 650;
    letter-spacing: -.03em;
    margin: 6px 0 8px;
    color: var(--ink);
    max-width: 20ch;
}

.shelf__lead { color: var(--soft); margin: 0; max-width: 46ch; }

.shelf__nav { display: flex; gap: 10px; flex: none; }

.shelf__arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: var(--tangerine);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(255, 107, 53, .3);
    transition: transform .15s ease, opacity .15s ease;
}

.shelf__arrow:hover { transform: translateY(-2px); }
.shelf__arrow svg { width: 20px; height: 20px; }

/* Dimmed rather than removed at the ends, so the row does not jump. */
.shelf__arrow[disabled] {
    background: rgba(43, 27, 78, .12);
    color: rgba(43, 27, 78, .4);
    box-shadow: none;
    cursor: default;
    transform: none;
}

.shelf__rail {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 8px;
    /* The rail scrolls; the scrollbar itself would cut the card shadows. */
    scrollbar-width: none;
}

.shelf__rail::-webkit-scrollbar { display: none; }

.shelf__card {
    flex: 0 0 210px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    min-height: 190px;
    border-radius: 20px;
    background: var(--card);
    border: 1px solid rgba(43, 27, 78, .07);
    box-shadow: 0 12px 30px rgba(43, 27, 78, .06);
    text-decoration: none;
    color: var(--ink);
    transition: transform .2s ease, box-shadow .2s ease;
}

.shelf__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(43, 27, 78, .1);
}

/* A coloured band standing in for a book's spine. */
.shelf__spine {
    display: block;
    width: 40px;
    height: 6px;
    border-radius: 6px;
    background: var(--sky);
}

.shelf__card:nth-child(3n+2) .shelf__spine { background: var(--tangerine); }
.shelf__card:nth-child(3n+3) .shelf__spine { background: var(--sky); }

.shelf__title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 17px;
    font-weight: 650;
    line-height: 1.3;
    flex: 1;
}

.shelf__meta { color: var(--soft); font-size: 13.5px; }

@media (max-width: 700px) {
    .shelf__head { flex-direction: column; align-items: flex-start; }
}


/* ------------------------------------------------------------------ auth -
   The sign-in card now lives on the same page furniture as everything else,
   so pressing "Започни" no longer lands the visitor on what looks like a
   different product. */

/* Split down the middle: the form on the paper, the reason to sign in on the
   colour beside it. Full width of the sheet, like every other band — the card
   floating in the middle of an empty page was the one screen that did not
   look like the rest of the site. */
.home-page .auth {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* Both axes: the app stylesheet centres this grid's items with a
       `place-items`, and overriding only the block axis left the two halves
       shrunk to the width of their own words. */
    align-items: stretch;
    justify-items: stretch;
    min-height: calc(100vh - 120px);
    padding: 0;
}

.home-page .auth__form,
.home-page .auth__aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(36px, 4vw, 72px) clamp(24px, 5vw, 64px);
}

/* One measure for both halves, so the two columns of words line up. */
.home-page .auth__inner { width: 100%; max-width: 400px; margin: 0 auto; }

.home-page .auth__logo {
    display: inline-flex;
    margin-bottom: 26px;
    text-decoration: none;
    color: inherit;
}

/* Google's button stays white with its own mark on it: it is the one thing on
   the page that has to look like itself rather than like us. */
.home-page .auth__google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 20px;
    border: 1px solid rgba(43, 27, 78, .14);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-weight: 650;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(43, 27, 78, .06);
    transition: box-shadow .15s ease, border-color .15s ease;
}

.home-page .auth__google:hover {
    border-color: rgba(43, 27, 78, .26);
    box-shadow: 0 8px 22px rgba(43, 27, 78, .1);
}

.home-page .auth__google svg { width: 18px; height: 18px; flex: none; }

/* A rule either side of the word, rather than the word alone under it. */
.home-page .auth__or {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    color: var(--soft);
    font-size: 13.5px;
}

.home-page .auth__or::before,
.home-page .auth__or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(43, 27, 78, .12);
}

.home-page .auth__title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 30px;
    font-weight: 650;
    letter-spacing: -.03em;
    color: var(--ink);
    margin-bottom: 6px;
}

.home-page .auth__sub { color: var(--soft); font-size: 15px; margin-bottom: 26px; }

.home-page .auth .field__label { color: var(--ink); font-weight: 600; }
.home-page .auth .field__hint { color: var(--soft); }

.home-page .auth .input {
    width: 100%;
    background: #F7F6FD;
    border: 1px solid rgba(43, 27, 78, .1);
    border-radius: 14px;
    padding: 13px 15px;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
}

.home-page .auth .input:focus {
    outline: none;
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(59, 169, 244, .22);
}

.auth__remember {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    color: var(--soft);
    margin-bottom: 22px;
    cursor: pointer;
}

.auth__remember input { width: 17px; height: 17px; accent-color: var(--sky); }

.home__btn--block { width: 100%; padding: 14px 20px; font-size: 16px; }

.home-page .auth__foot {
    margin-top: 22px;
    text-align: center;
    font-size: 14.5px;
    color: var(--soft);
}

.home-page .auth__foot a { color: var(--sky); font-weight: 650; text-decoration: none; }
.home-page .auth__foot a:hover { text-decoration: underline; }

/* ----------------------------------------------------------- the aside -- */

.home-page .auth__aside {
    position: relative;
    overflow: hidden;
    background: var(--sky);
    color: #fff;
    /* The school clip fills the half; the words sit on the sky so the
       coaches stay visible at the foot. */
    justify-content: flex-start;
    padding: 0;
}

.home-page .auth__pic {
    position: absolute;
    inset: 0;
}

.home-page .auth__pic video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
}

.home-page .auth__aside--class .auth__pic video {
    object-position: center 46%;
}

.home-page .auth__aside .auth__inner {
    position: relative;
    z-index: 1;
    max-width: none;
    margin: 0;
    padding: clamp(28px, 3vw, 48px) clamp(22px, 4vw, 48px) 28px;
    /* No wash over the picture. It was what made the words look hazy — they
       were reading through a blue veil rather than sitting on the image. The
       job it was doing, keeping the text legible over whatever the picture
       happens to be, is done by a shadow on the letters instead: it follows
       the type rather than covering the photograph. */
    color: #fff;
    text-shadow:
        0 1px 2px rgba(9, 34, 56, .8),
        0 2px 6px rgba(9, 34, 56, .6),
        0 4px 22px rgba(9, 34, 56, .5);
}

.home-page .auth__kicker {
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 12px;
}

.home-page .auth__aside h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: -.03em;
    margin: 0 0 14px;
}

.home-page .auth__lead {
    color: #fff;
    line-height: 1.6;
    margin: 0 0 28px;
}

.home-page .auth__points {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    display: grid;
    gap: 14px;
}

.home-page .auth__points li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: 1.45;
}

.home-page .auth__points li::before {
    content: '✓';
    flex: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-top: -1px;
    border-radius: 50%;
    background: var(--tangerine);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.home-page .auth__trust {
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}

@media (max-width: 860px) {
    /* Stacked, the form comes first: the reasons are for someone still
       deciding, and whoever opened this page has decided. */
    .home-page .auth { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .home-page .auth__aside {
        order: 2;
        min-height: 580px;
    }

    .home-page .auth__aside h2 { font-size: 26px; }
    .home-page .auth__lead { margin-bottom: 16px; }
    .home-page .auth__points { gap: 8px; margin-bottom: 16px; }
}


/* --------------------------------------------------------------- library - */

.site-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 26px;
}

.site-chips a {
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid rgba(43, 27, 78, .08);
    color: var(--soft);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.site-chips a:hover { color: var(--ink); border-color: rgba(43, 27, 78, .2); }

.site-chips a.is-on {
    background: var(--sky);
    border-color: var(--sky);
    color: #fff;
}

.lesson-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.lesson {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border-radius: 20px;
    background: var(--card);
    border: 1px solid rgba(43, 27, 78, .07);
    box-shadow: 0 12px 30px rgba(43, 27, 78, .06);
    text-decoration: none;
    color: var(--ink);
    transition: transform .2s ease, box-shadow .2s ease;
}

.lesson:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(43, 27, 78, .1);
}

.lesson__spine {
    display: block;
    width: 38px;
    height: 6px;
    border-radius: 6px;
    background: var(--sky);
}

.lesson-grid .lesson:nth-child(3n+2) .lesson__spine { background: var(--tangerine); }
.lesson-grid .lesson:nth-child(3n+3) .lesson__spine { background: var(--sky); }

.lesson__grade {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tangerine);
}

.lesson__title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 19px;
    font-weight: 650;
    line-height: 1.25;
}

.lesson__desc { color: var(--soft); font-size: 13.5px; line-height: 1.5; flex: 1; }
.lesson__meta { color: var(--sky); font-size: 13px; font-weight: 650; }


/* --------------------------------------------------- language picker ----- */

/* app.css styles these for the dark shell; on the light site they need their
   own paper and ink. */

.home-page .lang-card {
    background: var(--card);
    border: 1px solid rgba(43, 27, 78, .07);
    box-shadow: 0 10px 26px rgba(43, 27, 78, .05);
    color: var(--ink);
    border-radius: 18px;
    padding: 16px 18px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.home-page .lang-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(43, 27, 78, .09);
}

.home-page .lang-card__flag { font-size: 22px; line-height: 1; margin-bottom: 6px; }

.home-page .lang-card__native {
    font-weight: 650;
    font-size: 16px;
    color: var(--ink);
}

.home-page .lang-card__name { color: var(--soft); font-size: 13px; }

.home-page .lang-card.is-current,
.home-page .lang-card--recent {
    border-color: var(--sky);
    box-shadow: 0 0 0 2px rgba(59, 169, 244, .24), 0 14px 30px rgba(43, 27, 78, .08);
}

.home-page .lang-card--recent .lang-card__name { color: var(--sky); font-weight: 650; }

/* Five faces in a two-column grid leave the last one stranded on its own row.
   On a phone they become a strip you swipe instead. */
@media (max-width: 700px) {
    .home__cast {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        padding-bottom: 6px;
        scrollbar-width: none;
    }

    .home__cast::-webkit-scrollbar { display: none; }

    .home__cast button {
        flex: 0 0 96px;
        scroll-snap-align: start;
    }

    .home__cast .face { max-width: 100px; }
    .home__cast-name { font-size: 14px; }

    /* The portrait beside the checklist is a decoration on a phone, not a
       reason to scroll past half a screen of circle. */
    .home__split .face { max-width: 220px; margin-inline: auto; }
}


/* --------------------------------------------------------- nav dropdown -- */

.home__drop { position: relative; }

.home__drop-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: var(--soft);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.home__drop-btn svg { width: 15px; height: 15px; }
.home__drop-btn:hover { color: var(--ink); }

.home__drop-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 190px;
    padding: 6px;
    background: var(--card);
    border: 1px solid rgba(43, 27, 78, .1);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(43, 27, 78, .14);
    display: none;
    z-index: 50;
}

/* Opens on hover and on keyboard focus, so it works without a pointer. */
.home__drop:hover .home__drop-menu,
.home__drop:focus-within .home__drop-menu { display: block; }

/* A bridge across the gap between the button and the menu it opens. Both sit
   8px apart, and that strip belongs to neither: the pointer crossed it, the
   hover was lost and the menu shut before it could be reached. The strip is a
   child of the wrapper, so standing on it keeps the wrapper hovered, and it
   only exists while the wrapper is hovered, so it catches nothing otherwise. */
.home__drop:hover::after,
.home__drop:focus-within::after,
.home__lang:hover::after,
.home__lang:focus-within::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
}


.home__drop-menu a {
    display: block;
    padding: 9px 11px;
    border-radius: 9px;
    font-size: 14px;
    white-space: nowrap;
    color: var(--soft);
}

.home__drop-menu a:hover { background: rgba(59, 169, 244, .10); color: var(--ink); }
.home__drop-menu a[aria-current="page"] { color: var(--sky); }

/* ------------------------------------------------------------ shelf head - */

.shelf__head--centred { align-items: center; }

@media (min-width: 900px) {
    .shelf__head--centred { justify-content: center; position: relative; }
    .shelf__head--centred > div:first-child { text-align: center; }
    .shelf__head--centred h2 { margin-inline: auto; }
    .shelf__head--centred .shelf__lead { margin-inline: auto; }
    .shelf__head--centred .shelf__nav { position: absolute; right: 0; bottom: 6px; }
}

/* On a phone the burger already stacks everything, so a floating panel inside
   it would be a menu inside a menu — and while it stayed `display: none`, the
   three links in it could not be reached at all. They simply become part of
   the list, under a quiet heading. */
@media (max-width: 900px) {
    .home__drop { width: 100%; }

    .home__drop-btn {
        width: 100%;
        justify-content: flex-start;
        padding: 12px 4px 4px;
        font-size: 12px;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--tangerine);
        pointer-events: none;
    }

    .home__drop-btn svg { display: none; }

    .home__drop-menu {
        display: block;
        position: static;
        min-width: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    .home__drop-menu a {
        padding: 12px 4px;
        font-size: 16px;
        border-bottom: 1px solid rgba(43, 27, 78, .06);
        border-radius: 0;
    }
}


/* -------------------------------------------------------------- numbers -- */

/* The reference puts a band of large figures across the page. Ours are counted
   from the database at render time, so they cannot say one thing while the
   library holds another. */

.numbers {
    max-width: 1180px;
    margin: 0 auto 64px;
    padding: 0 28px;
    text-align: center;
}

.numbers h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 650;
    letter-spacing: -.03em;
    margin: 6px 0 32px;
    color: var(--ink);
}

.numbers__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 22px;
    padding: 34px 28px;
    border-radius: 26px;
    background: var(--card);
    border: 1px solid rgba(43, 27, 78, .07);
    box-shadow: 0 16px 40px rgba(43, 27, 78, .06);
}

.numbers__row > div { padding: 0 10px; }

/* Each figure on a disc, the way the cast stands on theirs — all four in the
   same blue, so the row reads as one set rather than as four unrelated
   badges. As a fill the colour stays exactly itself; as text on white it had
   to be darkened until it was not our colour any more. */
.numbers__row b {
    display: inline-grid;
    place-items: center;
    width: clamp(78px, 8vw, 104px);
    height: clamp(78px, 8vw, 104px);
    border-radius: 50%;
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(30px, 3.2vw, 42px);
    font-weight: 700;
    line-height: 1;
    background: var(--sky);
    color: #fff;
}

.numbers__row span {
    display: block;
    margin-top: 10px;
    color: var(--soft);
    font-size: 14.5px;
    line-height: 1.45;
}

/* ------------------------------------------------------------- subjects -- */

/* Where the reference has a wall of partner logos, we have the subjects the
   library actually covers. */

.subjects {
    max-width: 1180px;
    margin: 0 auto 64px;
    padding: 0 28px;
    text-align: center;
}

.subjects h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 650;
    letter-spacing: -.03em;
    margin: 6px 0 10px;
    color: var(--ink);
}

.subjects__lead {
    color: var(--soft);
    max-width: 52ch;
    margin: 0 auto 26px;
    line-height: 1.6;
}

.subjects__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.subjects__chip {
    padding: 11px 20px;
    border-radius: 999px;
    border: 0;
    box-shadow: 0 6px 16px rgba(43, 27, 78, .07);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

/* Cycled fills, so the row reads as a set rather than as a list — and in the
   palette itself rather than in the muddied version of it that coloured text
   on white forced. Tangerine is left out of the cycle on purpose: at this
   size ink on it is 4:1, just under the bar for text this small. */
.subjects__chip:nth-child(4n+1) { background: var(--lilac); }
.subjects__chip:nth-child(4n+2) { background: var(--periwinkle); }
.subjects__chip:nth-child(4n+3) { background: var(--sky); }
.subjects__chip:nth-child(4n+4) { background: var(--sunshine); }

@media (max-width: 700px) {
    .numbers__row { padding: 24px 16px; gap: 18px; }
    .numbers, .subjects { padding: 0 20px; }
}

/* ------------------------------------------------- breaking out of the disc -
   The coloured circle stays put; the figure is anchored to its foot and drawn
   larger, so the head rises clear of it. Only works with the cut-out frames —
   over the original squares the whole rectangle would show. */


/* Room above for the heads, or the section clips them. */
.home__cast { padding-top: 58px; }

/* The chosen coach is marked by size, not by a ring — a second circle drawn
   around the first only competed with it. The whole face scales, disc and
   figure together, because the figure is masked to the disc: growing the
   circle alone would leave the body cut at the old radius. */
.home__cast button[aria-pressed="true"] .face img { box-shadow: none; }

.home__cast button[aria-pressed="true"] .face { transform: scale(1.1); }
.home__cast button:hover .face { transform: translateY(-4px); }
.home__cast button[aria-pressed="true"]:hover .face { transform: translateY(-4px) scale(1.1); }

/* The blink frame has to sit exactly over the idle one. */
.home__cast .home__cast-blink {
    inset: auto auto 0 50%;
    transform: translateX(-50%);
    height: 125%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: bottom center;
    border-radius: 0;

    /* Same mask as the idle frame, or the blink would flash an uncut torso. */
    -webkit-mask-image:
        radial-gradient(ellipse 50% 40% at 50% 60%, #000 99%, transparent 100%),
        linear-gradient(#000, #000);
    mask-image:
        radial-gradient(ellipse 50% 40% at 50% 60%, #000 99%, transparent 100%),
        linear-gradient(#000, #000);
    -webkit-mask-size: 100% 100%, 100% 60%;
    mask-size: 100% 100%, 100% 60%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: source-over;
    mask-composite: add;
}

/* ---------------------------------------------------------- living icons -
   The line icons sat perfectly still among blinking faces and drifting
   doodles, which made them read as placeholders. Each one now has a small
   idle movement, on its own clock so a row of them never marches in step. */

@keyframes icon-bob {
    0%, 100% { transform: translateY(0) rotate(0); }
    50%      { transform: translateY(-4px) rotate(-4deg); }
}

@keyframes icon-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
}.home__figure-icon svg,
.home__figure-icon img {
    animation: icon-bob 3.4s ease-in-out infinite;
    transform-origin: center;
}

/* Staggered, so they are never in phase with each other. */
.home__figure:nth-child(2) .home__figure-icon svg { animation-delay: .9s; animation-duration: 3.9s; }

/* A tick that lands rather than floats: the checklist marks lean in turn. */
.checklist li::before {
    animation: icon-bob 4.2s ease-in-out infinite;
}

.checklist li:nth-child(2)::before { animation-delay: .4s; }
.checklist li:nth-child(3)::before { animation-delay: .8s; }
.checklist li:nth-child(4)::before { animation-delay: 1.2s; }
.checklist li:nth-child(5)::before { animation-delay: 1.6s; }

@media (prefers-reduced-motion: reduce) {.home__figure-icon svg,
.home__figure-icon img,
.duo__orb,
.duo__orb img,
.checklist li::before { animation: none; }
}

/* The big portrait takes the chosen coach's disc colour, set from the picker.
   Kept in CSS rather than written into the script so the two stay one palette. */
.home__pip-mount { transition: background .25s ease; }

.home__pip-mount[data-disc="violet"]    { background: var(--periwinkle); }
.home__pip-mount[data-disc="tangerine"] { background: var(--tangerine); }
.home__pip-mount[data-disc="sky"]       { background: var(--sky); }
.home__pip-mount[data-disc="sun"]       { background: var(--sunshine); }
.home__pip-mount[data-disc="lilac"]     { background: var(--lilac); }


/* ==========================================================================
   The green ground
   ==========================================================================
   The site is one cream sheet laid on a deep pine ground, with an orange disc
   off the top-left corner and a yellow one off the bottom-right. The shapes
   are painted on a fixed layer behind the sheet, so they stay put while the
   page scrolls and only their arcs show in the margin around it. */

body.site-framed {
    background: #14260F;
    /* The sheet carries the page colour now; the ground must not inherit it. */
    color: var(--ink);
}

/* The two full-width bands — the closing offer and the slides of the rail —
   are one pattern, so they share one scale. It is tied to the width because
   they are: a band with a fixed height turns into a strip on a wide screen,
   which is what a fixed 340px did at 2500px across. */
body.site-framed {
    /* Grows with whichever the window has more of. Tied to the width alone,
       a band on a tall screen came out short and left the pinned rail sitting
       in a lot of empty page; capped so it still cannot outgrow the window it
       has to be pinned in. */
    --band-h: min(clamp(320px, max(24vw, 46vh), 640px), 62vh);
    --band-title: clamp(26px, 2.9vw, 56px);
    --band-text: clamp(15px, 1.15vw, 22px);
    --band-pad-y: clamp(36px, 4vw, 96px);
    --band-pad-x: clamp(24px, 7vw, 190px);
}

body.site-framed::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* Every stop fades into its own colour at zero alpha rather than into
       `transparent`, which is transparent *black* and leaves a dirty rim. The
       discs give up their edge over a pixel and a half instead of stopping
       dead: a hard stop in a gradient is not antialiased, so the rim stairs. */
    background:
        /* Orange disc, cut off by the top-left corner. */
        radial-gradient(circle at -4% -8%,
            #F2681E 0 30vw, rgba(242, 104, 30, 0) calc(30vw + 1.5px)),
        /* Yellow disc, cut off by the bottom-right corner. */
        radial-gradient(circle at 104% 108%,
            #F5C63C 0 26vw, rgba(245, 198, 60, 0) calc(26vw + 1.5px)),
        /* Two soft lifts of green, so the ground is not a flat slab. */
        radial-gradient(60vw 50vw at 6% 88%,
            rgba(96, 168, 78, .40), rgba(96, 168, 78, 0) 70%),
        radial-gradient(70vw 60vw at 96% 8%,
            rgba(58, 120, 56, .30), rgba(58, 120, 56, 0) 70%);
}

.shell {
    /* Positioned so the doodle layer hangs off the sheet rather than off the
       body — otherwise `overflow: clip` never reaches it and the drawings
       spill onto the green. `clip` rather than `hidden`: it trims the corners
       without making a scroll box, which would kill the sticky bar. */
    position: relative;
    isolation: isolate;
    overflow: clip;
    margin: clamp(10px, 3vw, 46px);
    border-radius: clamp(20px, 2.6vw, 38px);
    background: var(--paper);
    box-shadow: 0 30px 70px rgba(5, 18, 5, .45);
    min-height: calc(100vh - clamp(20px, 6vw, 92px));
}

/* Replaces the old `.home-page > …` pair: the sections are one level deeper
   now. The header keeps out of it — naming it here would overwrite `sticky`
   with `relative` — and so does the doodle layer, which stays underneath. */
.shell > *:not(.doodles):not(header) {
    position: relative;
    z-index: 1;
}

/* The bar runs the full width of the sheet and pins at its top edge. It is
   not inset: a floating pill would leave a strip of the page scrolling past
   above it, which reads as a seam rather than as a gap. The sheet's rounding
   is clipped onto it while the page sits at the top. */
body.site-framed .home__bar {
    top: 0;
    padding-inline: clamp(16px, 2.2vw, 30px);
    border-bottom: 1px solid rgba(43, 27, 78, .07);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 24px rgba(43, 27, 78, .06);
}

/* The sheet ends on the footer, so it needs the padding the page margin used
   to give it. */
body.site-framed .site-foot { padding-bottom: 34px; }

/* The sheet is narrower than the window by its margin, and `overflow: clip`
   shows up anything that was quietly running past the edge before. The single
   column has to be allowed to shrink — a bare `1fr` still floors at the widest
   word in it — and the gutters come in to buy the text its width back. */
@media (max-width: 860px) {
    body.site-framed .home__hero,
    body.site-framed .home__coaches { grid-template-columns: minmax(0, 1fr); }
    body.site-framed .home__hero { padding-inline: 18px; }
    body.site-framed .home__bar { padding-inline: 14px; }
}


/* ==========================================================================
   The rail
   ==========================================================================
   How the thing works, as a slider of full-width bands built like the one at
   the foot of the page: a coloured half carrying the words, a picture filling
   the other. One band fills the rail, so the arrows and the dots do the work
   the peeking edge of a card would otherwise do. */

.rail { padding-bottom: 72px; }

/* Takes the bands' gutter rather than the page's centred column: the slides
   below it run edge to edge, and a heading floating in the middle of a
   full-width band starts nowhere near where the band's own words do. */
.rail__head {
    margin: 0 0 24px;
    padding: 0 var(--band-pad-x);
    text-align: center;
}

.rail__head h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 650;
    line-height: 1.08;
    margin: 0;
    /* No cap: the heading reads as one line, and wraps on its own when the
       column beside the lead is too narrow to hold it. */
    max-width: none;
    text-wrap: balance;
}

/* The second half of the heading, in the orange the page uses for accents. */
.rail__head h2 em {
    font-style: normal;
    color: var(--tangerine);
}

/* Full width of the sheet: the bands are not cards and take no gutter. */
.rail__stage { position: relative; }

/* Scaffolding for the pinned rail, and nothing at all without it. */
.rail__step,
.rail__mark { display: none; }

.rail__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.rail__track::-webkit-scrollbar { display: none; }

.rail__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    background: var(--tint);
    color: #fff;
}

.rail__words {
    align-self: center;
    padding: var(--band-pad-y) var(--band-pad-x);
}

.rail__slide h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: var(--band-title);
    font-weight: 650;
    line-height: 1.12;
    margin: 0 0 12px;
    max-width: 14ch;
}

.rail__slide p {
    margin: 0 0 24px;
    font-size: var(--band-text);
    max-width: 34ch;
    color: rgba(255, 255, 255, .88);
}

/* White carries on all five grounds, which a tinted pill would not. */
.rail__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    font: inherit;
    cursor: pointer;
    padding: clamp(12px, .9vw, 18px) clamp(22px, 1.7vw, 34px);
    border-radius: 999px;
    background: #fff;
    color: #2E2103;
    font-weight: 650;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(20, 12, 2, .18);
}

.rail__more svg { width: 16px; height: 16px; }
.rail__more:hover { background: #FFFDF8; }

.rail__pic {
    position: relative;
    min-height: var(--band-h);
}

/* A slide may carry a clip instead of a still, as the closing offer does. */
.rail__pic img,
.rail__pic video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 32%;
}

/* The drawer under a band takes its slide's colour too, so the two read as
   one piece rather than as a panel that happened to open. */
.rail__slide--tangerine, .rail__extra--tangerine { --tint: #FF6B35; }
.rail__slide--green,     .rail__extra--green     { --tint: #2E9E5B; }
.rail__slide--sky,       .rail__extra--sky       { --tint: #3BA9F4; }
.rail__slide--violet,    .rail__extra--violet    { --tint: #6C3FE0; }
.rail__slide--sunshine,  .rail__extra--sunshine  { --tint: #FFC93C; }

/* Yellow will not carry white text, so this one turns its words over. */
.rail__slide--sunshine { color: #3A2A05; }
.rail__slide--sunshine p { color: rgba(58, 42, 5, .8); }

/* --------------------------------------------------------- sound button -- */

/* Sits in the corner of the picture rather than over the words. One press
   speaks for every clip on the page: the button carries the choice, not the
   clip it happens to be standing on. */
.clip-sound {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(20, 12, 2, .5);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background .15s ease, transform .15s ease;
}

.clip-sound:hover { background: rgba(20, 12, 2, .7); transform: scale(1.06); }
.clip-sound svg { width: 20px; height: 20px; }

/* Crossed out until the sound is asked for, so the button shows the state it
   is in rather than the state it would move to. */
.clip-sound[aria-pressed="false"] .clip-sound__wave { display: none; }
.clip-sound[aria-pressed="true"] .clip-sound__slash { display: none; }

/* ------------------------------------------------------------- drawer -- */

/* `hidden` is a UA rule, and any `display` of ours would quietly beat it. */
.rail__extra[hidden] { display: none; }

.rail__extra {
    /* The same width and height as the band it opens under, as asked, and
       its colour carried down into the dark — enough of it to tell the five
       drawers apart, not enough to stop white text reading on them. The band
       above ends against it cleanly, so there is no rule between: a line in
       the band's own colour looks like a strip of it left behind. */
    min-height: var(--band-h);
    display: flex;
    align-items: center;
    background: #241A44;
    background: color-mix(in srgb, var(--tint) 26%, #241A44);
    color: #fff;
}

.rail__extra-in {
    padding: var(--band-pad-y) var(--band-pad-x);
    max-width: 74ch;
}

.rail__extra p {
    margin: 0 0 22px;
    font-size: var(--band-text);
    line-height: 1.6;
    color: rgba(255, 255, 255, .84);
}

.rail__extra-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: clamp(12px, .9vw, 18px) clamp(22px, 1.7vw, 34px);
    border-radius: 999px;
    background: var(--tint);
    color: #fff;
    font-weight: 650;
    text-decoration: none;
}

.rail__extra--sunshine .rail__extra-link { color: #3A2A05; }
.rail__extra-link svg { width: 16px; height: 16px; }
.rail__extra-link:hover { filter: brightness(1.08); }

/* The chevron points down to open and up to close, so the button says which
   way it goes without reading the label. */
.rail__more[aria-expanded="true"] svg { transform: rotate(180deg); }
.rail__more svg { transition: transform .2s ease; }

@media (max-width: 860px) {
    /* Stacked, the words come first and the picture sits under them, as the
       band at the foot of the page does. */
    .rail__slide { grid-template-columns: minmax(0, 1fr); }
    .rail__pic { min-height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
    .rail__track { scroll-behavior: auto; }
}

/* --------------------------------------------------------- pinned rail --
   On a desktop the band stays put while the page scrolls past it, and how
   far it has been passed is what moves the slides along — no clicking, and
   no hijacked scrolling either: the page scrolls at its own speed, the track
   just follows. The stage is tall enough to hold that travel.

   Left out below 861px, where pinning a band eats the whole screen, and for
   anyone who has asked for less motion. Both fall back to the swipeable rail
   the base rules already describe. */
@media (min-width: 861px) and (min-height: 760px) and (prefers-reduced-motion: no-preference) {
    /* The page rests on the rail's own stops. `proximity`, not `mandatory`:
       mandatory would drag the whole document onto them from anywhere, since
       they are the only snap points on it. */
    html { scroll-snap-type: y proximity; }

    /* Both of these are measured and written back by the script — where the
       band comes to rest depends on how tall it turned out, and a step has to
       be exactly that plus the rest, or the stops land between slides. The
       fallbacks are only for the moment before the script runs. */
    .rail__sticky {
        position: sticky;
        top: var(--rail-rest, 92px);
    }

    .rail__step {
        display: block;
        height: var(--rail-step, 330px);
        /* Where the stop sits inside the step. The step is a few turns of the
           wheel, which is not the same as the height the band happens to take
           up, so the difference between the two is taken out here. */
        scroll-margin-top: var(--rail-lead, 0px);
        scroll-snap-align: start;
    }

    .rail__mark {
        display: block;
        position: absolute;
        top: 0;
        width: 1px;
        height: 1px;
        scroll-margin-top: var(--rail-rest, 92px);
        scroll-snap-align: start;
    }

    /* The frame is the window; the strip of slides moves behind it. They
       cannot be the same element: whatever clips does so in its own
       coordinates, so moving it takes the window along and nothing passes. */
    .rail__frame { overflow: hidden; }

    /* Moved as one strip rather than scrolled — a scroll box here would fight
       the page for the same gesture. `--i` is a whole slide, never a fraction:
       a strip that answers every pixel of the wheel is never still, and reads
       as something nudged by accident. It holds, then glides. */
    .rail__track {
        overflow: visible;
        scroll-snap-type: none;
        transform: translate3d(calc(var(--i, 0) * -100%), 0, 0);
        transition: transform .5s cubic-bezier(.4, 0, .2, 1);
    }

    .rail__slide { scroll-snap-align: none; }

    /* Heading, band and drawer are pinned as one block, so they have to fit
       the window together: at full height the three of them run off the
       bottom, and what falls off is the drawer's way on to the page. So the
       band gives up some of its height for as long as a drawer is open. */
    .rail__stage.is-open .rail__pic,
    .rail__stage.is-open .rail__extra { min-height: min(var(--band-h), 34vh); }
}

/* Nothing drives the rail for a reader who has asked for less motion, and
   with the arrows gone there is nothing to press either — so on a wide screen
   the slides simply stack and all five are there to read. */
@media (min-width: 861px) and (prefers-reduced-motion: reduce) {
    .rail__track { display: block; overflow: visible; }
    .rail__slide { flex: none; }
}


/* ==========================================================================
   The hero
   ==========================================================================
   Built like the bands below it: full width of the sheet, the words in one
   half against the paper, the film filling the other to the edge. It was the
   one section still sitting in the centred column with its film in a rounded
   card, so the page opened in a different language from the one it goes on
   in. The words stay on the paper rather than on a colour — the coloured
   bands start below, and a block of colour under the bar would fight it. */

body.site-framed .home__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* A coloured half, like the slides of the rail — in the blue one of the cast
   stands on, which is one of the five colours behind the avatars. Those five
   are all light, so the words go dark on them rather than white, the way the
   yellow band at the foot of the page already does. */
body.site-framed .home__copy {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* The same gutter every band takes, so the whole page starts on one line. */
    padding: var(--band-pad-y) var(--band-pad-x);
    background: var(--sky);
    color: #fff;
}

body.site-framed .home__copy h1 { color: #fff; }

body.site-framed .home__copy .home__kicker { color: #fff; }
body.site-framed .home__lead { color: rgba(255, 255, 255, .92); }
body.site-framed .home__aside p { color: rgba(255, 255, 255, .88); }
body.site-framed .home__figure b { color: #fff; }
body.site-framed .home__figure-label { color: rgba(255, 255, 255, .86); }
body.site-framed .home__aside::before { background: #fff; }

/* At even halves the two figures fell one under the other by a few pixels,
   and the column grew tall enough to crop the film down to a face. */
body.site-framed .home__figures { gap: 20px; }
body.site-framed .home__figure { max-width: 210px; }

body.site-framed .home__copy h1 {
    font-size: clamp(34px, 4.4vw, 66px);
    line-height: 1.04;
    margin: 0 0 18px;
}

/* No colour on the accent line here: on this blue, orange comes out at 1.1:1
   and yellow at 1.7:1, so neither shows. The second line keeps the emphasis
   it gets from being second. */
body.site-framed .home__copy h1 em {
    font-style: normal;
    color: inherit;
}

body.site-framed .home__lead {
    font-size: var(--band-text);
    max-width: 38ch;
}

/* The ask is the same white pill as the one in the closing offer. */
body.site-framed .home__ask {
    align-items: center;
    width: min(100%, clamp(340px, 24vw, 470px));
    border-radius: 999px;
    padding: 7px 7px 7px 22px;
    box-shadow: 0 10px 26px rgba(43, 27, 78, .1);
}

body.site-framed .home__ask:focus-within {
    box-shadow: 0 0 0 3px rgba(59, 169, 244, .3), 0 10px 26px rgba(43, 27, 78, .1);
}

body.site-framed .home__ask input { font-size: clamp(15px, .95vw, 18px); }

body.site-framed .home__ask button {
    flex: none;
    display: grid;
    place-items: center;
    width: 64px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
}

body.site-framed .home__ask button svg { width: 18px; height: 18px; }

/* The film fills its half rather than floating in it as a rounded card. */
body.site-framed .home__media {
    position: relative;
    min-height: var(--band-h);
}

body.site-framed .home__film {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    aspect-ratio: auto;
    object-fit: cover;
}

@media (max-width: 860px) {
    body.site-framed .home__hero { grid-template-columns: minmax(0, 1fr); }
    body.site-framed .home__media { min-height: 240px; }
}


/* ==========================================================================
   Legal pages
   ==========================================================================
   Numbered clauses on a sheet, so a question about the terms can be answered
   by pointing at a number instead of quoting a paragraph. */

.legal-date {
    display: inline-block;
    margin-top: 22px;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid rgba(43, 27, 78, .1);
    font-size: 13.5px;
    color: var(--soft);
}

.legal__part { scroll-margin-top: 90px; }

.legal__part + .legal__part {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid rgba(43, 27, 78, .08);
}

.legal h2 {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 650;
    letter-spacing: -.02em;
    font-size: 22px;
    margin: 0 0 12px;
}

/* The number is a link to its own clause, so a paragraph can be cited. */
.legal__no {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--tangerine);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    align-self: center;
}

.legal__no:hover { background: var(--ink); color: #fff; }

.legal p {
    color: var(--soft);
    line-height: 1.7;
    max-width: 68ch;
    margin: 0 0 12px;
}

.legal p:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
    .legal h2 { font-size: 19px; gap: 10px; }
}

/* The address on the contact page, beside the form rather than only inside it. */
.site-mail {
    margin-top: 18px;
    font-size: 16px;
}

.site-mail a {
    color: var(--sky);
    font-weight: 650;
    text-decoration: none;
    transition: opacity .15s ease;
}

.site-mail a:hover { opacity: .7; }


/* ------------------------------------------------------------- password -- */

/* The eye that turns the dots into letters. */
.pw { position: relative; display: block; }

.pw > input { width: 100%; padding-right: 46px; }

.pw__eye {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--soft);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.pw__eye:hover { background: rgba(43, 27, 78, .06); color: var(--ink); }
.pw__eye svg { width: 19px; height: 19px; }

.auth__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 22px;
}

.auth__row .auth__remember { margin-bottom: 0; }

.auth__forgot {
    color: var(--sky);
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}

.auth__forgot:hover { text-decoration: underline; }


/* -------------------------------------------------------- contact cast -- */

/* The form keeps the middle; the cast stands beside it. Positioned rather
   than laid out, so adding a face never moves the form. */
.contact-stage {
    position: relative;
    /* Wider than the 1180 the rest of the page uses: the form stays 820 and
       centred, and the extra width is gutter for the cast to stand in. */
    max-width: 1320px;
    margin: 0 auto;
    /* Room under the form for the dragon to stand in — enough for the whole
       drawing, not just the disc. At less than this his head rose past the
       bottom of the card and the white of it showed behind him. The frame is
       125% of the disc, so 140px of disc needs 175px of clearance. */
    padding: 0 28px 246px;
}

/* The exception: the form keeps the narrower card. The cast either side is
   placed from the gutter this leaves, and widening it would stand them on the
   form. */
.contact-stage .site-sheet {
    position: relative;
    z-index: 1;
    max-width: 820px;
}

/* The gutter beside the 820px form is 152px once the stage reaches its full
   width, so the faces are sized to sit inside it rather than on the card. */
.contact-cast {
    position: absolute;
    top: 8%;
    display: grid;
    gap: 26px;
    width: 168px;
}

/* Out to the edge of the stage rather than inside its gutter, which buys the
   faces both their size and clear air between them and the form: 40px from
   the card at full width, where before they were almost touching it. */
.contact-cast--left { left: 0; }
.contact-cast--right { right: 0; }

/* The second of each pair steps down and in, so the two do not read as a
   column of buttons. The step stays inside the gutter. */
.contact-cast--left .face:nth-child(2) { transform: translate(20px, 24px); }
.contact-cast--right .face:nth-child(2) { transform: translate(-20px, 24px); }

.contact-cast__pip {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 168px;
    transform: translateX(-50%);
    z-index: 2;
}

/* The figure stands taller out of its disc here than it does in the home
   picker: at 125% the top of the circle sat behind the head and read as a
   patch of colour around it. At 140% the head is clear of the rim. */
.contact-stage .face--out img { height: 140%; }

/* The mask has to follow. Its numbers are worked out from the frame height,
   and the shared rule assumes 125%: at 140% the ellipse fell short of the
   rim and the body was cut a few pixels above the circle it stands in.
   The disc is 1/1.4 = 71.4% of this frame and sits at its foot, so its centre
   is 64.3% down and its vertical radius is 35.7%. */
.contact-stage .face--out img {
    -webkit-mask-image:
        radial-gradient(ellipse 50% 35.7% at 50% 64.3%, #000 99%, transparent 100%),
        linear-gradient(#000, #000);
    mask-image:
        radial-gradient(ellipse 50% 35.7% at 50% 64.3%, #000 99%, transparent 100%),
        linear-gradient(#000, #000);
    -webkit-mask-size: 100% 100%, 100% 64.3%;
    mask-size: 100% 100%, 100% 64.3%;
}


/* Narrower than this the gutter cannot hold a face, and they would stand on
   the form instead of beside it. */
@media (max-width: 1280px) {
    .contact-cast,
    .contact-cast__pip { display: none; }
}


/* ------------------------------------------------------------- coaches -- */

/* The cast on their own page, laid out like the picker on the home page:
   a figure standing out of its coloured disc, the name under it. No card
   around them — the disc is the shape the eye follows. */
.coach-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 28px 20px;
    max-width: 1000px;
    /* The heads stand a quarter of the disc's height above the box they are
       laid out in, so the row needs that much again before it reads as clear
       of the line above. Measured from the drawing, not from the box. */
    margin-top: 78px;
}

.coach-card {
    text-align: center;
    background: transparent;
    border: 0;
    padding: 0;
}

.coach-card .face {
    max-width: 150px;
    margin: 0 auto 14px;
}

.coach-card h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 20px;
    font-weight: 650;
    margin: 0 0 6px;
    color: var(--ink);
}

.coach-card p {
    color: var(--soft);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 22ch;
}

@media (max-width: 560px) {
    .coach-row { gap: 22px 14px; }
    .coach-card .face { max-width: 118px; }
}

/* ------------------------------------------------------- impersonating -- */

/* The same banner the app pages carry, for the marketing pages an admin may
   wander onto while working inside a family's account. */
.impersonating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 10px 20px;
    background: var(--tangerine);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.impersonating b { font-weight: 800; }

.impersonating button {
    padding: 6px 16px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}


/* ----------------------------------------------------- accepting terms -- */

/* The tick on the sign-up form, and the page shown when the wording changes. */
.auth__terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14.5px;
    color: var(--soft);
    cursor: pointer;
}

.auth__terms input {
    width: 17px;
    height: 17px;
    margin-top: 2px;
    flex: none;
    accent-color: var(--tangerine);
}

.auth__terms a { color: var(--sky); font-weight: 650; }

.terms-accept {
    max-width: 1180px;
    margin: 0 auto;
}

.terms-accept__tick {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.terms-accept__tick input {
    width: 19px;
    height: 19px;
    margin-top: 3px;
    flex: none;
    accent-color: var(--tangerine);
}

.terms-accept__row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 22px;
}