/* Calliope landing only. The app never loads this stylesheet.
   Same page system as the Mnemosyne landing (mnemosyne-frontend public/css/mnemosyne-landing.css, 2026-11-02
   cleanup): black, Inter, mono kickers, the portrait fills the first screen and turns to look at you, one claim
   per screen with CSS scroll reveals, the dot lattice only behind one band. Class names keep the mn- prefix so
   the two landings stay interchangeable; the accent is Calliope's mint (--mn-violet keeps its name on purpose).
   Every word stays real text for search and answer engines. */
@font-face { font-family: 'Inter'; src: url('/fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains-mono.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; }

.mn-landing {
  --mn-bg: #000000;
  --mn-grid: rgba(231, 223, 208, 0.09);
  --mn-surface: #171717;
  --mn-surface-2: #1d1c20;
  --mn-line: rgba(255, 255, 255, 0.125);
  --mn-line-soft: rgba(255, 255, 255, 0.065);
  --mn-line-strong: rgba(255, 255, 255, 0.25);
  --mn-text: #e7dfd0;
  --mn-quiet: #b4aea4;
  --mn-dim: #98938b;
  --mn-violet: #9fe1c6;
  --mn-violet-line: rgba(159, 225, 198, 0.22);
  --mn-wash: rgba(159, 225, 198, 0.06);
  --mn-glass: rgba(20, 19, 23, 0.82);
  --mn-nav: rgba(17, 17, 17, 0.84);
  --mn-head: #e7dfd0;
  --mn-fill: #e7dfd0;
  --mn-fill-ink: #151416;
  --nacre-a: #2a252d; --nacre-b: #19181d; --nacre-c: #22212a; --nacre-light: rgba(249, 235, 225, .085);
  --nacre-edge-a: rgba(250, 235, 215, .48); --nacre-edge-b: rgba(173, 212, 196, .16); --nacre-edge-c: rgba(193, 207, 219, .30); --nacre-shadow: rgba(0, 0, 0, .20);
  --mn-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mn-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  color-scheme: dark;
  margin: 0;
  background-color: var(--mn-bg);
  color: var(--mn-text);
  font: 16px/1.65 var(--mn-font);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
.mn-landing *, .mn-landing *::before, .mn-landing *::after { box-sizing: border-box; }
:where(.mn-landing) :where(h1, h2, h3, p, figure, ul, ol) { margin: 0; }
.mn-landing h1, .mn-landing h2, .mn-landing h3 { font-weight: 400; line-height: 1.12; letter-spacing: -0.025em; }
.mn-landing em { font-style: normal; font-weight: 350; color: #bfe6d4; background: linear-gradient(113deg, #f2e4da 2%, #dcece3 24%, #8fd4b8 59%, #d9ebe4 93%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
:where(.mn-landing) a { color: inherit; text-decoration: none; }
:where(.mn-landing) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.mn-landing img { display: block; max-width: 100%; height: auto; }
.mn-landing :focus-visible { outline: 2px solid var(--mn-violet); outline-offset: 3px; }
.mn-landing ::selection { background: var(--mn-violet); color: var(--mn-fill-ink); }

.mn-skip { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 10px 14px; background: var(--mn-fill); color: var(--mn-fill-ink) !important; border-radius: 6px; }
.mn-skip:focus { top: 12px; }

.mn-wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }

/* Kickers: small mono, spaced */
.mn-eyebrow, .mn-step-number, .mn-plan-price small { font-family: var(--mn-mono); letter-spacing: 0.14em; text-transform: uppercase; }

/* Links and buttons */
.mn-text-link { color: var(--mn-violet); border-bottom: 1px solid transparent; }
.mn-text-link:hover { border-bottom-color: var(--mn-violet); }
.mn-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 20px; border-radius: 8px; border: 1px solid var(--mn-line-strong); white-space: nowrap; font-size: 0.95rem; transition: filter .15s, border-color .15s, background-color .15s; }
.mn-button:hover { border-color: var(--mn-text); }
/* the ceramic: polish borrowed from the portrait's laurel */
.mn-primary {
  color: #2f4a40; border: 1px solid transparent;
  background:
    radial-gradient(ellipse at 30% 0%, #fffef7, transparent 70%) padding-box,
    linear-gradient(120deg, #eee5d7, #dfeee6 57%, #ece9e3) padding-box,
    linear-gradient(125deg, #fff9e9, #a9d3c2 60%, #dfece6) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 3px 12px rgba(112, 188, 160, .11);
}
.mn-primary:hover { filter: brightness(1.06); border-color: transparent; }
.mn-outline { background: transparent; color: var(--mn-text); }
.mn-large { min-height: 52px; padding: 12px 26px; font-size: 1rem; }

/* Header: no bar. Logo and wordmark left; language and Sign in right; floats over her and scrolls away */
.mn-header { position: absolute; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; gap: 20px; padding: 18px max(20px, calc((100% - 1160px) / 2)); background: none; border: 0; }
.mn-brand { display: flex; align-items: center; gap: 14px; }
.mn-brand-home img { width: 96px; height: 37px; object-fit: contain; }
.mn-brand-product { padding-left: 14px; border-left: 1px solid var(--mn-line); font-size: 1.15rem; font-weight: 500; letter-spacing: -0.04em; background: linear-gradient(110deg, #f4eadb, #e2ece6 57%, #b8d9ca); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mn-header-end { display: flex; align-items: center; gap: 18px; margin-left: auto; font-size: 0.9rem; }
.mn-languages { display: flex; gap: 6px; color: var(--mn-dim); }
.mn-languages [aria-current] { color: var(--mn-text); }
.mn-signin { padding: 8px 16px; border: 1px solid var(--mn-line-strong); border-radius: 999px; color: var(--mn-text); background: rgba(0, 0, 0, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.mn-signin:hover { border-color: var(--mn-text); }
.mn-header a, .mn-header span { text-shadow: 0 1px 12px rgba(0, 0, 0, .8); }

/* Hero: one screen. The portrait stands at full height on the right and turns to look at you (Calliope's clip is 3:4 like Mnemosyne's);
   only the headline and Start free sit beside her. She is never enlarged past the clip's own
   resolution: the scroll effect only eases her back (see the scroll story below). */
.mn-hero { position: relative; height: 100svh; min-height: 620px; background: #000; }
/* overflow: clip, not hidden: hidden makes the stage a scroll container, and the scroll animations
   inside it would then track a box that never scrolls. */
.mn-hero-stage { position: relative; height: 100%; overflow: clip; isolation: isolate; }
.mn-hero .mn-portrait { position: absolute; top: 0; bottom: 0; right: max(0px, calc((100% - 1400px) / 2)); width: min(78vw, calc(100svh * .75 * 1.06)); z-index: 0; pointer-events: none; }
.mn-hero-still, .mn-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; border: 0; border-radius: 0; background: #000;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 26%), linear-gradient(to top, transparent 0%, #000 22%);
  mask-image: linear-gradient(to right, transparent 0%, #000 26%), linear-gradient(to top, transparent 0%, #000 22%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.mn-hero-video { opacity: 0; }
.mn-portrait.film-visible .mn-hero-video { opacity: 1; }
.mn-portrait.film-visible .mn-hero-still { opacity: 0; }
.mn-hero-stage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22%; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(0, 0, 0, .6), transparent); }
.mn-hero-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52%; z-index: 1; pointer-events: none; background: linear-gradient(to top, #000 8%, rgba(0, 0, 0, .55) 45%, transparent); }
.mn-hero-copy { position: absolute; left: 0; right: 0; bottom: 9vh; z-index: 2; }
.mn-hero-copy > * { max-width: 640px; }
.mn-hero h1 { font-size: clamp(2.3rem, 4.6vw, 4.2rem); line-height: 1.0; letter-spacing: -0.05em; text-shadow: 0 2px 40px rgba(0, 0, 0, .7); }
.mn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }
.mn-replay { position: absolute; right: max(20px, calc((100% - 1160px) / 2)); bottom: 9vh; z-index: 2; width: 36px; height: 36px; border: 1px solid var(--mn-line); border-radius: 50%; background: rgba(0, 0, 0, .5); color: var(--mn-violet); font-size: 15px; display: grid; place-items: center; }

/* Intro: the description gets its own screen, right after her */
.mn-intro { padding: 16vh 0 4vh; }
.mn-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 0.66rem; letter-spacing: 0.16em; color: var(--mn-quiet); }
.mn-eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #fff9e8, #d2ecdf 50%, #7fcdb0); box-shadow: 0 0 9px rgba(203, 240, 224, .28); flex: none; }
.mn-intro-lede { max-width: 38ch; margin-top: 22px; font-size: clamp(1.25rem, 2.2vw, 1.8rem); line-height: 1.4; letter-spacing: -0.025em; color: var(--mn-text); }
.mn-micro { margin-top: 22px; font-size: 0.82rem; color: var(--mn-dim); }

/* Sections */
.mn-section { padding: 72px 0 8px; }
.mn-section-heading { max-width: 70ch; }
.mn-section-heading h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); letter-spacing: -0.035em; }
.mn-section-heading p { margin-top: 12px; font-size: 1rem; color: var(--mn-quiet); }
.mn-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
/* cards: flat and quiet */
.mn-card { padding: 26px; border-radius: 14px; border: 1px solid var(--mn-line-soft); background: #0e0e0e; }
.mn-card h3 { font-size: 1.2rem; }
.mn-card p { margin-top: 10px; font-size: 0.95rem; color: var(--mn-quiet); }
.mn-card .mn-text-link { display: inline-block; margin-top: 14px; }
.mn-hint { max-width: 70ch; margin-top: 20px; font-size: 0.85rem; color: var(--mn-dim); }

/* Statement headings: one claim per screen, Apple-style */
.mn-section { padding: 120px 0 24px; }
.mn-statement h2 { max-width: 15ch; }
.mn-statement h2 { font-size: clamp(2.4rem, 6vw, 4.8rem); line-height: 1.02; letter-spacing: -0.05em; }
.mn-statement p { max-width: 52ch; margin-top: 20px; font-size: clamp(1.02rem, 1.6vw, 1.25rem); line-height: 1.6; }

/* The dots live here only: the curriculum band, standing in for the map of the program */
.mn-band { position: relative; isolation: isolate; padding: 140px 0 120px; margin-top: 80px; }
.mn-dots::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle at 1px 1px, var(--mn-grid) 1px, transparent 1.15px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); }
.mn-dots > .ts-ambient { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); }
.mn-dots > .mn-wrap { position: relative; z-index: 1; }
.mn-motion { position: absolute; top: 28px; right: max(20px, calc((100% - 1160px) / 2)); z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--mn-line-soft); border-radius: 50%; background: rgba(0, 0, 0, .5); color: var(--mn-dim); }
.mn-motion svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mn-motion:hover { color: var(--mn-text); border-color: var(--mn-line); }
.mn-motion[aria-pressed="true"] { color: var(--mn-violet); }

/* An AI tutor or a general chatbot: the comparison table */
.mn-table-wrap { margin-top: 32px; overflow-x: auto; border: 1px solid var(--mn-line-soft); border-radius: 14px; }
.mn-compare { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.mn-compare caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mn-compare th, .mn-compare td { padding: 16px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--mn-line-soft); }
.mn-compare thead th { border-top: 0; font-family: var(--mn-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mn-dim); }
.mn-compare thead th:nth-child(2) { color: var(--mn-violet); }
.mn-compare tbody th { font-weight: 500; color: var(--mn-text); width: 24%; }
.mn-compare td:nth-child(2) { color: var(--mn-text); }
.mn-compare td:nth-child(3) { color: var(--mn-dim); }

/* Scroll story: leaving the hero, she eases back and fades while the headline rises away;
   sections then rise into place. Shrinking only: the clip is never enlarged. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mn-hero .mn-portrait { animation: mn-portrait-out linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    .mn-hero-copy { animation: mn-copy-out linear both; animation-timeline: view(); animation-range: exit 0% exit 90%; }
    @keyframes mn-portrait-out { to { transform: scale(.9) translateY(-3%); opacity: .15; } }
    @keyframes mn-copy-out { to { transform: translateY(-14vh); opacity: 0; } }
    .mn-reveal { animation: mn-reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
    .mn-shot.mn-reveal { animation-name: mn-reveal-shot; animation-range: entry 0% cover 40%; }
    @keyframes mn-reveal { from { opacity: 0; transform: translateY(56px); } to { opacity: 1; transform: none; } }
    @keyframes mn-reveal-shot { from { opacity: 0; transform: translateY(40px) scale(.94); } to { opacity: 1; transform: none; } }
  }
}

/* Who it's for (four audiences, two per row) and the founder note */
.mn-cards.mn-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mn-founder .mn-section-heading { padding-left: 20px; border-left: 2px solid var(--mn-violet); }
.mn-founder .mn-text-link { display: inline-block; margin-top: 16px; }

/* How a thread works */
.mn-how .mn-shot { margin-top: 48px; }
.mn-steps { list-style: none; margin: 32px 0 0; padding: 0; }
.mn-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 18px 0; border-top: 1px solid var(--mn-line-soft); }
.mn-steps h3 { font-size: 1.15rem; }
.mn-steps p { margin-top: 6px; font-size: 0.95rem; color: var(--mn-quiet); }
.mn-step-number { padding-top: 4px; font-size: 0.7rem; color: var(--mn-violet); }

/* Plans */
.mn-plan-price { margin-top: 8px; font-size: 2.2rem; line-height: 1; letter-spacing: -0.04em; }
.mn-plan-price small { font-size: 0.65rem; letter-spacing: 0.1em; color: var(--mn-dim); }
.mn-plan ul { margin: 16px 0 0; padding-left: 18px; font-size: 0.95rem; color: var(--mn-quiet); }
.mn-plan li + li { margin-top: 6px; }
.mn-plan .mn-button { width: 100%; margin-top: 22px; white-space: normal; }

/* FAQ */
.mn-faq h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); letter-spacing: -0.035em; margin-bottom: 20px; }
.mn-faq details { border-top: 1px solid var(--mn-line-soft); }
.mn-faq details:last-of-type { border-bottom: 1px solid var(--mn-line-soft); }
.mn-faq summary { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; font-size: 1rem; cursor: pointer; list-style: none; }
.mn-faq summary::-webkit-details-marker { display: none; }
.mn-faq summary span { color: var(--mn-violet); flex: none; }
.mn-faq details[open] summary span { transform: rotate(45deg); display: inline-block; }
.mn-faq details p { max-width: 72ch; padding: 0 0 18px; font-size: 0.95rem; color: var(--mn-quiet); }
.mn-faq-group { margin: 40px 0 12px; font-size: 1.25rem; }
.mn-policy-links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 24px; }
.mn-policy-links a { color: var(--mn-violet); }

