/* ══════════════════════════════════════════════════════════════════════
   Homepage · Signal redesign
   ----------------------------------------------------------------------
   Everything drawn on the homepage except the Blender network behind the
   hero (hero-network.css / hero-network.js, unchanged). Builds on ds.css.
   `hs-` = home, Signal. Legacy hooks the page's scripts and the network
   renderer depend on (.hero-grid, .home-hero-copy, .mark-slot, #markDemo…)
   are styled here under their existing names.
   ══════════════════════════════════════════════════════════════════════ */

.student-homepage {
    --bg: #ffffff;
    background: var(--ds-bg);
    color: var(--ds-ink);
    font-family: var(--ds-font-text);
}
[data-dark] .student-homepage { --bg: #111113; }
/* Approved artwork and its accents stay as signed off (Oct 2026 palette
   change): the charcoal neutrals and marking colours apply here, the purple
   accents keep their original values. */
:is(.student-homepage, .pr-page) {
    --ds-accent: #5b50e8;
    --ds-accent-ink: #4a3fd0;
    --ds-accent-soft: #efedfe;
    --ds-focus: #5b50e8;
}
[data-dark] :is(.student-homepage, .pr-page) {
    --ds-accent: #6d62f5;
    --ds-accent-ink: #a99dff;
    --ds-accent-soft: rgba(109, 98, 245, .14);
    --ds-focus: #a99dff;
}

.student-homepage ::selection { background: var(--ds-violet-200); color: var(--ds-ink); }
[data-dark] .student-homepage ::selection { background: rgba(122, 110, 240, .45); color: #fff; }
:where(.student-homepage) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) { margin: 0; }
:where(.student-homepage) :where(ul, ol) { padding: 0; }
:where(.student-homepage) :where(img, svg) { max-width: 100%; }

/* ── Nav over the hero: transparent at rest, a quiet glass bar once scrolled.
   The bar centres itself with a transform elsewhere, so nothing here writes one. ── */
.student-homepage .forge-topnav {
    transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease, opacity .6s ease;
}
.student-homepage .forge-topnav:not(.scrolled) {
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
}
.student-homepage .forge-topnav:not(.scrolled) :is(.nav-dd-btn, .nav-links a:not(.nav-cta), .nav-search input, .nav-burger) {
    background: color-mix(in srgb, var(--ds-bg) 62%, transparent);
    border-color: var(--ds-line);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.student-homepage .forge-topnav .nav-cta {
    box-shadow: 0 1px 2px rgba(14, 18, 32, .16) !important;
}

/* ══════════════════════════════ HERO ══════════════════════════════ */
.hs-hero {
    position: relative;
    overflow: hidden;
    outline: none;
    padding: clamp(116px, 15vh, 156px) 0 clamp(88px, 11vh, 128px);
}
@media (min-width: 1021px) {
    .hs-hero { min-height: max(760px, 100svh); display: flex; align-items: center; }
}
.hs-hero .hero-grid {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: calc(1280px + var(--ds-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--ds-gutter);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
    column-gap: clamp(32px, 5vw, 80px);
    align-items: center;
}
.hs-hero .home-hero-copy { min-width: 0; }

/* One plain line: who it's for. */
.hs-hero .hero-eyebrow {
    margin: 0;
    font: 500 .875rem/1.4 var(--ds-font-mono);
    color: var(--ds-ink-2);
}

.hs-hero-title {
    margin: 26px 0 18px;
    font-family: var(--ds-font-display);
    font-size: clamp(3.1rem, 6.4vw, 6.1rem);
    font-weight: 700;
    line-height: .92;
    letter-spacing: -.05em;
    word-spacing: .05em;
    color: var(--ds-ink);
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "cv05" 1;
    text-wrap: balance;
}
.hs-hero .hero-h1-mark {
    white-space: nowrap;
    color: var(--ds-violet-600);
}
[data-dark] .hs-hero .hero-h1-mark { color: #a99dff; }

.hs-hero .hero-resolution {
    font-family: var(--ds-font-display);
    font-size: clamp(1.4rem, 2.3vw, 2.15rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--ds-ink-2);
}
.hs-hero .hero-sub {
    margin-top: 22px;
    max-width: 30em;
    font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
    line-height: 1.6;
    color: var(--ds-ink-2);
    text-wrap: pretty;
}
.hs-hero .hero-actions {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 16px 28px;
    margin-top: 36px;
}
.hs-hero-cta { min-height: 62px; padding: 0 30px; font-size: 1.0625rem; border-radius: 16px; }
.hs-hero-cta .ds-ico { width: 20px; height: 20px; }
.hs-hero-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px;
    font-weight: 650; font-size: 1rem;
    color: var(--ds-ink);
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 100% 1px no-repeat;
    transition: color .2s ease, background-size .4s var(--ds-ease-out);
}
.hs-hero-ghost .ds-ico { width: 17px; height: 17px; transition: transform .45s var(--ds-ease-out); }
.hs-hero-ghost:hover { color: var(--ds-accent-ink); }
.hs-hero-ghost:hover .ds-ico { transform: translateY(3px); }
.hs-hero .hero-trust {
    display: flex; flex-wrap: wrap; gap: 8px 22px;
    margin-top: 26px;
    list-style: none;
    font-size: .9375rem; font-weight: 550; color: var(--ds-ink-2);
}
.hs-hero .hero-trust li { display: inline-flex; align-items: center; gap: 7px; }
.hs-hero .hero-trust .ds-ico { width: 16px; height: 16px; color: var(--ds-mint); stroke-width: 2.4; }
.hs-hero .hero-save-btn {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 10px 2px; margin-top: 8px;
    background: none; border: 0; font: inherit;
    font-size: .8125rem; font-weight: 600; color: var(--ds-ink-3);
    cursor: pointer;
}
.hs-hero .hero-save-btn span { text-decoration: underline; text-decoration-color: var(--ds-line-2); text-underline-offset: 4px; }

/* ── The marking sheet: frosted glass over the network ─────────────── */
.hs-hero .mark-slot { position: relative; min-width: 0; }
.hs-sheet {
    position: relative;
    isolation: isolate;
    border: 1px solid rgba(52, 40, 120, .13);
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(248, 246, 255, .74));
    -webkit-backdrop-filter: blur(24px) saturate(1.1);
    backdrop-filter: blur(24px) saturate(1.1);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 2px 4px rgba(30, 22, 80, .04),
        0 40px 80px -36px rgba(40, 28, 120, .38);
    overflow: hidden;
}
[data-dark] .hs-sheet {
    border-color: rgba(150, 138, 240, .24);
    background: linear-gradient(180deg, rgba(18, 17, 40, .72), rgba(11, 11, 28, .78));
    -webkit-backdrop-filter: blur(22px) saturate(1.15) brightness(1.35);
    backdrop-filter: blur(22px) saturate(1.15) brightness(1.35);
    box-shadow: 0 1px 0 rgba(200, 190, 255, .12) inset, 0 40px 90px -30px rgba(0, 0, 0, .8);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .hs-sheet { background: #fbfaff; }
    [data-dark] .hs-sheet { background: #0f0f24; }
}
@media (prefers-reduced-transparency: reduce) {
    .hs-sheet { background: #fbfaff; -webkit-backdrop-filter: none; backdrop-filter: none; }
    [data-dark] .hs-sheet { background: #0f0f24; }
}

.hs-hero .home-session-heading {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    height: 54px; padding: 0 14px 0 16px;
    border-bottom: 1px solid var(--ds-line);
}
.hs-hero .home-session-label {
    display: inline-flex; align-items: center; gap: 10px; min-width: 0;
    font-size: .875rem; font-weight: 650; color: var(--ds-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hs-avi-badge { display: block; flex: none; width: 28px; height: 28px; }
.hs-avi-badge .ds-avi { width: 100%; height: 100%; }
.hs-hero .home-demo-control {
    flex: none;
    height: 34px; padding: 0 14px;
    border: 1px solid var(--ds-line-2); border-radius: 999px;
    background: color-mix(in srgb, var(--ds-surface) 60%, transparent);
    color: var(--ds-accent-ink);
    font: 650 .75rem var(--ds-font-text);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}
.hs-hero .home-demo-control:hover { background: var(--ds-accent-soft); border-color: transparent; }


/* The sheet is an app window: at desktop widths it keeps the height the hero
   was designed around and the full report scrolls inside it, exactly as a
   long report scrolls in the app. Stacked layouts show it at full height. */
@media (min-width: 1021px) {
    .hs-hero .hs-sheet { display: flex; flex-direction: column; max-height: min(640px, calc(100svh - 148px)); }
    .hs-hero .hs-sheet .home-session-heading { flex: none; }
    .hs-hero .hs-sheet .mark-demo {
        flex: 1 1 auto; min-height: 0;
        overflow-y: auto; overscroll-behavior: contain;
        scrollbar-width: thin; scrollbar-color: var(--ds-line-2) transparent;
    }
    .hs-hero .hs-sheet .mark-demo:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: -2px; }
    .hs-hero .hs-sheet::after {
        content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 44px;
        background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ds-bg) 88%, transparent));
        border-radius: 0 0 26px 26px;
        pointer-events: none;
    }
}

/* Entrance: armed by ds-motion, played by home.js */
html.ds-motion .hs-hero [data-hero-in]:not(.ds-in),
html.ds-motion .hs-hero [data-hero-card]:not(.ds-in),
html.ds-motion .hs-hero [data-hero-title]:not(.ds-in) { opacity: 0; }

@media (max-width: 1020px) {
    .hs-hero .hero-grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
    .hs-hero .mark-slot { max-width: 560px; }
}
@media (max-width: 560px) {
    .hs-hero { padding: 96px 0 56px; }
    .hs-hero .hero-eyebrow { font-size: .875rem; }
    .hs-hero-title { font-size: clamp(2.6rem, 12.5vw, 3.4rem); margin: 20px 0 14px; }
    .hs-hero .hero-sub { font-size: 1rem; margin-top: 16px; }
    .hs-hero .hero-actions { flex-direction: column; align-items: stretch; margin-top: 28px; gap: 10px; }
    .hs-hero-cta { width: 100%; min-height: 56px; }
    .hs-hero-ghost { align-self: center; }
    .hs-hero .hero-trust { justify-content: center; font-size: .875rem; gap: 6px 16px; }
    .hs-hero .home-session-label { font-size: .8125rem; }
    .hs-sheet { border-radius: 20px; }
}

/* ══════════════════════════ SECTION RHYTHM ═══════════════════════════ */
.student-homepage main,
.student-homepage section { scroll-margin-top: 84px; }

/* ── 1 · Boards + ribbon ──────────────────────────────────────────── */
.hs-boards { padding: clamp(72px, 9vw, 120px) 0 clamp(64px, 8vw, 104px); position: relative; }
.hs-boards-head { display: grid; gap: 18px; max-width: 900px; margin-bottom: clamp(36px, 4vw, 52px); }
.hs-boards-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.hs-board {
    position: relative; isolation: isolate;
    display: flex; flex-direction: column;
    min-height: 206px; padding: 18px 18px 16px 20px;
    border: 1px solid var(--ds-line); border-radius: 16px;
    background: var(--ds-surface);
    color: var(--ds-ink); text-decoration: none;
    transition: transform .6s var(--ds-ease-out), border-color .3s ease, box-shadow .6s var(--ds-ease-out);
}
.hs-board:hover { border-color: var(--ds-accent); }
.hs-board-top { display: flex; align-items: center; justify-content: space-between; color: var(--ds-ink-3); font: 500 .75rem/1.3 var(--ds-font-mono); }
.hs-board-go { width: 18px; height: 18px; color: var(--ds-accent-ink); transition: transform .5s var(--ds-ease-out); }
.hs-board:hover .hs-board-go { transform: translate(3px, -3px); }
.hs-board-name {
    margin-top: auto;
    font-family: var(--ds-font-display);
    font-size: clamp(1.75rem, 2.6vw, 2.35rem); font-weight: 700; letter-spacing: -.045em; line-height: 1;
}
.hs-board-state { margin-top: 6px; font-size: .875rem; color: var(--ds-ink-2); }
.hs-board-spec { display: grid; margin: 14px 0 0; border-top: 1px solid var(--ds-line); }
.hs-board-spec > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 8px; }
.hs-board-spec dt { font-size: .75rem; color: var(--ds-ink-3); }
.hs-board-spec dd { margin: 0; font: 500 .75rem/1.3 var(--ds-font-mono); color: var(--ds-ink-2); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 980px) { .hs-boards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) {
    .hs-boards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .hs-board { min-height: 168px; padding: 14px 14px 12px 16px; border-radius: 14px; }
    .hs-board:last-child { grid-column: 1 / -1; }
}


/* ── 2 · The loop ─────────────────────────────────────────────────── */
.hs-loop {
    position: relative;
    padding-top: var(--ds-section-y);
    background: var(--ds-bg-2);
    border-block: 1px solid var(--ds-line);
}
.hs-loop-head { margin-bottom: clamp(44px, 6vw, 80px); }
.hs-loop-pin { padding-bottom: var(--ds-section-y); }
.hs-loop-rail { display: none; }
.hs-loop-steps { display: grid; gap: clamp(64px, 9vw, 120px); }
.hs-loop-step {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
.hs-loop-caption { display: grid; gap: 16px; align-content: center; max-width: 440px; }
.hs-loop-num { font: 600 .875rem/1.3 var(--ds-font-text); color: var(--ds-accent-ink); }
.hs-loop-title {
    font-family: var(--ds-font-display);
    font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 700; line-height: 1.05; letter-spacing: -.035em;
    color: var(--ds-ink);
    text-wrap: balance;
}
.hs-loop-points { list-style: none; display: grid; gap: 8px; margin-top: 4px; }
.hs-loop-points li { display: flex; align-items: center; gap: 10px; font-size: .9375rem; font-weight: 550; color: var(--ds-ink-2); }
.hs-loop-points .ds-ico { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--ds-mint-soft); color: var(--ds-mint); stroke-width: 2.6; }
.hs-loop-scene { margin: 0; min-height: 440px; display: flex; flex-direction: column; }
@media (max-width: 900px) {
    .hs-loop-step { grid-template-columns: minmax(0, 1fr); }
    .hs-loop-scene { min-height: 0; }
}

/* Pinned mode (desktop + motion, set by home.js) */
.hs-loop-pin.is-pinned .hs-loop-frame {
    height: calc(100svh - 72px);
    display: grid; grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(24px, 4vh, 48px);
    padding-block: clamp(16px, 4vh, 40px);
}
.hs-loop-pin.is-pinned .hs-loop-rail {
    position: relative;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    border-bottom: 1px solid var(--ds-line-2);
}
.hs-loop-rail a {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 0 16px;
    color: var(--ds-ink-3); text-decoration: none;
    font-size: .9375rem; font-weight: 600;
    transition: color .3s ease;
}
.hs-loop-rail a span { font-variant-numeric: tabular-nums; color: inherit; opacity: .7; }
.hs-loop-rail a:hover,
.hs-loop-rail a[aria-current="step"] { color: var(--ds-ink); }
.hs-loop-rail a[aria-current="step"] span { color: var(--ds-accent-ink); opacity: 1; }
.hs-loop-meter { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.hs-loop-meter i {
    display: block; height: 100%;
    background: var(--ds-accent);
    transform-origin: 0 50%; transform: scaleX(var(--p, 0));
}
.hs-loop-pin.is-pinned .hs-loop-steps {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
    align-content: center;
    min-height: 0;
}
.hs-loop-pin.is-pinned .hs-loop-step { display: contents; }
.hs-loop-pin.is-pinned .hs-loop-caption { grid-area: 1 / 1; }
.hs-loop-pin.is-pinned .hs-loop-scene { grid-area: 1 / 2; max-height: 100%; min-height: min(480px, 100%); }
.hs-loop-pin.is-pinned .hs-loop-step > * {
    transition: opacity .55s ease, transform .9s var(--ds-ease-out), visibility 0s linear .55s;
}
.hs-loop-pin.is-pinned .hs-loop-step:not(.is-active) > * { opacity: 0; visibility: hidden; pointer-events: none; }
.hs-loop-pin.is-pinned .hs-loop-step:not(.is-active) > .hs-loop-caption { transform: translateY(28px); }
.hs-loop-pin.is-pinned .hs-loop-step:not(.is-active) > .hs-loop-scene { transform: translateY(24px) scale(.97); }
.hs-loop-pin.is-pinned .hs-loop-step.is-active > * { transition-delay: 0s, 0s, 0s; }
.hs-loop-pin.is-pinned .hs-loop-step.is-leaving > .hs-loop-caption { transform: translateY(-28px); }
.hs-loop-pin.is-pinned .hs-loop-step.is-leaving > .hs-loop-scene { transform: translateY(-24px) scale(.97); }

/* Stack mode (CardSwap, home.js cardStack): every step's window stays on
   screen as one 3D stack; GSAP owns their transforms. Only the captions
   cross-fade. */
.hs-loop-pin.is-stack .hs-loop-steps { perspective: 1800px; perspective-origin: 75% 30%; }
.hs-loop-pin.is-stack .hs-loop-step > .hs-loop-scene,
.hs-loop-pin.is-stack .hs-loop-step:not(.is-active) > .hs-loop-scene,
.hs-loop-pin.is-stack .hs-loop-step.is-leaving > .hs-loop-scene {
    opacity: 1; visibility: visible; transform: none; transition: none;
    width: 90%; justify-self: start;
    max-height: calc(100% - 96px); align-self: end;
    transform-origin: 50% 60%;
    box-shadow: 0 30px 60px -28px rgba(8, 9, 20, .45), var(--ds-shadow-3);
    will-change: transform;
}
.hs-loop-title .hs-bw { display: inline-block; }

/* Scene: a captured screen of the real app inside the window frame
   (templates/_home_sections.html, scripts/capture_product_shots.py). Long
   screens are cropped from the top and fade out where the frame ends. */
.hs-shot {
    position: relative;
    flex: 1; min-height: 0;
    overflow: hidden;
    background: var(--ds-stage);
}
.hs-shot .ds-shot { width: 100%; height: auto; }
.hs-shot::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
    background: linear-gradient(180deg, transparent, var(--ds-stage));
    pointer-events: none;
}
.hs-loop-pin:not(.is-pinned) .hs-shot { max-height: 520px; }
@media (max-width: 640px) { .hs-loop-pin:not(.is-pinned) .hs-shot { max-height: 340px; } }

/* ── 3 · Features ───────────────────────────────────────────────── */
/* One grid, one rhythm: every card is copy on top and its tool's real
   screen set into the bottom edge at a fixed height. The screens are taken
   at phone width (~400px), so at card width they show at ~85% of real size
   and every word in them stays readable. */
.hs-features-head { margin-bottom: clamp(48px, 6vw, 72px); }
.hs-bento {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.hs-tile {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
    padding: 28px 28px 0;
    border-radius: 20px;
    color: var(--ds-ink); text-decoration: none;
    transition: border-color .2s ease;
}
a.hs-tile:hover { border-color: var(--ds-line-2); }
a.hs-tile:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 3px; }
.hs-tile-copy { display: grid; gap: 8px; align-content: start; }
.hs-tile-kicker { display: inline-flex; align-items: center; gap: 8px; font: 600 .8125rem/1.3 var(--ds-font-text); color: var(--ds-accent-ink); }
.hs-tile-kicker .ds-ico { width: 15px; height: 15px; }
.hs-tile .ds-h3 { margin: 4px 0 0; font-size: 1.25rem; line-height: 1.25; letter-spacing: -.02em; }
.hs-tile-desc { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--ds-ink-2); }
.hs-tile-desc .ds-link { white-space: nowrap; }
.hs-tile-more {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
    font: 600 .9375rem/1.3 var(--ds-font-text); color: var(--ds-accent-ink);
}
.hs-tile-more .ds-ico { width: 16px; height: 16px; transition: transform .2s ease; }
a.hs-tile:hover .hs-tile-more .ds-ico { transform: translateX(3px); }

/* The screen sits on the stage it was captured on (--ds-stage), which runs
   to the card's edges: the app's own card is the only frame, so there is
   never a border inside a border. */
.hs-tile-copy { padding-bottom: 24px; }
.hs-tile-shot {
    position: relative;
    height: 300px;
    margin: auto -28px 0;
    overflow: hidden;
    border-top: 1px solid var(--ds-line);
    background: var(--ds-stage);
}
.hs-tile-shot .ds-shot { display: block; width: 100%; height: auto; }
.hs-tile-shot .ds-shot.ds-shot--dark { display: none; }
[data-dark] .hs-tile-shot .ds-shot.ds-shot--light { display: none; }
[data-dark] .hs-tile-shot .ds-shot.ds-shot--dark { display: block; }
.hs-tile-shot::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 48px;
    background: linear-gradient(180deg, transparent, var(--ds-stage));
    pointer-events: none;
}

/* Marking spans two columns: copy on one half, the stage on the other. */
.hs-tile--mark {
    grid-column: span 2;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 0;
}
.hs-tile--mark .hs-tile-copy { padding: 40px; align-self: center; }
.hs-tile--mark .ds-h3 { font-size: clamp(1.5rem, 2.2vw, 1.875rem); letter-spacing: -.03em; line-height: 1.12; }
.hs-tile--mark .hs-tile-desc { font-size: 1rem; }
.hs-tile-shot--mark {
    height: auto; margin: 0;
    display: grid; place-items: center;
    border-top: 0; border-left: 1px solid var(--ds-line);
}
.hs-tile-shot--mark .ds-shot { width: min(100%, 420px); }
.hs-tile-shot--mark::after { display: none; }

/* The flashcard flips between the app's own two faces. Per-face rotation and
   opacity, never preserve-3d + backface-visibility (the pair WebKit drops,
   which paints an empty card on iPhone). */
.hs-flip {
    all: unset; box-sizing: border-box;
    width: 100%;
    perspective: 1100px; cursor: pointer;
}
.hs-flip:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 3px; }
.hs-flip-inner { position: relative; display: grid; }
.hs-flip-face {
    grid-area: 1 / 1;
    display: block;
    overflow: hidden;
    background: var(--ds-stage);
    transition: transform .7s var(--ds-ease-out), opacity .3s ease;
}
.hs-flip .hs-flip-front { transform: rotateY(0deg); opacity: 1; }
.hs-flip .hs-flip-back { transform: rotateY(180deg); opacity: 0; }
.hs-flip[aria-pressed="true"] .hs-flip-front { transform: rotateY(-180deg); opacity: 0; }
.hs-flip[aria-pressed="true"] .hs-flip-back { transform: rotateY(0deg); opacity: 1; }
@media (hover: none) { .hs-flip { perspective: none; } }

