/* Page layouts and the illustrated product frames. Everything drawn here is
   HTML and CSS rather than a screenshot: it follows the theme, stays crisp at
   any size, and can never show a real student's material by accident. The
   frames borrow the app's own shapes -- its sidebar, class swatches, chips and
   coral primary button -- so what a visitor sees here is what they get. */

/* ---------- section heads ---------- */

.sec-head { max-width: 40rem; }
.sec-head .h2 { margin-top: 0.75rem; }
.sec-head .lede { margin-top: 1rem; }
.sec-head.center { margin-inline: auto; text-align: center; }
.band-grid { margin-top: 2.5rem; }
.band-after { margin-top: 1.5rem; font-size: 0.9375rem; }
.band-after a { color: var(--accent); text-underline-offset: 3px; }

/* ---------- hero ---------- */

.hero { padding-block: clamp(3.5rem, 9vw, 7rem) 0; position: relative; }
.hero-copy { max-width: 46rem; margin-inline: auto; text-align: center; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--glass);
  padding: 0.3rem 0.85rem 0.3rem 0.4rem; font-size: 0.8125rem; font-weight: 500; color: var(--body);
  box-shadow: var(--shadow); text-decoration: none;
}
.hero-pill .chip { padding: 0.15rem 0.55rem; }
.hero-pill:hover { border-color: var(--line-strong); }
.hero .h1 { margin-top: 1.5rem; }
.hero-lede { margin: 1.5rem auto 0; max-width: 38rem; font-size: clamp(1.1875rem, 1.65vw, 1.375rem); }
.hero-cta { margin-top: 2.25rem; justify-content: center; }
.hero-fine { font-size: 0.8125rem; margin-top: 1.1rem; }

/* The product frame under the headline, lit from behind and lifted off the page. */
.hero-stage { position: relative; margin-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: 1rem; }
.hero-stage::before {
  content: ""; position: absolute; inset: -10% 10% 20%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 62%);
  filter: blur(20px);
}

/* ---------- the app, drawn ---------- */

/* Drawn to match app/lectures/[id]: the upload page as it renders, with its own
   labels ("Record audio", "Material", "Recording and transcript", "Drop pin",
   "Advanced · confusion pins", "In plain words / Properly / What you were
   probably missing"). Nothing here is a control the app does not have. */
