/* tutor.new site design system, aligned with the Expo app theme (apps/expo/theme.ts):
   cream surfaces, forest-green ink, subject colours as accents, Sour Gummy + Nunito.
   Loaded only by pages using the layouts/site.njk shell. Prefix: s- (site), fs- (session preview). */

/* Self-hosted (shared/assets/site/fonts, OFL): loading them from Google's servers hands every
   visitor's IP address to Google, which German courts have ruled needs consent. */
@font-face { font-family: "Nunito"; font-style: italic; font-weight: 400; font-display: swap; src: url("/site/fonts/nunito-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: italic; font-weight: 400; font-display: swap; src: url("/site/fonts/nunito-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/site/fonts/nunito-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/site/fonts/nunito-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sour Gummy"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/site/fonts/sour-gummy-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Sour Gummy"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/site/fonts/sour-gummy-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
    --s-bg: #f9f1e8;
    --s-bg-2: #f6ecdf;
    --s-bg-3: #ebdecb;
    --s-ink: #0e3322;
    --s-ink-2: #3c5246;
    --s-muted: #6c7a89;
    --s-line: #e7dccb;
    --s-line-cool: #e8ecef;
    --s-card: #ffffff;
    --s-paper: #f7f9fb;
    --s-bubble: #f4e6d9;
    --s-sky: #0ea5e9;
    --s-rose: #f43f5e;
    --s-yellow: #facc15;
    --s-indigo: #6366f1;
    --s-emerald: #34d399;
    --s-orange: #f97316;
    --s-teal: #14b8a6;
    --s-purple: #a855f7;
    --s-success: #22c55e;
    --s-error: #ef4444;
    --s-call: linear-gradient(100deg, #ffaf7b, #d76d77 38%, #3a1c71 100%);
    --s-display: "Sour Gummy", ui-rounded, "Nunito", system-ui, sans-serif;
    --s-text: "Nunito", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --s-r-m: 8px;
    --s-r-l: 16px;
    --s-r-xl: 24px;
    --s-shadow: 0 1px 0 rgba(14, 51, 34, .05), 0 18px 44px rgba(14, 51, 34, .1);
    --s-shadow-sm: 0 1px 0 rgba(14, 51, 34, .05), 0 6px 18px rgba(14, 51, 34, .07);
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
    -webkit-text-size-adjust: 100%;
}

.s-body {
    margin: 0;
    background: var(--s-bg);
    color: var(--s-ink-2);
    font-family: var(--s-text);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.s-body a {
    color: inherit;
}

.s-body img,
.s-body svg {
    max-width: 100%;
}

/* :where() keeps the reset at element specificity so component margins win. */
:where(.s-body) :is(h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote) {
    margin: 0;
    padding: 0;
}

:where(.s-body) :is(ul, ol) {
    list-style: none;
}

.s-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.s-skip {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--s-ink);
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
}

.s-skip:focus {
    top: 12px;
}

:focus-visible {
    outline: 3px solid var(--s-indigo);
    outline-offset: 3px;
    border-radius: 6px;
}

.s-wrap {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
}

.s-wrap-narrow {
    width: min(820px, calc(100% - 40px));
    margin: 0 auto;
}

/* ---------- Header: floating pill, like the app's glass session header ---------- */

.s-header {
    position: sticky;
    top: 0;
    z-index: 60;
    padding: 12px 16px 0;
    pointer-events: none;
}

.s-nav {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(1120px, 100%);
    margin: 0 auto;
    padding: 8px 10px 8px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--s-line);
    background: rgba(249, 241, 232, .82);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: var(--s-shadow-sm);
}

.s-logo {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    color: var(--s-ink);
    font-family: var(--s-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
}

.s-logo img {
    width: 34px;
    height: 34px;
    border-radius: 12px;
}

/* Audience switch: reads as a quiet label beside the wordmark, not as navigation. */

.s-switch {
    position: relative;
    margin-right: auto;
}

.s-switch summary {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 7px 12px;
    border-radius: 999px;
    color: var(--s-ink-2);
    font-family: var(--s-display);
    font-size: 15.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
}

.s-switch summary::-webkit-details-marker {
    display: none;
}

.s-switch summary:hover,
.s-switch[open] summary {
    background: var(--s-bg-2);
    color: var(--s-ink);
}

.s-switch summary svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .18s ease;
}

.s-switch[open] summary svg {
    transform: rotate(180deg);
}

.s-switch-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 10;
    display: grid;
    gap: 2px;
    width: max-content;
    padding: 6px;
    border-radius: 18px;
    border: 1.5px solid var(--s-line);
    background: var(--s-card);
    box-shadow: 0 14px 34px rgba(14, 51, 34, .16);
    animation: s-switch-in .16s ease both;
}

@keyframes s-switch-in {
    from { opacity: 0; transform: translateY(-4px); }
}

.s-switch-menu a {
    display: block;
    padding: 10px 18px;
    border-radius: 13px;
    font-family: var(--s-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--s-ink);
    white-space: nowrap;
    text-decoration: none;
}

.s-switch-menu a:hover {
    background: var(--s-bg-2);
}

.s-switch-menu a[aria-current="page"] {
    background: var(--s-bg-3);
}

/* The full audience title needs the room; below this the header would wrap. */
@media (max-width: 980px) {
    .s-switch-rest {
        display: none;
    }
}

/* Three controls have to share a phone's width, so the labels shorten in steps
   while the accessible names stay complete. */
@media (max-width: 700px) {
    .s-switch-prefix {
        display: none;
    }
}

.s-login-narrow,
.s-switch-narrow {
    display: none;
}

@media (max-width: 430px) {
    .s-nav {
        gap: 6px;
        padding-inline: 8px 8px;
    }

    .s-switch summary,
    .s-navlink {
        padding-inline: 8px;
        font-size: 15px;
    }

    .s-nav .s-btn-sm {
        padding-inline: 14px;
    }

    .s-login-wide,
    .s-switch-wide {
        display: none;
    }

    .s-login-narrow,
    .s-switch-narrow {
        display: inline;
    }
}

/* The smallest phones (320px) need a last squeeze to keep all four controls on one line. */
@media (max-width: 350px) {
    .s-header {
        padding-inline: 8px;
    }

    .s-nav {
        gap: 2px;
        padding-inline: 6px;
    }

    .s-switch summary,
    .s-navlink {
        padding-inline: 6px;
        font-size: 14px;
    }

    .s-nav .s-btn-sm {
        padding-inline: 11px;
    }
}

/* Scoped to the header: only there does the wordmark compete with the sign-in. */
@media (max-width: 520px) {
    .s-header .s-logo span {
        display: none;
    }

    .s-login-long {
        display: none;
    }
}

/* ---------- Landing brand mark (the landing page carries no header) ---------- */

/* The mark sits in the page's top-left corner, outside the content column, like a letterhead:
   it lines up with the headline's first line and takes no height. Where the centred headline
   comes close, only the icon remains; phones have no margin, so there it is a slim row. */
.s-landing-brand {
    display: flex;
    margin-bottom: 16px;
}

.s-landing-brand .s-logo {
    gap: 12px;
    font-size: 24px;
}

.s-landing-brand img {
    width: 48px;
    height: 48px;
    border-radius: 14px;
}

@media (min-width: 901px) {
    .s-landing-hero { position: relative; }
    .s-landing-brand { position: absolute; top: clamp(28px, 3.2vw, 44px); left: clamp(24px, 2.6vw, 40px); margin: 0; }
}

@media (min-width: 901px) and (max-width: 1239px) {
    .s-landing-brand .s-logo > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (max-width: 900px) {
    .s-landing-brand img { width: 40px; height: 40px; border-radius: 12px; }
    .s-landing-brand .s-logo { font-size: 21px; }
}

/* Shared pages route into an audience instead of offering a sign-in. */
.s-nav-audiences {
    display: flex;
    gap: 2px;
    margin-left: auto;
}

/* Secondary header link, quieter than the sign-in it sits next to. */
.s-navlink {
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--s-ink);
    font-family: var(--s-display);
    font-size: 15.5px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

.s-navlink:hover {
    background: var(--s-bg-2);
}

.s-navlink[aria-current="page"] {
    background: var(--s-bg-3);
}

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

.p-table {
    overflow: hidden;
    padding: 0 0 4px;
}

.p-table .t-factsheet-title {
    padding: 16px 22px 12px;
    border-bottom: 1.5px solid var(--s-line);
}

.p-table table {
    width: 100%;
    border-collapse: collapse;
}

.p-table th,
.p-table td {
    padding: 12px 22px;
    text-align: left;
    font-size: 16.5px;
}

.p-table thead th {
    padding-block: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--s-muted);
}

.p-table tbody th {
    font-weight: 600;
    color: var(--s-ink);
}

.p-table tbody tr + tr th,
.p-table tbody tr + tr td {
    border-top: 1px solid var(--s-line);
}

.p-table .p-num {
    text-align: right;
    font-family: var(--s-display);
    font-weight: 600;
    color: var(--s-ink);
    white-space: nowrap;
}

.p-table thead .p-num {
    font-family: var(--s-text);
    color: var(--s-muted);
}

.p-table .t-factsheet-foot {
    margin: 0;
    padding: 14px 22px 12px;
}

@media (max-width: 520px) {
    .p-table th,
    .p-table td {
        padding-inline: 14px;
        font-size: 15.5px;
    }
}

/* ---------- Tier comparison ---------- */

.p-compare {
    overflow: hidden;
    padding: 0 0 4px;
}

.p-compare .t-factsheet-title {
    padding: 16px 22px 12px;
    border-bottom: 1.5px solid var(--s-line);
}

.p-compare table {
    width: 100%;
    border-collapse: collapse;
}

.p-compare th,
.p-compare td {
    padding: 13px 18px;
    text-align: left;
    vertical-align: top;
}

.p-compare thead th {
    font-family: var(--s-display);
    font-size: 16.5px;
    font-weight: 600;
    color: var(--s-ink);
    border-bottom: 1.5px solid var(--s-line);
}

.p-compare thead th small,
.p-compare tbody th small {
    display: block;
    font-family: var(--s-text);
    font-size: 13.5px;
    font-weight: 400;
    color: var(--s-muted);
}

.p-compare tbody th {
    font-size: 16px;
    font-weight: 600;
    color: var(--s-ink);
}

.p-compare tbody tr + tr th,
.p-compare tbody tr + tr td {
    border-top: 1px solid var(--s-line);
}

/* The free column is the one people scan for what is missing, so its state is
   spelled out rather than left to a tick or a dash. */
.p-state {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: 15.5px;
    font-weight: 600;
}

.p-state::before {
    content: "";
    flex: 0 0 auto;
    align-self: center;
    width: 17px;
    height: 17px;
    border-radius: 999px;
}

.p-state.is-yes {
    color: #065f46;
}

.p-state.is-yes::before {
    background: #10b981 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.500 10.400l3 3 6-6.600' fill='none' stroke='%23fff' stroke-width='2.400' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 17px no-repeat;
}

.p-state.is-limited {
    color: #92400e;
}

.p-state.is-limited::before {
    background: #f59e0b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.500 10h9' fill='none' stroke='%23fff' stroke-width='2.400' stroke-linecap='round'/%3E%3C/svg%3E") center / 17px no-repeat;
}

.p-state.is-no {
    color: var(--s-muted);
    font-weight: 400;
}

.p-state.is-no::before {
    background: var(--s-bg-3);
}

/* Three columns do not fit a phone, and a table that scrolls sideways hides
   exactly the column people came to read. Stack each row instead and let the
   cells name their own tier. */
@media (max-width: 620px) {
    .p-compare table,
    .p-compare tbody,
    .p-compare tr,
    .p-compare tbody th,
    .p-compare tbody td {
        display: block;
        width: auto;
    }

    .p-compare thead {
        display: none;
    }

    .p-compare tbody tr {
        padding: 15px 16px 13px;
    }

    .p-compare tbody tr + tr {
        border-top: 1px solid var(--s-line);
    }

    .p-compare tbody tr + tr th,
    .p-compare tbody tr + tr td,
    .p-compare tbody th,
    .p-compare tbody td {
        padding: 0;
        border-top: 0;
    }

    .p-compare tbody th {
        margin-bottom: 9px;
        font-size: 16px;
    }

    .p-compare tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 14px;
        margin-top: 5px;
    }

    .p-compare tbody td::before {
        content: attr(data-tier);
        font-size: 14.5px;
        color: var(--s-muted);
    }

    .p-state {
        font-size: 15px;
        gap: 7px;
    }
}