@media (max-width: 1080px) {
    .hs-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .hs-tile--mark { grid-template-columns: minmax(0, 1fr); }
    .hs-tile--mark .hs-tile-copy { padding: 28px 28px 24px; }
    .hs-tile-shot--mark { border-left: 0; border-top: 1px solid var(--ds-line); padding: 8px 0; }
}
@media (max-width: 640px) {
    .hs-bento { grid-template-columns: minmax(0, 1fr); }
    .hs-tile { padding: 24px 22px 0; }
    .hs-tile-shot { height: 260px; margin-inline: -22px; }
    .hs-tile--mark { grid-column: auto; padding: 0; }
    .hs-tile--mark .hs-tile-copy { padding: 24px 22px; }
    .hs-tile-shot--mark { height: auto; margin-inline: 0; }
    /* Three tools, then the rest behind "See all tools" (home.js). */
    .hs-bento.is-collapsed > :nth-child(n+4) { display: none; }
}
.hs-bento-more { display: flex; width: fit-content; margin: 20px auto 0; }

/* ── 4 · Try it (night)───────────────────────────────────────────── */
.hs-try { padding: var(--ds-section-y) 0; overflow: hidden; }
.hs-try-glow {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(40% 50% at 78% 45%, rgba(91, 80, 232, .28), transparent 70%),
        radial-gradient(30% 40% at 12% 90%, rgba(94, 234, 246, .08), transparent 70%);
}
/* The dot field (static/ds/dotgrid.js) sits over the glow, under the content,
   and fades out toward the band's edges. */