.app {
  --app-side: #1b1c23; --app-side-fg: #c9cad3; --app-bg: #111217; --app-surface: #191a21; --app-surface-muted: #202129;
  --app-line: #2a2c36; --app-fg: #f1f1f4; --app-body: #d4d5db; --app-muted: #8b8d99; --app-accent: #ff7063; --app-accent-soft: #3b211f;
  --app-sage: #39c7b9; --app-sage-soft: #15332f; --app-highlight: #173a36; --app-success: #8cc0a3; --app-success-soft: #172a22;
  border-radius: 1.1rem; overflow: hidden; background: var(--app-bg); color: var(--app-fg);
  box-shadow: var(--shadow-float); font-size: 0.8125rem; line-height: 1.45;
  border: 1px solid rgb(255 255 255 / 0.08);
}
.app-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.9rem; background: var(--app-side); border-bottom: 1px solid var(--app-line); }
.dots { display: inline-flex; gap: 0.4rem; }
.dots i { width: 0.7rem; height: 0.7rem; border-radius: 999px; background: #3b3e4a; display: block; }
.dots i:nth-child(1) { background: #ff5f57; } .dots i:nth-child(2) { background: #febc2e; } .dots i:nth-child(3) { background: #28c840; }
.app-bar-title { color: var(--app-muted); font-size: 0.75rem; margin: 0 auto; }
.app-body { display: grid; grid-template-columns: 12rem minmax(0, 1fr); }
@media (max-width: 48rem) { .app-body { grid-template-columns: minmax(0, 1fr); } .app-side { display: none; } }

.app-side { background: var(--app-side); color: var(--app-side-fg); padding: 0.9rem 0.7rem; border-right: 1px solid var(--app-line); display: flex; flex-direction: column; gap: 0.2rem; }
.app-side-brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: #fff; font-size: 0.9rem; padding: 0.2rem 0.4rem 0.9rem; }
.app-side-brand img { width: 1.35rem; height: 1.35rem; flex: none; display: block; }
.app-side-item { padding: 0.4rem 0.6rem; border-radius: 0.5rem; color: var(--app-side-fg); display: flex; justify-content: space-between; align-items: center; }
.app-side-item.is-on { background: var(--app-accent-soft); color: #ffb3aa; }
.app-side-item .n { font-size: 0.65rem; background: #2a2c36; color: var(--app-side-fg); padding: 0 0.4rem; border-radius: 999px; }
.app-side-sub { padding: 0.32rem 0.6rem 0.32rem 1.4rem; display: flex; align-items: center; gap: 0.5rem; color: var(--app-side-fg); font-size: 0.78rem; border-radius: 0.5rem; }
.app-side-sub.is-on { background: var(--app-accent-soft); color: #ffb3aa; }
.swatch { width: 1.05rem; height: 1.05rem; border-radius: 0.3rem; background: var(--c, #cc3d32); color: #fff; font-size: 0.5rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.app-side-gap { flex: 1; }

.app-main { padding: 1.1rem 1.3rem 1.3rem; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; align-content: start; }
.app-crumb { color: var(--app-muted); font-size: 0.72rem; }
.app-crumb b { color: var(--app-fg); font-weight: 500; }
.app-titlebox { display: flex; gap: 0.9rem; align-items: flex-start; }
.app-swatch { width: 2.6rem; height: 2.6rem; border-radius: 0.7rem; background: linear-gradient(145deg, #39c7b9, #138f86); color: #fff; font-weight: 700; font-size: 0.9rem; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.app-course { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; color: var(--app-accent); text-transform: uppercase; }
.app-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.03em; margin-top: 0.1rem; line-height: 1.15; }
.app-meta { color: var(--app-muted); font-size: 0.72rem; margin-top: 0.4rem; display: flex; gap: 0.6rem; align-items: center; }
.app-chip { display: inline-flex; align-items: center; font-size: 0.62rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--app-success-soft); color: var(--app-success); }
.app-chip-accent { background: var(--app-accent-soft); color: var(--app-accent); }

.app-card { border: 1px solid var(--app-line); border-radius: 0.8rem; background: var(--app-surface); padding: 0.9rem 1rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.7rem; min-width: 0; }
.app-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.app-card-title { font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.45rem; letter-spacing: -0.01em; }
.app-card-title svg { width: 0.9rem; height: 0.9rem; color: var(--app-accent); }
.app-card-sub { color: var(--app-muted); font-size: 0.72rem; margin-top: -0.4rem; }
.app-btn { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid #3b3e4a; border-radius: 0.55rem; padding: 0.35rem 0.7rem; font-size: 0.72rem; font-weight: 500; color: var(--app-fg); background: var(--app-surface); white-space: nowrap; }
.app-btn svg { width: 0.8rem; height: 0.8rem; color: var(--app-accent); }
.app-btn.is-accent { color: var(--app-accent); }
.app-btn-primary { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 0.55rem; padding: 0.35rem 0.75rem; font-size: 0.72rem; font-weight: 600; background: linear-gradient(180deg, #ff8a7f, #e35a4d); color: #151015; white-space: nowrap; }
.app-btn-ghost { font-size: 0.72rem; color: var(--app-muted); padding: 0.35rem 0.5rem; }
.app-btn-sm { padding: 0.2rem 0.5rem; font-size: 0.66rem; }
.app-player { display: flex; align-items: center; gap: 0.6rem; background: #0d0e12; border-radius: 0.5rem; padding: 0.45rem 0.7rem; flex: 1; min-width: 0; color: var(--app-muted); font-size: 0.7rem; font-variant-numeric: tabular-nums; }
.app-player i { flex: 1; height: 0.25rem; border-radius: 999px; background: #3b3e4a; position: relative; }
.app-player i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 78%; border-radius: 999px; background: #9698a4; }
.app-player svg { width: 0.8rem; height: 0.8rem; color: var(--app-fg); flex: none; }
.app-playrow { display: flex; gap: 0.6rem; align-items: center; }
.app-note { font-size: 0.68rem; color: var(--app-muted); }
.app-lines { list-style: none; margin: 0; padding: 0.3rem; border: 1px solid var(--app-line); border-radius: 0.7rem; background: color-mix(in oklab, var(--app-surface-muted) 40%, transparent); display: grid; gap: 0.1rem; }
.app-lines li { padding: 0.35rem 0.6rem; border-radius: 0.5rem; color: var(--app-body); }
.app-lines li.is-active { background: var(--app-highlight); color: var(--app-fg); }
.app-lines time, .app-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.66rem; color: var(--app-muted); margin-right: 0.45rem; }
.app-lines li.is-active time { color: var(--app-sage); }
.app-fix { background: var(--app-accent-soft); border-radius: 0.2rem; padding: 0 0.1rem; text-decoration: underline dotted var(--app-accent); text-underline-offset: 2px; }

.app-pin { border: 1px solid var(--app-line); border-radius: 0.7rem; background: var(--app-surface); overflow: hidden; }
.app-pinrow { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; }
.app-pin-time { display: inline-flex; align-items: center; gap: 0.3rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.66rem; background: var(--app-accent-soft); color: var(--app-accent); padding: 0.25rem 0.5rem; border-radius: 0.45rem; flex: none; }
.app-pin-time svg { width: 0.55rem; height: 0.55rem; fill: currentColor; }
.app-pin-slice { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--app-muted); font-size: 0.76rem; }
.app-expl { border-top: 1px solid var(--app-line); padding: 0.8rem 0.9rem 0.9rem; display: grid; gap: 0.65rem; font-size: 0.76rem; color: var(--app-body); }
.app-eyebrow { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--app-muted); margin-bottom: 0.15rem; }
.app-missing { background: var(--app-accent-soft); border-radius: 0.6rem; padding: 0.65rem 0.75rem; }
.app-missing .app-eyebrow { color: var(--app-accent); }
.app-expl dl { margin: 0; } .app-expl dt { display: inline; font-weight: 600; color: var(--app-fg); } .app-expl dd { display: inline; margin: 0; }
.app-check { border-top: 1px solid var(--app-line); padding-top: 0.6rem; font-style: italic; }

/* The same pieces inside a page-coloured .mini frame. */
.mini .app-card { background: var(--surface); border-color: var(--line); }
.mini .app-card-title svg, .mini .app-btn svg { color: var(--accent); }
.mini .app-card-sub, .mini .app-note, .mini .app-eyebrow, .mini .app-meta { color: var(--muted); }
.mini .app-btn { border-color: var(--line-strong); color: var(--foreground); background: var(--surface); }
.mini .app-btn.is-accent { color: var(--accent); }
.mini .app-btn-primary { background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 86%, white), var(--accent)); color: var(--accent-fg); }
.mini .app-player { background: var(--surface-sunken); color: var(--muted); }
.mini .app-player svg { color: var(--foreground); }
.mini .app-player i { background: var(--line-strong); } .mini .app-player i::after { background: var(--muted); }
.mini .app-lines { border-color: var(--line); background: color-mix(in oklab, var(--surface-muted) 60%, transparent); }
.mini .app-lines li { color: var(--body); }
.mini .app-lines li.is-active { background: color-mix(in oklab, var(--sage-soft) 80%, var(--surface)); color: var(--foreground); }
.mini .app-lines time, .mini .app-mono { color: var(--muted); }
.mini .app-lines li.is-active time { color: var(--sage); }
.mini .app-fix { background: var(--accent-soft); text-decoration-color: var(--accent); }
.mini .app-pin { border-color: var(--line); background: var(--surface); }
.mini .app-pin-time { background: var(--accent-soft); color: var(--accent); }
.mini .app-pin-slice { color: var(--muted); }
.mini .app-expl { border-color: var(--line); color: var(--body); }
.mini .app-expl dt { color: var(--foreground); }
.mini .app-missing { background: var(--accent-soft); } .mini .app-missing .app-eyebrow { color: var(--accent); }
.mini .app-check { border-color: var(--line); }
.mini .app-chip { background: var(--success-soft); color: var(--success); }
.mini .app-titlebox .app-course { color: var(--accent); }
.mini .app-title { color: var(--foreground); }

/* the Material card's rows: icon, name, a control on the right, and "Use as" beneath */
.src-list { display: grid; border: 1px solid var(--line); border-radius: 0.7rem; overflow: hidden; }
.src { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.25rem 0.7rem; align-items: center; padding: 0.6rem 0.75rem; }
.src + .src { border-top: 1px solid var(--line); }
.src-ico { width: 1.7rem; height: 1.7rem; border-radius: 0.45rem; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-muted); border: 1px solid var(--line); color: var(--muted); grid-row: 1 / span 2; }
.src-ico svg { width: 0.85rem; height: 0.85rem; }
.src-name { font-weight: 500; color: var(--foreground); }
.src-ctl { grid-column: 3; grid-row: 1; font-size: 0.7rem; color: var(--body); border: 1px solid var(--line-strong); border-radius: 0.5rem; padding: 0.2rem 0.55rem; white-space: nowrap; }
.src-mono { grid-column: 3; grid-row: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.7rem; color: var(--muted); }
.src-use { grid-column: 2 / span 2; font-size: 0.68rem; color: var(--muted); display: inline-flex; align-items: center; gap: 0.45rem; }
.src-use span { border: 1px solid var(--line); border-radius: 0.4rem; padding: 0.1rem 1.4rem 0.1rem 0.5rem; color: var(--body); background: var(--surface); position: relative; }
.src-use span::after { content: ""; position: absolute; right: 0.5rem; top: 0.45em; width: 0.3rem; height: 0.3rem; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); }

/* the Study tools grid */
.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.tool { border: 1px solid var(--line); border-radius: 0.7rem; background: var(--surface); padding: 0.7rem; display: flex; flex-direction: column; gap: 0.55rem; }
.tool-head { display: flex; gap: 0.55rem; align-items: flex-start; }
.tool-ico { width: 1.7rem; height: 1.7rem; border-radius: 0.45rem; background: var(--sage-soft); color: var(--sage); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.tool-ico svg { width: 0.85rem; height: 0.85rem; }
.tool-name { font-weight: 500; color: var(--foreground); font-size: 0.78rem; }
.tool-desc { font-size: 0.66rem; color: var(--muted); line-height: 1.4; }
.tool .app-btn { align-self: flex-start; margin-top: auto; }
.saved-row { display: flex; align-items: center; gap: 0.6rem; border: 1px solid var(--line); border-radius: 0.6rem; padding: 0.5rem 0.7rem; font-size: 0.76rem; }
.saved-row svg { width: 0.85rem; height: 0.85rem; color: var(--sage); flex: none; }
.saved-row b { font-weight: 500; color: var(--foreground); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini { min-width: 0; }
.saved-row small { color: var(--muted); font-size: 0.66rem; white-space: nowrap; }
.mini-field { border: 1px solid var(--line-strong); border-radius: 0.5rem; padding: 0.35rem 0.6rem; font-size: 0.72rem; color: var(--muted); background: var(--surface); }
.mini-field-lbl { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.25rem; }

/* ---------- trust strip ---------- */

.strip { margin-top: clamp(2rem, 5vw, 3.5rem); border-block: 1px solid var(--line); }
.strip-inner { max-width: 74rem; margin: 0 auto; padding: 1.1rem 1.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem 2.25rem; justify-content: center; font-size: 0.875rem; color: var(--body); }
.strip-inner span { display: inline-flex; align-items: center; gap: 0.5rem; }
.strip-inner svg { width: 1rem; height: 1rem; color: var(--sage); flex: none; }

/* ---------- steps ---------- */

.steps-list { margin-top: clamp(2.5rem, 6vw, 4rem); display: grid; gap: clamp(2.5rem, 7vw, 5.5rem); }
.step { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 56rem) {
  .step { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; }
  .step:nth-child(even) .step-copy { order: 2; }
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px;
  background: var(--foreground); color: var(--background); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.02em;
}
.step-copy .h2 { margin-top: 1.1rem; font-size: clamp(1.6rem, 3.2vw, 2.25rem); }
.step-copy .lede { margin-top: 1rem; font-size: 1.1875rem; }
.step-copy .muted { margin-top: 0.85rem; font-size: 1rem; font-weight: 500; text-wrap: pretty; }
.step-art { position: relative; }
.step-art::before {
  content: ""; position: absolute; inset: 10% 0 -5%; z-index: -1; border-radius: 2rem; pointer-events: none;
  background: radial-gradient(ellipse at 50% 60%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 70%);
}

/* A smaller frame for one moment in the flow. */
.mini {
  background: var(--surface); border: 1px solid var(--line); border-radius: 1.1rem; box-shadow: var(--shadow-lift);
  padding: 1.25rem; font-size: 0.8125rem; line-height: 1.45; color: var(--body);
}
.mini-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.mini-title { font-weight: 600; color: var(--foreground); font-size: 0.9rem; letter-spacing: -0.01em; }
.mini-sub { color: var(--muted); font-size: 0.75rem; margin-top: 0.1rem; }
.mini-btn { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--accent); color: var(--accent-fg); font-weight: 600; font-size: 0.75rem; padding: 0.4rem 0.75rem; border-radius: 0.6rem; white-space: nowrap; }
.mini-btn svg { width: 0.8rem; height: 0.8rem; }

/* ---------- feature tiles ---------- */

.feature { position: relative; overflow: hidden; }
.feature .icon-tile { margin-bottom: 1rem; }
.feature-wide { grid-column: 1 / -1; display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 56rem) { .feature-wide { grid-template-columns: 1.2fr 1fr; padding: 2.25rem; } }
.chat { display: grid; gap: 0.5rem; font-size: 0.8125rem; }
.chat-q, .chat-a { padding: 0.65rem 0.85rem; border-radius: 0.9rem; max-width: 92%; line-height: 1.45; }
.chat-q { background: var(--foreground); color: var(--background); justify-self: end; border-bottom-right-radius: 0.3rem; }
.chat-a { background: var(--surface-muted); border: 1px solid var(--line); color: var(--body); border-bottom-left-radius: 0.3rem; }
.chat-a b { color: var(--foreground); font-weight: 600; }
.chat-src { justify-self: start; }

/* ---------- reading ---------- */

.stat { display: flex; gap: 1.25rem; align-items: baseline; flex-wrap: wrap; margin-top: 0.5rem; }
.stat-n { font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1; color: var(--accent); }
.stat-c { font-size: 0.875rem; color: var(--muted); max-width: 14rem; }
.bars { display: grid; gap: 0.5rem; margin-top: 1.25rem; font-size: 0.8125rem; }
.bar { display: grid; grid-template-columns: 8rem 1fr 3rem; align-items: center; gap: 0.75rem; }
.bar-track { display: block; height: 0.55rem; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--line-strong); }
.bar.is-us .bar-fill { background: var(--accent); }
.bar.is-us { color: var(--foreground); font-weight: 600; }
.bar-v { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 30rem) { .bar { grid-template-columns: 1fr 3rem; } .bar-label { grid-column: 1 / -1; } }

/* ---------- privacy diagram ---------- */

.flow { margin-top: 2.5rem; display: grid; gap: 1rem; align-items: stretch; }
@media (min-width: 56rem) { .flow { grid-template-columns: 1.3fr auto 1fr auto 0.9fr; } }
.flow-node { padding: 1.5rem; }
.flow-node .chip { margin-bottom: 0.9rem; }
.flow-node .h3 { margin-bottom: 0.35rem; }
.flow-node ul { list-style: none; padding: 0; margin: 0.9rem 0 0; display: grid; gap: 0.45rem; font-size: 0.875rem; color: var(--body); }
.flow-node li { padding-left: 1.2rem; position: relative; }
.flow-node li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.4rem; height: 0.4rem; border-radius: 999px; background: currentColor; opacity: 0.45; }
.flow-node.is-home { border-color: color-mix(in oklab, var(--sage) 45%, var(--line)); background: linear-gradient(180deg, color-mix(in oklab, var(--sage-soft) 55%, var(--surface)), var(--surface) 60%); }
.flow-node.is-far { background: var(--surface-muted); box-shadow: none; }
.flow-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; color: var(--muted); font-size: 0.72rem; font-weight: 600; text-align: center; padding: 0.5rem 0; min-width: 6.5rem; }
.flow-link svg { width: 1.5rem; height: 1.5rem; color: var(--accent); transform: rotate(90deg); }
@media (min-width: 56rem) { .flow-link svg { transform: none; } }
.flow-fine { margin-top: 1.25rem; font-size: 0.875rem; max-width: 46rem; }

/* ---------- closing band ---------- */

.cta-band {
  position: relative; overflow: hidden; border-radius: 1.75rem; padding: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 5vw, 4rem);
  background: var(--invert-bg); color: var(--invert-fg); text-align: center; box-shadow: var(--shadow-float);
}
.cta-band::before {
  content: ""; position: absolute; inset: -40% -10% auto; height: 120%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, color-mix(in oklab, var(--accent) 40%, transparent), transparent 60%);
  filter: blur(30px);
}
.cta-band > * { position: relative; }
.cta-band .h2 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
.cta-band .lede { margin: 1.25rem auto 0; max-width: 34rem; color: var(--invert-muted); }
.cta-band .row { margin-top: 2.25rem; justify-content: center; }
.cta-band .btn-secondary { background: transparent; color: var(--invert-fg); border-color: color-mix(in oklab, var(--invert-fg) 30%, transparent); box-shadow: none; }
.cta-band .btn-secondary:hover { background: color-mix(in oklab, var(--invert-fg) 10%, transparent); }

/* ---------- inner pages ---------- */

.page-head { padding-bottom: 0; text-align: center; }
.page-head .lede { margin: 1.25rem auto 0; max-width: 38rem; }
.page-h1 { font-size: clamp(2.5rem, 6vw, 4rem); margin-top: 0.85rem; }
.page-head + .band { padding-top: clamp(2.5rem, 5vw, 3.5rem); }

.specs { display: grid; grid-template-columns: max-content 1fr; gap: 0.7rem 1.5rem; margin: 1rem 0 0; font-size: 0.9375rem; }
.specs dt { font-weight: 600; }
.specs dd { margin: 0; color: var(--muted); }
@media (max-width: 30rem) { .specs { grid-template-columns: 1fr; gap: 0.15rem; } .specs dd { margin-bottom: 0.6rem; } }

.faq { border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); box-shadow: var(--shadow); }
.faq + .faq { margin-top: 0.75rem; }
.faq summary { cursor: pointer; padding: 1.1rem 1.25rem; font-weight: 600; letter-spacing: -0.01em; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 1.25rem; color: var(--muted); transition: transform .2s; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq > p { padding: 0 1.25rem 1.25rem; color: var(--muted); text-wrap: pretty; }

/* ---------- plans ---------- */

.plans { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 52rem) { .plans { grid-template-columns: 1fr 1.15fr; } }
.plan { display: flex; flex-direction: column; padding: 2rem; }
.plan-pro { position: relative; border-color: transparent; background: var(--surface); box-shadow: var(--shadow-lift); }
.plan-pro::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  background: linear-gradient(160deg, var(--accent), color-mix(in oklab, var(--accent) 30%, var(--line)) 45%, var(--sage));
}
.plan-pro::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: var(--surface); }
.plan-name { margin-top: 0.5rem; font-size: 1.25rem; }
.plan-price { font-size: 2.75rem; font-weight: 700; letter-spacing: -0.045em; margin-top: 1.25rem; line-height: 1; }
.plan-price-per { font-size: 1rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.plan-price-note { font-size: 0.875rem; margin-top: 0.6rem; }
.ticks { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: 0.7rem; font-size: 0.9375rem; color: var(--body); }
.ticks li { padding-left: 1.75rem; position: relative; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.2em; width: 1.05rem; height: 1.05rem; border-radius: 999px;
  background: var(--surface-muted);
}
.ticks li::after {
  content: ""; position: absolute; left: 0.3rem; top: 0.48em; width: 0.45rem; height: 0.25rem;
  border-left: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg);
}
.ticks-accent li::before { background: var(--accent-soft); }
.ticks-accent li::after { border-color: var(--accent); }
.plan-limits { margin-top: auto; padding-top: 1.75rem; }
.plan-limits-head { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.plan-limits ul { margin: 0.75rem 0 0; padding-left: 1.1rem; font-size: 0.875rem; display: grid; gap: 0.4rem; }
.plan-cta { margin-top: 1.75rem; width: 100%; }

/* ---------- download ---------- */

.dl-card { display: grid; gap: 1.5rem; padding: 2rem; align-items: center; }
@media (min-width: 40rem) { .dl-card { grid-template-columns: auto 1fr auto; } }
.app-icon {
  width: 4.5rem; height: 4.5rem; border-radius: 1.1rem; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, color-mix(in oklab, var(--accent) 85%, white), var(--accent-hover)); color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), var(--shadow-lift);
}
.app-icon svg { width: 2.4rem; height: 2.4rem; }
.dl-meta { font-size: 0.875rem; margin-top: 0.35rem; }
.dl-fine { font-size: 0.8125rem; margin-top: 0.5rem; }
.dl-fine code { display: block; width: fit-content; max-width: 100%; margin-top: 0.4rem; font-size: 0.72rem; word-break: break-all; }
.dl-steps { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 1rem; counter-reset: step; }
.dl-steps li { position: relative; padding-left: 2.75rem; font-size: 0.9375rem; color: var(--body); counter-increment: step; }
.dl-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0.05rem; width: 1.75rem; height: 1.75rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700;
  background: var(--accent-soft); color: var(--accent);
}
.dl-steps li + li::after { content: ""; position: absolute; left: 0.85rem; top: -0.9rem; height: 0.8rem; width: 1px; background: var(--line-strong); }
.privacy-fine { margin-top: 1.25rem; font-size: 0.8125rem; padding-top: 1rem; border-top: 1px solid var(--line); }