/* ---------- App store buttons ---------- */

.f-stores {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.f-stores a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px 9px 14px;
    border-radius: 14px;
    border: 1.5px solid var(--s-ink);
    background: var(--s-ink);
    color: #fff;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

.f-stores a:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(14, 51, 34, .24);
}

.f-stores svg {
    width: 24px;
    height: 24px;
}

.f-stores .f-store-apple {
    fill: #fff;
}

.f-stores span {
    display: grid;
    font-family: var(--s-display);
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.15;
}

.f-stores small {
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: .02em;
    opacity: .8;
}

/* On the dark closing panel the buttons invert so they stay legible. */
.f-stores.is-light a {
    background: #fff;
    border-color: #fff;
    color: var(--s-ink);
}

.f-stores.is-light .f-store-apple {
    fill: var(--s-ink);
}

/* ---------- Buttons ---------- */

.s-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    padding: 12px 24px;
    border: 0;
    border-radius: 999px;
    font-family: var(--s-display);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.15;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.s-btn:hover {
    transform: translateY(-2px);
}

.s-btn:active {
    transform: translateY(0);
}

.s-btn-sm {
    min-height: 40px;
    padding: 8px 20px;
    font-size: 16px;
}

.s-btn-primary {
    background: var(--s-ink);
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(14, 51, 34, .22);
}

.s-btn-primary:hover {
    box-shadow: 0 12px 26px rgba(14, 51, 34, .28);
}

.s-btn-soft {
    background: var(--s-bg-3);
    color: var(--s-ink) !important;
}

.s-btn-soft:hover {
    background: #e4d4bc;
}

.s-btn-light {
    background: #fff;
    color: var(--s-ink) !important;
}

.s-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.s-link {
    font-weight: 700;
    color: var(--s-ink) !important;
    text-decoration: underline;
    text-decoration-color: var(--s-emerald);
    text-decoration-thickness: 2.5px;
    text-underline-offset: 4px;
}

.s-link:hover {
    text-decoration-color: var(--s-ink);
}

/* ---------- Type ---------- */

.s-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--s-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--s-ink);
}

.s-eyebrow::before {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--dot, var(--s-emerald));
}

.s-h1,
.s-h2,
.s-h3 {
    font-family: var(--s-display);
    color: var(--s-ink);
    font-weight: 700;
    text-wrap: balance;
}

.s-h1 {
    font-size: clamp(36px, 5.4vw, 62px);
    line-height: 1.04;
    letter-spacing: -.005em;
}

.s-h2 {
    font-size: clamp(28px, 3.6vw, 42px);
    line-height: 1.1;
}

.s-h3 {
    font-size: 22px;
    line-height: 1.2;
    font-weight: 600;
}

.s-lead {
    font-size: clamp(18px, 1.7vw, 20.5px);
    line-height: 1.55;
    color: var(--s-ink-2);
    text-wrap: pretty;
}

.s-mark {
    background: linear-gradient(transparent 62%, rgba(52, 211, 153, .45) 62% 94%, transparent 94%);
    border-radius: 2px;
}

.s-section {
    padding: clamp(64px, 8vw, 104px) 0;
}

/* the footer's own top margin already separates the closing section */
.s-section-flush {
    padding-bottom: 0;
}

.s-section-tint {
    background: var(--s-bg-2);
    border-block: 1.5px solid var(--s-line);
}

.s-section-head {
    display: grid;
    gap: 14px;
    max-width: 760px;
    margin-bottom: clamp(32px, 4vw, 52px);
}

.s-section-head.is-center {
    margin-inline: auto;
    text-align: center;
    justify-items: center;
}

.s-section-head.is-center .s-question {
    justify-self: center;
}

/* Inner question of the audience, set like a voice transcription bubble in the chat. */
.s-question {
    display: inline-block;
    justify-self: start;
    padding: 10px 18px;
    border-radius: 22px 22px 22px 6px;
    background: rgba(14, 51, 34, .07);
    border: 1.5px solid rgba(99, 102, 241, .32);
    color: var(--s-ink);
    font-size: 16.5px;
    font-weight: 600;
    font-style: italic;
    line-height: 1.4;
}

/* ---------- Cards ---------- */

.s-card {
    background: var(--s-card);
    border: 1.5px solid var(--s-line);
    border-radius: var(--s-r-xl);
    box-shadow: var(--s-shadow-sm);
}

.s-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.s-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.s-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 980px) {
    .s-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .s-grid-3,
    .s-grid-2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 520px) {
    .s-grid-4 {
        grid-template-columns: minmax(0, 1fr);
    }
}

.s-checks {
    display: grid;
    gap: 10px;
}

.s-checks li {
    position: relative;
    padding-left: 30px;
    line-height: 1.45;
}

.s-checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--dot, var(--s-emerald)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.500 10.400l3 3 6-6.600' fill='none' stroke='%230e3322' stroke-width='2.200' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* ---------- Landing ---------- */

.s-landing-hero {
    padding: clamp(28px, 3.2vw, 44px) 0 0;
    text-align: center;
}

.s-landing-hero .s-h1 {
    max-width: 760px;
    margin: 0 auto 16px;
    font-size: clamp(34px, 4.4vw, 54px);
}

.s-landing-hero .s-lead {
    max-width: 760px;
    margin: 0 auto clamp(28px, 3.2vw, 44px);
}

/* The preview is zoomed out (not cropped) on shorter screens, so the choice below it stays on the
   first screen, and slightly reduced even on tall screens. */
@media (min-width: 901px) { .s-landing-hero .fs-figure { zoom: .9; } }
@media (min-width: 901px) and (max-height: 949px) { .s-landing-hero .fs-figure { zoom: .8; } }
@media (min-width: 901px) and (max-height: 879px) { .s-landing-hero .fs-figure { zoom: .7; } }
@media (min-width: 901px) and (max-height: 819px) { .s-landing-hero .fs-figure { zoom: .62; } }
@media (min-width: 901px) and (max-height: 759px) { .s-landing-hero .fs-figure { zoom: .54; } }
@media (min-width: 901px) and (max-height: 699px) { .s-landing-hero .fs-figure { zoom: .48; } }

.s-choose {
    padding: clamp(28px, 3.2vw, 44px) 0 clamp(56px, 7vw, 90px);
    text-align: center;
}

.s-choose-title {
    margin-bottom: 22px;
    font-family: var(--s-display);
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 600;
    color: var(--s-ink);
}

.s-choose-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    width: min(880px, 100%);
    margin: 0 auto;
}

@media (max-width: 720px) {
    .s-choose-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.s-choice {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-radius: 20px;
    border: 2px solid var(--s-ink);
    text-align: left;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease;
}

.s-choice:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(14, 51, 34, .18);
}

.s-choice-families {
    background: var(--s-ink);
    color: #fff !important;
}

.s-choice-teachers {
    background: #fff;
    color: var(--s-ink) !important;
}

.s-choice-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .14);
    font-size: 22px;
}

.s-choice-teachers .s-choice-icon {
    background: var(--s-bg-2);
}

.s-choice b {
    display: block;
    font-family: var(--s-display);
    font-size: clamp(18px, 1.7vw, 21px);
    font-weight: 600;
    line-height: 1.15;
}

.s-choice small {
    display: block;
    margin-top: 4px;
    font-size: 15px;
    line-height: 1.35;
    opacity: .82;
}

.s-choice > svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .16s ease;
}

.s-choice:hover > svg {
    transform: translateX(4px);
}

.s-choose-note {
    margin-top: 20px;
    font-size: 15px;
    color: var(--s-muted);
}

/* ---------- Session preview (replica of the Expo live focus session) ---------- */

.fs-figure {
    width: min(1080px, calc(100% - 32px));
    margin: 0 auto;
}

.fs {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 42fr) 0 minmax(0, 58fr);
    height: 600px;
    border-radius: 22px;
    border: 1.5px solid var(--s-line);
    background: var(--s-bg);
    box-shadow: 0 2px 0 rgba(14, 51, 34, .05), 0 34px 80px rgba(14, 51, 34, .16);
    overflow: hidden;
    text-align: left;
    font-family: var(--s-text);
    font-size: 15px;
    line-height: 1.5;
    color: #11181c;
    user-select: none;
}

.fs svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fs-mobilebar {
    display: none;
}

/* chat column */

.fs-chat {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #f9f1e8;
    border-right: 1.5px solid var(--s-line-cool);
}

.fs-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 16px;
    background: rgba(255, 240, 229, .8);
    border-bottom: 1px solid var(--s-line);
}

.fs-coin {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--s-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--s-ink);
}

.fs-coin img {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(160, 100, 20, .35);
}

.fs-coin-plus {
    position: absolute;
    left: 100%;
    top: 50%;
    margin-left: 8px;
    padding: 1px 9px;
    border-radius: 999px;
    background: #fff4cf;
    border: 1px solid #f1d27a;
    color: #8a5a00;
    font-style: normal;
    font-size: 13px;
    opacity: 0;
    transform: translateY(40%);
    transition: opacity .35s ease, transform .5s cubic-bezier(.2, 1.4, .4, 1);
}

.fs-coin-plus.is-on {
    opacity: 1;
    transform: translateY(-50%);
}

.fs:not(.fs-anim) .fs-coin-plus {
    display: none;
}

.fs-leave {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: rgba(239, 68, 68, .14);
    border: 1px solid rgba(239, 68, 68, .3);
    color: var(--s-error);
}

.fs-leave svg {
    width: 18px;
    height: 18px;
}

.fs-thread {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 12px;
    padding: 14px 18px 12px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(transparent, #000 34px);
    mask-image: linear-gradient(transparent, #000 34px);
}

.fs-subject {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 4px;
    color: var(--s-muted);
    font-size: 14px;
}

.fs-subject i {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--s-sky);
}

.fs-msg {
    max-width: 100%;
}

.fs-msg-user {
    align-self: flex-end;
    max-width: 84%;
    padding: 9px 15px;
    border-radius: 22px;
    background: var(--s-bubble);
    border: 1px solid rgba(99, 102, 241, .18);
}

.fs-msg-voice {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(14, 51, 34, .08);
    border-color: rgba(99, 102, 241, .48);
}

.fs-msg-voice svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    color: var(--s-indigo);
}

.fs-tool {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    padding: 4px 11px 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    border: 1px solid var(--s-line);
    color: var(--s-muted);
    font-size: 12.5px;
    font-weight: 600;
}

.fs-tool svg {
    width: 14px;
    height: 14px;
    color: var(--s-success);
    stroke-width: 2.6;
}

.fs-typing {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--s-muted);
    font-size: 13px;
}

.fs-typing span {
    display: inline-flex;
    gap: 3px;
}

.fs-typing i {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--s-muted);
    animation: fs-bounce 1.1s infinite ease-in-out;
}

.fs-typing i:nth-child(2) {
    animation-delay: .15s;
}

.fs-typing i:nth-child(3) {
    animation-delay: .3s;
}

@keyframes fs-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .45; }
    30% { transform: translateY(-4px); opacity: 1; }
}

.fs:not(.fs-anim) .fs-typing {
    display: none;
}

.fs-suggest {
    display: flex;
    gap: 10px;
}

.fs-suggest span {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .6);
    border: 1px solid rgba(99, 102, 241, .25);
    color: var(--s-muted);
    font-size: 12.5px;
    line-height: 1.35;
}

.fs-suggest b {
    display: block;
    margin-bottom: 2px;
    color: var(--s-ink);
    font-size: 13.5px;
    font-weight: 700;
}

.fs-composer {
    margin: 0 14px 14px;
    padding: 14px 12px 10px;
    border-radius: 28px;
    background: var(--s-paper);
    box-shadow: 0 6px 22px rgba(14, 51, 34, .1);
}

.fs-input {
    padding: 2px 10px 14px;
    color: #8b97a3;
    font-size: 15.5px;
}

.fs-composer-row {
    display: flex;
    align-items: center;
    gap: 7px;
}

.fs-ibtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 36px;
    height: 36px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--s-bg-2);
    border: 1px solid var(--s-line);
    color: var(--s-ink);
}

.fs-ibtn svg {
    width: 17px;
    height: 17px;
}

.fs-timer b {
    font-family: var(--s-display);
    font-size: 13px;
    font-weight: 600;
}

