/* ══════════════════════════════════════════════════════════════════════
   /?hero=motion — cinematic hero experiment
   ----------------------------------------------------------------------
   Same layout hooks as the network hero; copy stays visible while the
   paper sky makes one gentle entrance. Only
   the stage changes: a dark full-bleed motion field, centred display type,
   and the marking sheet rising out of the bottom of the frame.
   ══════════════════════════════════════════════════════════════════════ */

.hs-hero.hs-hero--motion {
    --hm-ink: #f4f2ff;
    --hm-ink-2: rgba(232, 228, 255, .74);
    --hm-ink-3: rgba(232, 228, 255, .56);
    --hm-line: rgba(255, 255, 255, .14);
    --hm-lilac: #c9c2ff;
    display: block;
    min-height: 0;
    padding: clamp(128px, 17vh, 180px) 0 clamp(72px, 9vh, 112px);
    background: #06051a;
    color: var(--hm-ink);
    text-align: center;
    isolation: isolate;
}
@media (min-width: 1021px) {
    .hs-hero.hs-hero--motion { display: block; min-height: 0; }
}

/* ── Stage ─────────────────────────────────────────────────────────── */
/* The frame covers the copy and ends a little way into the sheet, where it
   dissolves into the page; hero-motion.js sets --hm-stage to that depth.
   Stretching the loop over the whole (much taller) section would magnify
   it 2-3x. The poster is the loop's first frame, so the hero is finished
   before the video arrives and stays finished if it never does. */
.hs-hero.hs-hero--motion { background: var(--bg, #fff); }
.hero-motion-bg {
    position: absolute;
    inset: 0 0 auto 0;
    height: var(--hm-stage, 100svh);
    z-index: 0;
    pointer-events: none;
    background: #06051a;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 240px), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 240px), transparent);
}
.hero-motion-bg video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
    opacity: 0;
    transition: none;
}
.hero-paper-scene.has-frame video { opacity: 1; }
/* A scrim under the nav and the headline; the loop's centre is already dark. */
.hero-motion-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(6, 5, 26, .55) 0, transparent 160px),
        radial-gradient(52% 46% at 50% 44%, rgba(6, 5, 26, .5), transparent 78%);
}
/* The small print lands on the bright horizon band; lift it off the glow. */
.hs-hero.hs-hero--motion :is(.hero-sub, .hero-trust, .hero-save-btn) {
    text-shadow: 0 1px 14px rgba(6, 5, 26, .9), 0 0 2px rgba(6, 5, 26, .6);
}


