/* MS-586 - the public storefront (catalogue, course page, teachers index, a guest's lesson prompt). Sits on the cosmic
   shell like the teacher public profile; colours are the shell's tokens (--ink, --surface, --line, --accent...),
   which the theme switch flips. Mobile first. */

.nc-sf, .nc-sf-lessonbar, .nc-sf-ssr {
    --sf-surface: var(--surface, #fff);
    --sf-surface-2: var(--surface-2, #f4f4f8);
    --sf-ink: var(--ink, #14141f);
    --sf-muted: var(--ink-2, #5b5b6b);
    --sf-line: var(--line, rgba(0, 0, 0, 0.12));
    --sf-accent: var(--accent, #6d5dfc);
    --sf-accent-ink: var(--accent-ink, #fff);
    color: var(--sf-ink);
    /* the shell's typeface (cosmic-shell.js sets --font-body / --font-display); without it the page fell back to serif */
    font-family: var(--font-body, 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif);
}
.nc-sf input, .nc-sf select, .nc-sf button { font-family: inherit; }

.nc-sf-main { display: grid; gap: 1.25rem; margin: 0 auto 2.5rem; min-width: 0; }
.nc-sf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nc-sf-muted { margin: 0; color: var(--sf-muted); font-size: 0.9rem; }

.nc-sf-crumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: 0.85rem; color: var(--sf-muted); }
.nc-sf-crumbs a { color: var(--sf-muted); text-decoration: none; }
.nc-sf-crumbs a:hover, .nc-sf-crumbs a:focus-visible { color: var(--sf-accent); text-decoration: underline; }
.nc-sf-crumbs a[aria-current] { color: var(--sf-ink); font-weight: 600; }

.nc-sf-hero {
    display: grid;
    gap: 0.6rem;
    padding: 1.4rem 1.5rem;
    border-radius: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--sf-accent) 30%, transparent);
    background:
        radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--sf-accent) 20%, transparent), transparent 60%),
        var(--sf-surface);
}
.nc-sf-hero h1, .nc-sf-course__copy h1 {
    margin: 0;
    font-family: var(--font-display, inherit);
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}
.nc-sf-eyebrow { margin: 0; color: var(--sf-accent); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.nc-sf-lede { margin: 0; max-width: 62ch; color: var(--sf-muted); font-size: 1.02rem; line-height: 1.55; }

.nc-sf-pills, .nc-sf-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.3rem 0 0; padding: 0; list-style: none; }
.nc-sf-pill, .nc-sf-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--sf-line);
    border-radius: 999px;
    color: var(--sf-ink);
    background: var(--sf-surface);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}
.nc-sf-pill span { color: var(--sf-muted); font-weight: 500; }
.nc-sf-pill.is-active { border-color: var(--sf-accent); color: var(--sf-accent); background: color-mix(in srgb, var(--sf-accent) 12%, var(--sf-surface)); }
.nc-sf-chip { min-height: 2.25rem; background: color-mix(in srgb, var(--sf-accent) 10%, var(--sf-surface)); }
.nc-sf-chip i { color: var(--sf-muted); }

.nc-sf-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
    align-items: end;
    padding: 1rem;
    border: 1px solid var(--sf-line);
    border-radius: 1rem;
    background: var(--sf-surface);
}
.nc-sf-filters--inline { grid-template-columns: minmax(0, 1fr) auto; }
.nc-sf-field { display: grid; gap: 0.3rem; min-width: 0; }
.nc-sf-field--grow { grid-column: 1 / -1; }
.nc-sf-filters--inline .nc-sf-field--grow { grid-column: auto; }
.nc-sf-field label, .nc-sf-field__label { color: var(--sf-muted); font-size: 0.8rem; font-weight: 700; }
.nc-sf-field input, .nc-sf-field select {
    width: 100%;
    min-height: 2.75rem;
    box-sizing: border-box;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--sf-line);
    border-radius: 0.6rem;
    color: var(--sf-ink);
    background: var(--sf-surface-2);
    font: inherit;
}
.nc-sf-field input:focus-visible, .nc-sf-field select:focus-visible { outline: 3px solid color-mix(in srgb, var(--sf-accent) 45%, transparent); outline-offset: 1px; }
.nc-sf-range { display: flex; align-items: center; gap: 0.4rem; }
.nc-sf-range input { min-width: 0; }
.nc-sf-filters__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.nc-sf-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0.55rem 1.05rem;
    border: 1px solid var(--sf-line);
    border-radius: 0.65rem;
    color: var(--sf-ink);
    background: var(--sf-surface);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.nc-sf-btn--primary { border-color: var(--sf-accent); color: var(--sf-accent-ink); background: var(--sf-accent); }
