/* Generated by scripts/build-editorial-css.mjs. Edit the source stylesheets. */
/* Only the pre-JavaScript frame lives here. The page layout, type, covers,
   tables and charts come from the same stylesheets as the client. */
@font-face {
    font-family: 'Open Runde';
    src: url('/fonts/open-runde/OpenRunde-Semibold.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
body:has(.editorial-server) { margin: 0; }
.editorial-server {
    --space-3: 0.75rem;
    --page-gutter-compact: max(var(--space-3), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    --radius-xs: 4px;
    --radius-md: 8px;
    font-size: 16px;
    line-height: 1.5;
}
.editorial-server *,
.editorial-server *::before,
.editorial-server *::after { box-sizing: border-box; }
.editorial-server :where(h1, h2, h3, p, figure, dl, dd, ol, ul) { margin: 0; }
.editorial-server :where(ol, ul) { padding: 0; list-style: none; }
.editorial-server :where(a) { color: inherit; text-decoration: inherit; }
.editorial-server :where(img) { display: block; max-width: 100%; }
.editorial-server :where(button, summary) { font: inherit; cursor: pointer; }
.editorial-server .site-nav__brand img { object-fit: contain; }
.editorial-server .site-nav__cta {
    display: inline-flex;
    height: 32px;
    align-items: center;
    border: 1px solid var(--mb-ink);
    border-radius: 8px;
    padding: 0 12px;
    background: var(--mb-ink);
    color: var(--mb-canvas);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 1px 2px rgb(20 20 19 / 12%);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
}
.editorial-server__mobile summary { list-style: none; }
.editorial-server__mobile summary::-webkit-details-marker { display: none; }
.editorial-server__mobile nav {
    position: absolute;
    right: var(--site-gutter);
    left: var(--site-gutter);
    top: 64px;
    display: grid;
    gap: 4px;
    border: 1px solid var(--mb-line);
    border-radius: var(--radius-md);
    padding: 12px;
    background: var(--mb-raised);
}
.editorial-server__recovery {
    position: relative;
    z-index: 51;
    display: flex;
    max-width: var(--site-rail);
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 80px auto -64px;
    border: 1px solid var(--mb-line-strong);
    padding: 12px 16px;
    font-size: 14px;
}
.editorial-server__recovery[hidden] { display: none; }
.editorial-server__recovery button { height: 32px; border: 1px solid var(--mb-line-strong); border-radius: 6px; padding: 0 12px; background: var(--mb-raised); color: var(--mb-ink); }
.editorial-server main > div > nav { max-width: calc(42.5rem + 2 * var(--site-gutter)); margin: 0 auto; padding: 0 var(--site-gutter) 48px; font-size: 14px; }
@media (min-width: 1024px) { .editorial-server__mobile { display: none; } }

/*
 * The public marketing site: a neutral page, tight grotesk headlines, real
 * screens of the app in windows on drawn skies, and a solid navigation bar.
 * Every public page renders inside `.site-page` (see SiteShell), and
 * everything here is scoped under it.
 */

/* Instrument Sans (OFL; public/fonts/instrument-sans): the closest free
   match to Cursor's typeface in shape and line length, and not the default
   face of every generated site. */
@font-face {
    font-family: 'Instrument Marketing';
    src: url('/fonts/instrument-sans/instrument-sans-latin-wght-normal.woff2') format('woff2');
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}

body:has(.site-page:not(.site-page--embedded)) {
    background: var(--canvas);
}
html.dark body:has(.site-page:not(.site-page--embedded)) { background: var(--canvas); }

/* Reserve the scrollbar's space so nothing shifts sideways when a page grows
   tall enough to scroll (browsers with overlay scrollbars ignore this). */
html:has(.site-page:not(.site-page--embedded)) {
    scrollbar-gutter: stable;
}

.site-page {
    /* One neutral ink and its tints, after Cursor's and x.ai's systems:
       every grey on the page is the ink at a set strength over a light,
       neutral (not warm) canvas, and cards sit one small step darker. The
       values are solid so they read the same on any surface:
       ink 62% is muted text (5:1), 48% faint meta, 18% and 10% the lines. */
    --mb-canvas: var(--canvas);
    --mb-raised: var(--surface-primary);
    --mb-paper: var(--surface-primary);
    --mb-brand-paper: var(--surface-primary);
    --mb-film-wash: var(--surface-secondary);
    --mb-sunken: var(--surface-secondary);
    --mb-stage: var(--surface-secondary);
    --mb-line: var(--border-standard);
    --mb-line-strong: var(--border-strong);
    --mb-ink: var(--text-primary);
    --mb-text: var(--text-primary);
    --mb-muted: var(--text-secondary);
    --mb-faint: var(--text-secondary);
    --mb-night: #161616;
    --mb-night-raised: #202020;
    --mb-night-text: #fbfbfb;
    --mb-night-muted: #a8a8a8;
    --mb-night-line: #303030;
    /* One self-hosted grotesk keeps the type and line breaks consistent
       across platforms. Chinese glyphs use the system fallback. */
    --mb-sans: 'Instrument Marketing', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;
    --mb-display: var(--mb-sans);
    --mb-frame-shadow: 0 16px 40px -24px rgba(20, 20, 19, 0.22);
    --mb-ease: cubic-bezier(0.23, 1, 0.32, 1);
    /* Older names, now pointing at the palette, so every rule takes it. */
    --site-ink: var(--mb-ink);
    --site-text: var(--mb-text);
    --site-body: var(--mb-text);
    --site-muted: var(--mb-muted);
    --site-faint: var(--mb-faint);
    --site-line: var(--mb-line);
    --site-blue: var(--mb-ink);
    --site-deep-blue: var(--mb-night);
    --site-panel-blue: var(--mb-sunken);
    --site-ease: cubic-bezier(0.25, 1, 0.5, 1);
    --site-spring: cubic-bezier(0.25, 1, 0.5, 1);
    --site-font: var(--mb-sans);
    /* The page rail: content bands are --site-rail wide including their
       --site-gutter padding, so content edges line up at every width.
       --site-space is a band's top and bottom padding. The desktop values
       are Cursor's: a 1300px column inside 70px gutters, and 67px of
       padding above and below each band. */
    --site-rail: 1340px;
    --site-gutter: 20px;
    --site-space: 48px;
    position: relative;
    min-height: 100svh;
    overflow-x: clip;
    color: var(--mb-text);
    background: var(--mb-canvas);
    font-family: var(--mb-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color-scheme: light;
}

.site-signup {
    display: flex;
    max-width: var(--site-rail);
    flex-direction: column;
    align-items: center;
    gap: 28px;
    margin: 0 auto;
    padding: var(--site-space) var(--site-gutter);
    text-align: center;
}

.site-signup h2 {
    max-width: 48rem;
    color: var(--mb-ink);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 1.1;
    text-wrap: balance;
}

/* The site's neutral palette has the same semantic roles in the account's dark
   preference. Keep the night bands and recorded media on their own palette. */
html.dark .site-page {
    --mb-frame-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.65);
    color-scheme: dark;
}

@media (min-width: 768px) {
    .site-page {
        --site-gutter: 20px;
        --site-space: 56px;
    }
}

@media (min-width: 1200px) {
    .site-page {
        --site-gutter: 20px;
        --site-space: 67px;
    }
}

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

/* Tailwind's preflight already resets links and buttons; this only removes
   the tap flash. Class-less links opt out of the app's global link style in
   their own rules below. */
.site-page :where(a, button) {
    -webkit-tap-highlight-color: transparent;
}

.site-page :where(h1, h2, h3, p, ul, ol) {
    margin: 0;
}

.site-page :where(ul, ol) {
    padding: 0;
    list-style: none;
}

.site-page :where(a, button):focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 3px;
}

/* Sections reached by a link stop below the floating navigation. Zero
   specificity, so a page can set its own offset for a particular target. */
.site-page {
    --site-anchor-offset: 72px;
}

.site-page--embedded {
    --site-anchor-offset: 24px;
}

:where(.site-page [id]) {
    scroll-margin-top: var(--site-anchor-offset);
}

/* In-page links glide to their section. Arriving from another page lands
   at once (SiteNavigationManager scrolls with behavior: instant). */
@media (prefers-reduced-motion: no-preference) {
    html:has(.site-page:not(.site-page--embedded)) {
        scroll-behavior: smooth;
    }
}

/* Skip link: the first stop for keyboard users, out of sight until focused. */
.site-skip-link {
    position: fixed;
    z-index: 70;
    top: 12px;
    left: 12px;
    border-radius: 999px;
    background: var(--accent-action);
    padding: 10px 18px;
    color: var(--accent-action-contrast);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform 0.2s var(--site-ease);
}

.site-skip-link:focus-visible {
    transform: translateY(0);
}

/* The content region takes focus after a page switch without a ring. */
#site-main:focus {
    outline: none;
}

.site-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.site-sky {
    display: block;
    width: 100%;
    height: 100%;
}

/* The bear logo (and its loading placeholder). Page rules are prefixed with
   .site-page so they outrank the logo's own stylesheet, which loads later. */
.site-page .site-bear {
    position: relative;
    display: block;
    flex: none;
    aspect-ratio: 733 / 346;
    height: auto;
    overflow: visible;
    fill: currentColor;
}

/* Product stage -----------------------------------------------------------
 * The flat panel the app's live screens sit on.
 */
.site-stage {
    border-radius: 4px;
    background: var(--mb-stage);
    padding: clamp(20px, 4vw, 56px);
}

/* Reveal -----------------------------------------------------------------
 * Nothing fades in on scroll: Cursor and x.ai leave headings, copy, and
 * cards at rest and keep motion inside the product recordings. The class
 * stays on blocks that used it, so the hook costs nothing.
 */
.site-reveal { opacity: 1; }

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

/* An inline text link, underlined. */
.site-text-link {
    color: var(--mb-ink);
    font-size: 16px;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--mb-line-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s ease;
}

.site-text-link:hover { text-decoration-color: currentColor; }

/* Icon links to MockingBear's accounts. */
.site-social {
    display: flex;
    align-items: center;
    gap: 4px;
}

.site-social__link {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 8px;
    color: var(--mb-muted);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.site-social__link svg { width: 17px; height: 17px; }
@media (hover: hover) {
    .site-social__link:hover { background: var(--mb-sunken); color: var(--mb-ink); }
}

.site-section-title {
    color: var(--mb-ink);
    font-family: var(--mb-display);
    font-size: clamp(2rem, 2.5vw, 2.25rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-wrap: balance;
}

:lang(zh) .site-section-title {
    font-family: var(--mb-sans);
    font-weight: 600;
    letter-spacing: 0;
}

.site-section-lede {
    color: var(--mb-muted);
    font-size: clamp(1rem, 1.2vw, 1.0625rem);
    font-weight: 400;
    line-height: 1.6;
    text-wrap: pretty;
}

/* An editorial section head: the label, then the title on the left and the
   lede on the right, meeting at the bottom. */
.site-head {
    display: grid;
    gap: 16px 64px;
    margin-bottom: clamp(40px, 5vw, 64px);
}

@media (min-width: 900px) {
    .site-head {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: end;
    }
}

.site-head .site-section-lede { max-width: 32rem; }

/* A dark headline, then a separate supporting line in muted ink. */
.site-head--inline {
    display: block;
    max-width: 46rem;
    margin-bottom: 22px;
}

.site-head--inline > .site-section-title {
    display: block;
    font-family: var(--mb-display);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.005em;
    line-height: 1.3;
}

.site-head--inline > .site-section-lede {
    /* Cursor's pair: the line under a title is the title's size, in the muted ink. */
    max-width: 42rem;
    margin-top: 0;
    color: var(--mb-muted);
    font-size: 22px;
    letter-spacing: -0.005em;
    line-height: 1.3;
}

/* On phones the pair drops to body size, as Cursor's does. */
@media (max-width: 899px) {
    .site-head--inline > .site-section-title { font-size: 19px; }
    .site-head--inline > .site-section-lede { font-size: 17px; line-height: 1.4; }
}

:lang(zh) .site-head--inline > :is(.site-section-title, .site-section-lede) {
    font-family: var(--mb-sans);
    letter-spacing: 0;
}

/* A centered head: a big title, then one line under it. */
.site-head--center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.site-head--center .site-section-lede {
    max-width: 36rem;
    text-wrap: balance;
}

/* Buttons ---------------------------------------------------------------
 * Primary actions use the shared Button material (buttonVariants), here at
 * the shared 32px height. The quiet button is the page's secondary action.
 */
.site-button {
    border-radius: 999px;
    padding-inline: 14px;
    font-size: 14px;
    font-weight: 400;
}

.site-button--quiet {
    display: inline-flex;
    height: var(--control-sm);
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 999px;
    background: var(--mb-stage);
    box-shadow: inset 0 0 0 1px var(--border-standard);
    padding: 0 14px;
    color: var(--mb-ink);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
}

/* Hovers change colour at once, as Cursor's do: no fade, lift, or glow. */
.site-button--quiet:hover {
    background: var(--surface-hover);
}

.site-button--quiet svg { width: 16px; height: 16px; }

/* Navigation ------------------------------------------------------------
 * A solid bar on the page's neutral canvas, as editorial sites draw theirs:
 * full width, the content on the page rail, no pill and no blur. A hairline
 * appears under it once the page scrolls.
 */
.site-nav {
    position: fixed;
    z-index: 50;
    top: 0;
    right: 0;
    left: 0;
    border-bottom: 1px solid transparent;
    background: var(--mb-canvas);
    padding-top: env(safe-area-inset-top, 0);
    transition: border-color 0.2s ease;
}

.site-nav[data-scrolled] {
    border-bottom-color: var(--mb-line);
}

.site-nav__bar {
    position: relative;
    max-width: var(--site-rail);
    margin: 0 auto;
    padding: 0 var(--site-gutter, 16px);
}

.site-nav__shell {
    position: relative;
    width: 100%;
}

/* The bar keeps its measuring hooks (SiteNavigation sets them); nothing collapses now. */
.site-nav__glass { display: none; }

.site-nav__content {
    position: relative;
    display: flex;
    height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.site-nav__brand {
    position: relative;
    display: inline-flex;
    height: 32px;
    align-items: center;
    gap: 10px;
    color: var(--mb-ink);
}

.site-page .site-nav__mark {
    width: 48px;
}

/* Medium, so the wordmark sits level with the bear's fine strokes and the page's regular type. */
.site-nav__wordmark {
    font-family: 'Open Runde', var(--font-sans), sans-serif;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1;
    white-space: nowrap;
}

.site-nav__links {
    position: absolute;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    pointer-events: none;
}

.site-nav__links > * { pointer-events: auto; }

.site-nav__link {
    position: relative;
    display: inline-flex;
    height: 32px;
    align-items: center;
    gap: 4px;
    border: 0;
    border-radius: 8px;
    background: none;
    padding: 0 10px;
    color: var(--mb-text);
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.site-nav__link:hover { color: var(--mb-ink); background: var(--mb-sunken); }

.site-nav__link[aria-current='page'],
.site-nav__link[data-current] { color: var(--mb-ink); }

.site-nav__link svg {
    width: 14px;
    height: 14px;
    color: var(--mb-faint);
    transition: transform 0.2s ease;
}

.site-nav__product-button[aria-expanded='true'] svg { transform: rotate(180deg); }

.site-nav__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.site-nav__sign-in { display: inline-flex; }

.site-nav__menu-button {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mb-ink);
    cursor: pointer;
}

.site-nav__menu-button svg { width: 20px; height: 20px; }

@media (max-width: 1023px) {
    .site-nav__links,
    .site-nav__sign-in { display: none; }
}

@media (max-width: 767px) {
    .site-nav__content { gap: var(--space-3); }
}

@media (min-width: 1024px) {
    .site-nav__menu-button { display: none; }
}

/* Touch screens get 44px targets around the 32px buttons. */
@media (pointer: coarse) {
    .site-nav__menu-button,
    .site-nav__cta { position: relative; }

    .site-nav__menu-button::after,
    .site-nav__cta::after {
        content: '';
        position: absolute;
        inset: -6px;
    }
}

/*
 * Product menu, after x.ai's: a white panel that opens from under its
 * button (scaling up from that corner as it fades in), the links on the
 * left with one highlight sliding between them, and beside them each
 * product's own page animation, cross-fading as the pointer moves.
 */
.site-nav__product { position: static; }

.site-nav-menu {
    position: absolute;
    z-index: 60;
    top: calc(100% + 10px);
    left: var(--site-nav-menu-x, 0px);
    width: min(600px, 100%);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--mb-ink) 7%, transparent);
    border-radius: 14px;
    background: var(--mb-raised);
    box-shadow: 0 20px 56px -16px rgba(20, 20, 19, 0.2), 0 4px 12px -6px rgba(20, 20, 19, 0.08);
    opacity: 0;
    transform: translate3d(0, -4px, 0) scale(0.97);
    transform-origin: 24px 0;
    visibility: hidden;
    transition:
        opacity 0.14s ease-in,
        transform 0.14s ease-in,
        visibility 0s linear 0.14s;
}

/* Keeps the hover path open across the gap between button and menu. */
.site-nav-menu::before {
    content: '';
    position: absolute;
    top: -12px;
    right: 0;
    left: 0;
    height: 12px;
}

.site-nav-menu[data-open] {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition:
        opacity 0.2s var(--mb-ease),
        transform 0.28s var(--mb-ease),
        visibility 0s;
}

.site-nav-menu__grid {
    display: grid;
    grid-template-columns: 196px minmax(0, 1fr);
    max-height: calc(100svh - 88px);
    overflow-y: auto;
    border-radius: inherit;
    overscroll-behavior: contain;
}

.site-nav-menu__links {
    position: relative;
    display: flex;
    min-height: 0;
    margin: 10px 6px;
}

.site-nav-menu__list {
    position: relative;
    display: grid;
    flex: 1;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The one highlight: it slides to the link under the pointer and fades when the pointer leaves. */
.site-nav-menu__highlight {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: var(--h, 0px);
    border-radius: 8px;
    background: color-mix(in srgb, var(--mb-ink) 4.5%, transparent);
    opacity: 0;
    transform: translate3d(0, var(--y, 0px), 0);
    transition:
        opacity 0.15s ease,
        transform 0.26s var(--mb-ease),
        height 0.26s var(--mb-ease);
    pointer-events: none;
}

.site-nav-menu__highlight[data-shown] { opacity: 1; }

.site-nav-menu__item {
    position: relative;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    border-radius: 8px;
    padding: 12px;
}

.site-nav-menu__item:focus-visible {
    outline: 2px solid var(--mb-ink);
    outline-offset: -2px;
}

.site-nav-mobile a[aria-current='page'] { background: var(--mb-sunken); }

.site-nav-menu__title {
    display: block;
    color: var(--mb-ink);
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
}

.site-nav-menu__body {
    display: block;
    margin-top: 2px;
    color: var(--mb-muted);
    font-size: 11.5px;
    line-height: 16px;
}

/* One preview canvas beside the evenly spaced product links. */
.site-nav-menu__preview {
    position: relative;
    min-width: 0;
    /* 4:3, as x.ai frames its previews. */
    aspect-ratio: 4 / 3;
    margin: 10px 10px 10px 2px;
    overflow: hidden;
    border-radius: 9px;
    background: var(--mb-sunken);
    isolation: isolate;
}

/* Mobile menu: a full-width sheet under the bar. */
.site-nav-mobile {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    border-bottom: 1px solid var(--mb-line);
    background: var(--mb-canvas);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-out, visibility 0s linear 0.2s;
}

.site-nav-mobile[data-open] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease-out, visibility 0s;
}

.site-nav-mobile nav {
    display: flex;
    flex-direction: column;
    padding: 8px var(--site-gutter, 16px) 16px;
}

.site-nav-mobile a {
    display: block;
    border-bottom: 1px solid var(--mb-line);
    padding: 14px 4px;
    color: var(--mb-ink);
    text-decoration: none;
    font-family: var(--mb-display);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
}

.site-nav-mobile a:last-child { border-bottom: 0; }

@media (min-width: 1024px) {
    .site-nav-mobile { display: none; }
}

/* Hero ------------------------------------------------------------------
 * A clear tutor headline surrounded by still images from the app.
 */

.site-hero {
    position: relative;
    max-width: var(--site-rail);
    margin: 0 auto;
    /* The headline sits 112px under the 52px bar, as Cursor's does. */
    padding: 164px var(--site-gutter) 0;
    background: var(--mb-canvas);
}

.site-hero__inner {
    position: relative;
}

/* Cursor's opening: a small, regular-weight headline on the left, its
   actions under it, and the product large below. */
.site-hero__copy {
    display: flex;
    max-width: 41rem;
    flex-direction: column;
    align-items: flex-start;
}

.site-hero__title {
    margin: 0;
    color: var(--mb-ink);
    font-family: var(--mb-display);
    font-size: clamp(1.5rem, 1.9vw, 1.625rem);
    font-weight: 400;
    letter-spacing: -0.0125em;
    line-height: 1.25;
    text-wrap: balance;
}

.site-hero__line { display: block; }



.site-hero__stage { margin-top: 56px; }

.site-page:lang(zh) .site-hero__title,
:lang(zh) .site-page .site-hero__title {
    font-family: var(--site-font);
    font-weight: 600;
    letter-spacing: 0;
}

/* Words of a title (BlurWords): the title fades in as a whole with its block. */
.site-words__word {
    display: inline;
}

.site-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 24px;
}

@keyframes site-fade-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

/* The Mac app: the quiet button beside Start free, with its status. */
.site-hero__mac svg {
    width: 16px;
    height: 16px;
}

.site-hero__mac-badge {
    margin-right: -8px;
    border-radius: 4px;
    background: var(--mb-raised);
    box-shadow: inset 0 0 0 1px var(--mb-line);
    padding: 2px 8px;
    color: var(--mb-muted);
    font-size: 12px;
    font-weight: 500;
}

/* The second way in, under Start free: the plan first, the account last (/signup/plan). */
.site-hero__plan-first {
    color: var(--mb-muted);
    font-size: 14px;
    font-weight: 400;
    text-decoration: underline;
    text-decoration-color: var(--mb-line-strong);
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s ease;
}
.site-hero__plan-first:hover { text-decoration-color: currentColor; }
.site-hero__plan-first:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }

/* A keyboard user can reach an action while its entrance is still running. */
.site-hero__actions:focus-within,
.site-hero__plan-first:focus-visible { animation: none; }

@media (max-width: 767px) {
    .site-hero { padding-top: 160px; }
    .site-hero__stage { margin-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .site-hero__actions,
    .site-hero__plan-first { animation: none; }
}

/* The live test, on a laptop, near the end of the home page. */
.site-device-section {
    display: flex;
    justify-content: center;
    padding: 0 var(--site-gutter) var(--site-space);
}

/* Hero device ------------------------------------------------------------
 * A space black 14-inch MacBook Pro seen from the front: a dark aluminum
 * rim, a thin black bezel with a slightly taller chin, a screen with rounded
 * top corners, and a wide, thin base with a thumb notch. The exam runs full
 * screen on it. When it scrolls into view the lid swings up from the base
 * (hinged at its bottom edge, seen from hinge height) and the screen wakes.
 * Phones get the same exam on a phone frame instead.
 */
.site-device {
    position: relative;
    z-index: 3;
    width: min(1180px, 96%);
    margin-top: 40px;
    container-type: inline-size;
}

/* MacBook Pro model (see MacBookPro.tsx for the geometry). The aluminum
 * surfaces carry a fine grain, like the bead-blasted anodized finish, and
 * every edge has the highlight or shadow it has in Apple's photos. */
.site-mbp {
    --site-mbp-motion: 2s cubic-bezier(0.32, 0, 0.2, 1);
    --site-mbp-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.4'/%3E%3C/svg%3E");
    position: relative;
    width: 100%;
}

.site-mbp__defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Contact shadows: a tight dark line where the feet meet the table and a
 * wide soft one under the whole base. They sit under the shut laptop and
 * move down with it as it opens. */
.site-mbp::before,
.site-mbp::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    transition: top var(--site-mbp-motion);
}