@font-face { font-family: 'Instrument Serif'; src: url('/static/paper-bloom/instrument-serif-italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
#heroMotion picture { display: contents; }
.hero-paper-scene { position: absolute; inset: 0; transform-origin: 50% 40%; }
.hero-paper-scene.is-awaiting { transform: scale(1.025); }
.hero-paper-scene.is-entering { animation: hero-paper-opening 1.4s cubic-bezier(.2, .65, .3, 1) both; }
@keyframes hero-paper-opening { from { transform: scale(1.025); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero-paper-scene.is-awaiting { transform: none; }
  .hero-paper-scene.is-entering { animation: none; }
}
#heroMotion img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
#heroMotion .hero-paper-scene video { transition: none; opacity: 0; }
#heroMotion .hero-paper-scene.has-frame video { opacity: 1; }
#mainContent.hs-hero--motion .home-hero-copy,
#mainContent.hs-hero--motion [data-hero-in],
#mainContent.hs-hero--motion [data-hero-title],
#mainContent.hs-hero--motion [data-hero-card] { opacity: 1 !important; visibility: visible !important; transform: none !important; filter: none !important; }
.paper-motion-setting[hidden] { display: none !important; }
.paper-motion-setting:not([hidden]) { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 12px 16px; border: 0; border-radius: 6px; background: transparent; color: var(--text-primary); font: inherit; font-size: .875rem; text-align: left; cursor: pointer; }
.paper-motion-setting:hover { background: var(--indigo-muted); }
.paper-motion-setting:focus-visible { outline: 3px solid #c9c2ff; outline-offset: -3px; }
.paper-motion-setting svg { width: 12px; height: 12px; }
.paper-motion-setting[data-paused="true"] .motion-pause-icon,
.paper-motion-setting[data-paused="false"] .motion-play-icon { display: none; }
.hero-motion-page #learnDd .nav-dd-menu { max-height: calc(100dvh - 90px); overflow-y: auto; }

/* ── Copy: one centred column ──────────────────────────────────────── */
.hs-hero.hs-hero--motion .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    row-gap: clamp(56px, 8vh, 96px);
}
.hs-hero.hs-hero--motion .home-hero-copy {
    max-width: 1040px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* One quiet line, no chrome: who it's for. */
.hs-hero.hs-hero--motion .hero-eyebrow {
    font-size: .8125rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--hm-ink-2);
    text-shadow: 0 1px 12px rgba(6, 5, 26, .8);
}

.hs-hero.hs-hero--motion .hs-hero-title {
    margin: 30px 0 22px;
    font-size: clamp(3.2rem, 8.4vw, 8rem);
    font-weight: 800;
    line-height: .9;
    letter-spacing: -.045em;
    text-transform: uppercase;
    color: var(--hm-ink);
    text-shadow: 0 2px 40px rgba(6, 5, 26, .45);
}
/* The one word that carries the hook gets the editorial italic. */
.hs-hero.hs-hero--motion .hero-h1-mark {
    display: inline-block;
    padding-right: .06em;
    /* The gradient is clipped to this box, and at line-height .8 the box ends
       above the descender, slicing the g flat. Grow the box down past it and
       give the space back, so the line itself doesn't move. */
    padding-bottom: .22em;
    margin-bottom: -.22em;
    font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.12em;
    line-height: .8;
    letter-spacing: -.02em;
    text-transform: none;
    color: var(--hm-lilac);
    background: linear-gradient(100deg, #ffffff 0%, #d8d2ff 35%, #a99dff 70%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-dark] .hs-hero.hs-hero--motion .hero-h1-mark { color: var(--hm-lilac); }
/* SplitText wraps the word in a transformed span during the entrance, which
   the parent's text clip can't reach; the span carries its own gradient. */
.hs-hero.hs-hero--motion .hero-h1-mark .hs-word {
    padding-bottom: .22em;
    margin-bottom: -.22em;
    background: inherit;
    -webkit-background-clip: text;
    background-clip: text;
}

.hs-hero.hs-hero--motion .hero-resolution { color: var(--hm-ink); }
.hs-hero.hs-hero--motion .hero-sub {
    max-width: 36em;
    margin-inline: auto;
    color: var(--hm-ink-2);
}

.hs-hero.hs-hero--motion .hero-actions { justify-content: center; }
.hs-hero.hs-hero--motion .hs-hero-cta {
    border-radius: 999px;
    background: #f1eeff;
    color: #1a1250;
    border-color: transparent;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset, 0 12px 40px -8px rgba(150, 135, 255, .7);
}
.hs-hero.hs-hero--motion .hs-hero-cta:hover { background: #ffffff; color: #1a1250; }
.hs-hero.hs-hero--motion .hs-hero-cta:focus-visible { outline: 2px solid var(--hm-lilac); outline-offset: 4px; }
.hs-hero.hs-hero--motion .hs-hero-ghost {
    padding: 0 22px;
    border: 1px solid var(--hm-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--hm-ink);
    min-height: 62px;
}
.hs-hero.hs-hero--motion .hs-hero-ghost:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.hs-hero.hs-hero--motion .hs-hero-ghost:focus-visible { outline: 2px solid var(--hm-lilac); outline-offset: 4px; }

.hs-hero.hs-hero--motion .hero-trust { justify-content: center; color: var(--hm-ink); }
.hs-hero.hs-hero--motion .hero-trust .ds-ico { color: var(--hm-lilac); }
.hs-hero.hs-hero--motion .hero-save-btn { color: var(--hm-ink-2); }
.hs-hero.hs-hero--motion .hero-save-btn span { text-decoration-color: var(--hm-line); }

/* ── The sheet rises out of the frame in a glass bezel ─────────────── */
.hs-hero.hs-hero--motion .mark-slot {
    width: 100%;
    max-width: 880px;
    padding: 10px;
    border: 1px solid var(--hm-line);
    border-radius: 36px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03));
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 50px 120px -40px rgba(120, 100, 255, .55), 0 0 0 1px rgba(6, 5, 26, .2);
    text-align: left;
    perspective: 1600px;
}
.hs-hero.hs-hero--motion .hs-sheet { transform-origin: 50% 0; }

/* ── Nav floats over the dark frame until the page scrolls ─────────── */
.hero-motion-page .forge-topnav:not(.scrolled) {
    --topnav-ink: #f4f2ff;
    --topnav-muted: rgba(232, 228, 255, .74);
    --topnav-accent: #ffffff;
    background: transparent;
    border-color: transparent;
}
/* home.css frosts these controls white for the light hero; frost them dark here. */
.hero-motion-page.student-homepage .forge-topnav:not(.scrolled) :is(.nav-dd-btn, .nav-links a:not(.nav-cta), .nav-search input, .nav-burger) {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .14);
    color: #f4f2ff;
}
.hero-motion-page .forge-topnav:not(.scrolled) .nav-dd-btn:hover,
.hero-motion-page .forge-topnav:not(.scrolled) .nav-dd[data-open="1"] .nav-dd-btn {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .14);
}

/* ── Pause control on dark ─────────────────────────────────────────── */
.hs-hero.hs-hero--motion .hero-motion-toggle {
    left: auto;
    right: max(20px, calc((100% - 1280px) / 2));
    bottom: auto;
    top: 76px;
    color: var(--hm-ink-3);
}
.hs-hero.hs-hero--motion .hero-motion-toggle:hover { color: var(--hm-ink); }
.hs-hero.hs-hero--motion .hero-motion-toggle:focus-visible { outline-color: var(--hm-lilac); }

@media (max-width: 620px) {
    .hs-hero.hs-hero--motion { padding: 112px 0 56px; }
    .hs-hero.hs-hero--motion .hero-eyebrow { font-size: .6875rem; letter-spacing: .08em; }
    .hs-hero.hs-hero--motion .hero-motion-toggle { top: 68px; }
    .hs-hero.hs-hero--motion .hs-hero-title { font-size: clamp(2.5rem, 12vw, 3.4rem); margin: 22px 0 14px; }
    .hs-hero.hs-hero--motion .hs-hero-ghost { min-height: 52px; justify-content: center; align-self: stretch; }
    .hs-hero.hs-hero--motion .mark-slot { padding: 6px; border-radius: 26px; }
}


/* ══════════════════════════════════════════════════════════════════════
   The rest of the page, in the same film
   ----------------------------------------------------------------------
   The template forces data-dark for this variant, so every component
   already has its dark styles; this layer only retunes the dark theme from
   charcoal to the hero's violet-black and adds the MotionSites signatures:
   italic serif accents, glass surfaces, pill buttons, glow and grain.
   ══════════════════════════════════════════════════════════════════════ */
body.hero-motion-page {
    --hm-violet-black: #07061a;
    /* Signal (ds-*) ladder */
    --ds-bg: var(--hm-violet-black);
    --ds-bg-2: #0b0a24;
    --ds-bg-3: #110f2e;
    --ds-surface: rgba(255, 255, 255, .035);
    --ds-surface-2: rgba(255, 255, 255, .06);
    --ds-stage: #0b0a24;
    --ds-ink-2: #c4c0e8;
    --ds-ink-3: #9893c2;
    --ds-line: rgba(201, 194, 255, .1);
    --ds-line-2: rgba(201, 194, 255, .18);
    --ds-accent-ink: #c9c2ff;
    --ds-night: #0c0a28;
    --ds-night-2: rgba(255, 255, 255, .04);
    --ds-night-3: rgba(255, 255, 255, .07);
    /* Page-level (legacy) ladder */
    --surface-0: var(--hm-violet-black);
    --surface-1: #0d0b26;
    --surface-2: #131032;
    --surface-3: #1a163e;
    --bg: var(--hm-violet-black);
    --bg-soft: #0d0b26;
    --card: #131032;
    /* Slow violet weather behind everything: two glows that stay put while
       the page moves past them. */
    background:
        radial-gradient(60vw 50vh at 85% 30%, rgba(91, 80, 232, .13), transparent 70%) fixed,
        radial-gradient(50vw 50vh at 10% 80%, rgba(201, 120, 220, .07), transparent 70%) fixed,
        var(--hm-violet-black);
}
/* Film grain over the whole page: fine, static, never interactive. */
body.hero-motion-page::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    pointer-events: none;
    opacity: .07;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.hero-motion-page .ds-section--tint { background: transparent; }

/* ── Headings: the accent phrase becomes the editorial italic ──────── */
body.hero-motion-page :is(.ds-h2, .ds-display) :is(.ds-em, .ds-em--soft) {
    font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.1em;
    line-height: .9;
    letter-spacing: -.01em;
    /* The italic overhangs its box; without room the clipped gradient shaves the last glyph. */
    padding-right: .1em;
}
body.hero-motion-page :is(.ds-h2, .ds-display) .ds-em,
body.hero-motion-page :is(.ds-h2, .ds-display) .ds-em * {
    color: #d8d2ff;
    background: linear-gradient(100deg, #ffffff 0%, #d8d2ff 35%, #a99dff 70%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.hero-motion-page :is(.ds-h2, .ds-display) .ds-em--soft { color: var(--ds-ink-3); }
/* Section labels: small caps-tracked mono, quiet. */
body.hero-motion-page .ds-eyebrow {
    font-family: var(--ds-font-mono);
    font-size: .75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ds-ink-3);
}

/* ── Surfaces: glass with a lit top edge ───────────────────────────── */
body.hero-motion-page :is(.hs-board, .ds-card, .hs-bento > *, .hs-plan, .hs-faq-item, .cq-band .ds-container > div, .hs-subjects-panel) {
    border-color: var(--ds-line) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -40px rgba(0, 0, 0, .8);
}

/* ── Buttons: pills; the main ask is the light pill from the hero ──── */
body.hero-motion-page :is(.ds-btn, .hs-hero-cta) { border-radius: 999px; }
body.hero-motion-page .ds-btn--primary,
body.hero-motion-page .ds-btn--light {
    background: #f1eeff;
    color: #1a1250;
    border-color: transparent;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset, 0 12px 40px -10px rgba(150, 135, 255, .6);
}
body.hero-motion-page .ds-btn--primary:hover,
body.hero-motion-page .ds-btn--light:hover { background: #fff; color: #1a1250; }

/* ── Night bands become lit glass panes on the dark page ───────────── */
body.hero-motion-page .ds-night {
    background:
        radial-gradient(70% 60% at 50% 0%, rgba(122, 110, 240, .18), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
    box-shadow: inset 0 0 0 1px var(--ds-line), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* ── Closing CTA: the hero's loop returns behind the last ask ──────── */
.hs-cta-video {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease;
}
.hs-cta-card.is-playing .hs-cta-video { opacity: .85; }
body.hero-motion-page .hs-cta-card {
    background: #06051a url('/static/hero-motion-poster.jpg?v=5') 50% 40% / cover no-repeat;
}
@media (max-aspect-ratio: 4/5) {
    body.hero-motion-page .hs-cta-card { background-image: url('/static/hero-motion-poster-portrait.jpg?v=3'); }
}
body.hero-motion-page .hs-cta-card::after {
    background: radial-gradient(55% 55% at 50% 52%, rgba(6, 5, 26, .72), rgba(6, 5, 26, .25) 85%);
}

/* ── Nav on scroll: violet-black glass instead of charcoal ─────────── */
body.hero-motion-page .forge-topnav.scrolled {
    background: rgba(7, 6, 26, .72);
    border-color: rgba(201, 194, 255, .1);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
}

/* ── Footer wordmark: the lilac gradient, fading into the floor ────── */
body.hero-motion-page .ds-footer-mark {
    background: linear-gradient(180deg, rgba(201, 194, 255, .22) 10%, rgba(122, 110, 240, .08) 60%, transparent 96%);
    -webkit-background-clip: text;
    background-clip: text;
}
/* The CTA's small print sits on the bright clouds; lift it like the hero's. */
body.hero-motion-page .hs-cta-inner :is(.ds-lead, .hs-cta-note, .ds-link) {
    text-shadow: 0 1px 14px rgba(6, 5, 26, .9), 0 0 2px rgba(6, 5, 26, .6);
}
body.hero-motion-page .hs-cta-note { color: var(--ds-ink-2); }

/* ══════════════════════════════════════════════════════════════════════
   Below the hero: light, scale and glass
   ----------------------------------------------------------------------
   The sections kept the light page's drafting frame and its left-hand
   proportions, so on the dark film they read as a re-coloured spec sheet.
   Here the frame goes, every section is lit from above like the hero, the
   headings take the hero's scale and centre line, and cards become lit
   glass.
   ══════════════════════════════════════════════════════════════════════ */
body.hero-motion-page :is(.ds-frame, .hs-plot) { display: none !important; }

/* A soft stage light over each section, echoing the hero's rays. */
body.hero-motion-page :is(.hs-boards, .hs-loop, .hs-subjects, .hs-features, .hs-plans-sec, .hs-faq, .hs-feedback) {
    position: relative;
    isolation: isolate;
}
body.hero-motion-page :is(.hs-boards, .hs-loop, .hs-subjects, .hs-features, .hs-plans-sec, .hs-faq, .hs-feedback)::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: min(900px, 100%);
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(34% 260px at 50% 0, rgba(201, 194, 255, .16), transparent 100%),
        radial-gradient(60% 520px at 50% 0, rgba(91, 80, 232, .16), transparent 100%),
        repeating-linear-gradient(100deg, transparent 0 46px, rgba(201, 194, 255, .022) 46px 48px, transparent 48px 120px);
    /* Fade in from the section's top edge as well as out at the sides, so
       the light has no seam where one section meets the next. */
    -webkit-mask-image: radial-gradient(70% 100% at 50% 0, #000, transparent 75%), linear-gradient(180deg, transparent, #000 160px);
    -webkit-mask-composite: source-in;
    mask-image: radial-gradient(70% 100% at 50% 0, #000, transparent 75%), linear-gradient(180deg, transparent, #000 160px);
    mask-composite: intersect;
}
/* The light, not a rule or a change of ground, separates sections now:
   every section lets the page's one violet-black floor show through. */
body.hero-motion-page .hs-loop { border-block: 0; }
body.hero-motion-page :is(.hs-boards, .hs-loop, .hs-subjects, .hs-features, .hs-plans-sec, .hs-faq, .hs-feedback, .hs-community, .hs-teach, .hs-cta) { background: transparent; }

/* Headings at the hero's scale, on the centre line. */
body.hero-motion-page .ds-h2 {
    font-size: clamp(2.6rem, 5.6vw, 5rem);
    line-height: .98;
    letter-spacing: -.045em;
}
body.hero-motion-page :is(.hs-boards-head, .ds-heading-split) {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    max-width: 940px;
    margin-inline: auto;
}
body.hero-motion-page :is(.hs-boards-head, .ds-heading-split) .ds-heading-block { justify-items: center; max-width: none; }
body.hero-motion-page .ds-heading-split > :is(p, .ds-lead, .ds-body) { max-width: 40em; margin-inline: auto; }

/* Lit glass: a gradient hairline brighter at the top-left, a glass fill
   over a solid base (the hairline is painted under the fill, so a
   see-through fill would wash the whole card with it), and a violet glow
   on hover. Position and size never change, so nothing
   the reveal engine animates can jump. */
body.hero-motion-page :is(.ds-card, .hs-board, .hs-syllabus) {
    border: 1px solid transparent;
    background:
        linear-gradient(180deg, rgba(201, 194, 255, .06), rgba(201, 194, 255, .015)) padding-box,
        linear-gradient(#0c0a26, #0c0a26) padding-box,
        linear-gradient(155deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .05) 32%, rgba(255, 255, 255, .03) 68%, rgba(122, 110, 240, .38)) border-box;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 40px 80px -48px rgba(0, 0, 0, .9);
    transition: box-shadow .5s var(--ds-ease-out, ease), background .4s ease;
}
body.hero-motion-page :is(.ds-card, .hs-board):hover {
    background:
        linear-gradient(180deg, rgba(201, 194, 255, .085), rgba(201, 194, 255, .025)) padding-box,
        linear-gradient(#0c0a26, #0c0a26) padding-box,
        linear-gradient(155deg, rgba(255, 255, 255, .4), rgba(201, 194, 255, .12) 40%, rgba(122, 110, 240, .6)) border-box;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 30px 90px -30px rgba(122, 110, 240, .45);
}
body.hero-motion-page .hs-plan--pro {
    background:
        radial-gradient(80% 60% at 50% 0, rgba(122, 110, 240, .22), transparent 70%) padding-box,
        linear-gradient(180deg, rgba(201, 194, 255, .07), rgba(201, 194, 255, .02)) padding-box,
        linear-gradient(#0c0a26, #0c0a26) padding-box,
        linear-gradient(155deg, rgba(255, 255, 255, .45), rgba(201, 194, 255, .15) 40%, rgba(122, 110, 240, .7)) border-box;
}
/* Exam boards: the board name is the headline of its card. */
body.hero-motion-page .hs-board-name {
    font-size: clamp(2.2rem, 3.2vw, 3rem);
    background: linear-gradient(180deg, #ffffff, #c9c2ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}