/* ---------- account ---------- */

.auth { max-width: 30rem; margin: 0 auto; padding: 0 1.25rem; }
.auth .switch { display: flex; }
.auth .switch button { flex: 1; }
.auth form.card, .auth .card { padding: 2rem; }
@media (max-width: 30rem) { .auth form.card, .auth .card { padding: 1.5rem; } }
.auth .form-submit.btn { width: 100%; }
.auth .row.form-submit .btn { flex: 1; }
.acct-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.acct-email { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; margin-top: 0.35rem; word-break: break-all; }

/* ---------- support & legal ---------- */

.answers { display: grid; gap: 0; margin: 0; }
.answers dt { font-weight: 600; padding-top: 1rem; }
.answers dd { margin: 0.35rem 0 1rem; color: var(--muted); font-size: 0.9375rem; }
.answers dd + dt { border-top: 1px solid var(--line); }
.privacy-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.5rem; font-size: 0.9375rem; }
.privacy-list li { padding-left: 1.125rem; position: relative; }
.privacy-list li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 0.375rem; height: 0.375rem; border-radius: 999px; background: currentColor; opacity: 0.45; }

/* ---------- a week with My Prof ---------- */

.week { margin-top: 2.5rem; display: grid; gap: 1rem; position: relative; }
@media (min-width: 56rem) {
  .week { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
  .week::before { content: ""; position: absolute; left: 3rem; right: 3rem; top: 1.6rem; height: 1px; background: var(--line-strong); }
}
.moment { position: relative; padding: 1.5rem; }
.moment-when { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); background: var(--surface); padding-right: 0.5rem; position: relative; }
.moment-when i { width: 0.6rem; height: 0.6rem; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent); display: inline-block; }
.moment .h3 { margin-top: 0.9rem; }
.moment p.muted { font-size: 0.9375rem; text-wrap: pretty; }
.moment ul { list-style: none; padding: 0; margin: 0.9rem 0 0; display: grid; gap: 0.4rem; font-size: 0.875rem; color: var(--body); }
.moment li { padding-left: 1.1rem; position: relative; }
.moment li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.35rem; height: 0.35rem; border-radius: 999px; background: var(--accent); opacity: 0.7; }