.fs-call {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    margin-left: auto;
    padding: 0 8px 0 16px;
    border-radius: 999px;
    background: var(--s-call);
    color: #fff;
    font-family: var(--s-display);
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(58, 28, 113, .28);
}

.fs-call svg {
    flex: none;
    width: 26px;
    height: 26px;
    padding: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
}

.fs-handle {
    position: relative;
    z-index: 3;
    align-self: center;
    display: grid;
    grid-template-columns: 4px 4px;
    gap: 3px;
    width: 0;
    margin-left: -6px;
}

.fs-handle i {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--s-muted);
}

/* notes workspace */

/* As in the app, the call tile floats in the top-right corner of the notes pane. */
.fs-notes {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: #fff;
}

.fs-tabs {
    display: flex;
    height: 56px;
    background: var(--s-paper);
    border-bottom: 1px solid var(--s-line-cool);
}

.fs-tabs span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 22px 0 12px;
    border-right: 1px solid var(--s-line-cool);
    color: var(--s-muted);
    font-family: var(--s-display);
    font-size: 15px;
    font-weight: 600;
}

.fs-tabs span.is-active {
    color: var(--s-ink);
    background: #fff;
}

.fs-tabs svg {
    width: 17px;
    height: 17px;
}

.fs-tabs .fs-tabs-add {
    margin-left: auto;
    padding: 0 18px;
    border-right: 0;
    border-left: 1px solid var(--s-line-cool);
    color: var(--s-ink);
}

.fs-paper {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: radial-gradient(circle, #cfd4da 1.1px, transparent 1.4px) 0 0 / 20px 20px #fff;
}

.fs-sheet {
    padding: 26px 28px 20px;
    font-size: 14.5px;
    line-height: 1.55;
}

.fs-sheet > p {
    margin: 10px 0 6px;
    padding-right: 168px;
}

.fs-row {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 18px;
    padding-top: 10px;
    border-top: 1px solid #d5d8dc;
}

.fs-row > b {
    align-self: start;
    padding-bottom: 3px;
    border-bottom: 1.5px solid #c9cdd2;
}

.fs-row p + p {
    margin-top: 6px;
}

.fs-row-head {
    padding: 0 0 8px;
    border-top: 0;
    border-bottom: 2px solid #6b1f7a;
    font-size: 15.5px;
}

.fs-row-head > b {
    border: 0;
    padding: 0;
}

.fs-math {
    font-family: "Latin Modern Math", "STIX Two Text", "Cambria Math", Georgia, serif;
    font-style: italic;
    white-space: nowrap;
}

.fs-graph {
    width: min(280px, 74%);
    margin: 0 auto 4px;
}

.fs-graph svg {
    display: block;
    width: 100%;
    height: auto;
}

.fs-grid path {
    stroke: #eceef1;
    stroke-width: 1;
}

.fs-axes path {
    stroke: #11181c;
    stroke-width: 1.6;
}

.fs-axes .fs-arrow {
    fill: #11181c;
    stroke-width: 1;
}

.fs-ticks text {
    fill: #4b5563;
    stroke: none;
    font: 12px var(--s-text);
    text-anchor: middle;
}

.fs-ticks .fs-axis-name {
    fill: #11181c;
    font-weight: 700;
    font-size: 13px;
}

.fs-curve {
    stroke-width: 3;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}

.fs-curve-f {
    stroke: #ef4444;
}

.fs-curve-g {
    stroke: #3b82f6;
}

.fs-dot-f {
    fill: #ef4444;
    stroke: none;
}

.fs-dot-g {
    fill: #3b82f6;
    stroke: none;
}

.fs-label-f,
.fs-label-g {
    stroke: none;
    font: 700 14px var(--s-text);
}

.fs-label-f {
    fill: #ef4444;
}

.fs-label-g {
    fill: #3b82f6;
}

/* call picture-in-picture */

.fs-pip {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
    width: 172px;
    height: 124px;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(180deg, #3a1c71 0%, #a44a7c 52%, #f08a5d 100%);
    box-shadow: 0 12px 28px rgba(28, 12, 60, .32);
}

.fs-pip img {
    position: absolute;
    left: 50%;
    top: 6px;
    width: 190px;
    max-width: none;
    transform: translateX(-46%);
    animation: fs-breathe 5s ease-in-out infinite;
}

.fs-pip canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.fs-pip img {
    transition: opacity .6s ease;
}

.fs-pip.is-3d img {
    opacity: 0;
}

@keyframes fs-breathe {
    50% { transform: translateX(-46%) translateY(1.5px) scale(1.012); }
}

.fs-pip-live {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--s-error);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, .6);
    animation: fs-live 1.8s infinite;
}

@keyframes fs-live {
    70% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.fs-pip-ctrls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.fs-pip-ctrls i {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: rgba(40, 40, 50, .55);
    color: #fff;
}

.fs-pip-ctrls .fs-pip-end {
    background: var(--s-error);
}

.fs-pip-ctrls svg {
    width: 14px;
    height: 14px;
}

.fs-pip-end svg {
    fill: #fff;
    stroke: none;
}

.fs-fab {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--s-line-cool);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
    color: #11181c;
}

.fs-fab svg {
    width: 18px;
    height: 18px;
}

/* timeline states (only once the script has opted in) */

.fs-anim [data-fs-step] {
    display: none;
}

.fs-anim [data-fs-step].is-on {
    display: block;
    animation: fs-in .4s ease both;
}

.fs-anim .fs-msg-voice.is-on,
.fs-anim .fs-tool.is-on {
    display: inline-flex;
}

.fs-anim .fs-typing.is-on,
.fs-anim .fs-suggest.is-on {
    display: flex;
}

.fs-anim .fs-row.is-on {
    display: grid;
}

.fs-anim [data-fs-step].is-gone {
    display: none;
}

@keyframes fs-in {
    from { opacity: 0; transform: translateY(8px); }
}

.fs-anim .fs-w {
    opacity: 0;
    transition: opacity .25s ease;
}

.fs-anim .fs-w.is-on {
    opacity: 1;
}

.fs-anim .fs-graph.is-on .fs-curve {
    animation: fs-draw 1.5s ease-out both;
}

.fs-anim .fs-graph.is-on .fs-curve-g {
    animation-delay: .7s;
}

@keyframes fs-draw {
    from { stroke-dashoffset: 1; }
}

/* phone: one pane at a time behind the app's Chat | Notizen control */

@media (max-width: 760px) {
    .fs {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        height: 560px;
        border-radius: 20px;
        font-size: 14.5px;
    }

    .fs-mobilebar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 9px 12px;
        background: rgba(255, 240, 229, .85);
        border-bottom: 1px solid var(--s-line);
    }

    .fs-seg {
        display: inline-flex;
        padding: 3px;
        border-radius: 999px;
        background: var(--s-bg-3);
    }

    .fs-seg button {
        padding: 6px 18px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--s-ink);
        font: 600 14.5px var(--s-display);
        cursor: pointer;
    }

    .fs[data-tab="chat"] [data-fs-tab="chat"],
    .fs[data-tab="notes"] [data-fs-tab="notes"] {
        background: #fff;
        box-shadow: 0 1px 4px rgba(14, 51, 34, .16);
    }

    .fs-chat-head,
    .fs-handle,
    .fs-tabs {
        display: none;
    }

    .fs[data-tab="chat"] .fs-notes,
    .fs[data-tab="notes"] .fs-chat {
        display: none;
    }

    .fs-chat {
        border-right: 0;
    }

    .fs-sheet {
        padding: 18px 16px;
    }

    .fs-sheet > p {
        padding-right: 0;
        padding-top: 0;
    }

    .fs-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .fs-row-head > b:first-child {
        display: none;
    }

    .fs-row > b {
        justify-self: start;
    }

    .fs-pip {
        top: auto;
        bottom: 12px;
        right: 12px;
        width: 118px;
        height: 96px;
    }

    .fs-pip img {
        width: 140px;
    }

    .fs-fab {
        display: none;
    }

    /* keeps the task text clear of the call PiP parked in the corner */
    .fs-sheet .fs-row:last-child > div {
        padding-right: 124px;
    }

    .fs-call {
        font-size: 13.5px;
        padding-left: 12px;
    }
}

@media (max-width: 380px) {
    .fs-timer b {
        display: none;
    }
}

/* ---------- Teachers: hero ---------- */

.t-hero {
    padding: clamp(36px, 5vw, 72px) 0 clamp(40px, 5vw, 64px);
}

.t-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

.t-hero-copy {
    display: grid;
    gap: 20px;
    justify-items: start;
}

.t-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

@media (max-width: 900px) {
    .t-hero-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.t-video {
    position: relative;
    display: block;
    border-radius: var(--s-r-xl);
    overflow: hidden;
    border: 1.5px solid var(--s-line);
    box-shadow: var(--s-shadow);
    background: #000;
    aspect-ratio: var(--video-ratio, 16 / 10);
    transform: rotate(1.2deg);
    transition: transform .2s ease;
}

/* Only a playable video straightens on hover; a still (no video in this language yet) stays put. */
a.t-video:hover,
.t-video.is-playing {
    transform: rotate(0);
}

/* The whole poster is the play button: hovering anywhere dims the picture and fills the pill. */
a.t-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(14, 51, 34, 0);
    transition: background .2s ease;
}

a.t-video:hover::after {
    background: rgba(14, 51, 34, .16);
}

a.t-video:hover .t-video-play {
    background: var(--s-ink);
    color: #fff;
}

a.t-video:hover .t-video-play i {
    background: #fff;
}

a.t-video:hover .t-video-play i::before {
    border-left-color: var(--s-ink);
}

.t-video img,
.t-video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The click script replaces the poster link with the <video> itself; without an explicit width
   it takes the file's intrinsic 1920px and overflows the hero column. */
video.t-video {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.t-video-play {
    position: absolute;
    z-index: 1;
    left: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: var(--s-ink);
    font-family: var(--s-display);
    font-size: 15.5px;
    font-weight: 600;
    transition: background .2s ease, color .2s ease;
}

.t-video-play i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--s-ink);
}

.t-video-play i::before {
    content: "";
    margin-left: 3px;
    border-left: 11px solid #fff;
    border-block: 7px solid transparent;
}

.t-video-caption {
    margin-top: 14px;
    font-size: 14.5px;
    color: var(--s-muted);
    text-align: center;
}

.t-trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: clamp(36px, 5vw, 60px);
}

.t-trust li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--s-r-l);
    background: rgba(255, 255, 255, .66);
    border: 1.5px solid var(--s-line);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--s-ink);
}

.t-trust li span {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--tint, var(--s-bg-2));
    font-size: 19px;
}

@media (max-width: 980px) {
    .t-trust {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .t-trust {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Families: hero tutor strip and subject list ---------- */

.f-tutors {
    display: grid;
    gap: 12px;
    padding: 18px 18px 20px;
}

.f-tutors ul {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.f-tutors li {
    display: grid;
    justify-items: center;
    gap: 6px;
    font-family: var(--s-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--s-ink);
}

.f-tutors img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 999px;
    object-fit: cover;
    object-position: 50% 12%;
    background: var(--s-bg-2);
}

.f-tutors figcaption {
    font-size: 15px;
    line-height: 1.4;
    color: var(--s-ink-2);
    text-align: center;
}

.f-subjects {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-content: center;
    padding: 24px;
}

.f-subjects li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--s-line);
    background: var(--s-bg);
    font-family: var(--s-display);
    font-size: 15.5px;
    font-weight: 600;
    color: var(--s-ink);
}

.f-subjects li::before {
    content: "";
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: var(--c);
}

.f-subjects .is-add {
    border-style: dashed;
    background: transparent;
    color: var(--s-muted);
}

.f-subjects .is-add::before {
    display: none;
}

@media (max-width: 420px) {
    .f-tutors ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .f-tutors li:nth-child(n + 4) {
        display: none;
    }
}

/* ---------- Teachers: three pillars ---------- */

.t-pillar {
    display: grid;
    align-content: start;
    gap: 16px;
    padding: 28px 26px;
    border-top: 6px solid var(--dot);
}

.t-pillar-kicker {
    font-family: var(--s-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--s-muted);
}

.t-pillar .s-link {
    justify-self: start;
    margin-top: 4px;
}

/* ---------- Teachers: split sections ---------- */

.t-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}

.t-split-copy {
    display: grid;
    gap: 18px;
    justify-items: start;
}

@media (max-width: 900px) {
    .t-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

.t-factsheet {
    padding: 8px 26px 22px;
}

.t-factsheet-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 0 14px;
    font-family: var(--s-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--s-ink);
}