.site-mbp::before {
    top: 68.6%;
    right: 5%;
    left: 5%;
    height: 1.4%;
    background: radial-gradient(ellipse at center, rgba(2, 8, 20, 0.5) 0%, rgba(2, 8, 20, 0) 70%);
    filter: blur(2px);
}

.site-mbp::after {
    top: 66.8%;
    right: 1%;
    left: 1%;
    height: 6%;
    background: radial-gradient(ellipse at center, rgba(2, 8, 20, 0.22) 0%, rgba(2, 8, 20, 0) 70%);
    filter: blur(8px);
}

.site-mbp[data-open]::before {
    top: 95.8%;
}

.site-mbp[data-open]::after {
    top: 94%;
}

.site-mbp__stage {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    perspective: 4000px;
    perspective-origin: 620px var(--site-mbp-camera-to);
}

/* While shut, the laptop sits higher and tilts toward the viewer (MacBookPro.tsx,
   CLOSED_LIFT), so the closed laptop is centered in the frame. */
.site-mbp__world {
    position: absolute;
    inset: 0;
    transform: translateY(calc(var(--site-mbp-lift) * -1)) rotateX(-25deg);
    transform-origin: 50% var(--site-mbp-hinge);
    transform-style: preserve-3d;
    transition: transform var(--site-mbp-motion);
}

.site-mbp[data-open] .site-mbp__world {
    transform: translateY(0) rotateX(0deg);
}

/* Hinge cover: lies flat just behind the hinge line, so the seam between
 * the lid and the deck shows dark metal instead of the page while the lid
 * swings. */