.nc-sf-btn--block { width: 100%; }
.nc-sf-btn--small { min-height: 2.5rem; padding: 0.4rem 0.8rem; font-size: 0.9rem; }
.nc-sf-link { color: var(--sf-accent); font-weight: 700; text-decoration: none; }
.nc-sf-link:hover, .nc-sf-link:focus-visible { text-decoration: underline; }

.nc-sf-count { margin: 0; color: var(--sf-muted); font-size: 1rem; font-weight: 600; }

.nc-sf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1rem; }
.nc-sf-card {
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border: 1px solid var(--sf-line);
    border-radius: 1rem;
    background: var(--sf-surface);
}
.nc-sf-card__cover { display: block; aspect-ratio: 16 / 9; background: var(--sf-surface-2); }
.nc-sf-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nc-sf-card__body { display: grid; align-content: start; gap: 0.35rem; padding: 0.85rem 0.95rem 1rem; min-width: 0; }
.nc-sf-card__meta { margin: 0; color: var(--sf-accent); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; }
.nc-sf-card__title { margin: 0; font-size: 1.05rem; line-height: 1.3; overflow-wrap: anywhere; }
.nc-sf-card__title a { color: var(--sf-ink); text-decoration: none; }
.nc-sf-card__title a:hover, .nc-sf-card__title a:focus-visible { color: var(--sf-accent); text-decoration: underline; }
.nc-sf-card__teacher, .nc-sf-card__desc { margin: 0; color: var(--sf-muted); font-size: 0.88rem; line-height: 1.45; overflow-wrap: anywhere; }
.nc-sf-card__desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nc-sf-card__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; margin: 0.35rem 0 0; font-size: 0.9rem; }
.nc-sf-card__price { font-weight: 800; }
.nc-sf-card__price.is-free, .nc-sf-buy__price.is-free { color: var(--accent2, var(--sf-accent)); }
.nc-sf-card__length { color: var(--sf-muted); }

.nc-sf-pager { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.nc-sf-pager a {
    display: inline-flex; align-items: center; gap: 0.35rem; min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.8rem;
    justify-content: center; border: 1px solid var(--sf-line); border-radius: 0.6rem; color: var(--sf-ink); background: var(--sf-surface);
    text-decoration: none; font-weight: 600;
}
.nc-sf-pager a.is-current { border-color: var(--sf-accent); color: var(--sf-accent-ink); background: var(--sf-accent); }

.nc-sf-empty {
    display: grid; justify-items: center; gap: 0.5rem; padding: 2rem 1.25rem; text-align: center;
    border: 1px dashed var(--sf-line); border-radius: 1rem; background: var(--sf-surface);
}
.nc-sf-empty > i { font-size: 2rem; color: var(--sf-accent); }
.nc-sf-empty h1, .nc-sf-empty h2 { margin: 0; font-size: 1.3rem; }
.nc-sf-empty p { margin: 0; color: var(--sf-muted); max-width: 48ch; }
.nc-sf-empty__tips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1rem; margin: 0.4rem 0 0; padding: 0; list-style: none; }
.nc-sf-empty__tips a { color: var(--sf-accent); font-weight: 700; }