.hs-try-dots {
    position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(75% 70% at 55% 50%, #000 35%, transparent 100%);
            mask-image: radial-gradient(75% 70% at 55% 50%, #000 35%, transparent 100%);
}
.hs-try-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.hs-try-copy { display: grid; gap: 22px; }
.hs-try-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px; margin-top: 12px; }
.hs-try-steps { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--ds-line); }
.hs-try-specimens { position: relative; aspect-ratio: 1; max-width: 260px; justify-self: center; width: 100%; }
.hs-try-specimens::before {
    content: ''; position: absolute; inset: 12%; border-radius: 50%;
    background: radial-gradient(circle, rgba(122, 110, 240, .35), transparent 70%);
    filter: blur(20px);
}
.hs-try-specimens img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
    opacity: 0; transform: scale(.82) rotate(-10deg);
    transition: opacity .6s ease, transform 1.1s var(--ds-ease-out);
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .5));
}
.hs-try-specimens img.is-on { opacity: 1; transform: none; animation: hs-float 7s ease-in-out infinite; }
@keyframes hs-float { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -10px; rotate: 3deg; } }
@media (max-width: 900px) { .hs-try-specimens { max-width: 180px; } }
.hs-try-steps li {
    position: relative; display: flex; align-items: center; gap: 14px;
    padding: 12px 0 12px 22px;
    border-bottom: 1px solid var(--ds-line);
    font-size: 1rem; font-weight: 600; color: var(--ds-ink-3);
    transition: color .4s ease;
}
.hs-try-steps li::before {
    content: ''; position: absolute; left: 0; top: 50%;
    width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
    background: var(--ds-line-2);
    transition: background-color .4s ease;
}
.hs-try-steps li span { min-width: 1ch; font-variant-numeric: tabular-nums; opacity: .7; }
.hs-try-steps li.is-now { color: var(--ds-ink); }
.hs-try-steps li.is-now::before { background: var(--ds-accent); }
.hs-try-steps li.is-right::before { background: var(--ds-mint); }
.hs-try-steps li.is-wrong::before { background: var(--ds-coral); }