/* Closing + footer */
.mn-closing { padding: 80px 0 72px; text-align: center; }
.mn-closing h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); letter-spacing: -0.04em; }
.mn-closing .mn-actions { justify-content: center; }
.mn-footer { display: grid; grid-template-columns: 1fr auto; gap: 16px 40px; padding: 28px 0 40px; border-top: 1px solid var(--mn-line-soft); color: var(--mn-quiet); font-size: 0.9rem; }
.mn-footer-brand { color: var(--mn-violet); font-size: 1.05rem; }
.mn-footer p { margin-top: 4px; }
.mn-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; align-self: center; }
.mn-footer-sections { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--mn-line-soft); }
.mn-footer nav a:hover { color: var(--mn-text); }
.mn-footer small { grid-column: 1 / -1; font-size: 0.8rem; color: var(--mn-dim); }

/* Responsive */
@media (max-width: 960px) {
  .mn-cards, .mn-cards.mn-who { grid-template-columns: 1fr; }
  .mn-how { grid-template-columns: 1fr; }
  .mn-hero .mn-portrait { width: min(92vw, calc(100svh * .75)); }
}
@media (max-width: 650px) {
  .mn-brand-product { display: none; }
  .mn-header { padding: 14px 16px; }
  .mn-header-end { gap: 12px; }
  .mn-how .mn-shot img { max-width: 340px; margin-inline: auto; border-radius: 26px; }
  .mn-hero { height: auto; min-height: 0; }
  .mn-hero-stage { height: auto; }
  .mn-hero .mn-portrait { position: relative; right: auto; width: 100%; height: 66svh; }
  .mn-hero-still, .mn-hero-video { object-position: 50% 0;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 30%); mask-image: linear-gradient(to top, transparent 0%, #000 30%); }
  .mn-hero-stage::after { display: none; }
  .mn-hero-copy { position: relative; bottom: auto; margin-top: -9svh; padding-bottom: 48px; }
  .mn-hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); letter-spacing: -0.035em; }
  .mn-replay { top: 76px; bottom: auto; right: 16px; }
  .mn-intro { padding-top: 10vh; }
  .mn-section { padding-top: 88px; }
  .mn-band { padding: 96px 0 80px; margin-top: 56px; }
  .mn-footer { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .mn-landing * { transition: none !important; }
  .mn-landing .mn-hero-video { display: none; }
  .mn-landing .mn-hero-still { opacity: 1 !important; }
}
@media (forced-colors: active) {
  .mn-landing em, .mn-brand-product { background: none; -webkit-text-fill-color: CanvasText; }
  .mn-primary, .mn-card { border-color: ButtonText; }
}