.site-mbp__hinge {
    position: absolute;
    top: calc(var(--site-mbp-hinge) - 15px);
    left: 128px;
    width: 984px;
    height: 16px;
    border-radius: 4px 6px 0 0;
    background: linear-gradient(180deg, #09090a 0%, #1c1c1f 55%, #111113 100%);
    transform: rotateX(90deg);
    transform-origin: 50% 100%;
}

/* Keyboard deck: lies flat from the hinge toward the viewer. It sits in the
 * lid's shadow near the hinge and has a polished chamfer along the front. */
.site-mbp__deck {
    position: absolute;
    top: calc(var(--site-mbp-hinge) + 1px);
    left: 120px;
    width: 1000px;
    height: var(--site-mbp-deck);
    border-radius: 4px 6px 24px 24px;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 7%),
        var(--site-mbp-grain),
        linear-gradient(180deg, #1f1f22 0%, #29292c 60%, #2d2d31 100%);
    background-blend-mode: normal, soft-light, normal;
    box-shadow:
        inset 0 -2px 0 rgba(255, 255, 255, 0.16),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    transform: rotateX(90deg);
    transform-origin: 50% 0;
}

.site-mbp__deck-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.site-mbp__well {
    fill: #0b0b0d;
}

.site-mbp__key {
    fill: url(#site-mbp-key);
    stroke: rgba(255, 255, 255, 0.07);
    stroke-width: 1;
}

.site-mbp__key-shadow {
    fill: #000000;
    opacity: 0.6;
}

.site-mbp__legend {
    fill: rgba(236, 236, 240, 0.8);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
}

.site-mbp__touch-id {
    fill: none;
    stroke: rgba(255, 255, 255, 0.16);
    stroke-width: 1.2;
}

.site-mbp__grille circle {
    fill: #060607;
}

.site-mbp__trackpad {
    fill: url(#site-mbp-trackpad);
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 1.5;
}

/* Front edge of the base: the top stays joined to the keyboard deck while
 * the lower edge slopes back underneath it. The shared world perspective
 * foreshortens the face and narrows its bottom as the laptop tilts. */
.site-mbp__front {
    position: absolute;
    top: var(--site-mbp-hinge);
    left: 120px;
    width: 1000px;
    height: 36px;
    border-radius: 3px 3px 26px 26px / 3px 3px 22px 22px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.1) 1.2%, rgba(255, 255, 255, 0) 3.5%, rgba(255, 255, 255, 0) 96.5%, rgba(255, 255, 255, 0.1) 98.8%, rgba(255, 255, 255, 0.06) 100%),
        linear-gradient(180deg, #7b7a7e 0, #5d5c60 1px, rgba(58, 56, 60, 0) 3px),
        var(--site-mbp-grain),
        linear-gradient(180deg, #3a383c 0%, #333135 25%, #262428 50%, #100f11 76%, #161517 88%, #232125 96%, #0b0b0c 100%);
    background-blend-mode: normal, normal, soft-light, normal;
    transform: translateZ(var(--site-mbp-deck)) rotateX(-25deg);
    transform-origin: 50% 0;
}

/* Thumb notch: a scoop in the top edge that catches the light. */
.site-mbp__front::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    width: 176px;
    height: 13px;
    border-radius: 0 0 14px 14px / 0 0 11px 11px;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 9%, rgba(0, 0, 0, 0) 91%, rgba(0, 0, 0, 0.45) 100%),
        linear-gradient(180deg, #5b595d 0%, #535155 40%, #464448 85%, #2a292c 100%);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
    transform: translateX(-50%);
}

/* Rubber feet just showing under the base. */
.site-mbp__front::after {
    content: '';
    position: absolute;
    right: 5.5%;
    bottom: -5px;
    left: 5.5%;
    height: 6px;
    background:
        radial-gradient(50% 100% at 50% 0%, #1b1b1d 0%, #0a0a0b 72%, rgba(10, 10, 11, 0) 100%) left / 66px 100% no-repeat,
        radial-gradient(50% 100% at 50% 0%, #1b1b1d 0%, #0a0a0b 72%, rgba(10, 10, 11, 0) 100%) right / 66px 100% no-repeat;
}

/* Lid: hinged on its bottom edge, closed flat on the deck at first. */
.site-mbp__lid {
    position: absolute;
    top: 12px;
    left: 120px;
    width: 1000px;
    height: 683px;
    transform: translateY(-3px) rotateX(-90deg);
    transform-origin: 50% 100%;
    transform-style: preserve-3d;
    transition: transform var(--site-mbp-motion);
}

.site-mbp[data-open] .site-mbp__lid {
    transform: translateY(0) rotateX(0deg);
}

.site-mbp__lid-edge {
    position: absolute;
    inset: 0;
    border-radius: 34px 34px 7px 7px;
    background: linear-gradient(180deg, #353538 0%, #242426 100%);
}

.site-mbp__screen,
.site-mbp__lid-back {
    position: absolute;
    inset: 0;
    border-radius: 34px 34px 7px 7px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* A thin aluminum rim with a lit outer edge around the black glass. */
.site-mbp__screen {
    overflow: hidden;
    /* Give WebKit an explicit front plane to cull behind the closed lid. */
    transform: translateZ(1px);
    background: linear-gradient(180deg, #3b3b3e 0%, #262628 2%, #1e1e20 50%, #19191b 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.site-mbp__screen::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 31px 31px 4px 4px;
    background: #020203;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* The hinge end of the lid: a tall band a shade lighter than the glass. */
.site-mbp__screen::after {
    content: '';
    position: absolute;
    right: 3px;
    bottom: 3px;
    left: 3px;
    height: 26px;
    border-radius: 0 0 4px 4px;
    background:
        var(--site-mbp-grain),
        linear-gradient(180deg, #0c0c0d 0%, #0a0a0b 45%, #060607 100%);
    background-blend-mode: soft-light, normal;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.site-mbp__camera {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 34%, #3d4b66 0%, #151b27 45%, #050608 78%);
    box-shadow: 0 0 0 1.5px #0c0c0e;
    transform: translateX(-50%);
}

.site-mbp__display {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 964px;
    height: 626px;
    overflow: hidden;
    border-radius: 14px 14px 0 0;
    background: #000000;
}

/* Composited screen children must inherit the face's culling in WebKit. */
.site-mbp__screen :is(.site-mbp__camera, .site-mbp__display, .site-mbp__glare) {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* The screen starts dark and lights up as the lid finishes opening. The
 * content itself fades in over the black glass; a black cover on top would
 * leave a light hairline at the anti-aliased edges. */
.site-mbp__display > * {
    opacity: 0;
    transition: opacity 0.35s ease;
}

.site-mbp[data-open] .site-mbp__display > * {
    opacity: 1;
    transition: opacity 0.8s ease 1.45s;
}

/* The body answers clicks (closing and opening the lid); the screen never
   does, so the test inside stays usable. */
.site-mbp__world[data-toggle] {
    pointer-events: none;
}

.site-mbp__world[data-toggle] > * {
    pointer-events: auto;
}

.site-mbp__world[data-toggle] [data-mbp-body] {
    cursor: pointer;
}

button.site-mbp__front {
    display: block;
    margin: 0;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
}

button.site-mbp__front:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--site-blue) 65%, transparent);
    outline-offset: 4px;
}

/* A faint reflection on the glass. It shows on the bezel; the white exam
 * screen underneath stays clean. */
.site-mbp__glare {
    position: absolute;
    z-index: 6;
    inset: 3px;
    border-radius: 31px 31px 4px 4px;
    background: linear-gradient(116deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 28%, rgba(255, 255, 255, 0) 44%);
    pointer-events: none;
}

/* Outside of the lid, lit from the hinge end, with a polished bear. */
.site-mbp__lid-back {
    display: grid;
    place-items: center;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 65%),
        var(--site-mbp-grain),
        linear-gradient(0deg, #3e3e42 0%, #2b2b2e 45%, #1a1a1c 100%);
    background-blend-mode: normal, soft-light, normal;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 0 0 2px rgba(0, 0, 0, 0.3);
    transform: rotateY(180deg) translateZ(calc(var(--site-mbp-lid-thickness) - 1px));
}

/* Turned so the bear reads upright in the opening shot, where the closed
 * lid is seen from the front. */
.site-page .site-mbp__logo {
    width: 190px;
    color: #0b0b0c;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.08));
    transform: rotate(180deg);
}

.site-page .site-mbp__logo .bear-rest-layer { fill: url(#site-mbp-logo); }

@media (prefers-reduced-motion: reduce) {
    .site-device__hint,
    .site-mbp__stage,
    .site-mbp__world,
    .site-mbp__lid,
    .site-mbp__display > *,
    .site-mbp[data-open] .site-mbp__display > *,
    .site-mbp::before,
    .site-mbp::after {
        transition: none;
    }
}

/* Fixed-size virtual screen scaled to the device's width. */
.site-stage {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* A scaled screen (ScaledStage) shares the product frame's class name; it
   is the device's screen itself, so it takes none of the stage's fill,
   padding, or corners. */
.site-stage:has(> .site-stage__viewport) {
    border-radius: 0;
    background: none;
    padding: 0;
}

.site-stage__viewport {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    transform-origin: 0 0;
}

.site-device-screen {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    background: #ffffff;
}

.site-device-screen__app {
    position: relative;
    min-height: 0;
    flex: 1;
    overflow: hidden;
    background: #ffffff;
}

.site-device-screen__app > * {
    width: 100%;
    height: 100%;
}

/* The screen starts dark and lights up as the lid finishes opening. */
.site-device__wake {
    position: absolute;
    z-index: 5;
    inset: 0;
    background: #000000;
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.9s ease 1.05s;
}

.site-device[data-open] .site-device__wake {
    opacity: 0;
}

/* The exam takes input only once the device is fully open. */
.site-device:not([data-settled]) .site-stage {
    pointer-events: none;
}

.site-device__hint {
    margin-top: 34px;
    color: var(--mb-muted);
    font-size: 17px;
    line-height: 1.45;
    text-align: center;
    text-wrap: balance;
    opacity: 0;
    transition:
        opacity 0.6s ease,
        transform 2s cubic-bezier(0.42, 0, 0.1, 1);
}

.site-device:is([data-settled], [data-closed]) .site-device__hint {
    opacity: 1;
}

/* The shut laptop sits mid-stage (MacBookPro.tsx, CLOSED_LIFT), leaving
   about 240 of the stage's 1240-wide units empty under it; the hint rises
   with it to sit just under the laptop. Moving it, rather than resizing
   the stage, keeps the page below still. */
.site-device[data-closed] .site-device__hint {
    transform: translateY(calc(-240 / 1240 * 100cqi + 12px));
}

/* Phone frame for small screens. */
.site-phone {
    width: min(360px, 100%);
    margin: 0 auto;
    border-radius: 58px;
    background: linear-gradient(145deg, #46474d 0%, #1b1c20 40%, #0b0c0e 100%);
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.18),
        0 0 0 1px rgba(15, 23, 42, 0.2),
        0 40px 70px -34px rgba(2, 8, 20, 0.55);
    padding: 11px;
    opacity: 0;
    transform: translateY(36px) scale(0.97);
    transition:
        opacity 0.8s ease,
        transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.site-device[data-open] .site-phone {
    opacity: 1;
    transform: none;
}

.site-phone__display {
    position: relative;
    overflow: hidden;
    border-radius: 47px;
    background: #000000;
}

.site-phone__status {
    position: relative;
    flex: none;
    background: #ffffff;
}

.site-phone__island {
    position: absolute;
    top: 11px;
    left: 50%;
    width: 126px;
    height: 37px;
    border-radius: 4px;
    background: #000000;
    transform: translateX(-50%);
}

@media (max-width: 640px) {
    .site-device {
        width: 100%;
        margin-top: 40px;
    }
}

/* Outline of the test screen shown while the live demo loads. */
.site-demo-skeleton {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    background: #ffffff;
}

.site-demo-skeleton span {
    display: block;
    border-radius: 4px;
    background: #eef0f4;
}

.site-demo-skeleton__header {
    display: flex;
    height: 64px;
    flex: none;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px dashed #d4d7de;
    padding: 0 28px;
}

.site-demo-skeleton__header span {
    width: 220px;
    height: 16px;
}

.site-demo-skeleton__header span:nth-child(2) {
    width: 64px;
    height: 22px;
}

.site-demo-skeleton__header span:nth-child(3) {
    width: 140px;
}

.site-demo-skeleton__body {
    display: flex;
    min-height: 0;
    flex: 1;
}

.site-demo-skeleton__pane {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 14px;
    padding: 36px 40px;
}

.site-demo-skeleton__pane + .site-demo-skeleton__pane {
    border-left: 4px solid #eef0f4;
}

.site-demo-skeleton__pane span {
    height: 14px;
}

.site-demo-skeleton__pane span:nth-child(2n) {
    width: 82%;
}

.site-demo-skeleton__pane .site-demo-skeleton__choice {
    width: 100%;
    height: 48px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1.5px #e3e6ec;
}

.site-demo-skeleton__footer {
    display: flex;
    height: 64px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #e3e6ec;
}

.site-demo-skeleton span.site-demo-skeleton__status {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    color: var(--bb-dim, #666666);
    font-size: 15px;
}


/* Holds roughly a screen of space while the home sections load, so the
   footer does not flash up under the hero. */
.site-sections-pending {
    min-height: 100vh;
}
.site-home-sections:not([data-loaded]) { min-height: 100vh; }
.site-home-sections > .site-blobby { padding-top: calc(var(--site-space) * 2); }

/* Holds the footer's space for the moment before it loads. */
.site-footer-pending {
    min-height: 480px;
}

/* Subpage building blocks ------------------------------------------------ */

/* Opening block of a subpage: centered on the rail, under the navigation. */
.site-page-hero {
    display: flex;
    max-width: var(--site-rail);
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    padding: 108px var(--site-gutter) 40px;
    text-align: center;
}

@media (min-width: 768px) {
    .site-page-hero {
        padding: 164px var(--site-gutter) 56px;
    }
}

/* Marketing content shown inside the signed-in app's own frame (help,
 * policies, release notes, and about on school subdomains). The app draws
 * the navigation, so there is no bar to clear. The sheet follows the app's
 * theme using the site's semantic palette. */
.site-page--embedded {
    --site-sticky-top: 24px;
    min-height: 0;
    border-radius: 4px;
    background: var(--mb-canvas);
    padding-bottom: 24px;
}

.site-page--embedded .site-page-hero {
    padding-top: 40px;
}

/* The page's first section starts close under its title, as heyclicky's do. */
.site-page-hero + .site-section {
    padding-top: clamp(16px, 2.5vw, 32px);
}

/* Sign-up prompts render nothing inside the app; drop their empty row. */
.site-page-hero__actions:empty {
    display: none;
}

/* One line, as heyclicky's and Cursor's page titles: a short title at a size that fits the rail. */
.site-page-hero__title {
    color: var(--mb-ink);
    font-family: var(--mb-display);
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.1;
    text-wrap: balance;
}

.site-page-hero__lede {
    max-width: 36rem;
    margin-top: 16px;
    color: var(--mb-muted);
    font-size: 17px;
    line-height: 1.6;
    text-wrap: balance;
}

:lang(zh) .site-page-hero__title {
    font-family: var(--mb-sans);
    font-weight: 600;
    letter-spacing: 0;
}

.site-page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
}

/* A content band on the page rail with the page's vertical rhythm. */
.site-section {
    max-width: var(--site-rail);
    margin: 0 auto;
    padding: var(--site-space) var(--site-gutter);
}

/* Long-form reading: policies, notes, and help articles. */
.site-prose {
    max-width: 44rem;
    margin: 0 auto;
    padding: 0 var(--site-gutter) 96px;
    color: var(--mb-text);
    font-size: 1.0625rem;
    line-height: 1.7;
}

.site-prose > * + * {
    margin-top: 1em;
}

.site-prose h2 {
    margin-top: 2.2em;
    color: var(--mb-ink);
    font-family: var(--mb-display);
    font-size: 1.625rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.site-prose h3 {
    margin-top: 1.8em;
    color: var(--mb-ink);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
}

:lang(zh) .site-prose h2 { font-family: var(--mb-sans); font-weight: 600; }

.site-prose :where(ul, ol) {
    padding-left: 1.3em;
}

.site-prose ul {
    list-style: disc;
}

.site-prose ol {
    list-style: decimal;
}

.site-prose li + li {
    margin-top: 0.4em;
}

.site-prose a {
    color: var(--mb-ink);
    text-decoration: underline;
    text-decoration-color: var(--mb-line-strong);
    text-underline-offset: 3px;
}

.site-prose a:hover { text-decoration-color: currentColor; }

.site-prose strong {
    font-weight: 600;
}

.site-prose__meta {
    color: var(--mb-faint);
    font-size: 0.9375rem;
}

/* Pricing ------------------------------------------------------------------
 * The band and its cards live in home/pricing-section.css.
 */
.site-pricing__note {
    max-width: 48rem;
    margin: 28px auto 0;
    color: var(--mb-muted);
    font-size: 15px;
    text-align: center;
    line-height: 1.6;
    text-wrap: pretty;
}

.site-pricing__note a {
    /* Inline padding widens the tap target without moving the line. */
    padding-block: 11px;
    color: var(--mb-ink);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--mb-line-strong);
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s ease;
}

.site-pricing__note a:hover {
    text-decoration-color: currentColor;
}

/* FAQ --------------------------------------------------------------------
 * Questions separated by hairlines, a plus that turns to a minus, no card.
 */
.site-faq {
    max-width: var(--site-rail);
    margin: 0 auto;
    padding: var(--site-space) var(--site-gutter);
}

.site-faq__title {
    margin-bottom: 40px;
}

/* On the home page, as Cursor's pricing FAQ: the title on the left (it
   stays in view while the list scrolls past), the questions on hairlines to
   its right. */
@media (min-width: 900px) {
    .site-faq--home {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
        gap: 10px;
    }

    .site-faq--home .site-faq__title {
        position: sticky;
        top: calc(var(--site-anchor-offset) + 8px);
    }
}

.site-faq--home .site-faq__title { margin-bottom: 22px; }

.site-faq--home .site-faq__card { border-bottom: 1px solid var(--mb-line); }
.site-faq--home .site-faq__item { border-top: 1px solid var(--mb-line); }

.site-faq--home .site-faq__question {
    padding: 16px 0;
    font-family: var(--mb-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.site-faq--home .site-faq__answer p {
    padding: 0 40px 18px 0;
    font-size: 16px;
    line-height: 1.5;
}

.site-faq__card {
    border-bottom: 1px solid var(--mb-line-strong);
}

.site-faq__item {
    border-top: 1px solid var(--mb-line-strong);
}

.site-faq__item h3 {
    font: inherit;
}

.site-faq__question {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border: 0;
    background: transparent;
    padding: 28px 0;
    color: var(--mb-ink);
    font-family: var(--mb-display);
    font-size: 1.1875rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    text-wrap: pretty;
    cursor: pointer;
}

:lang(zh) .site-faq__question {
    font-family: var(--mb-sans);
    font-weight: 500;
}

.site-faq__icon {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--mb-ink);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.5;
}

/* The upright stroke folds away, leaving a minus. */
.site-faq__icon-upright {
    transform-origin: 50% 50%;
    transition: transform 0.25s var(--mb-ease);
}

.site-faq__item[data-open] .site-faq__icon-upright {
    transform: rotate(90deg);
}

.site-faq__answer {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 0.3s var(--mb-ease), visibility 0s linear 0.3s;
}

.site-faq__item[data-open] .site-faq__answer {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 0.3s var(--mb-ease), visibility 0s;
}

.site-faq__answer-inner {
    min-height: 0;
    overflow: hidden;
}

.site-faq__answer p {
    max-width: 44rem;
    padding: 0 40px 28px 0;
    color: var(--mb-muted);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.6;
    text-wrap: pretty;
}

/* Contact card ------------------------------------------------------------
 * A flat sunken band on the rail: the question on the left, quiet buttons
 * on the right.
 */
.site-contact {
    max-width: var(--site-rail);
    margin: 0 auto;
    padding: 0 var(--site-gutter) var(--site-space);
}

.site-contact__card {
    position: relative;
    border-radius: 4px;
    background: var(--mb-sunken);
    padding: 40px 28px;
}

@media (min-width: 768px) {
    .site-contact__card {
        padding: 48px 56px;
    }
}

.site-contact__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

@media (min-width: 900px) {
    .site-contact__content {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 32px;
    }
}

.site-contact__title {
    color: var(--mb-ink);
    font-family: var(--mb-display);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-wrap: balance;
}

:lang(zh) .site-contact__title {
    font-family: var(--mb-sans);
    font-weight: 600;
}

.site-contact__links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Subpages' contact links, drawn as the page's quiet button. */
.site-contact__pill {
    display: inline-flex;
    height: var(--control-lg, 40px);
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--mb-sunken);
    box-shadow: inset 0 0 0 1px var(--mb-line-strong);
    padding: 0 18px;
    color: var(--mb-ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.site-contact__pill:hover {
    background: var(--mb-stage);
    box-shadow: inset 0 0 0 1px var(--mb-line-strong);
}

.site-contact__pill svg {
    width: 16px;
    height: 16px;
}

/* Footer ------------------------------------------------------------------
 * A neutral page band across the page; its columns, wordmark, and bottom row sit
 * on the page rail so they line up with the content above.
 */
.site-footer {
    --footer-inline: max(var(--site-gutter), calc((100% - var(--site-rail)) / 2 + var(--site-gutter)));
    /* A footer on the page canvas, so muted labels retain AA contrast. The
       footer's rules use the night roles, so they take the light palette here. */
    --mb-night: var(--mb-canvas);
    --mb-night-raised: var(--mb-raised);
    --mb-night-text: var(--mb-ink);
    --mb-night-muted: var(--mb-muted);
    --mb-night-line: var(--mb-line-strong);
    background: var(--mb-night);
    padding: 64px var(--footer-inline) 32px;
    color: var(--mb-night-muted);
    font-family: var(--mb-sans);
}

.site-footer__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
}

@media (min-width: 1024px) {
    .site-footer__columns {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.site-footer__column {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.site-footer__column h2 {
    color: var(--mb-night-muted);
    font-size: 14px;
    font-weight: 400;
}

.site-footer__column ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.site-footer__column a,
.site-footer__column .site-footer__action {
    color: var(--mb-night-text);
    font-size: 14px;
    line-height: 1.5;
}

.site-footer__column a {
    text-decoration: none;
    transition: color 0.15s ease;
}

/* Phones: links keep a full touch target. */
@media (max-width: 767px) {
    .site-footer__column { gap: 4px; }
    .site-footer__column ul { gap: 0; }

    .site-footer__column a {
        display: inline-block;
        min-width: 44px;
        min-height: 44px;
        padding-block: 11px;
    }
}

@media (hover: hover) {
    .site-footer__column a:hover,
    .site-footer__column .site-footer__action:hover {
        color: var(--mb-night-muted);
    }
}

.site-footer__bottom {
    margin-top: 56px;
}

.site-footer__signoff {
    margin: 0 0 var(--space-4);
    color: var(--mb-night-text);
}

.site-footer__signoff svg {
    display: block;
    width: 409.9px;
    height: auto;
    max-width: 100%;
}

.site-footer__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    border-top: 1px solid var(--mb-line);
    padding-block: var(--space-4);
}

.site-footer__copyright {
    min-width: 0;
    color: var(--mb-night-muted);
    font-size: 12px;
    line-height: 16px;
}

.site-footer__trademark {
    color: var(--mb-night-muted);
    font-size: 12px;
    line-height: 16px;
}

.site-footer__actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--space-2);
}

.site-footer__icon-link {
    position: relative;
    display: inline-flex;
    width: 20px;
    height: 24px;
    align-items: center;
    justify-content: center;
    flex: none;
    color: var(--mb-night-muted);
    transition: color 0.15s ease;
}

@media (hover: hover) {
    .site-footer__icon-link:hover { color: var(--mb-night-text); }
}
.site-footer__icon-link svg { width: 16px; height: 16px; }
.site-footer__social { gap: var(--space-2); }
.site-footer__social li { display: flex; }

.site-footer__social .site-social__link {
    width: 20px;
    height: 24px;
    border-radius: 0;
}

@media (hover: hover) {
    .site-footer__social .site-social__link:hover { background: none; }
}
.site-footer__social .site-social__link svg { width: 16px; height: 16px; }

.site-footer__theme {
    display: flex;
    height: 24px;
    align-items: center;
    gap: 0;
}

.site-footer__theme button {
    position: relative;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: var(--radius-full);
    color: var(--mb-night-muted);
}

@media (hover: hover) {
    .site-footer__theme button:hover {
        background: transparent;
        color: var(--mb-night-text);
    }
}

.site-footer__theme button[aria-pressed='true'] { color: var(--mb-night-text); }

.site-footer__theme-chip {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--mb-night-raised);
    border: 1px solid var(--mb-night-text);
    pointer-events: none;
}

.site-footer__theme button svg { position: relative; }

.site-footer__language {
    display: inline-flex;
    height: 24px;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--mb-line);
    border-radius: var(--radius-full);
    background: transparent;
    padding: 0 6px;
    color: var(--mb-night-muted);
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
    cursor: pointer;
}

@media (hover: hover) {
    .site-footer__language:hover { color: var(--mb-night-text); }
}
.site-footer__language svg { width: 12px; height: 12px; }

.site-footer-language-panel {
    width: 248px;
    padding: var(--space-3);
    color: var(--text-primary);
    font-family: var(--font-sans);
}

/* An opaque footer menu; the shared glass popover keeps its own material. */
html.dark .site-footer-language-panel {
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
}

.site-footer-language-panel--sheet {
    width: auto;
    padding: var(--space-6) var(--space-3) max(var(--space-3), env(safe-area-inset-bottom));
}

.site-footer-language-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.site-footer-language-panel__header h2 {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
}

.site-footer-language-panel__close {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    cursor: pointer;
}

@media (hover: hover) {
    .site-footer-language-panel__close:hover,
    .site-footer-language-panel__option:hover { background: var(--surface-hover); }
}

.site-footer-language-panel__close svg,
.site-footer-language-panel__option svg { width: 16px; height: 16px; }

.site-footer-language-panel__option {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    border-radius: var(--radius-md);
    padding: 6px var(--space-2);
    font-size: 12px;
    line-height: 16px;
    text-align: left;
    cursor: pointer;
}

.site-footer-language-panel__english {
    display: block;
    color: var(--text-secondary);
    font-size: 12px;
}

.site-footer__column a:focus-visible,
.site-footer__action:focus-visible,
.site-footer__theme button:focus-visible,
.site-footer__language:focus-visible,
.site-footer__icon-link:focus-visible,
.site-footer-language-panel button:focus-visible {
    outline: 2px solid var(--ring-focus);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .site-footer__bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-footer__actions {
        max-width: 100%;
        flex-wrap: wrap;
    }

    .site-footer__icon-link,
    .site-footer__social .site-social__link,
    .site-footer__theme button,
    .site-footer-language-panel__close {
        width: 44px;
        height: 44px;
    }

    .site-footer__theme,
    .site-footer__language {
        min-width: 44px;
        height: 44px;
    }

    .site-footer__theme-chip { inset: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .site-nav__shell,
    .site-nav-menu,
    .site-nav-mobile,
    .site-faq__answer,
    .site-faq__icon-upright {
        transition-duration: 1ms !important;
    }

    .site-words__word {
        opacity: 1;
        filter: none;
        transform: none;
        transition: none;
    }

}

/* On the home page the questions follow the plans' own closing note. */
.site-pricing + .site-faq--home {
    padding-top: clamp(24px, 4vw, 48px);
}

/* Cursor's type has one weight: headings are regular, and hierarchy comes
   from size, tone, and space. Chinese keeps its heavier weights above. */
.site-page :is(h1, h2, h3):not(:lang(zh)) {
    font-weight: 400;
}

/* Text within quiet fills uses the AA-safe muted role in both themes. */
.site-page :is(.site-prc__card, .site-prc__schools, .site-follow__card, .site-legal-summary, .site-legal-contents, .site-press-about, .site-pub-featured, .site-page-contact__band, .site-pricing-table [data-featured], .site-about-values__grid > li, .site-tutor) {
    --mb-muted: var(--text-secondary);
    --mb-faint: var(--text-secondary);
}

/* The embedded Bluebook demo retains its existing actions and focus. */
.site-page [data-theme="bluebook"] {
    --accent-action: #161616;
    --accent-action-hover: #2E2E2E;
    --accent-action-contrast: #FBFBFB;
    --focus-color: rgba(22, 22, 22, 0.7);
}
html.dark .site-page [data-theme="bluebook"] {
    --accent-action: #F2F2F2;
    --accent-action-hover: color-mix(in srgb, #F2F2F2 88%, #1C1C1C);
    --accent-action-contrast: #1C1C1C;
    --focus-color: rgba(242, 242, 242, 0.7);
}

/* A quiet reading column and image-first cards, using the shared site palette. */

.journal-layout {
    max-width: var(--site-rail);
    margin: 0 auto;
    padding: 132px var(--site-gutter) 64px;
}
.journal-article { max-width: 42.5rem; margin: 0 auto; }
.journal-back {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
    color: var(--mb-muted);
    font-size: 13px;
    text-decoration: none;
}
.journal-back:hover { color: var(--mb-ink); }
.journal-category,
.journal-byline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    color: var(--mb-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}
.journal-header h1 {
    margin: 14px 0 18px;
    color: var(--mb-ink);
    font-size: clamp(2rem, 3.2vw, 2.75rem);
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: -0.04em;
    text-wrap: balance;
}
.journal-cover {
    width: min(calc(100vw - 2 * var(--site-gutter)), 60rem);
    margin: 36px 0 40px 50%;
    translate: -50% 0;
}
.journal-cover img { display: block; width: 100%; height: auto; }
.journal-film video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-md); background: var(--mb-sunken); }
.journal-cover figcaption,
.journal-table figcaption,
.journal-price-chart figcaption,
.journal-timeline figcaption {
    margin-top: 12px;
    color: var(--mb-muted);
    font-size: 12px;
    line-height: 1.65;
}
.journal-prose {
    color: var(--mb-text);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.8;
    overflow-wrap: break-word;
}
.journal-prose p + p { margin-top: 20px; }
.journal-prose .journal-disclosure {
    margin-top: 24px;
    color: var(--mb-muted);
    font-size: 13px;
    line-height: 1.65;
}
.journal-prose > section { margin-top: 44px; }
.journal-prose h2 {
    margin-bottom: 16px;
    color: var(--mb-ink);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.025em;
}
.journal-prose a,
.journal-sources a,
.journal-index-back a,
.journal-library__more a {
    color: var(--mb-ink);
    text-decoration: underline;
    text-decoration-color: var(--mb-line-strong);
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}
.journal-prose a:hover,
.journal-sources a:hover,
.journal-index-back a:hover,
.journal-library__more a:hover { text-decoration-color: currentColor; }
.journal-section-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; font-size: 13px; }

.journal-table,
.journal-price-chart,
.journal-timeline {
    margin: 28px 0 8px;
    border: 1px solid var(--mb-line);
    border-radius: var(--radius-md);
    padding: 24px;
    background: var(--mb-sunken);
}
.journal-table table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.6; }
.journal-table caption { padding-bottom: 16px; color: var(--mb-ink); font-size: 14px; font-weight: 500; text-align: left; }
.journal-table th,
.journal-table td { border-bottom: 1px solid var(--mb-line); padding: 14px 12px; text-align: left; vertical-align: top; }
.journal-table th { color: var(--mb-ink); font-weight: 500; }
.journal-table thead th,
.journal-table thead td { border-color: var(--mb-line-strong); padding-top: 0; }
.journal-table tbody th { width: 22%; padding-left: 0; }
.journal-table td:last-child,
.journal-table th:last-child { padding-right: 0; }
.journal-table__mobile-label { display: none; }

.journal-price-chart h3,
.journal-timeline h3 { color: var(--mb-ink); font-size: 14px; font-weight: 500; line-height: 1.5; }
.journal-price-chart__axis { display: flex; justify-content: space-between; margin: 24px 58px 10px 0; color: var(--mb-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.journal-price-chart dl { margin: 0; }
.journal-price-chart__row + .journal-price-chart__row { margin-top: 22px; }
.journal-price-chart dt { margin-bottom: 4px; color: var(--mb-ink); font-size: 13px; }
.journal-price-chart dd { display: grid; grid-template-columns: minmax(0, 1fr) 48px; column-gap: 10px; align-items: center; margin: 0; }
.journal-price-chart__track { height: 4px; background: var(--mb-line); }
.journal-price-chart__track > span { display: block; width: var(--bar-width); height: 100%; background: var(--mb-ink); }
.journal-price-chart__value { color: var(--mb-ink); font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.journal-price-chart__note { grid-column: 1 / -1; margin-top: 4px; color: var(--mb-muted); font-size: 12px; }
.journal-price-chart figcaption,
.journal-timeline figcaption { margin-top: 24px; }

.journal-timeline ol { margin-top: 24px; }
.journal-timeline li { position: relative; display: grid; grid-template-columns: 44px 12px minmax(0, 1fr); gap: 16px; padding-bottom: 28px; }
.journal-timeline li:last-child { padding-bottom: 0; }
.journal-timeline__time { padding-top: 1px; color: var(--mb-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.journal-timeline__point { position: relative; z-index: 0; width: 7px; height: 7px; margin-top: 8px; border: 1px solid var(--mb-ink); border-radius: 50%; background: var(--mb-sunken); }
.journal-timeline li:not(:last-child)::before { position: absolute; top: 15px; bottom: -8px; left: 63px; width: 1px; background: var(--mb-line-strong); content: ''; }
.journal-timeline li p { font-size: 13px; line-height: 1.6; }
.journal-timeline li .journal-timeline__title { margin-bottom: 4px; color: var(--mb-ink); font-weight: 500; }
.journal-timeline li p + p { margin-top: 0; }

.journal-sources { margin-top: 48px; border-top: 1px solid var(--mb-line); padding-top: 24px; }
.journal-sources h2 { color: var(--mb-ink); font-size: 15px; font-weight: 500; line-height: 1.5; }
.journal-source-date,
.journal-source-note { margin-top: 12px; color: var(--mb-muted); font-size: 12px; line-height: 1.65; }
.journal-source-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; font-size: 13px; line-height: 1.65; }

.journal-library { max-width: var(--site-rail); margin: 0 auto; padding: 0 var(--site-gutter) 80px; }
.journal-library__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; gap: 16px; }
.journal-library__list { display: grid; gap: 16px; }
.journal-card { display: block; min-width: 0; overflow: hidden; border: 1px solid var(--mb-line); border-radius: var(--radius-md); background: var(--mb-raised); color: var(--mb-text); text-decoration: none; }
.journal-card__image { overflow: hidden; aspect-ratio: 2 / 1; background: var(--mb-sunken); }
.journal-card__image > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.journal-card__copy { padding: 16px; }
.journal-card__meta,
.journal-card__byline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; color: var(--mb-muted); font-size: 14px; line-height: 1.5; }
.journal-card h3 { margin-top: 8px; color: var(--mb-ink); font-size: 20px; font-weight: 400; letter-spacing: -0.025em; line-height: 1.35; }
.journal-card__summary { margin-top: 8px; color: var(--mb-muted); font-size: 16px; line-height: 1.55; }
.journal-card__byline { margin-top: 20px; gap: 6px 8px; }
.journal-card--featured .journal-card__image { aspect-ratio: 1.9 / 1; }
.journal-card--featured h3 { font-size: 28px; line-height: 1.25; }
.journal-author-avatar { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--mb-line); border-radius: 50%; background: var(--mb-brand-paper); }
.journal-author-avatar > img { display: block; width: 18px; height: auto; }
.journal-card:is(:hover, :focus-visible) { border-color: var(--mb-line-strong); }
.journal-card:focus-visible { outline: 2px solid var(--mb-ink); outline-offset: 3px; }
.journal-library__archive { margin-top: 64px; }
.journal-library__archive > h3 { margin-bottom: 20px; color: var(--mb-ink); font-size: 20px; font-weight: 400; letter-spacing: -0.025em; line-height: 1.4; }
.journal-archive { margin: 0; padding: 0; list-style: none; }
.journal-archive__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, 1fr) auto; align-items: baseline; column-gap: 24px; border-top: 1px solid var(--mb-line); padding: 20px 0; color: var(--mb-ink); text-decoration: none; }
.journal-archive > li:last-child { border-bottom: 1px solid var(--mb-line); }
.journal-archive__meta { display: flex; flex-wrap: wrap; gap: 2px 8px; }
.journal-archive__meta,
.journal-archive__author,
.journal-archive__reading { color: var(--mb-muted); font-size: 14px; line-height: 1.6; }
.journal-archive__title { font-size: 16px; font-weight: 400; line-height: 1.5; }
.journal-archive__reading { text-align: right; white-space: nowrap; }
.journal-archive__row:hover .journal-archive__title { text-decoration: underline; text-decoration-color: var(--mb-line-strong); text-underline-offset: 4px; }
.journal-archive__row:focus-visible { outline: 2px solid var(--mb-ink); outline-offset: 4px; border-radius: var(--radius-xs); }
.journal-library__more { margin-top: 40px; font-size: 13px; }
.journal-index-back { max-width: var(--site-rail); margin: 0 auto; padding: 0 var(--site-gutter) 80px; font-size: 13px; }

.journal-changelog { max-width: var(--site-rail); margin: 0 auto; padding: 0 var(--site-gutter) var(--site-space); }
.journal-changelog > h2 { margin-bottom: 24px; color: var(--mb-ink); font-size: 24px; font-weight: 400; letter-spacing: -0.025em; line-height: 1.3; }
.journal-changelog__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.journal-changelog__card { display: block; height: 100%; min-height: 128px; border: 1px solid var(--mb-line); border-radius: var(--radius-md); padding: 16px; background: var(--mb-raised); text-decoration: none; }
.journal-changelog__card time { color: var(--mb-muted); font-size: 14px; line-height: 1.5; }
.journal-changelog__card h3 { margin-top: 10px; color: var(--mb-ink); font-size: 17px; font-weight: 400; line-height: 1.45; }
.journal-changelog__card:is(:hover, :focus-visible) { border-color: var(--mb-line-strong); }
.journal-changelog__card:focus-visible { outline: 2px solid var(--mb-ink); outline-offset: 3px; }
.journal-changelog__more { display: inline-flex; min-height: 32px; align-items: center; gap: 8px; margin-top: 16px; color: var(--mb-ink); font-size: 14px; text-decoration: none; }
.journal-changelog__more:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1023px) {
    .journal-changelog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .journal-archive__row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; column-gap: 20px; }
    .journal-archive__author { display: none; }
}
@media (max-width: 479px) {
    .journal-changelog__grid { grid-template-columns: 1fr; }
}

.journal-related { max-width: calc(42.5rem + 2 * var(--site-gutter)); margin: 0 auto; padding: 0 var(--site-gutter) 48px; }
.journal-related > h2 { margin-bottom: 12px; color: var(--mb-ink); font-size: 15px; font-weight: 500; }
.journal-related a { display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--mb-line); padding: 16px 0; color: var(--mb-ink); font-size: 14px; line-height: 1.5; text-decoration: none; }
.journal-related a:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 767px) {
    .journal-layout { padding-top: 100px; padding-bottom: 48px; }
    .journal-header h1 { font-size: 32px; }
    .journal-back { margin-bottom: 24px; }
    .journal-cover { margin-top: 28px; margin-bottom: 32px; }
    .journal-prose { font-size: 16px; line-height: 1.8; }
    .journal-prose h2 { font-size: 20px; }
    .journal-prose > section { margin-top: 36px; }
    .journal-table,
    .journal-price-chart,
    .journal-timeline { padding: 16px; }
    .journal-table table,
    .journal-table tbody { display: block; }
    .journal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .journal-table caption { display: block; }
    .journal-table tbody tr { display: grid; border-top: 1px solid var(--mb-line-strong); padding: 16px 0; }
    .journal-table tbody th { width: auto; border: 0; padding: 0 0 10px; font-size: 14px; }
    .journal-table tbody td { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; border: 0; padding: 7px 0; }
    .journal-table__mobile-label { display: block; color: var(--mb-muted); }
    .journal-timeline li { gap: 12px; }
    .journal-timeline li:not(:last-child)::before { left: 59px; }
    .journal-library { padding-bottom: 56px; }
    .journal-library__grid { display: block; }
    .journal-library__list { gap: 16px; margin-top: 16px; }
    .journal-card--featured h3 { font-size: 24px; }
    .journal-library__archive { margin-top: 40px; }
    .journal-archive__row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 20px 0; }
    .journal-archive__meta { grid-column: 1; font-size: 13px; }
    .journal-archive__reading { grid-column: 2; grid-row: 1; font-size: 13px; }
    .journal-archive__title { grid-column: 1 / -1; }
    .journal-changelog__card { min-height: 112px; }
}

@media (prefers-reduced-motion: reduce) {
    .journal-card,
    .journal-changelog__card { transition: none; }
}

/* The SAT score calculator (/sat-score-calculator): the reading column above,
   with one live panel. The learner app's ScoreScale is drawn here in the site
   palette, so its tokens are mapped onto this page. */
.sat-calc {
    --sat-track: var(--mb-line);
    --sat-chart: var(--mb-ink);
    --sat-ink: var(--mb-ink);
    --sat-ink-muted: var(--mb-muted);
}
.sat-calc__badge {
    display: inline-flex;
    height: 20px;
    align-items: center;
    border: 1px solid var(--mb-line-strong);
    border-radius: var(--radius-xs);
    padding: 0 var(--space-2);
    color: var(--mb-muted);
    font-size: var(--fs-micro);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.sat-calc__panel {
    margin: var(--space-8) 0 var(--space-2);
    border: 1px solid var(--mb-line);
    border-radius: var(--radius-md);
    padding: 24px;
    background: var(--mb-sunken);
}
.journal-prose .sat-calc__panel h2 { margin-bottom: 0; color: var(--mb-ink); font-size: var(--fs-sm); font-weight: 500; line-height: 1.5; }
.sat-calc__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.sat-calc__field { display: grid; gap: var(--space-2); }
.sat-calc__field label { color: var(--mb-ink); font-size: var(--fs-cap); line-height: 1.5; }
.sat-calc__field input {
    height: var(--control-md);
    width: 100%;
    border: 1px solid var(--mb-line-strong);
    border-radius: var(--radius-xs);
    padding: 0 var(--space-3);
    background: var(--mb-raised);
    color: var(--mb-ink);
    font: inherit;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}
.sat-calc__hint,
.sat-calc__note,
.sat-calc__caveat,
.sat-calc__scale-label { color: var(--mb-muted); font-size: var(--fs-cap); line-height: 1.65; }
.sat-calc__hint--error { color: var(--status-destructive); }
.journal-prose .sat-calc__note { margin-top: 12px; }
.sat-calc__result-title { margin-top: 24px; color: var(--mb-ink); font-size: var(--fs-sm); font-weight: 500; line-height: 1.5; }
.sat-calc__bands { display: grid; gap: 12px; margin-top: 12px; }
.sat-calc__band { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) 16px; border-top: 1px solid var(--mb-line); padding-top: 12px; }
.sat-calc__band dt { color: var(--mb-ink); font-size: var(--fs-cap); }
.sat-calc__band dd { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; }
.sat-calc__value { color: var(--mb-ink); font-size: var(--fs-h3); line-height: 1.2; font-variant-numeric: tabular-nums; }
.sat-calc__scale-label { margin-top: 20px; }
.sat-calc__caveat { margin-top: 16px; }
.sat-calc__reset { margin-top: 16px; }
.sat-calc__reset button {
    height: var(--control-md);
    border: 1px solid var(--mb-line-strong);
    border-radius: var(--radius-xs);
    padding: 0 12px;
    background: var(--mb-raised);
    color: var(--mb-ink);
    font-size: var(--fs-cap);
}
.sat-calc__reset button:hover { border-color: var(--mb-ink); }
.sat-calc__faq { margin-top: 8px; }
.sat-calc__faq > div + div { margin-top: 20px; }
.sat-calc__faq dt { color: var(--mb-ink); font-weight: 500; }
.sat-calc__faq dd { margin: 4px 0 0; }
.sat-calc__cta { margin-top: 20px; }
/* The skill-check link before the page's scripts run; `buttonVariants()` takes
   over once they do. Matches .site-nav__cta in server.css. */
.sat-calc__cta-link {
    display: inline-flex;
    height: var(--control-md);
    align-items: center;
    border: 1px solid var(--mb-ink);
    border-radius: var(--radius-md);
    padding: 0 12px;
    background: var(--mb-ink);
    font-size: var(--fs-cap);
    font-weight: 500;
    line-height: 1;
}
/* `.journal-prose a` sets the reading column's ink colour and underline, so the
   button's own label colour has to be written at the same specificity. */
.journal-prose .sat-calc__cta-link { color: var(--mb-canvas); text-decoration: none; }

@media (max-width: 767px) {
    .sat-calc__panel { padding: 16px; }
    .sat-calc__fields { grid-template-columns: 1fr; }
    .sat-calc__value { font-size: var(--fs-lg); }
    .sat-calc__field input,
    .sat-calc__reset button,
    .sat-calc__cta-link { height: var(--control-lg); }
}

/* ScoreScale (ScoreScale.tsx): Today's Score card and Analytics' Score estimate draw the same scale. */
/* The score scale: a quiet track from 400 to 1600, the current band in the chart colour, the target a short ink
   mark standing through the track. */
.sat-score-scale { margin-top: 16px; }
.sat-score-track { position: relative; height: 6px; border-radius: 3px; background: var(--sat-track); }
.sat-score-band { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--sat-chart); }
.sat-score-target { position: absolute; top: -4px; width: 2px; height: 14px; margin-left: -1px; border-radius: 1px; background: var(--sat-ink); }
.sat-score-ticks { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; line-height: 14px; color: var(--sat-ink-muted); font-variant-numeric: tabular-nums; }