/* The try-it quiz is the app's own question card and debrief, drawn with the
   app's dark-theme values (this band is always night): progress row, plain
   header, lettered options, the marking inks, the explanation panel. It sits
   in the same glass window as the hero's worked example, so the two demos
   read as one family: the progress row is the window's header. */
.hs-quiz {
    --q-earned: #6ee7b7; --q-earned-bg: rgba(52, 211, 153, .12);
    --q-missed: #fda4a4; --q-missed-bg: rgba(248, 113, 113, .12);
    --q-partial: #fcd34d;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(150, 138, 240, .24);
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(18, 17, 40, .72), rgba(11, 11, 28, .78));
    -webkit-backdrop-filter: blur(22px) saturate(1.15) brightness(1.35);
    backdrop-filter: blur(22px) saturate(1.15) brightness(1.35);
    box-shadow: 0 1px 0 rgba(200, 190, 255, .12) inset, 0 40px 90px -30px rgba(0, 0, 0, .8);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .hs-quiz { background: #0f0f24; }
}
@media (prefers-reduced-transparency: reduce) {
    .hs-quiz { background: #0f0f24; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.hs-quiz-progress {
    display: flex; align-items: center; gap: 16px;
    height: 54px; padding: 0 20px 0 16px;
    border-bottom: 1px solid var(--ds-line);
}
.hs-quiz-label {
    display: inline-flex; align-items: center; gap: 10px; flex: none;
    font-size: .875rem; font-weight: 650; color: var(--ds-ink);
    white-space: nowrap;
}
.hs-quiz-bar { flex: 1; height: 4px; border-radius: 999px; background: var(--ds-bg-3); overflow: hidden; }
.hs-quiz-bar i { display: block; height: 100%; width: 25%; border-radius: inherit; background: var(--ds-accent); transition: width .3s ease; }
.hs-quiz-count { font-size: .8125rem; font-weight: 600; color: var(--ds-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hs-quiz-card { padding: clamp(22px, 3vw, 32px); }
.hs-quiz-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.hs-quiz-num { font-size: .8125rem; font-weight: 600; color: var(--ds-ink-2); }
.hs-quiz-diff, .hs-quiz-subject { font-size: .75rem; font-weight: 600; color: var(--ds-ink-3); }
.hs-quiz-subject { margin-left: auto; }
.hs-quiz-stem {
    margin: 18px 0 22px;
    font-family: var(--ds-font-display);
    font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; line-height: 1.4; letter-spacing: -.015em;
    color: var(--ds-ink);
    text-wrap: pretty;
}
.hs-quiz-opts { display: grid; gap: 10px; }
.hs-quiz-opt {
    all: unset; box-sizing: border-box;
    display: flex; align-items: center; gap: 14px;
    width: 100%; min-height: 56px; padding: 12px 16px;
    border: 1px solid var(--ds-line-2); border-radius: 12px;
    background: var(--ds-surface);
    color: var(--ds-ink); font-size: 1rem; font-weight: 500; line-height: 1.4;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, opacity .15s ease;
}
.hs-quiz-opt:hover { border-color: color-mix(in srgb, var(--ds-accent) 50%, transparent); background: var(--ds-bg-2); }
.hs-quiz-opt:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 3px; }
.hs-quiz-key {
    flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
    border: 1px solid var(--ds-line-2); background: var(--ds-bg-2);
    font-size: .8125rem; font-weight: 650; color: var(--ds-ink-2);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.hs-quiz-opt:hover .hs-quiz-key { border-color: var(--ds-accent); color: var(--ds-accent-ink); }
.hs-quiz.is-answered .hs-quiz-opt { cursor: default; }
.hs-quiz.is-answered .hs-quiz-opt:hover { background: var(--ds-surface); border-color: var(--ds-line-2); }
.hs-quiz.is-answered .hs-quiz-opt:hover .hs-quiz-key { border-color: var(--ds-line-2); color: var(--ds-ink-2); }
.hs-quiz-opt.is-dim { opacity: .6; }
.hs-quiz-opt.is-correct,
.hs-quiz.is-answered .hs-quiz-opt.is-correct:hover { border-color: var(--q-earned); background: var(--q-earned-bg); font-weight: 600; }
.hs-quiz-opt.is-correct .hs-quiz-key,
.hs-quiz.is-answered .hs-quiz-opt.is-correct:hover .hs-quiz-key { border-color: var(--q-earned); background: var(--q-earned); color: var(--ds-night); }
.hs-quiz-opt.is-wrong,
.hs-quiz.is-answered .hs-quiz-opt.is-wrong:hover { border-color: var(--q-missed); background: var(--q-missed-bg); }
.hs-quiz-opt.is-wrong .hs-quiz-key,
.hs-quiz.is-answered .hs-quiz-opt.is-wrong:hover .hs-quiz-key { border-color: var(--q-missed); background: var(--q-missed); color: var(--ds-night); }
.hs-quiz-why {
    margin-top: 16px; padding: 14px 18px;
    border-left: 3px solid var(--ds-line-2);
    border-radius: 4px 12px 12px 4px;
    background: var(--ds-bg-2);
}
.hs-quiz-why.is-right { border-left-color: var(--q-earned); }
.hs-quiz-why.is-wrong { border-left-color: var(--q-partial); }
.hs-quiz-why p { font-size: .9375rem; line-height: 1.65; color: var(--ds-ink-2); }
.hs-quiz-verdict { color: var(--ds-ink); font-weight: 700; }
.hs-quiz-noscript { margin-top: 14px; color: var(--ds-ink-2); }
.hs-quiz-noscript summary { cursor: pointer; font-weight: 650; color: var(--ds-ink); }
.hs-quiz-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-top: 18px; }
.hs-quiz-hint { font-size: .875rem; color: var(--ds-ink-3); }
.hs-quiz-next {
    margin-left: auto;
    min-height: 44px; padding: 0 20px;
    border: 0; border-radius: 10px;
    background: var(--ds-violet-600); color: #fff;
    font: 650 .9375rem var(--ds-font-text);
    cursor: pointer;
    transition: background-color .15s ease;
}
.hs-quiz-next:hover { background: var(--ds-violet-700); }
.hs-quiz-next:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 3px; }
.hs-quiz-next[hidden] { display: none; }

/* The debrief (showScore) */
.hs-quiz-done { display: grid; gap: 14px; }
.hs-quiz-done[hidden] { display: none; }
.hs-dbr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ds-line-2); }
.hs-dbr-slug { font-size: .8125rem; font-weight: 600; color: var(--ds-ink-2); }
.hs-dbr-stamp { padding: 3px 9px; border: 1px solid currentColor; border-radius: 6px; font-size: .75rem; font-weight: 700; color: var(--q-partial); }
.hs-dbr-stamp:empty { display: none; }
.hs-dbr-stamp[data-tier="flawless"], .hs-dbr-stamp[data-tier="sharp"] { color: var(--q-earned); }
.hs-dbr-stamp[data-tier="shaky"] { color: var(--q-missed); }
.hs-dbr-result { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.hs-dbr-frac { font-family: var(--ds-font-display); font-size: 3.5rem; font-weight: 600; line-height: 1; letter-spacing: -.04em; color: var(--ds-ink); font-variant-numeric: tabular-nums; }
.hs-dbr-of { font-size: 1.5rem; color: var(--ds-ink-3); letter-spacing: 0; }
.hs-dbr-pct { font-size: .8125rem; font-weight: 600; color: var(--ds-ink-3); }
.hs-quiz-done-title { font-family: var(--ds-font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; color: var(--ds-ink); }
.hs-dbr-track { height: 6px; border-radius: 999px; background: var(--ds-bg-3); overflow: hidden; }
.hs-dbr-track i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--ds-accent); transition: width .6s ease; }
.hs-dbr-next { font-size: .9375rem; line-height: 1.6; color: var(--ds-ink-2); }
.hs-quiz-done .ds-actions { margin-top: 4px; }
.hs-quiz-done .ds-link { background-color: transparent; border: 0; font: inherit; font-weight: 650; cursor: pointer; }
@media (max-width: 900px) { .hs-try-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
    .hs-quiz-opt { gap: 10px; font-size: .9375rem; }
    .hs-quiz-card { padding: 20px 16px; }
    .hs-quiz-progress { gap: 12px; padding: 0 16px 0 12px; }
}