.t-factsheet-title span {
    padding: 3px 12px;
    border-radius: 999px;
    background: #e2f5ea;
    color: #14663a;
    font-size: 13.5px;
}

.t-factsheet dl > div {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 14px;
    padding: 13px 0;
    border-top: 1.5px dashed var(--s-line);
}

.t-factsheet dt {
    font-size: 14px;
    font-weight: 700;
    color: var(--s-muted);
}

.t-factsheet dd {
    font-weight: 700;
    color: var(--s-ink);
    line-height: 1.4;
}

.t-factsheet dd small {
    display: block;
    font-size: 14.5px;
    font-weight: 400;
    color: var(--s-ink-2);
}

.t-factsheet-foot {
    margin-top: 6px;
    padding-top: 16px;
    border-top: 1.5px solid var(--s-line);
    font-size: 15px;
}

@media (max-width: 480px) {
    .t-factsheet dl > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }
}

/* ---------- Teachers: experience section around the preview ---------- */

.t-didactics {
    width: min(1080px, calc(100% - 32px));
    margin: 28px auto 0;
}

.t-didactic {
    display: grid;
    gap: 6px;
    padding: 20px 22px;
    border-radius: var(--s-r-l);
    background: rgba(255, 255, 255, .7);
    border: 1.5px solid var(--s-line);
}

.t-didactic b {
    font-family: var(--s-display);
    font-size: 18.5px;
    font-weight: 600;
    color: var(--s-ink);
}

.t-didactic p {
    font-size: 15.5px;
    line-height: 1.5;
}

/* ---------- Teacher app preview (replica of apps/vibeteachers) ---------- */

.tp-figure {
    margin: 0 0 clamp(28px, 4vw, 44px);
}

.tp {
    display: grid;
    grid-template-columns: 64px 208px minmax(0, 1fr);
    height: 560px;
    border-radius: 22px;
    border: 1.5px solid var(--s-line);
    background: var(--s-bg);
    box-shadow: 0 2px 0 rgba(14, 51, 34, .05), 0 34px 80px rgba(14, 51, 34, .16);
    overflow: hidden;
    font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 13.5px;
    line-height: 1.45;
    color: #17392c;
    text-align: left;
    user-select: none;
}

.tp svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tp-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 0;
    background: #17392c;
    color: #fff;
}

.tp-rail-item {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    font-size: 12px;
    font-weight: 700;
}

.tp-rail-item svg {
    width: 18px;
    height: 18px;
}

.tp-rail-item.is-active {
    background: #335949;
    border-color: #9dc3ad;
}

.tp-rail-item.is-dashed {
    border-style: dashed;
}

.tp-rail-logo img {
    border-radius: 8px;
}

.tp-rail-rule {
    width: 28px;
    height: 1px;
    background: rgba(255, 255, 255, .2);
}

.tp-rail-bottom {
    margin-top: auto;
    font-size: 16px;
}

.tp-pane {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px 12px;
    background: #efe4d5;
    border-radius: 0 26px 26px 0;
    box-shadow: inset -1px 0 0 rgba(23, 57, 44, .08);
}

.tp-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-left: 6px;
    color: #6b7a72;
    font-size: 12px;
}

.tp-back svg {
    width: 13px;
    height: 13px;
}

.tp-class {
    padding: 4px 6px 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}

.tp-badge {
    margin: 0 0 8px 6px;
    padding: 1px 9px;
    border-radius: 999px;
    background: #f9f1e8;
    font-size: 11.5px;
    font-weight: 500;
}

.tp-group {
    display: grid;
    gap: 2px;
    width: 100%;
    margin-bottom: 6px;
}

.tp-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 500;
}

.tp-group-head.is-active {
    background: #e8dcc8;
}

.tp-group-head i {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: #e6dac8;
}

.tp-group-head svg {
    width: 16px;
    height: 16px;
}

.tp-leaf {
    padding: 5px 8px 5px 30px;
    border-radius: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tp-leaf.is-active {
    background: #e8dcc8;
    font-weight: 600;
}

.tp-leaf.is-add {
    color: #6b7a72;
}

.tp-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.tp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--s-line);
}

.tp-title {
    min-width: 0;
}

.tp-title b {
    display: block;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tp-title small {
    font-size: 12.5px;
    color: #6b7a72;
}

.tp-modes {
    flex: none;
    display: inline-flex;
    padding: 3px;
    border-radius: 11px;
    background: var(--s-bg-3);
}

.tp-modes button {
    padding: 6px 16px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #17392c;
    font: 600 13.5px inherit;
    font-family: inherit;
    cursor: pointer;
}

.tp[data-mode="plan"] [data-tp-mode="plan"],
.tp[data-mode="review"] [data-tp-mode="review"] {
    background: #fff;
    box-shadow: 0 1px 4px rgba(14, 51, 34, .16);
}

.tp-view {
    flex: 1;
    min-height: 0;
    padding: 18px 22px;
    overflow: hidden;
    animation: tp-in .35s ease both;
}

@keyframes tp-in {
    from { opacity: 0; transform: translateY(6px); }
}

.tp[data-mode="plan"] .tp-view-review,
.tp[data-mode="review"] .tp-view-plan {
    display: none;
}

.tp-view-plan {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 18px;
}

.tp-col {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 10px;
    min-width: 0;
}

.tp-col-files {
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--s-line);
    background: rgba(255, 255, 255, .45);
}

.tp-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
}

.tp-section-title svg {
    width: 18px;
    height: 18px;
}

.tp-section-title small {
    margin-left: auto;
    font-size: 12.5px;
    font-weight: 400;
    color: #6b7a72;
}

.tp-upload {
    margin-left: auto;
    padding: 4px 12px;
    border-radius: 8px;
    background: #0e3322;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
}

.tp-hint {
    font-size: 12.5px;
    color: #6b7a72;
}

.tp-task {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--s-line);
}

.tp-task-head {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    font-weight: 600;
}

.tp-task-head em {
    font-style: normal;
    color: #6b7a72;
    font-size: 12px;
}

.tp-task-head span {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    border-radius: 9px;
    border: 1px solid var(--s-line-cool);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tp-grip {
    width: 8px;
    height: 14px;
    background: radial-gradient(circle, #8b978f 1.3px, transparent 1.6px) 0 0 / 4px 5px;
}

.tp-task p {
    padding-left: 17px;
    font-size: 13px;
}

.tp-file {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: 17px;
    padding: 5px 11px 5px 8px;
    border-radius: 10px;
    border: 1px solid var(--s-line);
    background: var(--s-bg);
    font-size: 12.5px;
    font-weight: 500;
}

.tp-task .tp-file + .tp-file {
    margin-top: -2px;
}

.tp-file svg {
    width: 14px;
    height: 14px;
}

.tp-add {
    margin-left: 17px;
    padding: 5px 11px;
    border-radius: 10px;
    background: var(--s-bg-2);
    border: 1px solid var(--s-line);
    font-size: 12.5px;
    font-weight: 500;
}

.tp-add-task {
    justify-self: start;
    margin-left: 0;
}

.tp-files {
    display: grid;
}

.tp-files li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 2px;
    border-top: 1px solid var(--s-line);
    font-weight: 500;
    white-space: nowrap;
}

.tp-files small {
    color: #6b7a72;
    font-size: 12px;
    font-weight: 400;
}

.tp-view-review {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 14px;
}

.tp-view-review .tp-table {
    margin-top: -6px;
}

.tp-report {
    padding: 14px 16px 16px;
    border-radius: 16px;
    border: 1px solid #d5e9f6;
    background: rgba(240, 249, 255, .7);
}

.tp-report-head b {
    display: block;
    font-size: 15px;
}

.tp-report-head small {
    font-size: 12.5px;
    color: #6b7a72;
}

.tp-report-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.tp-insight,
.tp-step {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 13px;
    background: #fff;
    border: 1px solid #bae6fd;
    font-size: 13px;
}

.tp-step {
    border-color: #fbbf24;
    background: #fffbeb;
}

.tp-insight span,
.tp-step span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #0369a1;
}

.tp-step span {
    color: #b45309;
}

.tp-insight b,
.tp-step b {
    font-size: 13.5px;
    line-height: 1.3;
}

.tp-step-btn {
    margin-top: 4px;
    padding: 4px 12px;
    border-radius: 8px;
    background: #0e3322;
    color: #fff;
    font-style: normal;
    font-size: 12.5px;
    font-weight: 600;
}

.tp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.tp-table th {
    padding: 7px 10px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: #6b7a72;
    border-bottom: 1px solid var(--s-line);
}

.tp-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--s-line);
}

.tp-table td:first-child {
    font-weight: 600;
}

.tp-col-note {
    color: #56655d;
}

.tp-done {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #047857;
    font-weight: 600;
}

.tp-done::before {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 999px;
    background: #10b981 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.500 10.400l3 3 6-6.600' fill='none' stroke='%23fff' stroke-width='2.400' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
}

.tp-pill {
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.tp-pill.is-ok {
    background: #d1fae5;
    color: #065f46;
}

.tp-pill.is-part {
    background: #fef3c7;
    color: #92400e;
}

.tp-pill.is-more {
    background: #ffe4e6;
    color: #9f1239;
}

.tp-note {
    margin-top: 12px;
    font-size: 14px;
    color: var(--s-muted);
    text-align: center;
}

@media (max-width: 900px) {
    .tp {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .tp-pane {
        display: none;
    }
}

@media (max-width: 640px) {
    .tp {
        grid-template-columns: minmax(0, 1fr);
        height: 760px;
    }

    .tp-rail,
    .tp-col-files,
    .tp-col-note,
    .tp-report-head small,
    .tp-section-title small {
        display: none;
    }

    .tp-head {
        flex-direction: column;
        align-items: stretch;
        padding: 12px 14px;
    }

    .tp-modes button {
        flex: 1;
    }

    .tp-view {
        padding: 14px;
    }

    .tp-view-plan,
    .tp-report-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Teachers: control cards ---------- */

.t-feature {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 24px 22px;
}

.t-feature-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 4px;
    border-radius: 16px;
    background: var(--tint);
    font-size: 24px;
}

.t-feature p {
    font-size: 15.5px;
    line-height: 1.5;
}

/* ---------- Teachers: roles ---------- */

.t-role {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 26px 24px;
}

.t-role-who {
    display: flex;
    align-items: center;
    gap: 12px;
}

.t-role-who span {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: var(--tint);
    font-size: 23px;
}

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

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

.s-faq details {
    border-radius: var(--s-r-l);
    background: #fff;
    border: 1.5px solid var(--s-line);
}

.s-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 22px;
    font-family: var(--s-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--s-ink);
    cursor: pointer;
    list-style: none;
}

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

.s-faq summary::after {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-right: 2.5px solid var(--s-ink);
    border-bottom: 2.5px solid var(--s-ink);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
}

.s-faq details[open] summary::after {
    transform: rotate(225deg) translate(-2px, -2px);
}

.s-faq details p {
    padding: 0 22px 20px;
    max-width: 68ch;
}

/* ---------- Closing CTA ---------- */

.s-cta {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    padding: clamp(30px, 4.4vw, 56px);
    border-radius: 32px;
    background: var(--s-ink);
    color: #fff;
    overflow: hidden;
}

.s-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, .13) 1.2px, transparent 1.5px) 0 0 / 22px 22px;
    pointer-events: none;
}

.s-cta > * {
    position: relative;
}

.s-cta-copy {
    display: grid;
    gap: 16px;
    justify-items: start;
}

.s-cta .s-h2 {
    color: #fff;
}

.s-cta p {
    max-width: 56ch;
    color: rgba(255, 255, 255, .86);
}

.s-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}

.s-cta .s-btn-ghost {
    background: rgba(255, 255, 255, .12);
    color: #fff !important;
    border: 1.5px solid rgba(255, 255, 255, .4);
}

.s-cta img {
    width: clamp(140px, 18vw, 220px);
    height: auto;
}

@media (max-width: 760px) {
    .s-cta {
        grid-template-columns: minmax(0, 1fr);
    }

    .s-cta img {
        display: none;
    }
}

/* ---------- Footer ---------- */

.s-footer {
    margin-top: clamp(64px, 8vw, 104px);
    padding: 44px 0 40px;
    border-top: 1.5px solid var(--s-line);
    background: var(--s-bg-2);
    font-size: 15.5px;
}