/* ---------- overview of everything (landing) ---------- */

.overview { margin-top: 2.5rem; display: grid; gap: 1rem; }
@media (min-width: 40rem) { .overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .overview { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ov { padding: 1.5rem; display: flex; flex-direction: column; }
.ov-head { display: flex; align-items: center; gap: 0.75rem; }
.ov-head .icon-tile { flex: none; }
.ov ul { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.45rem; font-size: 0.9rem; color: var(--body); }
.ov li { padding-left: 1.2rem; position: relative; }
.ov li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.5rem; height: 0.3rem; border-left: 1.5px solid var(--sage); border-bottom: 1.5px solid var(--sage); transform: rotate(-45deg); }
.ov-more { margin-top: auto; padding-top: 1rem; font-size: 0.875rem; }
.ov-more a { color: var(--accent); text-decoration: none; font-weight: 600; }
.ov-more a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- features page ---------- */

.fgroup { display: grid; gap: 1.5rem; padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); }
@media (min-width: 56rem) { .fgroup { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 4rem; } .fgroup-head { position: sticky; top: 5.5rem; align-self: start; } }
.fgroup-head .h2 { margin-top: 0.75rem; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.fgroup-head .lede { margin-top: 1rem; font-size: 1.0625rem; }
.fgroup-head .muted { margin-top: 0.85rem; font-size: 0.9375rem; text-wrap: pretty; }
.flist { display: grid; gap: 0.75rem; }
.frow { padding: 1.25rem 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem; align-items: start; }
.frow .h3 { font-size: 1rem; }
.frow .chip { grid-column: 2; grid-row: 1; }
.frow p.muted { grid-column: 1 / -1; font-size: 0.9375rem; text-wrap: pretty; }
.frow p.muted + p.muted { margin-top: 0.5rem; }
.fine-print { margin-top: 0.75rem; font-size: 0.8125rem; }
.jump { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 1.75rem; }
.jump a { text-decoration: none; font-size: 0.8125rem; font-weight: 600; color: var(--body); border: 1px solid var(--line); background: var(--surface); padding: 0.4rem 0.85rem; border-radius: 999px; }
.jump a:hover { border-color: var(--line-strong); color: var(--foreground); }

/* Feature close-ups replace the desktop overview on phones. The app remains a
   Mac product; the caption distinguishes these editorial examples from a UI. */
.hero-copy { display: flex; flex-direction: column; align-items: center; }
.hero-kicker { order: -1; margin-bottom: 1.1rem; }
.mobile-spotlight { display: none; }
@media (max-width: 47.99rem) {
  .hero { padding-top: 2.5rem; }
  .hero-copy { text-align: left; align-items: stretch; }
  .hero .h1 { margin-top: 0; }
  .hero-lede { margin-top: 1.25rem; font-size: 1.0625rem; }
  .hero-cta { margin-top: 1.5rem; display: grid; gap: 0.65rem; justify-content: stretch; }
  .hero-fine { font-size: 0.8125rem; margin-top: 0.9rem; max-width: 22rem; }
  .hero-stage { margin-top: 2.5rem; padding-bottom: 0; }
  .hero-stage > .app { display: none; }
  .app-side { display: none; }
  .mobile-spotlight { display: block; }
  .spotlight-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.8rem; }
  .spotlight-caption { font-size: 0.6875rem; color: var(--muted); }
  .spotlight-card { border: 1px solid #343b3b; border-radius: 1.4rem; padding: 1.25rem; background: linear-gradient(145deg, #202c2b, #151b20 65%); color: #f4f4f6; box-shadow: 0 20px 45px -25px rgb(10 30 25 / 0.6); }
  .spotlight-top { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: #d0d7d5; padding-bottom: 1.3rem; }
  .spotlight-dot { width: 8px; height: 8px; border-radius: 50%; background: #70d9bd; box-shadow: 0 0 0 4px #70d9bd15; }
  .spotlight-time { margin-left: auto; font-variant-numeric: tabular-nums; color: #a6b5b0; }
  .spotlight-label { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #a6b5b0; }
  .spotlight-card blockquote { margin: 0.65rem 0 1.1rem; font-size: 1.45rem; letter-spacing: -0.025em; line-height: 1.35; font-weight: 500; }
  .spotlight-pin { display: flex; gap: 0.4rem; align-items: center; font-size: 0.8125rem; font-weight: 600; color: #ffaca1; }
  .spotlight-pin > span:first-child { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #ff706320; font-size: 1.1rem; }
  .spotlight-pin-note { margin-left: auto; font-size: 0.6875rem; font-weight: 400; color: #a6b5b0; }
  .spotlight-answer { margin-top: 1.15rem; padding: 1rem; border-radius: 0.85rem; background: #e7f1eb; color: #213d34; font-size: 0.9375rem; line-height: 1.6; }
  .spotlight-answer .spotlight-label { color: #426858; margin-bottom: 0.5rem; }
  .spotlight-followup { display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 1rem; color: #b8c5c0; font-size: 0.8125rem; line-height: 1.5; }
  .spotlight-followup > span { color: #70d9bd; font-size: 1.2rem; }
  .spotlight-followup strong { color: #e7f1eb; font-weight: 500; }
  .spotlight-foot { font-size: 0.8125rem; color: var(--muted); margin-top: 0.9rem; text-align: center; text-wrap: pretty; }
  .strip { margin-top: 2rem; }
  .strip-inner { display: grid; grid-template-columns: 1fr; justify-content: start; gap: 0.85rem; padding-block: 1.25rem; font-size: 0.8125rem; }
  .sec-head.center, .page-head { text-align: left; }
  .sec-head .lede, .page-head .lede { margin-top: 0.85rem; }
  .steps-list { margin-top: 2rem; gap: 2.75rem; }
  .step { gap: 1.25rem; }
  .step + .step { border-top: 1px solid var(--line); padding-top: 2.25rem; }
  .step-num { width: 2rem; height: 2rem; background: var(--accent-soft); color: var(--accent); }
  .step-copy .h2 { margin-top: 0.75rem; font-size: 1.85rem; }
  .step-copy .lede { font-size: 1.0625rem; }
  .step-copy .muted { font-size: 0.9375rem; font-weight: 400; }
  /* Remove nested desktop frames; use that space for readable feature content. */
  .mini { padding: 1rem; font-size: 0.9375rem; border-radius: 1.15rem; }
  .mini > .app-titlebox { display: none; }
  .mini .app-card { padding: 0; border: 0; background: transparent; gap: 0.85rem; }
  .mini > .app-card:first-of-type { margin-top: 0 !important; }
  .app-card-head, .mini-head { flex-wrap: wrap; gap: 0.65rem; }
  .app-card-head > .app-btn { display: none; }
  .app-card-title, .mini-title { font-size: 1rem; }
  .app-card-sub, .mini-sub, .app-note { font-size: 0.8125rem; line-height: 1.5; }
  .app-btn, .app-btn-primary, .mini-btn { font-size: 0.8125rem; padding: 0.5rem 0.65rem; white-space: normal; }
  .app-playrow { flex-wrap: wrap; }
  .app-player { flex-basis: 100%; min-height: 38px; font-size: 0.8125rem; }
  .app-lines { font-size: 0.9375rem; line-height: 1.6; padding: 0; }
  .app-lines li:not(.is-active) { display: none; }
  .app-lines li { padding: 0.85rem; }
  .app-lines time { display: block; font-size: 0.75rem; margin-bottom: 0.25rem; }
  .app-pinrow { flex-wrap: wrap; }
  .app-pin-slice { order: 3; flex-basis: 100%; white-space: normal; font-size: 0.875rem; line-height: 1.5; }
  .app-pin-time { font-size: 0.75rem; }
  .app-expl { font-size: 0.9375rem; line-height: 1.65; gap: 1rem; overflow-wrap: anywhere; }
  .app-eyebrow { font-size: 0.6875rem; margin-bottom: 0.35rem; }
  .src { grid-template-columns: auto minmax(0, 1fr); padding: 0.85rem 0.65rem; gap: 0.35rem 0.6rem; }
  .src-name { font-size: 0.875rem; overflow-wrap: anywhere; }
  .src-ctl, .src-mono { grid-column: 2; grid-row: auto; justify-self: start; font-size: 0.75rem; }
  .src-use { grid-column: 2; flex-wrap: wrap; font-size: 0.75rem; }
  .src-use span { max-width: 100%; }
  .tool-grid { grid-template-columns: 1fr; }
  .tool { padding: 0.85rem; }
  .tool-name { font-size: 0.9375rem; }
  .tool-desc { font-size: 0.8125rem; line-height: 1.5; margin-top: 0.2rem; }
  .mini-field { font-size: 0.875rem; }
  .mini-field-lbl { font-size: 0.6875rem; }
  .saved-row { flex-wrap: wrap; font-size: 0.875rem; }
  .saved-row b { white-space: normal; }
  .chat { font-size: 0.9375rem; line-height: 1.6; }
  .chat-q, .chat-a { max-width: 96%; padding: 0.9rem; }
  .cta-band { padding: 2rem 1.25rem; border-radius: 1.25rem; text-align: left; }
  .cta-band .row { display: grid; justify-content: stretch; margin-top: 1.5rem; }
  .cta-band .h2 { font-size: 2rem; }
  .cta-band .h2 br { display: none; }
  .page-h1 { font-size: clamp(2.2rem, 10vw, 3.5rem); }
  .plan { padding: 1.5rem; }
  .plan-price { font-size: 2.5rem; }
  .plan-price-per { display: inline-block; line-height: 1.5; }
  .dl-card { grid-template-columns: auto minmax(0, 1fr); padding: 1.25rem; gap: 1rem; }
  .app-icon { width: 3rem; height: 3rem; border-radius: 0.8rem; align-self: start; }
  .app-icon svg { width: 1.8rem; height: 1.8rem; }
  .dl-card > .btn { grid-column: 1 / -1; }
  .dl-meta, .dl-fine { overflow-wrap: anywhere; }
  .auth form.card, .auth .card { padding: 1.25rem; }
  .acct-head { flex-wrap: wrap; }
  .auth .switch button { padding-inline: 0.5rem; }
  .field-code { font-size: 1.5rem; letter-spacing: 0.25em; }
  .frow { padding: 1.1rem; gap: 0.65rem; }
  .frow .h3 { line-height: 1.4; }
  .jump { justify-content: flex-start; }
  .jump a { min-height: 44px; display: flex; align-items: center; }
  .week { gap: 0.75rem; }
  .moment { padding: 1.25rem; border-left: 3px solid var(--accent); }
  .overview { gap: 0.75rem; }
  .ov { padding: 1.25rem; }
  .ov-more a { display: inline-flex; min-height: 44px; align-items: center; }
}