/* ── 5 · Subjects + syllabus ──────────────────────────────────────── */
.hs-subjects { outline: none; }
.hs-syllabus {
    display: grid; grid-template-columns: 300px minmax(0, 1fr);
    margin-top: clamp(40px, 5vw, 64px);
    border: 1px solid var(--ds-line); border-radius: 28px;
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-2);
    overflow: hidden;
}
.hs-syllabus-tabs { display: grid; align-content: start; gap: 4px; padding: 14px; background: var(--ds-bg-2); border-right: 1px solid var(--ds-line); }
.hs-syllabus-tabs [role="tab"] {
    display: grid; gap: 3px; justify-items: start;
    padding: 14px 16px; border: 1px solid transparent; border-radius: 16px;
    background: transparent; cursor: pointer;
    font: 650 1rem var(--ds-font-text); color: var(--ds-ink-2); text-align: left;
    transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.hs-syllabus-tabs [role="tab"] span { font-size: .8125rem; font-weight: 600; color: var(--ds-accent-ink); }
.hs-syllabus-tabs [role="tab"]:hover { color: var(--ds-ink); background: color-mix(in srgb, var(--ds-surface) 60%, transparent); }
.hs-syllabus-tabs [role="tab"][aria-selected="true"] { background: var(--ds-surface); color: var(--ds-ink); border-color: var(--ds-line); box-shadow: var(--ds-shadow-1); }
.hs-syllabus-ink { display: none; }
.hs-syllabus-panel { display: grid; gap: 20px; align-content: start; padding: clamp(22px, 3vw, 36px); }
.hs-syllabus-panel[hidden] { display: none; }
.hs-syllabus-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.hs-syllabus-year { font-size: .875rem; color: var(--ds-ink-3); }
.hs-syllabus-meta strong { width: 100%; font-family: var(--ds-font-display); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -.035em; color: var(--ds-ink); }
.hs-syllabus-units { list-style: none; }
.hs-syllabus-units li {
    display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: baseline;
    padding: 16px 0; border-top: 1px solid var(--ds-line);
    font-size: 1.0625rem; font-weight: 550; color: var(--ds-ink);
}
.hs-syllabus-units li span { font-size: .875rem; font-variant-numeric: tabular-nums; color: var(--ds-ink-3); }
@media (max-width: 760px) {
    .hs-syllabus { grid-template-columns: minmax(0, 1fr); border-radius: 22px; }
    .hs-syllabus-tabs { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--ds-line); scrollbar-width: none; }
    .hs-syllabus-tabs [role="tab"] { flex: none; }
}