/* ---------------------------------------------------------------- the course page */
.nc-sf-course__hero {
    display: grid; gap: 1.25rem; align-items: center; padding: 1.4rem 1.5rem; border-radius: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--sf-accent) 30%, transparent);
    background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--sf-accent) 20%, transparent), transparent 60%), var(--sf-surface);
}
.nc-sf-course__copy { display: grid; gap: 0.6rem; min-width: 0; }
.nc-sf-course__by { margin: 0; font-weight: 600; }
.nc-sf-course__by a { color: var(--sf-accent); }
.nc-sf-course__cover { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0.9rem; background: var(--sf-surface-2); }
.nc-sf-course__layout { display: grid; gap: 1.25rem; align-items: start; }
.nc-sf-course__content { display: grid; gap: 1rem; min-width: 0; }
.nc-sf-panel { padding: 1.1rem 1.25rem; border: 1px solid var(--sf-line); border-radius: 1rem; background: var(--sf-surface); min-width: 0; }
.nc-sf-panel h2 { margin: 0 0 0.6rem; font-size: 1.15rem; }
.nc-sf-prose { color: var(--sf-ink); line-height: 1.6; overflow-wrap: anywhere; }
.nc-sf-ticks, .nc-sf-bullets { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.nc-sf-ticks li, .nc-sf-bullets li { position: relative; padding-inline-start: 1.6rem; line-height: 1.5; overflow-wrap: anywhere; }
.nc-sf-ticks li::before { content: "\2713"; position: absolute; inset-inline-start: 0; color: var(--accent2, var(--sf-accent)); font-weight: 800; }
.nc-sf-bullets li::before { content: "\2022"; position: absolute; inset-inline-start: 0.35rem; color: var(--sf-muted); }
.nc-sf-section { margin-top: 0.6rem; border: 1px solid var(--sf-line); border-radius: 0.75rem; overflow: hidden; }
.nc-sf-section summary {
    display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: 2.75rem; padding: 0.6rem 0.9rem;
    cursor: pointer; background: var(--sf-surface-2); font-weight: 700; list-style-position: inside;
}
.nc-sf-section summary span { min-width: 0; overflow-wrap: anywhere; }
.nc-sf-section summary small { color: var(--sf-muted); font-weight: 600; white-space: nowrap; }
.nc-sf-lessons { display: grid; margin: 0; padding: 0; list-style: none; }
.nc-sf-lessons li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.6rem 0.9rem; border-top: 1px solid var(--sf-line); overflow-wrap: anywhere; }
.nc-sf-lessons li > i { color: var(--sf-muted); width: 1rem; }
.nc-sf-lessons li.is-preview > i { color: var(--sf-accent); }
.nc-sf-lessons li a { color: var(--sf-ink); font-weight: 600; }
.nc-sf-lessons li small { margin-inline-start: auto; color: var(--sf-muted); }
.nc-sf-badge {
    display: inline-flex; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700;
    color: var(--sf-accent); background: color-mix(in srgb, var(--sf-accent) 14%, transparent);
}
.nc-sf-teacher__row { display: flex; gap: 1rem; align-items: flex-start; }
.nc-sf-teacher__row p { margin: 0.2rem 0 0.4rem; color: var(--sf-muted); }
.nc-sf-avatar {
    flex: 0 0 auto; width: 4.5rem; height: 4.5rem; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
    color: var(--sf-accent); background: color-mix(in srgb, var(--sf-accent) 18%, transparent); font-size: 1.6rem; font-weight: 800;
}
.nc-sf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nc-sf-avatar--lg { width: 6rem; height: 6rem; font-size: 2.1rem; }