/* Calliope only: the "Coming soon" pill in the header (a span, not a link) and the prepared-exchange card */
.mn-status { cursor: default; }
.mn-status:hover { border-color: var(--mn-line-strong); }
.cl-practice { max-width: 680px; margin-top: 48px; padding: 28px; }
.cl-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.cl-tabs [role="tab"] { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid var(--mn-line-soft); border-radius: 999px; font-size: 0.9rem; color: var(--mn-quiet); }
.cl-tabs [role="tab"] .mn-step-number { padding: 0; }
.cl-tabs [role="tab"]:hover { color: var(--mn-text); border-color: var(--mn-line); }
.cl-tabs [role="tab"][aria-selected="true"] { color: var(--mn-text); border-color: var(--mn-violet-line); background: var(--mn-wash); }
.cl-exchange { display: grid; gap: 10px; min-height: 190px; padding-top: 18px; border-top: 1px solid var(--mn-line-soft); }
.cl-exchange .mn-eyebrow { font-size: 0.6rem; }
.cl-line { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.3; letter-spacing: -0.02em; color: var(--mn-text); }
.cl-translation { font-size: 0.9rem; color: var(--mn-dim); margin-top: -4px; }
.cl-choice { justify-content: space-between; width: 100%; margin-top: 8px; text-align: left; white-space: normal; font-size: 1.02rem; }
.cl-you { display: grid; gap: 4px; margin-top: 8px; padding: 14px 16px; border-left: 2px solid var(--mn-violet); background: var(--mn-wash); border-radius: 0 10px 10px 0; font-size: 1.05rem; }
.cl-you .mn-eyebrow { font-size: 0.6rem; }
.cl-tools { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 20px; font-size: 0.9rem; }
.cl-tools .mn-text-link { padding: 0; }
.cl-practice .mn-hint { margin-top: 16px; font-size: 0.8rem; }
@media (max-width: 650px) { .cl-practice { padding: 20px; margin-top: 36px; } }
.cl-closing-note { margin: 14px auto 0; max-width: none; font-size: 1.05rem; color: var(--mn-quiet); }
@media (max-width: 960px) { .mn-compare th, .mn-compare td { padding: 12px 14px; font-size: 0.9rem; } }
.mn-compare td:nth-child(4) { color: var(--mn-dim); }
@media (max-width: 650px) { .mn-compare { min-width: 680px; } }