.hs-catalog { margin-top: clamp(56px, 7vw, 88px); }
.hs-catalog-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.hs-catalog-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.hs-filter {
    display: inline-flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 14px;
    border: 1px solid var(--ds-line-2); border-radius: 999px;
    background: var(--ds-surface); color: var(--ds-ink-2);
    font: 600 .875rem var(--ds-font-text); cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.hs-filter:hover { border-color: var(--ds-ink-3); color: var(--ds-ink); }
.hs-filter[aria-pressed="true"] { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--ds-bg); }
.hs-catalog-search { position: relative; display: block; width: min(300px, 100%); }
.hs-catalog-search .ds-ico { position: absolute; left: 14px; top: 50%; width: 17px; height: 17px; margin-top: -8.5px; color: var(--ds-ink-3); pointer-events: none; }
.hs-catalog-search input {
    width: 100%; height: 44px; padding: 0 16px 0 42px;
    border: 1px solid var(--ds-line-2); border-radius: 999px;
    background: var(--ds-surface); color: var(--ds-ink);
    font: 500 1rem var(--ds-font-text);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.hs-catalog-search input:focus { outline: none; border-color: var(--ds-accent); box-shadow: 0 0 0 4px var(--ds-accent-soft); }
.hs-catalog-list {
    list-style: none;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); column-gap: 28px;
    border-top: 1px solid var(--ds-line);
}
.hs-catalog-list.is-collapsed {
    max-height: 492px; overflow: hidden;
    -webkit-mask: linear-gradient(#000 70%, transparent);
            mask: linear-gradient(#000 70%, transparent);
}
.hs-catalog-list li[hidden] { display: none; }
.hs-catalog-list a {
    display: grid; grid-template-rows: auto auto; align-content: center; row-gap: 2px;
    min-height: 60px; padding: 10px 4px;
    border-bottom: 1px solid var(--ds-line);
    color: var(--ds-ink); text-decoration: none;
    font-size: .9375rem; font-weight: 550;
    transition: color .2s ease, padding .35s var(--ds-ease-out);
}
.hs-catalog-list a span { line-height: 1.3; }
.hs-catalog-list a small { font-size: .75rem; color: var(--ds-ink-3); }
.hs-catalog-list a:hover { color: var(--ds-accent-ink); }
.hs-catalog-empty { padding: 28px 0; color: var(--ds-ink-2); }
.hs-catalog-empty a { color: var(--ds-accent-ink); }
.hs-catalog-more { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.hs-catalog-more .ds-small { color: var(--ds-ink-3); }

/* ── 6 · Community ────────────────────────────────────────────────── */
.hs-community { padding: 0 0 var(--ds-section-y); }
.hs-community-card {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center;
    padding: clamp(28px, 4vw, 56px);
    border-radius: 32px;
    overflow: hidden;
}
.hs-community-copy { display: grid; gap: 18px; }
.hs-community-stack { position: relative; height: 260px; }
.hs-deck {
    position: absolute; left: 50%; top: 50%;
    display: grid; gap: 10px; align-content: space-between;
    width: min(300px, 90%); height: 170px; padding: 20px;
    border: 1px solid var(--ds-line); border-radius: 20px;
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-2);
    font-family: var(--ds-font-display); font-size: 1.125rem; font-weight: 650; letter-spacing: -.015em; line-height: 1.25;
    transition: transform .8s var(--ds-ease-out);
}
.hs-deck small { font-size: .75rem; color: var(--ds-accent-ink); font-weight: 600; }
.hs-deck--1 { transform: translate(-72%, -58%) rotate(-7deg); }
.hs-deck--2 { transform: translate(-28%, -42%) rotate(5deg); background: linear-gradient(150deg, #6d5cff, #4a3fd0); color: #fff; border-color: transparent; }
.hs-deck--2 small { color: rgba(255, 255, 255, .75); }
.hs-deck--3 { transform: translate(-50%, -50%) rotate(-1deg) translateY(40px); z-index: -1; opacity: .9; }
.hs-community-card:hover .hs-deck--1 { transform: translate(-80%, -62%) rotate(-10deg); }
.hs-community-card:hover .hs-deck--2 { transform: translate(-20%, -46%) rotate(8deg); }
@media (max-width: 860px) { .hs-community-card { grid-template-columns: minmax(0, 1fr); } .hs-community-stack { height: 220px; } }

/* ── 7 · Teachers ─────────────────────────────────────────────────── */
.hs-teach { padding: 0 0 var(--ds-section-y); }
.hs-teach-card {
    display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 88px); align-items: center;
    padding: clamp(32px, 5.5vw, 80px);
    border-radius: clamp(26px, 3vw, 40px);
    overflow: hidden;
}
.hs-teach-copy { display: grid; gap: 22px; }
.hs-teach-points { list-style: none; display: grid; gap: 18px; margin: 6px 0 8px; }
.hs-teach-points li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.hs-teach-points .ds-ico { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid var(--ds-line); color: #b1a7ff; }
.hs-teach-points span { font-size: .9375rem; line-height: 1.55; color: var(--ds-ink-2); }
.hs-teach-points b { display: block; color: var(--ds-ink); font-weight: 650; }
.hs-teach-vis { display: grid; gap: 14px; }
.hs-teach-shot { margin: 0; overflow: hidden; background: var(--ds-stage); }
.hs-teach-shot .ds-shot { width: 100%; height: auto; }
.hs-teach-shot--lobby { width: 86%; }
.hs-teach-shot--reveal { width: 94%; justify-self: end; margin-top: -48px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9); }
@media (max-width: 900px) {
    .hs-teach-shot--lobby, .hs-teach-shot--reveal { width: 100%; margin-top: 0; }
}
@media (max-width: 900px) { .hs-teach-card { grid-template-columns: minmax(0, 1fr); } }

/* ── 8 · Plans ────────────────────────────────────────────────────── */
.hs-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 940px; margin: clamp(40px, 5vw, 64px) auto 0; }
.hs-plan { display: flex; flex-direction: column; gap: 22px; padding: clamp(24px, 3vw, 36px); border-radius: 28px; }
.hs-plan header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hs-plan-name { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ds-font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; }
/* The badge sits inside the name; the name's tight tracking closed its word gap ("Mostroom"). */
.hs-plan-name .ds-badge { letter-spacing: 0; }
.hs-plan-price { display: grid; justify-items: end; text-align: right; }
.hs-plan-price b { font-family: var(--ds-font-display); font-size: 2rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.hs-plan-price small { font-size: .8125rem; color: var(--ds-ink-3); }
.hs-plan dl { margin: 0; padding: 18px 0; border-block: 1px solid var(--ds-line); }
.hs-plan dt { font: 600 .8125rem/1.3 var(--ds-font-text); color: var(--ds-ink-3); }
.hs-plan dd { margin: 6px 0 0; font-family: var(--ds-font-display); font-size: clamp(1.75rem, 2.8vw, 2.25rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; color: var(--ds-ink); font-variant-numeric: tabular-nums; }
.hs-plan dd small { font-family: var(--ds-font-text); font-size: .875rem; font-weight: 500; letter-spacing: 0; color: var(--ds-ink-3); }
.hs-plan-list { list-style: none; display: grid; gap: 12px; flex: 1; align-content: start; }
.hs-plan-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: .9375rem; line-height: 1.5; color: var(--ds-ink-2); }
.hs-plan-list .ds-ico { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--ds-mint-soft); color: var(--ds-mint); stroke-width: 2.6; margin-top: 1px; }
.hs-plan-list strong { color: var(--ds-ink); font-weight: 650; }
.hs-plan--pro {
    border-color: color-mix(in srgb, var(--ds-accent) 42%, transparent);
    background: linear-gradient(180deg, var(--ds-accent-soft), var(--ds-surface) 46%);
    box-shadow: var(--ds-glow);
}
.hs-plan-foot { text-align: center; }
.hs-plan-foot a { color: var(--ds-accent-ink); }
@media (max-width: 760px) { .hs-plans { grid-template-columns: minmax(0, 1fr); } }

/* ── 9 · FAQ ──────────────────────────────────────────────────────── */
.hs-faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.hs-faq-head { position: sticky; top: 112px; }
@media (max-width: 860px) { .hs-faq-grid { grid-template-columns: minmax(0, 1fr); } .hs-faq-head { position: static; } }

/* ── 10 · Closing CTA ─────────────────────────────────────────────── */
.hs-cta { padding: 0 0 clamp(72px, 9vw, 128px); }
.hs-cta-card {
    position: relative;
    display: grid; place-items: center;
    min-height: 560px;
    padding: clamp(64px, 9vw, 128px) clamp(20px, 4vw, 48px);
    border-radius: clamp(28px, 3.4vw, 44px);
    overflow: hidden;
    text-align: center;
}
.hs-constellation { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hs-cta-card::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(50% 60% at 50% 55%, rgba(8, 9, 13, .78), transparent 80%);
}
.hs-cta-inner { position: relative; display: grid; justify-items: center; gap: 24px; max-width: 900px; }
.hs-cta-avi {
    display: grid; place-items: center;
    width: 88px; height: 88px;
}
.hs-cta-avi .ds-avi { width: 100%; height: 100%; }
.hs-cta .ds-display { font-size: clamp(2.5rem, 6.2vw, 5.25rem); }
.hs-cta .ds-lead { margin-inline: auto; text-align: center; }
.hs-cta-actions { justify-content: center; margin-top: 8px; }
.hs-cta-note { color: var(--ds-ink-3); }

/* ── Feedback ─────────────────────────────────────────────────────── */
.hs-feedback { padding: 0 0 clamp(72px, 9vw, 120px); }
.hs-feedback-grid {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start;
    padding-top: clamp(56px, 7vw, 96px);
    border-top: 1px solid var(--ds-line);
}
.hs-feedback-copy { display: grid; gap: 16px; }
.hs-feedback-sign { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: .875rem; color: var(--ds-ink-3); }
.hs-feedback-sign .hs-avi-badge { width: 36px; height: 36px; }
.student-homepage .feedback-card {
    max-width: none; margin: 0;
    padding: clamp(22px, 3vw, 32px);
    border: 1px solid var(--ds-line); border-radius: 26px;
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-2);
}
.student-homepage .feedback-input {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--ds-line-2); border-radius: 14px;
    background: var(--ds-bg-2); color: var(--ds-ink);
    font: 500 1rem var(--ds-font-text);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.student-homepage .feedback-input:focus { outline: none; border-color: var(--ds-accent); background: var(--ds-surface); box-shadow: 0 0 0 4px var(--ds-accent-soft); }
.student-homepage .feedback-input::placeholder { color: var(--ds-ink-3); }
.student-homepage .feedback-textarea { min-height: 128px; resize: vertical; margin-bottom: 12px; display: block; }
.student-homepage .feedback-row { display: flex; flex-wrap: wrap; gap: 10px; }
.student-homepage .feedback-row .feedback-input { flex: 1 1 220px; min-width: 0; }
.student-homepage .feedback-row .ds-btn { flex: none; }
.student-homepage .feedback-error { margin-top: 10px; min-height: 1em; font-size: .8125rem; font-weight: 650; color: var(--ds-coral); }
.student-homepage .feedback-success { text-align: center; padding: 22px 0 8px; }
.student-homepage .feedback-success svg { margin: 0 auto; }
.student-homepage .feedback-success-title { margin-top: 10px; font-family: var(--ds-font-display); font-size: 1.25rem; font-weight: 700; color: var(--ds-ink); }
.student-homepage .feedback-success-sub { margin-top: 4px; font-size: .875rem; color: var(--ds-ink-2); }
@media (max-width: 860px) { .hs-feedback-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .student-homepage .feedback-row .ds-btn { width: 100%; } }

/* ── Motion off: every loop and float rests ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hs-try-specimens img { animation: none !important; }
    .hs-flip-face, .hs-board, .hs-deck, .hs-quiz-opt { transition: none !important; }
}

/* ── Floating phone CTA + back-to-top, in the Signal skin ─────────── */
.student-homepage .sticky-cta {
    left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 10px 10px 10px 16px;
    border: 1px solid var(--ds-line-2);
    border-radius: 20px;
    background: color-mix(in srgb, var(--ds-surface) 86%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
    box-shadow: var(--ds-shadow-3);
    transform: translateY(calc(100% + 24px));
    transition: transform .6s var(--ds-ease-out);
}
.student-homepage .sticky-cta.show { transform: translateY(0); }
.student-homepage .sticky-cta-copy { font-size: .75rem; font-weight: 500; color: var(--ds-ink-3); line-height: 1.35; }
.student-homepage .sticky-cta-copy b { font-size: .9375rem; font-weight: 700; color: var(--ds-ink); }
.student-homepage .sticky-cta .btn-primary {
    min-height: 46px; padding: 0 18px;
    border-radius: 13px;
    background: var(--ds-violet-600);
    font-size: .9375rem; font-weight: 650;
    box-shadow: 0 1px 2px rgba(14, 18, 32, .16);
}
.student-homepage .to-top {
    width: 44px; height: 44px;
    border: 1px solid var(--ds-line-2);
    background: color-mix(in srgb, var(--ds-surface) 82%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    color: var(--ds-ink);
    box-shadow: var(--ds-shadow-2);
    transition: opacity .3s ease, transform .5s var(--ds-ease-out), visibility .3s, bottom .5s var(--ds-ease-out), background-color .2s ease;
}
.student-homepage .to-top:hover { background: var(--ds-violet-600); color: #fff; border-color: transparent; }
.student-homepage .to-top svg { width: 18px; height: 18px; }
@media (max-width: 768px) {
    .student-homepage .sticky-cta.show ~ .to-top { bottom: 92px; }
}
@media (max-width: 420px) {
    .hs-avi-badge { display: none; }
    .hs-hero .home-session-heading { padding: 0 10px 0 14px; }
}

/* Adjacent light sections share one gap, not two. */
.hs-community + .hs-features { padding-top: 0; }
.hs-subjects + .hs-features { padding-top: calc(var(--ds-section-y) * .35); }

/* ── Drafting frame ───────────────────────────────────────────────── */
/* Below the hero the page is drawn like a technical sheet: two hairline
   rails 28px outside the content edges run through every section, and a
   section that opens a new block gets a hairline across the page with a
   registration cross where it meets each rail. The frame sits behind the
   content (z-index -1 in each section's own stacking context), so it never
   crosses a card, and it takes the section's line colour, night bands
   included. Wide screens only: there is no room outside the content below. */
.ds-frame { display: none; }
@media (min-width: 1100px) {
    .ds-framed { position: relative; isolation: isolate; }
    .ds-frame {
        --rail: max(12px, calc(50% - var(--ds-max) / 2 - 28px));
        --mark: color-mix(in srgb, var(--ds-ink) 38%, transparent);
        display: block;
        position: absolute; inset: 0; z-index: -1;
        pointer-events: none;
    }
    .ds-frame::before {
        content: ''; position: absolute; top: 0; bottom: 0; left: var(--rail); right: var(--rail);
        border-inline: 1px solid var(--ds-line);
    }
    .ds-frame--ruled { border-top: 1px solid var(--ds-line); }
    .ds-frame--ruled::after {
        content: ''; position: absolute; top: -5px; height: 9px;
        left: calc(var(--rail) - 4px); right: calc(var(--rail) - 4px);
        background:
            linear-gradient(var(--mark), var(--mark)) left 4px top 0 / 1px 9px no-repeat,
            linear-gradient(var(--mark), var(--mark)) left 0 top 4px / 9px 1px no-repeat,
            linear-gradient(var(--mark), var(--mark)) right 4px top 0 / 1px 9px no-repeat,
            linear-gradient(var(--mark), var(--mark)) right 0 top 4px / 9px 1px no-repeat;
    }
    /* A block that follows the community band flush has no room for a rule. */
    .hs-community + .hs-features > .ds-frame--ruled { border-top: 0; }
    .hs-community + .hs-features > .ds-frame--ruled::after { display: none; }
}

/* ── Data in mono ─────────────────────────────────────────────────── */
/* Figures, codes and counts are set in JetBrains Mono, as a spec sheet sets
   its values: sentence case, no tracking. Words stay in the text face. */
.hs-hero .hero-trust li { font-family: var(--ds-font-mono); font-size: .8125rem; font-weight: 500; }
.hs-loop-rail a span,
.hs-loop-num,
.hs-try-steps li span,
.hs-quiz-count,
.hs-syllabus-tabs [role="tab"] span,
.hs-syllabus-year,
.hs-syllabus-units li span,
.hs-catalog-list a small,
#hsCatalogCount,
.hs-tile-kicker,
.hs-plan dd,
.hs-plan-price b { font-family: var(--ds-font-mono); letter-spacing: 0; }
.hs-loop-num, .hs-tile-kicker { font-size: .8125rem; font-weight: 500; }
.hs-plan dd { font-size: clamp(1.5rem, 2.4vw, 1.875rem); font-weight: 600; }
.hs-plan-price b { font-size: 1.75rem; font-weight: 600; }

/* The plotter (home.js scrollModels): a violet line drawn down the left rail
   of the drafting frame as the page is read, with a square head on the
   reading line. Script only places the run in page coordinates (on load and
   resize); the scrolling itself is the browser's. The head is sticky on the
   reading line, and the line hangs from it up to the top of the run, where
   the run's clip cuts it off. So the drawing moves in the same frame as the
   scroll and cannot trail it, which a scroll handler writing a position
   every frame always does by a frame. */
.hs-plot {
    position: absolute; z-index: 2;
    width: 9px; margin-left: -4px;   /* centred on the 1px rail */
    pointer-events: none;
    clip-path: inset(0);
}
.hs-plot i {
    position: sticky; top: calc(50vh - 3.5px);
    display: block; width: 7px; height: 7px; margin: 0 1px;
    background: var(--ds-accent);
}
.hs-plot i::before {
    content: ''; position: absolute; left: 3px; bottom: 100%;
    width: 1px; height: var(--run, 0px);
    background: var(--ds-accent);
}