.s-landing .s-footer {
    margin-top: 0;
}

.s-footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 32px;
}

.s-footer-brand {
    display: grid;
    align-content: start;
    gap: 8px;
    color: var(--s-muted);
    font-size: 14.5px;
}

.s-footer-brand p span {
    color: var(--s-rose);
}

.s-footer-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.s-footer h2 {
    margin-bottom: 10px;
    font-family: var(--s-display);
    font-size: 16.5px;
    font-weight: 600;
    color: var(--s-ink);
}

.s-footer ul {
    display: grid;
    gap: 7px;
}

.s-footer li a {
    text-decoration: none;
}

.s-footer li a:hover {
    text-decoration: underline;
}

@media (max-width: 760px) {
    .s-footer-inner,
    .s-footer-cols {
        grid-template-columns: minmax(0, 1fr);
    }
}

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

    .s-body *,
    .s-body *::before,
    .s-body *::after {
        animation: none !important;
        transition: none !important;
    }
}


/* ---------- Teachers: landing page (teachers.html) ---------- */

/* Line icons from macros/icons.njk; the wrapper sets the colour. */
.t-ico svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Hero: text and video as two balanced columns, the video centred against the whole text block.
   The headline is sized so each sentence still fits on one line in the wider text column. */
@media (min-width: 901px) {
    .t-hero-teachers .t-hero-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: center; }
    /* Sitting a little below the optical centre gives the video more weight next to the text. */
    .t-hero-teachers .t-hero-media { translate: 0 clamp(14px, 2.2vw, 30px); }
}
/* Smaller corners, so the broadcaster mark in the top-left of the frame is not clipped. */
.t-hero-teachers .t-video { border-radius: 12px; }
/* Between 901 and 1119px the text column needs a larger share to keep both buttons on one row. */
@media (min-width: 901px) and (max-width: 1119px) {
    .t-hero-teachers .t-hero-grid { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 36px; }
}
.t-hero-teachers .s-h1 { font-size: clamp(34px, 4.1vw, 48px); }
.t-hero-teachers .t-line { display: block; }
@media (min-width: 1000px) { .t-hero-teachers .t-line { white-space: nowrap; } }

/* Fact band (teacher hero, student page): four equal tiles (icon above, label below) divided by
   hairlines in a quiet band; two by two where four columns get too narrow. */
.t-trust.t-trust-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: clamp(56px, 7vw, 96px); padding: 28px 8px; border-radius: 24px; background: rgba(255, 255, 255, .5); border: 1px solid color-mix(in srgb, var(--s-ink) 7%, transparent); }
.t-trust.t-trust-band li { flex-direction: column; justify-content: center; gap: 12px; padding: 2px 12px; background: none; border: 0; border-radius: 0; font-size: 16.5px; line-height: 1.3; text-align: center; }
.t-trust.t-trust-band li + li { border-left: 1px solid color-mix(in srgb, var(--s-ink) 8%, transparent); }
.t-trust.t-trust-band li span { width: 52px; height: 52px; border-radius: 999px; }
.t-trust.t-trust-band li span svg { width: 24px; height: 24px; }
@media (max-width: 1119px) {
    .t-trust.t-trust-band { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; padding: 24px 8px; }
    .t-trust.t-trust-band li + li { border-left: 0; }
    .t-trust.t-trust-band li:nth-child(2n) { border-left: 1px solid color-mix(in srgb, var(--s-ink) 8%, transparent); }
}
@media (max-width: 480px) {
    .t-trust.t-trust-band { row-gap: 18px; padding: 18px 4px; }
    .t-trust.t-trust-band li { gap: 8px; padding: 0 8px; font-size: 14px; line-height: 1.25; }
    .t-trust.t-trust-band li span { width: 40px; height: 40px; }
    .t-trust.t-trust-band li span svg { width: 19px; height: 19px; }
}

/* Teacher and student view share one rhythm; the eyebrow becomes a tinted badge whose glowing
   rules fade out to both sides. The badge's ring must match the section background, so the
   rule stops short of the badge instead of running into it. */
.t-view { --view-bg: var(--s-bg); padding-block: 64px; }
.t-view.s-section-tint { --view-bg: var(--s-tint-bg, var(--s-bg-2)); }
.t-view .s-section-head { gap: 14px; margin-bottom: 32px; isolation: isolate; }
.t-view .s-section-head.is-center { max-width: none; }
.t-view .s-eyebrow {
    position: relative;
    justify-self: start;
    padding: 6px 16px 6px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--view) 12%, #fff);
    border: 1.5px solid color-mix(in srgb, var(--view) 38%, transparent);
    box-shadow: 0 0 0 10px var(--view-bg);
}
.t-view .s-section-head.is-center .s-eyebrow { justify-self: center; }
.t-view .s-eyebrow::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: min(640px, 84vw);
    height: 2px;
    border-radius: 2px;
    transform: translate(-50%, -50%);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--view) 75%, transparent) 50%, transparent);
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--view) 70%, transparent));
}
.t-view .fs-figure { margin-bottom: 28px; }
@media (max-width: 640px) { .t-view { padding-block: 40px; } }

/* The teacher app replica is zoomed out rather than cropped at the reduced height. */
.t-teacher-compact .tp { height: 560px; zoom: .82; }
.t-teacher-compact .tp-view { overflow-y: auto; }
.t-teacher-compact .tp-figure { margin-bottom: 28px; }
@media (max-width: 640px) { .t-teacher-compact .tp { height: 520px; zoom: 1; } }

/* Benefit cards under both demos: icon and heading on the first row, the copy underneath. */
.t-view .t-feature { padding: 20px 22px; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 10px; align-items: center; }
.t-view .t-feature-icon { width: 34px; height: 34px; border-radius: 10px; margin: 0; }
.t-view .t-feature .s-h3 { font-size: 21px; white-space: nowrap; }
.t-view .t-feature p { grid-column: 1 / -1; font-size: 17px; line-height: 1.5; }
/* Three columns leave room for one-line titles only from ~1180px; narrower, they may wrap. */
@media (max-width: 1179px) { .t-view .t-feature .s-h3 { white-space: normal; text-wrap: balance; } }
@media (max-width: 480px) { .t-view .t-feature .s-h3 { font-size: 19px; } }

/* Proof split like the two demos above: the teachers' side with the pilot teacher's quote, the
   students' side with the figures. Both sides share one grid: the labels sit on one line, the
   quote starts level with the first figure and the attribution ends level with the last. */