.nc-sf-buy {
    display: grid; gap: 0.75rem; padding: 1.2rem; border: 1px solid color-mix(in srgb, var(--sf-accent) 35%, var(--sf-line));
    border-radius: 1rem; background: var(--sf-surface);
}
.nc-sf-buy__price { margin: 0; font-size: 1.9rem; font-weight: 800; }
.nc-sf-buy__note { font-size: 0.82rem; }
.nc-sf-facts { display: grid; gap: 0.5rem; margin: 0.2rem 0 0; }
.nc-sf-facts div { display: flex; justify-content: space-between; gap: 1rem; padding-top: 0.5rem; border-top: 1px solid var(--sf-line); }
.nc-sf-facts dt { color: var(--sf-muted); }
.nc-sf-facts dd { margin: 0; font-weight: 600; text-align: end; overflow-wrap: anywhere; }
.nc-sf-previews h2 { margin: 0.2rem 0 0.4rem; font-size: 1rem; }
.nc-sf-previews ul { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.nc-sf-previews a { color: var(--sf-accent); font-weight: 600; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- teachers */
.nc-sf-grid--teachers { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.nc-sf-tcard {
    display: grid; justify-items: center; align-content: start; gap: 0.45rem; padding: 1.25rem 1rem; text-align: center;
    border: 1px solid var(--sf-line); border-radius: 1rem; background: var(--sf-surface);
}
.nc-sf-tcard__name { margin: 0.3rem 0 0; font-size: 1.1rem; }
.nc-sf-tcard__name a { color: var(--sf-ink); text-decoration: none; }
.nc-sf-tcard__name a:hover, .nc-sf-tcard__name a:focus-visible { color: var(--sf-accent); text-decoration: underline; }
.nc-sf-tcard__headline { margin: 0; color: var(--sf-muted); font-size: 0.88rem; line-height: 1.45; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- a guest on a lesson (newcourses-lesson.php) */
.nc-sf-lessonbar {
    position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center;
    justify-content: space-between; margin-top: 1rem; padding: 0.8rem 1rem; border: 1px solid color-mix(in srgb, var(--sf-accent) 40%, var(--sf-line));
    border-radius: 1rem; background: var(--sf-surface); box-shadow: 0 -10px 30px -20px rgba(0, 0, 0, 0.5);
}
.nc-sf-lessonbar p { margin: 0; font-weight: 600; }
.nc-sf-ssr { display: grid; gap: 1rem; }
.nc-sf-ssr__block { padding: 1rem; border: 1px solid var(--sf-line); border-radius: 0.9rem; background: var(--sf-surface); overflow-wrap: anywhere; }
.nc-sf-ssr__block h2 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.nc-sf-ssr__block video, .nc-sf-ssr__block img, .nc-sf-ssr__block iframe { display: block; width: 100%; max-width: 100%; border: 0; border-radius: 0.6rem; }
.nc-sf-ssr__block audio { width: 100%; }

/* ---------------------------------------------------------------- guest to buyer (MS-587): /e-learning/buy(/continue) */
.nc-sf-buyflow [hidden] { display: none !important; }
.nc-sf-auth, .nc-sf-auth__course, .nc-sf-auth__panel, .nc-sf-handoff { box-sizing: border-box; }
.nc-sf-auth { display: grid; gap: 1.25rem; align-items: start; max-width: 60rem; width: 100%; margin: 0 auto; }
.nc-sf-auth__course {
    display: grid; gap: 0.9rem; padding: 1rem; border: 1px solid var(--sf-line); border-radius: 1rem; background: var(--sf-surface);
    min-width: 0;
}
.nc-sf-auth__course img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0.7rem; background: var(--sf-surface-2); }
.nc-sf-auth__course h2 { margin: 0.2rem 0; font-size: 1.15rem; line-height: 1.3; overflow-wrap: anywhere; }
.nc-sf-auth__course .nc-sf-buy__price { margin-top: 0.4rem; font-size: 1.5rem; }
.nc-sf-auth__panel {
    display: grid; gap: 1rem; padding: 1.4rem 1.5rem; border: 1px solid color-mix(in srgb, var(--sf-accent) 30%, var(--sf-line));
    border-radius: 1.25rem; background: var(--sf-surface); min-width: 0;
}
.nc-sf-auth__panel h1 { margin: 0; font-size: 1.5rem; line-height: 1.25; }
.nc-sf-auth__google { display: grid; justify-items: center; gap: 0.5rem; min-height: 3rem; text-align: center; }
.nc-sf-auth__error { margin: 0; color: color-mix(in srgb, #e53935 70%, var(--sf-ink)); font-weight: 600; }
.nc-sf-auth__or { display: flex; align-items: center; gap: 0.75rem; margin: 0; color: var(--sf-muted); font-size: 0.85rem; }
.nc-sf-auth__or::before, .nc-sf-auth__or::after { content: ""; flex: 1; border-top: 1px solid var(--sf-line); }
.nc-sf-auth__form { display: grid; gap: 0.85rem; }
.nc-sf-auth__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; margin: 0; font-size: 0.9rem; }
.nc-sf-auth__links a { color: var(--sf-accent); font-weight: 700; }
.nc-sf-auth__back { text-align: center; }
.nc-sf-teach__points { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.nc-sf-teach__points li { display: grid; gap: 0.4rem; align-content: start; }
.nc-sf-teach__points i { font-size: 1.5rem; color: var(--sf-accent); }
.nc-sf-teach__points h2 { margin: 0; font-size: 1.05rem; }
.nc-sf-handoff { max-width: 36rem; width: 100%; margin: 2rem auto; padding: 2.5rem 1.5rem; }
.nc-sf-handoff__error { display: grid; justify-items: center; gap: 0.6rem; }
.nc-sf-handoff__error > i { font-size: 2rem; color: color-mix(in srgb, #e53935 75%, var(--sf-ink)); }
.nc-sf-handoff__spinner {
    width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 4px solid color-mix(in srgb, var(--sf-accent) 22%, transparent);
    border-top-color: var(--sf-accent); animation: nc-sf-spin 0.9s linear infinite;
}
@keyframes nc-sf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .nc-sf-handoff__spinner { animation-duration: 2.5s; } }

@media (min-width: 900px) {
    .nc-sf-field--grow { grid-column: span 2; }
    .nc-sf-course__hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
    .nc-sf-course__layout { grid-template-columns: minmax(0, 1fr) 20rem; }
    .nc-sf-buy { position: sticky; top: 1rem; }
    .nc-sf-auth { grid-template-columns: 18rem minmax(0, 1fr); }
}

/* on a phone or tablet the price and Enrol come right after the course header, not after the whole outline */
@media (max-width: 899px) {
    .nc-sf-buy { order: -1; }
    /* the course being bought stays a compact row above the sign-in panel */
    .nc-sf-auth__course { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); align-items: center; }
}

@media (max-width: 640px) {
    /* on a phone the bar would cover the player's own controls: it stays under the lesson instead */
    .nc-sf-lessonbar { position: static; box-shadow: none; }
    .nc-sf-lessonbar__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; width: 100%; }
    .nc-sf-lessonbar__actions .nc-sf-btn { flex: 1 1 8rem; }
    .nc-sf-hero, .nc-sf-course__hero { padding: 1.1rem; }
    .nc-sf-filters { grid-template-columns: minmax(0, 1fr); }
    .nc-sf-filters--inline { grid-template-columns: minmax(0, 1fr); }
    .nc-sf-filters__actions .nc-sf-btn { flex: 1 1 100%; }
    .nc-sf-course__hero img { order: -1; }
    .nc-sf-auth__panel { padding: 1.1rem; }
    .nc-sf-auth__course { grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; }
    .nc-sf-auth__course .nc-sf-eyebrow { font-size: 0.7rem; }
}

/* ---------------------------------------------------------------- legal documents (MS-589): /e-learning/legal/... */
.nc-sf-legal__doc {
    box-sizing: border-box; display: grid; gap: 1.1rem; width: 100%; max-width: 50rem; margin: 0 auto;
    padding: 1.5rem 1.6rem; border: 1px solid var(--sf-line); border-radius: 1.1rem; background: var(--sf-surface);
}
.nc-sf-legal__head { display: grid; gap: 0.6rem; }
.nc-sf-legal__head h1 { margin: 0; font-size: 1.6rem; line-height: 1.25; overflow-wrap: anywhere; }
.nc-sf-legal__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin: 0; color: var(--sf-muted); font-size: 0.9rem; }
.nc-sf-legal__meta div { display: flex; gap: 0.4rem; }
.nc-sf-legal__meta dt { font-weight: 700; }
.nc-sf-legal__meta dd { margin: 0; }
.nc-sf-legal__draft, .nc-sf-legal__note {
    margin: 0; padding: 0.75rem 0.9rem; border-radius: 0.7rem; line-height: 1.5; font-size: 0.92rem;
    border: 1px solid color-mix(in srgb, #e0a100 55%, var(--sf-line)); background: color-mix(in srgb, #e0a100 12%, var(--sf-surface));
}
.nc-sf-legal__note { border-color: var(--sf-line); background: color-mix(in srgb, var(--sf-accent) 8%, var(--sf-surface)); }
.nc-sf-legal__draft i { color: color-mix(in srgb, #e0a100 80%, var(--sf-ink)); }
.nc-sf-legal__section h2 { margin: 0 0 0.45rem; font-size: 1.1rem; }
.nc-sf-legal__section p { margin: 0 0 0.7rem; color: var(--sf-ink); line-height: 1.65; overflow-wrap: anywhere; }
.nc-sf-legal__versions { padding-top: 0.8rem; border-top: 1px solid var(--sf-line); }
.nc-sf-legal__versions h2 { margin: 0 0 0.4rem; font-size: 1rem; }
.nc-sf-legal__versions ul { margin: 0; padding-inline-start: 1.1rem; color: var(--sf-muted); }
@media (max-width: 640px) { .nc-sf-legal__doc { padding: 1.1rem; } .nc-sf-legal__head h1 { font-size: 1.35rem; } }

/* ---------------------------------------------------------------- the checkout consent (MS-589) */
.nc-sf-consent {
    box-sizing: border-box; display: grid; gap: 0.8rem; width: 100%; max-width: 34rem; margin: 0 auto; text-align: start;
}
.nc-sf-consent__check {
    display: flex; gap: 0.65rem; align-items: flex-start; padding: 0.85rem 0.95rem; border: 1px solid var(--sf-line);
    border-radius: 0.8rem; background: color-mix(in srgb, var(--sf-accent) 6%, var(--sf-surface)); line-height: 1.5; cursor: pointer;
}
.nc-sf-consent__check input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0.15rem 0 0; accent-color: var(--sf-accent); }
.nc-sf-consent__terms { margin: 0; font-size: 0.9rem; color: var(--sf-muted); }
.nc-sf-consent__error { margin: 0; color: color-mix(in srgb, #e53935 70%, var(--sf-ink)); font-weight: 600; font-size: 0.9rem; }

/* MS-591 gate: white on the dark theme's lighter accent measured 3.82:1 - a primary button there takes a deeper shade */
.cosmic-dark .nc-sf-btn--primary {
    background: color-mix(in srgb, var(--sf-accent) 82%, #000);
    border-color: color-mix(in srgb, var(--sf-accent) 82%, #000);
}