.t-proof-section .s-section-head { max-width: none; margin-bottom: clamp(28px, 3.4vw, 40px); }
.t-proof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.t-proof-side { display: grid; grid-template-rows: auto 1fr; justify-items: start; gap: 30px; padding-right: clamp(28px, 5vw, 72px); }
.t-proof-side + .t-proof-side { padding: 0 0 0 clamp(28px, 5vw, 72px); border-left: 1.5px solid color-mix(in srgb, var(--s-ink) 10%, transparent); }
.t-proof-voice { display: grid; align-content: space-between; gap: 28px; margin: 0; padding: clamp(26px, 3vw, 38px); border-radius: var(--s-r-xl); background: color-mix(in srgb, var(--s-orange) 8%, #fff); border: 1.5px solid color-mix(in srgb, var(--s-orange) 24%, transparent); box-shadow: var(--s-shadow-sm); }
.t-proof-voice blockquote { margin: 0; font-family: var(--s-display); font-size: clamp(22px, 2.5vw, 31px); font-weight: 600; line-height: 1.28; color: var(--s-ink); text-wrap: balance; }
.t-proof-voice figcaption { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 24px; align-items: center; font-size: 15.5px; line-height: 1.4; color: var(--s-muted); }
.t-proof-voice figcaption b { display: block; font-size: 17px; color: var(--s-ink); }
.t-figure-photo img { width: 70px; height: 70px; border-radius: 999px; object-fit: cover; border: 3px solid #fff; }
/* Each figure: a pictogram on a white blob (as in the privacy section) beside the number and its sentence. */
.t-figures { display: grid; align-content: space-between; gap: 30px; margin: 0; padding: 0; list-style: none; }
.t-figures li { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 24px; row-gap: 4px; align-items: center; }
.t-figure-art { position: relative; isolation: isolate; display: grid; place-items: center; width: 96px; height: 90px; }
.t-figures .t-figure-art { grid-row: span 2; }
.t-figure-art::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 58% 42% 55% 45% / 47% 56% 44% 53%; background: #fff; transform: rotate(var(--blob-r, 0deg)); }
.t-figures li:nth-child(2) { --blob-r: 110deg; }
.t-figures li:nth-child(3) { --blob-r: 220deg; }
.t-figure-art svg { width: 60px; height: 60px; }
/* On hover each pictogram acts out its figure: the bulb switches on (glow, brighter filament,
   rays springing out), a crowd fills in behind the three learners, the sand runs through the
   hourglass (and resets when the pointer leaves). */
.t-figure-art svg,
.t-figure-art::before { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.t-figure-art svg * { transform-box: fill-box; transform-origin: center; }
.t-figures li:hover .t-figure-art svg { transform: translateY(-3px); }
.t-figures li:hover .t-figure-art::before { transform: rotate(calc(var(--blob-r, 0deg) + 16deg)) scale(1.04); }
.a-glow { opacity: 0; transform: scale(.6); transition: opacity .45s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.a-rays { opacity: 0; transform-box: view-box; transform-origin: 28px 22px; transform: scale(.7); transition: opacity .3s ease .08s, transform .5s cubic-bezier(.3, 1.6, .5, 1) .08s; }
.a-bulb { transition: fill .35s ease; }
.a-fil { transition: stroke .35s ease; }
.t-figures li:hover .a-glow { opacity: .75; transform: none; }
.t-figures li:hover .a-rays { opacity: 1; transform: none; }
.t-figures li:hover .a-bulb { fill: #fef08a; }
.t-figures li:hover .a-fil { stroke: #f97316; }
.a-crowd { opacity: 0; transform: translateY(3px) scale(.4); transition: opacity .3s ease, transform .45s cubic-bezier(.3, 1.5, .5, 1); }
.t-figures li:hover .a-crowd { opacity: 1; transform: none; transition-delay: var(--d, 0s); }
.a-stream { opacity: 0; }
.t-figures li:hover .a-sand-top { animation: t-drain 2.4s cubic-bezier(.4, 0, .6, 1) forwards; }
.t-figures li:hover .a-sand-bottom { animation: t-fill 2.4s cubic-bezier(.4, 0, .6, 1) forwards; }
.t-figures li:hover .a-stream { animation: t-stream 2.4s linear forwards; }
@keyframes t-drain { to { transform: translateY(12px); } }
@keyframes t-fill { to { transform: translateY(-8px); } }
@keyframes t-stream { 0% { opacity: 0; stroke-dashoffset: 0; } 6%, 90% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -32; } }
.t-figures b { align-self: end; font-size: clamp(34px, 3.4vw, 44px); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--s-ink); }
.t-figures p { align-self: start; margin: 0; font-size: 16.5px; line-height: 1.45; color: var(--s-ink-2); }
.t-figures small { display: block; margin-top: 2px; font-size: 14px; color: var(--s-muted); }
.t-press { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 26px; margin-top: clamp(44px, 5vw, 60px); padding-top: 26px; border-top: 1.5px solid color-mix(in srgb, var(--s-ink) 10%, transparent); }
.t-press-label { font-family: var(--s-display); font-size: 13.5px; font-weight: 600; color: var(--s-muted); }
.t-press img { height: 22px; width: auto; max-width: 110px; object-fit: contain; filter: grayscale(1); opacity: .6; }
@media (max-width: 860px) {
    .t-proof { grid-template-columns: minmax(0, 1fr); }
    .t-proof-side { padding-right: 0; }
    .t-proof-side + .t-proof-side { margin-top: 40px; padding: 40px 0 0; border-left: 0; border-top: 1.5px solid color-mix(in srgb, var(--s-ink) 10%, transparent); }
}
@media (max-width: 480px) {
    .t-figures li { grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px; }
    .t-figure-art { width: 72px; height: 68px; }
    .t-proof-voice figcaption { grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px; }
    .t-figure-photo img { width: 54px; height: 54px; }
    .t-figure-art svg { width: 46px; height: 46px; }
    .t-figures b { font-size: 34px; }
}

/* Privacy: four illustrated promises; the specifics live on the detail page. */
.t-safe-section .s-section-head { max-width: none; margin-bottom: clamp(48px, 6vw, 76px); }
.t-safe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 28px; margin: 0; padding: 0; list-style: none; }
.t-safe li { display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; }
/* Each promise links to its section on the privacy page; on hover the tile lifts and its icon
   makes one small, icon-specific move. */
.t-safe-link { display: grid; justify-items: center; gap: 8px; border-radius: 20px; color: inherit; text-decoration: none; }
.t-safe-link:focus-visible { outline: 3px solid var(--s-emerald); outline-offset: 8px; }
.t-safe-art svg { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.t-safe-art::before { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.t-safe-link:hover .t-safe-art svg,
.t-safe-link:focus-visible .t-safe-art svg { transform: translateY(-5px); }
.t-safe-link:hover .t-safe-art::before,
.t-safe-link:focus-visible .t-safe-art::before { transform: rotate(calc(var(--blob-r, 0deg) + 16deg)) scale(1.04); }
.t-safe-link b { position: relative; }
.t-safe-link b span { white-space: nowrap; }
/* Absolutely placed so the centred title does not shift when the arrow appears. */
.t-safe-link b::after { content: "→"; position: absolute; left: 100%; margin-left: 6px; opacity: 0; transform: translateX(-6px); transition: opacity .25s ease, transform .25s ease; }
.t-safe-link:hover b::after,
.t-safe-link:focus-visible b::after { opacity: 1; transform: none; }
.t-safe-art svg * { transform-box: fill-box; transform-origin: center; }
.a-check { stroke-dasharray: 26; }
.t-safe-link:hover .a-shackle { animation: t-shackle .6s ease; }
.t-safe-link:hover .a-check { animation: t-draw .5s ease both; }
/* 60° is two star steps, so the ring ends exactly where it started */
.t-safe-link:hover .a-stars { animation: t-turn .9s ease; }
.t-safe-link:hover .a-badge { animation: t-pop .5s ease; }
@keyframes t-shackle { 40% { transform: translateY(-5px); } }
@keyframes t-draw { from { stroke-dashoffset: 26; } to { stroke-dashoffset: 0; } }
@keyframes t-turn { to { transform: rotate(60deg); } }
@keyframes t-pop { 50% { transform: scale(1.18) rotate(-10deg); } }
/* A flat blob behind each pictogram: one shape, turned differently per tile. */
.t-safe-art { position: relative; isolation: isolate; display: grid; place-items: center; width: 150px; height: 138px; margin-bottom: 8px; }
.t-safe-art::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 58% 42% 55% 45% / 47% 56% 44% 53%; background: #fff; transform: rotate(var(--blob-r, 0deg)); }
.t-safe li:nth-child(2), .t-dp-item:nth-child(2) { --blob-r: 70deg; }
.t-safe li:nth-child(3), .t-dp-item:nth-child(3) { --blob-r: 150deg; }
.t-safe li:nth-child(4), .t-dp-item:nth-child(4) { --blob-r: 235deg; }
.t-safe-art svg { width: 86px; height: 86px; }
.t-safe li b { text-wrap: balance; font-family: var(--s-display); font-size: 19px; font-weight: 600; color: var(--s-ink); }
@media (max-width: 800px) {
    .t-safe { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
    .t-safe-art { width: 126px; height: 116px; }
    .t-safe-art svg { width: 72px; height: 72px; }
}
@media (max-width: 480px) {
    .t-safe li b { font-size: 16px; }
}

/* Privacy page: the four promises from the teacher page as columns, each with its facts; the
   one a visitor came from is outlined. */
.t-dp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
/* Subgrid rows keep icons, titles and the first dashed rule level across a row of cards. */
.t-dp-item { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; gap: 14px; padding: 26px 22px; transition: box-shadow .3s ease; }
.t-dp-item .t-safe-art { justify-self: center; width: 118px; height: 108px; margin: 0; }
.t-dp-item .t-safe-art::before { background: var(--s-bg-2); }
.t-dp-item .t-safe-art svg { width: 64px; height: 64px; }
.t-dp-item h2 { align-self: center; margin: 0; font-size: 20px; text-align: center; }
.t-dp-item dl { display: grid; align-content: start; gap: 12px; margin: 2px 0 0; }
.t-dp-item dl div { display: grid; align-content: start; gap: 2px; padding-top: 12px; border-top: 1.5px dashed var(--s-line); }
.t-dp-item dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--s-muted); }
.t-dp-item dd { margin: 0; font-weight: 700; color: var(--s-ink); }
.t-dp-item dd small { display: block; font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--s-muted); hyphens: auto; }
.t-dp-item:target { box-shadow: var(--s-shadow-sm), 0 0 0 3px var(--s-emerald); }
.t-dp-legal { margin: 22px 0 0; text-align: center; font-size: 14.5px; color: var(--s-muted); }
@media (max-width: 1000px) { .t-dp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .t-dp { grid-template-columns: minmax(0, 1fr); } }

/* Workshops: what the hour contains on the left, the fixed schedule on the right. */
.t-ws { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(28px, 5vw, 64px); align-items: center; }
.t-ws-copy { display: grid; justify-items: start; gap: 16px; }
.t-ws-copy .s-lead { margin: 0; }
.t-ws-hour { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 440px; overflow: hidden; margin-bottom: 6px; border-radius: 14px; background: #fff; border: 1.5px solid var(--s-line); }
.t-ws-hour span { display: grid; gap: 2px; padding: 12px 16px; font-size: 14.5px; color: var(--s-ink-2); }
.t-ws-hour span + span { border-left: 1.5px solid var(--s-line); }
.t-ws-hour span:first-child { box-shadow: inset 4px 0 0 var(--s-indigo); }
.t-ws-hour b { font-size: 17px; font-weight: 800; color: var(--s-ink); }
.t-ws-plan { display: grid; padding: 6px 24px; }
.t-ws-date { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 0; }
.t-ws-date + .t-ws-date { border-top: 1.5px dashed var(--s-line); }
.t-ws-day { display: grid; place-items: center; width: 52px; height: 56px; border-radius: 14px; background: #eef0ff; color: var(--s-indigo); font-family: var(--s-display); font-size: 21px; font-weight: 700; }
.t-ws-date b { display: block; font-family: var(--s-display); font-size: 17.5px; font-weight: 600; color: var(--s-ink); }
.t-ws-date div > span { font-size: 14.5px; line-height: 1.45; color: var(--s-muted); }
.t-ws-foot { margin: 0; padding: 14px 0 12px; border-top: 1.5px solid var(--s-line); font-size: 14.5px; color: var(--s-muted); }
@media (max-width: 860px) { .t-ws { grid-template-columns: minmax(0, 1fr); } }

/* "So läuft es": three steps, each with a small product motif on top. */
.t-flow-section .s-section-head { margin-bottom: 40px; }
/* The steps share rows (subgrid), so a title that wraps in one card keeps the others level;
   a quiet "Schritt n" kicker replaces numbered badges. */
.t-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; margin: 0; padding: 0; list-style: none; }
.t-flow-step { position: relative; display: grid; grid-row: span 4; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; row-gap: 6px; align-items: end; padding: 20px 22px 24px; }
.t-flow-step > p { align-self: start; }
.t-flow-visual { grid-column: 1 / -1; display: grid; gap: 6px; height: 152px; margin-bottom: 10px; padding: 14px; overflow: hidden; border-radius: 14px; background: var(--s-bg-2); font-family: "Geist", ui-sans-serif, system-ui, sans-serif; font-size: 11.5px; color: #17392c; }
/* Step 1 shows only what can go in: six formats as tiles, the last one standing for everything else. */
.t-flow-drop { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; gap: 8px; }
.t-flow-drop em { display: grid; place-items: center; align-content: center; gap: 5px; border-radius: 10px; background: color-mix(in srgb, var(--c) 10%, #fff); border: 1px solid color-mix(in srgb, var(--c) 24%, transparent); color: var(--c); font-size: 12px; font-style: normal; font-weight: 700; }
.t-flow-drop svg { width: 20px; height: 20px; }
/* Step 2: each invited child with a first, quiet read of how they are doing. */
.t-flow-roster { align-content: center; gap: 5px; }
.t-flow-roster > span { display: grid; grid-template-columns: minmax(0, 1fr) auto 50px; gap: 10px; align-items: center; padding: 5px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--s-line); }
.t-flow-roster b { display: grid; gap: 0; font-size: 11.5px; font-weight: 700; line-height: 1.2; }
.t-flow-roster code { font-size: 10px; font-weight: 400; color: var(--s-muted); }
.t-flow-bar { display: flex; gap: 2px; }
.t-flow-bar i { width: 9px; height: 9px; border-radius: 2px; background: #ece3d5; }
.t-flow-bar .g { background: #22c55e; }
.t-flow-bar .l { background: #86efac; }
.t-flow-bar .y { background: #facc15; }
.t-flow-bar .o { background: #f97316; }
.t-flow-roster .t-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-style: normal; font-weight: 700; }
.t-flow-roster .t-status::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 999px; background: var(--s-success); }
.t-flow-roster .t-status.is-help { color: #c2410c; }
.t-flow-roster .t-status.is-help::before { background: #f97316; }
/* Step 3: the analysis (blue) names one common mistake and how many it concerns; the suggested
   reaction is itself the button (yellow). */
.t-flow-insight { align-content: center; gap: 9px; padding-block: 10px; }
.t-flow-card { display: grid; gap: 2px; padding: 9px 12px 10px; border-radius: 10px; background: #eff6ff; border: 1px solid #bfdbfe; border-left: 4px solid #3b82f6; }
.t-flow-card small { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: #1d4ed8; }
.t-flow-card small svg { width: 13px; height: 13px; stroke-width: 2.4; }
.t-flow-card b { font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--s-ink); white-space: nowrap; }
.t-flow-card > span { font-size: 11.5px; line-height: 1.4; color: var(--s-ink-2); white-space: nowrap; }
/* The suggestion is the button itself: warm yellow against the blue analysis. */
.t-flow-suggest { display: flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 7px; background: #fef3c7; border: 1px solid #d9a441; box-shadow: 0 1.5px 0 #c08a2c; color: #713f12; font-size: 11.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.t-flow-suggest svg { flex: none; width: 13px; height: 13px; color: #b45309; }
.t-flow-suggest i { margin-left: auto; font-style: normal; }
/* The narrowest three-column range needs taller visuals (and a lower chevron) for the same content. */
@media (min-width: 801px) and (max-width: 999px) {
    .t-flow-visual { height: 196px; }
    .t-flow-card b, .t-flow-card > span, .t-flow-suggest { white-space: normal; }
    .t-flow-drop { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, 1fr); gap: 6px; }
    .t-flow-drop em { display: flex; justify-content: center; gap: 6px; }
    .t-flow-drop svg { width: 16px; height: 16px; }
    .t-flow-step + .t-flow-step::before { top: 118px; }
    .t-flow-roster > span { grid-template-columns: minmax(0, 1fr) auto 50px; gap: 6px; padding-inline: 8px; }
    .t-flow-roster code { display: none; }
    .t-flow-bar i { width: 7px; height: 7px; }
}
.t-flow-kicker { margin-top: 8px; font-family: var(--s-display); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--s-muted); }
.t-flow-step > b { font-family: var(--s-display); font-size: 19px; font-weight: 600; color: var(--s-ink); }
.t-flow-step > p { grid-column: 1 / -1; font-size: 15.5px; line-height: 1.55; }
.t-flow-ctas { justify-content: center; margin-top: 40px; }
@media (min-width: 801px) {
    /* chevron in the gap between two steps, level with the middle of the visuals */
    .t-flow-step + .t-flow-step::before {
        content: "";
        position: absolute;
        top: 96px;
        left: -14px;
        width: 8px;
        height: 8px;
        border-top: 2px solid var(--s-emerald);
        border-right: 2px solid var(--s-emerald);
        transform: translate(-50%, -50%) rotate(45deg);
    }
}
@media (max-width: 800px) { .t-flow { grid-template-columns: minmax(0, 1fr); row-gap: 20px; } }

/* Pricing tiers, shared by the teacher page, the pricing page and the page for school leadership. */
.p-tier-price { display: grid; gap: 2px; margin: -4px 0 0; }
/* Figures in the text face: Sour Gummy draws its zero with a slash, which reads like Ø in prices. */
.p-tier-price > .p-money { font-family: var(--s-text); font-size: 40px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--s-ink); }
.p-tier-price small { font-size: 14.5px; color: var(--s-muted); }
/* Subgrid keeps price, description, list and button on the same row across the three cards. */
.p-tiers { gap: 24px; }
.p-tiers .t-pillar { grid-template-rows: subgrid; grid-row: span 4; row-gap: 22px; padding: 34px 32px 32px; }
.p-tiers .s-checks { gap: 12px; }
.p-tiers .t-pillar .s-btn { justify-self: start; align-self: end; }
.p-tiers .t-pillar .s-checks { align-self: start; }
.p-tier-featured { position: relative; border-color: var(--s-orange); box-shadow: 0 2px 0 rgba(14, 51, 34, .05), 0 24px 56px rgba(249, 115, 22, .18); }
.p-tier-badge {
    position: absolute;
    top: -15px;
    left: 26px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--s-orange);
    color: #fff;
    font-family: var(--s-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .03em;
}
/* A flat illustration in the bottom right corner of each card, in the card's colour, drawn as a
   background so it costs no space; it fades out towards the text. */
.p-tier { background-repeat: no-repeat; background-position: right -12px bottom -8px; background-size: 150px 116px; }
.p-tier-privat { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 220 170%22%3E%3Cdefs%3E%3ClinearGradient id=%22f%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%220%22%3E%3Cstop offset=%22.12%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3Cstop offset=%22.36%22 stop-color=%22%23fff%22/%3E%3C/linearGradient%3E%3Cmask id=%22m%22%3E%3Crect width=%22220%22 height=%22170%22 fill=%22url%28%23f%29%22/%3E%3C/mask%3E%3C/defs%3E%3Cg mask=%22url%28%23m%29%22 opacity=%22.72%22%3E%3Crect x=%220%22 y=%22150%22 width=%22220%22 height=%227%22 rx=%223.5%22 fill=%22%23bae6fd%22/%3E %3Cpath d=%22M168 34h36a10 10 0 0 1 10 10v14a10 10 0 0 1-10 10h-22l-10 8v-8h-4a10 10 0 0 1-10-10V44a10 10 0 0 1 10-10z%22 fill=%22%23f0f9ff%22 stroke=%22%23bae6fd%22 stroke-width=%222%22/%3E %3Ccircle cx=%22176%22 cy=%2251%22 r=%223%22 fill=%22%237dd3fc%22/%3E%3Ccircle cx=%22186%22 cy=%2251%22 r=%223%22 fill=%22%237dd3fc%22/%3E%3Ccircle cx=%22196%22 cy=%2251%22 r=%223%22 fill=%22%237dd3fc%22/%3E %3Cpath d=%22M74 152c0-30 20-46 46-46s46 16 46 46z%22 fill=%22%23bae6fd%22/%3E %3Cpath d=%22M108 107 120 121l12-14%22 fill=%22none%22 stroke=%22%237dd3fc%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E %3Cpath d=%22M113 94h14v9a7 7 0 0 1-14 0z%22 fill=%22%23e0f2fe%22/%3E %3Ccircle cx=%22120%22 cy=%2274%22 r=%2222%22 fill=%22%23f0f9ff%22/%3E %3Cpath d=%22M97 77c-4-19 8-33 24-33 16 0 27 11 23 30-4-9-10-14-19-16-7 6-16 10-28 19z%22 fill=%22%237dd3fc%22/%3E %3Ccircle cx=%22111%22 cy=%2277%22 r=%226.5%22 fill=%22none%22 stroke=%22%2338bdf8%22 stroke-width=%222%22/%3E %3Ccircle cx=%22129%22 cy=%2277%22 r=%226.5%22 fill=%22none%22 stroke=%22%2338bdf8%22 stroke-width=%222%22/%3E %3Cpath d=%22M117.5 76.5h5%22 stroke=%22%2338bdf8%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E %3Cpath d=%22M112 87c2.4 2.8 5 4 8 4s5.6-1.2 8-4%22 fill=%22none%22 stroke=%22%2338bdf8%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E %3Cpath d=%22M86 116a6 6 0 0 1 6-6h56a6 6 0 0 1 6 6v34H86z%22 fill=%22%23e0f2fe%22 stroke=%22%237dd3fc%22 stroke-width=%222%22/%3E %3Ccircle cx=%22120%22 cy=%22130%22 r=%225%22 fill=%22%23bae6fd%22/%3E %3Crect x=%2276%22 y=%22148%22 width=%2288%22 height=%226%22 rx=%223%22 fill=%22%237dd3fc%22/%3E %3Cpath d=%22M182 132h18v14a6 6 0 0 1-6 6h-6a6 6 0 0 1-6-6z%22 fill=%22%23e0f2fe%22 stroke=%22%237dd3fc%22 stroke-width=%222%22/%3E %3Cpath d=%22M200 136h3a4 4 0 0 1 0 8h-3%22 fill=%22none%22 stroke=%22%237dd3fc%22 stroke-width=%222%22/%3E %3Cpath d=%22M28 150V120a5 5 0 0 1 5-5h26a5 5 0 0 1 5 5v30%22 fill=%22%23f0f9ff%22 stroke=%22%23bae6fd%22 stroke-width=%222%22/%3E %3Cpath d=%22M36 126h20M36 134h14%22 stroke=%22%23bae6fd%22 stroke-width=%222.5%22 stroke-linecap=%22round%22/%3E%3C/g%3E%3C/svg%3E"); }
.p-tier-pilot { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 220 170%22%3E%3Cdefs%3E%3ClinearGradient id=%22f%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%220%22%3E%3Cstop offset=%22.12%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3Cstop offset=%22.36%22 stop-color=%22%23fff%22/%3E%3C/linearGradient%3E%3Cmask id=%22m%22%3E%3Crect width=%22220%22 height=%22170%22 fill=%22url%28%23f%29%22/%3E%3C/mask%3E%3C/defs%3E%3Cg mask=%22url%28%23m%29%22 opacity=%22.72%22%3E%3Crect x=%220%22 y=%22150%22 width=%22220%22 height=%227%22 rx=%223.5%22 fill=%22%23fed7aa%22/%3E %3Cg transform=%22translate%2834 0%29%22%3E %3Cpath d=%22M22 26h34a10 10 0 0 1 10 10v12a10 10 0 0 1-10 10H44l-10 8v-8h-2a10 10 0 0 1-10-10V36a10 10 0 0 1 10-10z%22 fill=%22%23fff7ed%22 stroke=%22%23fed7aa%22 stroke-width=%222%22/%3E %3Cpath d=%22M34.5 38a4.5 4.5 0 0 1 8.8 1.3c0 3-4.3 3.6-4.3 5.8M39 50.5h.01%22 fill=%22none%22 stroke=%22%23fb923c%22 stroke-width=%222.4%22 stroke-linecap=%22round%22/%3E %3Cpath d=%22M34 152c0-27 17-41 39-41s39 14 39 41z%22 fill=%22%23fed7aa%22/%3E %3Cpath d=%22M63 111 73 123l10-12%22 fill=%22none%22 stroke=%22%23fdba74%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E %3Ccircle cx=%2273%22 cy=%2284%22 r=%2219%22 fill=%22%23fff7ed%22/%3E %3Cpath d=%22M52 94c-5-20 5-33 21-33 17 0 26 12 22 32l-4-15c-7 0-14-3-19-9-4 7-10 12-20 13z%22 fill=%22%23fdba74%22/%3E %3Cpath d=%22M66 93c2 2.4 4.4 3.5 7 3.5s5-1.1 7-3.5%22 fill=%22none%22 stroke=%22%23fb923c%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E %3Ccircle cx=%2266.5%22 cy=%2284%22 r=%221.9%22 fill=%22%23fb923c%22/%3E%3Ccircle cx=%2279.5%22 cy=%2284%22 r=%221.9%22 fill=%22%23fb923c%22/%3E %3C/g%3E %3Cg transform=%22translate%288 0%29%22%3E %3Cpath d=%22M166 22h34a10 10 0 0 1 10 10v12a10 10 0 0 1-10 10h-2v8l-10-8h-22a10 10 0 0 1-10-10V32a10 10 0 0 1 10-10z%22 fill=%22%23fff7ed%22 stroke=%22%23fed7aa%22 stroke-width=%222%22/%3E %3Cpath d=%22m177 38 6 6 11-12%22 fill=%22none%22 stroke=%22%23fb923c%22 stroke-width=%222.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E %3Cpath d=%22M108 152c0-27 17-41 39-41s39 14 39 41z%22 fill=%22%23fdba74%22/%3E %3Cpath d=%22M137 111 147 123l10-12%22 fill=%22none%22 stroke=%22%23fb923c%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-opacity=%22.6%22/%3E %3Ccircle cx=%22147%22 cy=%2284%22 r=%2219%22 fill=%22%23fff7ed%22/%3E %3Cpath d=%22M128 83c-2-15 7-24 19-24 13 0 21 9 19 23-5-6-11-9-19-9-7 0-13 3-19 10z%22 fill=%22%23fb923c%22 fill-opacity=%22.75%22/%3E %3Cpath d=%22M140 93c2 2.4 4.4 3.5 7 3.5s5-1.1 7-3.5%22 fill=%22none%22 stroke=%22%23fb923c%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E %3Ccircle cx=%22140.5%22 cy=%2285%22 r=%221.9%22 fill=%22%23fb923c%22/%3E%3Ccircle cx=%22153.5%22 cy=%2285%22 r=%221.9%22 fill=%22%23fb923c%22/%3E %3C/g%3E %3Cpath d=%22M104 120a6 6 0 0 1 6-6h40a6 6 0 0 1 6 6v30h-52z%22 fill=%22%23ffedd5%22 stroke=%22%23fdba74%22 stroke-width=%222%22/%3E %3Ccircle cx=%22130%22 cy=%22132%22 r=%224.5%22 fill=%22%23fed7aa%22/%3E %3Crect x=%2296%22 y=%22148%22 width=%2268%22 height=%226%22 rx=%223%22 fill=%22%23fdba74%22/%3E%3C/g%3E%3C/svg%3E"); }
.p-tier-schule { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 220 170%22%3E%3Cdefs%3E%3ClinearGradient id=%22f%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%220%22%3E%3Cstop offset=%22.12%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3Cstop offset=%22.36%22 stop-color=%22%23fff%22/%3E%3C/linearGradient%3E%3Cmask id=%22m%22%3E%3Crect width=%22220%22 height=%22170%22 fill=%22url%28%23f%29%22/%3E%3C/mask%3E%3C/defs%3E%3Cg mask=%22url%28%23m%29%22 opacity=%22.72%22%3E%3Crect x=%220%22 y=%22150%22 width=%22220%22 height=%227%22 rx=%223.5%22 fill=%22%23a7f3d0%22/%3E %3Cpath d=%22M130 42V14%22 stroke=%22%236ee7b7%22 stroke-width=%222.5%22 stroke-linecap=%22round%22/%3E %3Cpath d=%22M130 15h20l-5 6 5 6h-20z%22 fill=%22%236ee7b7%22/%3E %3Cpath d=%22M72 150V82h116v68%22 fill=%22%23ecfdf5%22 stroke=%22%23a7f3d0%22 stroke-width=%222%22/%3E %3Cpath d=%22M62 86 130 44l68 42%22 fill=%22%23d1fae5%22 stroke=%22%23a7f3d0%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E %3Ccircle cx=%22130%22 cy=%2270%22 r=%229%22 fill=%22%23fff%22 stroke=%22%236ee7b7%22 stroke-width=%222%22/%3E %3Cpath d=%22M130 65v5l3.5 2%22 fill=%22none%22 stroke=%22%2334d399%22 stroke-width=%221.8%22 stroke-linecap=%22round%22/%3E %3Cg fill=%22%23fff%22 stroke=%22%23a7f3d0%22 stroke-width=%222%22%3E%3Crect x=%2284%22 y=%2294%22 width=%2222%22 height=%2218%22 rx=%224%22/%3E%3Crect x=%22154%22 y=%2294%22 width=%2222%22 height=%2218%22 rx=%224%22/%3E%3Crect x=%2284%22 y=%22122%22 width=%2222%22 height=%2218%22 rx=%224%22/%3E%3Crect x=%22154%22 y=%22122%22 width=%2222%22 height=%2218%22 rx=%224%22/%3E%3C/g%3E %3Cpath d=%22M116 150v-26a14 14 0 0 1 28 0v26%22 fill=%22%23a7f3d0%22/%3E %3Cg%3E%3Ccircle cx=%2230%22 cy=%22124%22 r=%228%22 fill=%22%236ee7b7%22/%3E%3Cpath d=%22M16 152c0-13 6-19 14-19s14 6 14 19z%22 fill=%22%236ee7b7%22/%3E%3C/g%3E %3Cg%3E%3Ccircle cx=%2254%22 cy=%22130%22 r=%227%22 fill=%22%23a7f3d0%22/%3E%3Cpath d=%22M42 152c0-11 5-16 12-16s12 5 12 16z%22 fill=%22%23a7f3d0%22/%3E%3C/g%3E %3Cg%3E%3Ccircle cx=%22206%22 cy=%22128%22 r=%227.5%22 fill=%22%236ee7b7%22/%3E%3Cpath d=%22M193 152c0-12 6-18 13-18s13 6 13 18z%22 fill=%22%236ee7b7%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.p-tiers-foot { max-width: none; margin: 18px auto 0; text-align: center; font-size: 15px; line-height: 1.5; color: var(--s-muted); }

/* FAQ, compact: a plain list divided by hairlines instead of a card per question. */
.t-faq-section .s-section-head { max-width: none; }
.t-faq-compact .s-faq { gap: 0; border-top: 1.5px solid var(--s-line); }
.t-faq-compact .s-faq details { border: 0; border-bottom: 1.5px solid var(--s-line); border-radius: 0; background: transparent; }
.t-faq-compact .s-faq summary { padding: 12px 4px; font-size: 16.5px; }
.t-faq-compact .s-faq details p { padding: 0 4px 14px; max-width: none; font-size: 15.5px; line-height: 1.5; }

.s-cta-note { margin-top: 14px; font-size: 14px; opacity: .72; }
.s-cta-note span { white-space: nowrap; }

/* Closing call to action: a personal nudge, with a face instead of the mascot. */
.t-final { gap: clamp(24px, 4vw, 56px); }
/* The closing card stays quiet: no dot pattern behind it. */
.t-final::before { display: none; }
.s-cta .t-final-mail { align-self: center; font-size: 15px; color: rgba(255, 255, 255, .8); text-decoration: underline; text-underline-offset: 3px; }
.t-final-person { display: grid; justify-items: center; gap: 12px; margin: 0; }
.t-final-photo { display: block; width: clamp(140px, 15vw, 180px); aspect-ratio: 1; overflow: hidden; border-radius: 999px; background: radial-gradient(circle at 50% 35%, #6ee7b7, #10b981 70%); }
.s-cta .t-final-photo img { display: block; width: 100%; height: auto; margin-top: 4%; }
.t-final-person figcaption { display: grid; text-align: center; font-size: 14px; color: rgba(255, 255, 255, .72); }
.t-final-person figcaption b { font-family: var(--s-display); font-size: 18px; font-weight: 600; color: #fff; }
@media (max-width: 760px) {
    .t-final-person { order: -1; justify-self: start; }
    .t-final-photo { width: 132px; }
}

/* === EXPERIMENT (fobizz lessons) — delete this block to undo ===
   One notch stronger tint so the alternating sections read at a glance. */
:root { --s-tint-bg: #f3e6d3; }
.s-section-tint { background: var(--s-tint-bg); }
/* === end experiment === */

/* ---------- Students & parents (lernen.html): short page after the live site ---------- */
/* Studyflash-style hero: outcome headline, one line, big actions and a proof line before the
   preview, which is shown smaller than on the landing page. */
.f-learn-hero { padding-bottom: clamp(56px, 7vw, 96px); }
.f-learn-hero .s-eyebrow { margin-bottom: 14px; }
/* The promise runs on one line on desktop, like the headline it is modelled on. */
.f-learn-hero .s-h1 { max-width: 1120px; font-size: clamp(34px, 4.6vw, 58px); }
.f-learn-hero .s-lead { margin-bottom: 0; text-wrap: balance; }
.f-learn-ctas { display: flex; justify-content: center; margin-top: clamp(24px, 3vw, 34px); }
.f-learn-start { min-height: 64px; padding: 14px 40px; font-size: 20px; }
.f-learn-proof { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin: 18px 0 clamp(40px, 5vw, 68px); font-size: 15px; font-weight: 600; color: var(--s-muted); }
.f-learn-faces { display: flex; }
.f-learn-faces img { width: 32px; height: 32px; margin-left: -9px; border-radius: 999px; border: 2px solid var(--s-bg); background: var(--c); }
.f-learn-faces img:first-child { margin-left: 0; }
@media (min-width: 901px) { .s-landing-hero.f-learn-hero .fs-figure { zoom: .8; } }
@media (max-width: 480px) {
    .f-learn-start { width: 100%; min-height: 58px; }
}
.f-learn .t-trust-band { margin-top: clamp(40px, 5vw, 64px); }

/* ---------- Legal page (impressum-agb.html): the texts come from /i18n.js ---------- */
.s-legal .s-h1 { margin: 0 0 18px; font-size: clamp(34px, 4vw, 48px); }
.s-legal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-bottom: 18px; border-bottom: 1.5px solid var(--s-line); }
.s-legal-toc { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.s-legal-toc a { font-family: var(--s-display); font-size: 16px; font-weight: 600; color: var(--s-ink); text-decoration: underline; text-decoration-color: var(--s-emerald); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.s-legal h2 { margin: 40px 0 14px; scroll-margin-top: 96px; }
/* The other language's section ids; they sit right before the heading they stand for. */
.s-legal-alias { display: block; scroll-margin-top: 96px; }
.s-legal-card { padding: clamp(22px, 3vw, 34px); font-size: 16.5px; line-height: 1.65; color: var(--s-ink-2); overflow-wrap: anywhere; }
.s-legal-card p { margin: 0 0 12px; }
.s-legal-card p:last-child { margin-bottom: 0; }
.s-legal-card strong { color: var(--s-ink); }
.s-legal-card ul, .s-legal-card ol { margin: 0 0 12px; padding-left: 22px; }
.s-legal-card ul { list-style: disc; }
.s-legal-card ol { list-style: decimal; }
.s-legal-card li { margin: 4px 0; }
.s-legal-card h3 { margin: 28px 0 8px; font-family: var(--s-display); font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--s-ink); scroll-margin-top: 96px; }
.s-legal-card h3:first-child { margin-top: 0; }
.s-legal-card a { color: var(--s-ink); text-decoration: underline; text-underline-offset: 3px; }
.s-legal-stand { margin-top: 28px; font-size: 14px; color: var(--s-muted); }
.s-legal-table { width: 100%; margin: 4px 0 14px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.s-legal-table th, .s-legal-table td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--s-line); text-align: left; vertical-align: top; }
.s-legal-table th { font-weight: 700; color: var(--s-ink); }
/* Phones: each processor becomes a small block instead of a squeezed three-column row. */
@media (max-width: 560px) {
    .s-legal-table thead { display: none; }
    .s-legal-table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--s-line); }
    .s-legal-table td { display: block; padding: 0; border: 0; }
    .s-legal-table td:first-child { font-weight: 700; color: var(--s-ink); }
}

/* ---------- Booking page (gespraech.html): what the call is about, beside the cal.com calendar ---------- */
.t-book { padding: clamp(36px, 5vw, 72px) 0 clamp(56px, 7vw, 96px); }
/* Stacked by default; beside each other only where the calendar gets 800px, because below
   768px inside its iframe cal.com moves the times under the month and the card grows twice as tall. */
.t-book-grid { display: grid; grid-template-areas: "head" "points" "cal" "person"; max-width: 820px; }
.t-book-head { grid-area: head; }
.t-book-points { grid-area: points; }
.t-book-cal { grid-area: cal; margin-top: 32px; }
.t-book-person-wrap { grid-area: person; }
/* cal.com centres its 720px booker in the iframe, so the grid runs 40px past the wrap on the
   right: the visible calendar then ends flush with the header while the copy starts with it. */
@media (min-width: 1240px) {
    .t-book .t-book-grid { width: min(1160px, calc(100% - 60px)); max-width: none; margin-left: max(20px, calc((100% - 1120px) / 2)); grid-template-columns: minmax(0, 1fr) 800px; grid-template-areas: "head cal" "points cal" "person cal"; grid-template-rows: auto auto 1fr; align-items: start; column-gap: 48px; }
    .t-book-cal { margin-top: 0; }
}
.t-book-head .s-eyebrow { margin-bottom: 14px; }
.t-book-head .s-h1 { font-size: clamp(34px, 4.4vw, 52px); }
.t-book-head .s-lead { margin-top: 16px; }
.t-book-points.s-checks { margin-top: 28px; gap: 12px; color: var(--s-ink); }
.t-book-person { display: flex; align-items: center; gap: 14px; margin-top: 32px; padding-top: 24px; border-top: 1.5px solid var(--s-line); }
.t-book-photo { flex: 0 0 auto; width: 60px; height: 60px; overflow: hidden; border-radius: 999px; background: radial-gradient(circle at 50% 35%, #6ee7b7, #10b981 70%); }
.t-book-photo img { display: block; width: 100%; height: auto; margin-top: 4%; }
.t-book-person figcaption { display: grid; font-size: 15px; line-height: 1.4; color: var(--s-muted); }
.t-book-person b { font-family: var(--s-display); font-size: 17px; font-weight: 600; color: var(--s-ink); }
.t-book-alt { margin-top: 18px; font-size: 15px; color: var(--s-muted); }
.t-book-alt a, .t-book-note a { color: var(--s-ink); text-decoration: underline; text-underline-offset: 3px; }
/* Holds the height while cal.com loads, so the page does not jump. The booker draws its own card. */
.t-book-frame { min-height: 560px; }
.t-book-fallback { display: grid; place-items: center; min-height: 560px; }
.t-book-note { margin-top: 12px; font-size: 13.5px; color: var(--s-muted); text-align: center; }

/* ---------- Analytics consent (partials/analytics.njk) ---------- */
/* Both answers look the same: declining has to be as easy as agreeing. */
.s-consent { position: fixed; left: 16px; bottom: 16px; z-index: 60; width: min(420px, calc(100% - 32px)); padding: 18px 20px; border-radius: var(--s-r-l); background: var(--s-card); box-shadow: var(--s-shadow); font-size: 15px; line-height: 1.5; color: var(--s-ink-2); }
.s-consent a { color: var(--s-ink); text-decoration: underline; text-underline-offset: 3px; }
.s-consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.s-btn.s-consent-btn { min-height: 44px; padding: 10px 16px; font-size: 16px; background: var(--s-bg-3); color: var(--s-ink); }
.s-btn.s-consent-btn:hover { background: #e4d4bc; }

/* ---------- Languages (locales.js; switch in the header, hint in partials/language-hint.njk) ---------- */
/* The switch names only the other language, quieter than the links beside it. The 320px
   header has no room for a fifth control; there the footer and the language hint remain. */
.s-lang { color: var(--s-muted); }
@media (max-width: 350px) { .s-nav .s-lang { display: none; } }
.s-landing-lang { position: absolute; top: 2px; right: 0; padding: 8px 12px; border-radius: 999px; font-family: var(--s-display); font-size: 16px; font-weight: 600; color: var(--s-muted); text-decoration: none; }
.s-landing-lang:hover { background: var(--s-bg-2); color: var(--s-ink); }
@media (max-width: 900px) { .s-landing-hero > .s-wrap { position: relative; } }
@media (min-width: 901px) { .s-landing-lang { top: clamp(32px, 3.4vw, 48px); right: clamp(24px, 2.6vw, 40px); } }
.s-langhint { position: relative; display: flex; justify-content: center; padding: 9px 48px; background: var(--s-bg-3); font-size: 14.5px; line-height: 1.45; color: var(--s-ink-2); text-align: center; }
.s-langhint[hidden] { display: none; }
.s-langhint-close { position: absolute; top: 50%; right: 8px; width: 32px; height: 32px; transform: translateY(-50%); border: 0; border-radius: 999px; background: none; font-size: 20px; line-height: 1; color: var(--s-ink-2); cursor: pointer; }
.s-langhint-close:hover { background: rgba(14, 51, 34, .08); }
.s-footer-langs b { color: var(--s-ink); }

/* ---------- Not found (404.html) ---------- */
.s-notfound { padding-block: clamp(72px, 11vw, 150px); text-align: center; }
.s-notfound .s-eyebrow { margin-bottom: 14px; }
.s-notfound .s-lead { margin-top: 16px; }
.s-notfound .t-hero-ctas { justify-content: center; }