/**
 * Captain's Briefing landing — vanilla CSS (reference: Landing.reference.tsx).
 * Mobile-first. Hero & 3-col grids: 1 col mobile, 3 cols from 768px (fixes Tailwind cascade quirk in reference).
 */
:root {
  --fg: #1d1d1f;
  --fg-muted: #424245;
  --fg-faint: #86868b;
  --bg: #ffffff;
  --bg-soft: #f5f5f7;
  --border: rgba(0, 0, 0, 0.07);
  --border-soft: rgba(0, 0, 0, 0.06);
  --border-black-12: rgba(0, 0, 0, 0.12);
  --border-black-08: rgba(0, 0, 0, 0.08);
  --divider: rgba(0, 0, 0, 0.1);
  --black-02: rgba(0, 0, 0, 0.02);
  --black-04: rgba(0, 0, 0, 0.04);
  --black-05: rgba(0, 0, 0, 0.05);
  --black-06: rgba(0, 0, 0, 0.06);
  --black-07: rgba(0, 0, 0, 0.07);
  --black-08: rgba(0, 0, 0, 0.08);
  --black-10: rgba(0, 0, 0, 0.1);
  --accent-blue: #007aff;
  --accent-blue-deep: #0055b3;
  --accent-green: #34c759;
  --accent-orange: #ff9500;
  --accent-red: #ff3b30;
  --accent-purple-soft: #c4c2f5;
  --accent-purple-bg: rgba(88, 86, 214, 0.3);
  --accent-blue-10: rgba(0, 122, 255, 0.1);
  --feature-blue-bg: #e6f1fb;
  --feature-blue-icon: #185fa5;
  --feature-green-bg: #eaf3de;
  --feature-green-icon: #3b6d11;
  --feature-purple-bg: #eeedfe;
  --feature-purple-icon: #534ab7;
  --feature-red-bg: #fcebeb;
  --feature-red-icon: #a32d2d;
  --deep-amber-bg: #faeeda;
  --deep-amber-icon: #854f0b;
  --tutor-bubble: #042c53;
  --compare-partial: #ff9500;
  --compare-check: #34c759;
  --compare-x: #c7c7cc;
  --radius-7: 7px;
  --radius-9: 9px;
  --radius-10: 10px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-20: 20px;
  --container: 900px;
  --container-sm: 780px;
  --container-cta: 860px;
  --hero-max: 760px;
  --lead-max: 520px;
  --font-display: -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, sfmono-regular, menlo, monospace;
  --bp-md: 768px;
  --bp-tutor: 900px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-display);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

p {
  margin: 0;
}

h1, h2, h3 {
  margin: 0;
  font-weight: normal;
}

/* Icons: external sprite ./assets/icons.svg */
.icon {
  display: block;
  flex-shrink: 0;
  color: inherit;
}
.icon use {
  pointer-events: none;
}

/* Layout */
.page {
  min-height: 100vh;
  background: var(--bg);
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 2rem;
}

.container--narrow {
  max-width: var(--container-sm);
}

/* Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding-inline: 2.5rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 0.5px solid var(--border);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav__logo {
  width: 24px;
  height: 24px;
  color: var(--fg);
}

.nav__title {
  font-size: 14px;
  color: var(--fg);
  letter-spacing: -0.01em;
}

.nav__links {
  display: none;
  align-items: center;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .nav__links {
    display: flex;
  }
}

.nav__link {
  font-size: 13px;
  color: var(--fg-muted);
  transition: color 0.15s ease;
}
.nav__link:hover {
  color: var(--fg);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: var(--radius-9);
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.btn--nav-ghost {
  font-size: 13px;
  font-weight: 400;
  padding: 7px 16px;
  letter-spacing: -0.01em;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--border-black-12);
}
.btn--nav-ghost:hover {
  background: var(--black-04);
}

.btn--nav-solid {
  font-size: 13px;
  font-weight: 500;
  padding: 7px 16px;
  letter-spacing: -0.01em;
  color: #fff;
  background: var(--fg);
}
.btn--nav-solid:hover {
  opacity: 0.8;
}

.btn--primary {
  font-size: 14px;
  font-weight: 500;
  padding: 11px 24px;
  letter-spacing: -0.01em;
  color: #fff;
  background: var(--fg);
  border-radius: var(--radius-10);
}
.btn--primary:hover {
  opacity: 0.8;
}

.btn--secondary {
  font-size: 14px;
  padding: 11px 24px;
  letter-spacing: -0.01em;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border-black-12);
  border-radius: var(--radius-10);
}
.btn--secondary:hover {
  background: var(--bg-soft);
}

.btn--secondary-light:hover {
  background: #ebebeb;
}

.btn--plan {
  width: 100%;
  padding: 10px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-9);
  background: var(--bg-soft);
  color: var(--fg);
}
.btn--plan:hover {
  opacity: 0.8;
}
.plan--featured .btn--plan {
  background: #fff;
  color: var(--fg);
}

/* Hero */
.hero {
  text-align: center;
  padding: 5rem 2rem 4rem;
}

.hero__inner {
  max-width: var(--hero-max);
  margin-inline: auto;
}

.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 5px 12px;
  margin-bottom: 1.75rem;
  background: var(--bg-soft);
  border: 1px solid var(--black-08);
  border-radius: 999px;
}
.hero__pill .icon {
  width: 13px;
  height: 13px;
  color: var(--fg-faint);
}
.hero__pill span {
  font-size: 11px;
  color: var(--fg-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Reference Tailwind was text-[52px] sm:text-[36px] md:text-[52px] (likely unintended). Intent: smaller on phone. */
.hero__title {
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--fg);
  margin-bottom: 1.25rem;
}
@media (min-width: 768px) {
  .hero__title {
    font-size: 52px;
  }
}

.hero__title em {
  font-style: italic;
  color: var(--fg-faint);
}

.hero__lead {
  font-size: 17px;
  color: var(--fg-faint);
  line-height: 1.625;
  letter-spacing: -0.01em;
  max-width: var(--lead-max);
  margin: 0 auto 2rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.hero__note {
  font-size: 12px;
  color: var(--fg-faint);
}

/* App preview */
.preview-wrap {
  max-width: var(--container);
  margin: 0 auto 5rem;
  padding: 0 2rem;
}

.preview {
  background: var(--bg-soft);
  border-radius: var(--radius-16);
  overflow: hidden;
  border: 1px solid var(--border-soft);
}

.preview__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid var(--border-soft);
}
.preview__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.preview__dot--r { background: #ff5f57; }
.preview__dot--y { background: #ffbd2e; }
.preview__dot--g { background: #28c840; }

.preview__body {
  padding: 1.5rem;
}

.mini-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  margin-bottom: 1rem;
  background: #fff;
  border-radius: var(--radius-10);
  border: 0.5px solid var(--border-soft);
}

.mini-nav__left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.mini-brand {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.mini-brand .icon {
  width: 18px;
  height: 18px;
}
.mini-brand span {
  font-size: 11px;
  color: var(--fg);
  letter-spacing: -0.01em;
}

.mini-nav__links {
  display: none;
  align-items: center;
  gap: 2px;
  margin-left: 0.5rem;
}
@media (min-width: 640px) {
  .mini-nav__links {
    display: flex;
  }
}

.mini-nav__link {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 10px;
  letter-spacing: -0.01em;
  color: var(--fg-faint);
}
.mini-nav__link--active {
  background: var(--black-06);
  color: var(--fg);
  font-weight: 500;
}

.mini-nav__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mini-meta {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--bg-soft);
  border-radius: 6px;
}
@media (min-width: 640px) {
  .mini-meta {
    display: flex;
  }
}
.mini-meta span:first-child {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg);
}
.mini-meta span:last-child {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg-faint);
  margin-left: 4px;
}

.mini-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--fg);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: 500;
}

.mini-greet {
  margin-bottom: 1rem;
}
.mini-greet__date {
  font-size: 9px;
  color: var(--fg-faint);
  margin-bottom: 2px;
}
.mini-greet__hi {
  font-size: 18px;
  color: var(--fg);
  letter-spacing: -0.02em;
}

.mini-stats {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  padding-inline: 0.75rem;
  margin-bottom: 1rem;
}
.mini-stat {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.mini-stat + .mini-stat {
  border-left: 1px solid var(--divider);
  padding-left: 1.25rem;
}
.mini-stat__val {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}
.mini-stat__val--fg { color: var(--fg); }
.mini-stat__val--green { color: var(--accent-green); }
.mini-stat__val--orange { color: var(--accent-orange); }
.mini-stat__lbl {
  font-size: 9px;
  color: var(--fg-faint);
  margin-top: 2px;
}

.mini-list {
  background: #fff;
  border-radius: var(--radius-10);
  overflow: hidden;
  margin-bottom: 1rem;
  border: 0.5px solid var(--border-soft);
}

.mini-row {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 0.5px solid var(--border-soft);
}
.mini-row:last-child {
  border-bottom: none;
}

.mini-badge {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  flex-shrink: 0;
}
.mini-badge--com { background: var(--accent-green); }
.mini-badge--met { background: var(--accent-blue); }
.mini-badge--alw { background: var(--accent-orange); }
.mini-badge--pof { background: var(--accent-red); }

.mini-badge span {
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 500;
  color: #fff;
}

.mini-row__name {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--fg);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-track {
  width: 40px;
  height: 2px;
  border-radius: 999px;
  background: var(--black-06);
  margin-right: 8px;
  overflow: hidden;
}
.mini-track__fill {
  height: 100%;
  border-radius: 999px;
}
.mini-row--com .mini-track__fill { width: 82%; background: var(--accent-green); }
.mini-row--met .mini-track__fill { width: 71%; background: var(--accent-blue); }
.mini-row--alw .mini-track__fill { width: 58%; background: var(--accent-orange); }
.mini-row--pof .mini-track__fill { width: 44%; background: var(--accent-red); }

.mini-row__pct {
  font-family: var(--font-mono);
  font-size: 10px;
}
.mini-row--com .mini-row__pct { color: var(--accent-green); }
.mini-row--met .mini-row__pct { color: var(--accent-blue); }
.mini-row--alw .mini-row__pct { color: var(--accent-orange); }
.mini-row--pof .mini-row__pct { color: var(--accent-red); }

.preview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .preview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.preview-card--dark {
  background: var(--fg);
  border-radius: var(--radius-10);
  padding: 12px;
}
.preview-card--dark h3 {
  font-size: 11px;
  color: #fff;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.preview-card--dark p {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
}
.preview-card--dark__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
}
.preview-card--dark__cta span {
  font-size: 9px;
  color: #fff;
  font-weight: 500;
}

.preview-card--light {
  background: #fff;
  border-radius: var(--radius-10);
  padding: 12px;
  border: 0.5px solid var(--border-soft);
}
.preview-card--light h4 {
  font-size: 9px;
  color: var(--fg-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.pcl-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}
.pcl-row + .pcl-row {
  border-top: 0.5px solid var(--black-05);
}
.pcl-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}
.pcl-swatch--o { background: var(--accent-orange); }
.pcl-swatch--r { background: var(--accent-red); }
.pcl-row span:nth-child(2) {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pcl-action {
  font-size: 10px;
  color: var(--accent-blue);
}

/* Section intros */
.section-intro {
  text-align: center;
  margin-bottom: 3rem;
}
.section-kicker {
  font-size: 11px;
  color: var(--fg-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}
.section-title {
  font-size: 36px;
  letter-spacing: -0.02em;
  color: var(--fg);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}
.section-title--tight {
  line-height: 1.1;
}
.section-lead {
  font-size: 15px;
  color: var(--fg-faint);
  letter-spacing: -0.01em;
  line-height: 1.625;
  max-width: var(--lead-max);
  margin-inline: auto;
}
.section-lead--modes {
  margin-bottom: 3rem;
}
.section-lead--wide {
  max-width: none;
}
.section-intro--compare {
  margin-bottom: 2.5rem;
}

/* Features */
.features {
  padding: 0 2rem 6rem;
}
.features .container {
  padding-inline: 0;
}
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border-soft);
  border-radius: var(--radius-14);
  overflow: hidden;
}
@media (min-width: 768px) {
  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.feature-card {
  background: #fff;
  padding: 1.5rem;
}
.feature-card__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-9);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  background: var(--fc-bg);
}
.feature-card__icon .icon {
  width: 18px;
  height: 18px;
  color: var(--fc-icon);
}
.feature-card h3 {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
  line-height: 1.375;
}
.feature-card p {
  font-size: 13px;
  color: var(--fg-faint);
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.feature-card--brain { --fc-bg: var(--feature-blue-bg); --fc-icon: var(--feature-blue-icon); }
.feature-card--sparkles { --fc-bg: var(--feature-green-bg); --fc-icon: var(--feature-green-icon); }
.feature-card--cert { --fc-bg: var(--feature-green-bg); --fc-icon: var(--feature-green-icon); }
.feature-card--map { --fc-bg: var(--feature-purple-bg); --fc-icon: var(--feature-purple-icon); }
.feature-card--alert { --fc-bg: var(--feature-red-bg); --fc-icon: var(--feature-red-icon); }
.feature-card--chart { --fc-bg: var(--feature-blue-bg); --fc-icon: var(--feature-blue-icon); }

/* Modes */
.modes {
  padding: 0 2rem 6rem;
}
.modes .container {
  padding-inline: 0;
}
.mode-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .mode-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.mode-card {
  border-radius: var(--radius-16);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: var(--bg-soft);
}
.mode-card--ai {
  background: var(--fg);
  border-color: var(--fg);
}

.mode-card__top {
  padding: 1.25rem 1.25rem 1rem;
}
.mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}
.mode-badge .icon {
  width: 11px;
  height: 11px;
}
.mode-badge--classic {
  background: var(--accent-blue-10);
  color: var(--accent-blue-deep);
}
.mode-badge--ai {
  background: var(--accent-purple-bg);
  color: var(--accent-purple-soft);
}

.mode-card h3 {
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin-bottom: 0.5rem;
}
.mode-card--ai h3 {
  color: #fff;
}
.mode-card__lead {
  font-size: 13px;
  color: var(--fg-faint);
  line-height: 1.625;
  letter-spacing: -0.01em;
}
.mode-card--ai .mode-card__lead {
  color: rgba(255, 255, 255, 0.5);
}

.mode-card__body {
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--black-05);
}
.mode-card--ai .mode-card__body {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.q-box {
  background: #fff;
  border-radius: var(--radius-10);
  padding: 12px;
  margin-bottom: 0.5rem;
}
.mode-card--ai .q-box {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.q-box__meta {
  font-size: 9px;
  color: var(--fg-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.mode-card--ai .q-box__meta {
  color: rgba(255, 255, 255, 0.35);
}

.q-box p {
  font-size: 13px;
  line-height: 1.375;
  color: var(--fg);
}
.mode-card--ai .q-box p {
  color: #fff;
}

.opt-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-7);
  background: #fff;
  border: 1px solid var(--black-07);
}
.opt--correct {
  border-color: rgba(52, 199, 89, 0.4);
  background: rgba(52, 199, 89, 0.07);
}
.mode-card--ai .opt {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.mode-card--ai .opt--correct {
  background: rgba(52, 199, 89, 0.15);
  border: 1px solid rgba(52, 199, 89, 0.4);
}

.opt__letter {
  font-family: var(--font-mono);
  font-size: 9px;
  width: 12px;
  color: var(--fg-faint);
}
.opt--correct .opt__letter {
  color: var(--accent-green);
}
.mode-card--ai .opt__letter {
  color: rgba(255, 255, 255, 0.3);
}
.mode-card--ai .opt--correct .opt__letter {
  color: var(--accent-green);
}

.opt__text {
  font-size: 11px;
  color: var(--fg);
}
.mode-card--ai .opt__text {
  color: rgba(255, 255, 255, 0.8);
}

/* Tutor */
.tutor {
  padding: 0 2rem 6rem;
}
.tutor .container {
  padding-inline: 0;
}

.tutor-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
}
@media (min-width: 900px) {
  .tutor-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    align-items: start;
    gap: 1rem;
  }
}

.tutor-quiz {
  background: var(--bg-soft);
  border-radius: var(--radius-16);
  padding: 1.5rem;
}

.tutor-bar {
  height: 2px;
  background: #e8e8ed;
  border-radius: 999px;
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.tutor-bar__fill {
  height: 100%;
  width: 45%;
  border-radius: 999px;
  background: var(--accent-blue);
}

.tutor-quiz__row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.tutor-quiz__row span {
  font-size: 11px;
  color: var(--fg-faint);
}
.tutor-quiz__row .mono {
  font-family: var(--font-mono);
}

.tutor-quiz__q {
  font-size: 16px;
  line-height: 1.375;
  color: var(--fg);
  margin-bottom: 1.25rem;
}

.tutor-opts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.tutor-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-9);
  background: #fff;
  border: 1px solid var(--black-07);
}
.tutor-opt--wrong {
  border-color: rgba(255, 59, 48, 0.35);
  background: rgba(255, 59, 48, 0.07);
}
.tutor-opt--correct {
  border-color: rgba(52, 199, 89, 0.35);
  background: rgba(52, 199, 89, 0.07);
}
.tutor-opt__l {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-faint);
  width: 14px;
}
.tutor-opt span:last-child {
  font-size: 12px;
  color: var(--fg);
}

.tutor-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.ta-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fg-faint);
}
.ta-btn .icon {
  width: 14px;
  height: 14px;
}

.tutor-chat {
  background: #fff;
  border-radius: var(--radius-16);
  overflow: hidden;
  border: 1px solid var(--black-08);
}
.tutor-chat__head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.tutor-chat__head h3 {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.tutor-chat__head p {
  font-size: 11px;
  color: var(--fg-faint);
  margin-top: 2px;
}

.tutor-chat__body {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bubble {
  border-radius: var(--radius-10);
  padding: 12px;
  max-width: 85%;
}
.bubble--user {
  align-self: flex-end;
  background: var(--bg-soft);
}
.bubble--user p {
  font-size: 11.5px;
  color: var(--fg);
  line-height: 1.625;
}
.bubble--tutor {
  background: var(--tutor-bubble);
}
.bubble--tutor .bubble__who {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 4px;
}
.bubble--tutor p {
  font-size: 11.5px;
  line-height: 1.625;
  color: rgba(255, 255, 255, 0.85);
}

.tutor-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 16px;
  border-top: 1px solid var(--black-05);
}
.tutor-chip {
  font-size: 10px;
  color: var(--fg);
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--black-10);
}

.tutor-input {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  border-top: 1px solid var(--black-05);
}
.tutor-input input {
  flex: 1;
  border: none;
  border-radius: var(--radius-9);
  padding: 8px 12px;
  font-size: 11px;
  background: var(--bg-soft);
  color: var(--fg-faint);
  outline: none;
}
.tutor-input button {
  background: var(--fg);
  color: #fff;
  border-radius: var(--radius-9);
  padding: 8px 12px;
  font-size: 11px;
}

/* Deep */
.deep {
  padding: 0 2rem 6rem;
}
.deep .container {
  padding-inline: 0;
}
.deep-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 768px) {
  .deep-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.deep-card {
  background: var(--bg-soft);
  border-radius: var(--radius-14);
  padding: 1.5rem;
}
.deep-card__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-9);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  background: var(--dc-bg);
}
.deep-card__icon .icon {
  width: 18px;
  height: 18px;
  color: var(--dc-icon);
}
.deep-card h3 {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}
.deep-card > p {
  font-size: 13px;
  color: var(--fg-faint);
  line-height: 1.5;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}
.deep-card__ex {
  background: #fff;
  border-radius: var(--radius-9);
  padding: 12px;
}
.deep-card__ex p:first-child {
  font-size: 9px;
  color: var(--fg-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.deep-card__ex p:last-child {
  font-size: 11.5px;
  color: var(--fg);
  line-height: 1.625;
  font-style: italic;
}

.deep-card--bulb { --dc-bg: var(--feature-blue-bg); --dc-icon: var(--feature-blue-icon); }
.deep-card--msg { --dc-bg: var(--feature-green-bg); --dc-icon: var(--feature-green-icon); }
.deep-card--q { --dc-bg: var(--deep-amber-bg); --dc-icon: var(--deep-amber-icon); }

/* Compare */
.compare {
  padding: 0 2rem 6rem;
}
.compare .container {
  padding-inline: 0;
}
.compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.compare-table {
  min-width: 480px;
  background: #fff;
  border-radius: var(--radius-14);
  overflow: hidden;
  border: 1px solid var(--black-07);
}

.compare-head,
.compare-row {
  display: grid;
  grid-template-columns: 1fr 120px 120px 120px;
}

.compare-head > div {
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 500;
  border-bottom: 1px solid var(--border-soft);
}
.compare-head__feature {
  color: var(--fg);
}
.compare-head__cb {
  text-align: center;
  color: #fff;
  background: var(--fg);
  border-bottom: 1px solid var(--border-soft);
}
.compare-head__col {
  text-align: center;
  color: var(--fg-muted);
  border-bottom: 1px solid var(--border-soft);
}

.compare-row {
  border-bottom: 1px solid var(--black-05);
}
.compare-row:last-child {
  border-bottom: none;
}
.compare-row__feature {
  padding: 11px 14px;
  font-size: 13px;
  color: var(--fg-muted);
  display: flex;
  align-items: center;
}

.compare-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 14px;
}
.compare-cell--cb {
  background: var(--black-02);
}
.compare-cell--partial span {
  font-size: 11px;
  font-weight: 500;
  color: var(--compare-partial);
}
.compare-cell .icon {
  width: 16px;
  height: 16px;
}
.compare-cell--yes .icon {
  color: var(--compare-check);
}
.compare-cell--no .icon {
  color: var(--compare-x);
}

/* Pricing */
.pricing {
  padding: 0 2rem 6rem;
  text-align: center;
}
.pricing .container {
  padding-inline: 0;
}
.pricing__head {
  margin-bottom: 2.5rem;
}
.pricing__head h2 {
  font-size: 36px;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin-bottom: 0.75rem;
}
.pricing__head p {
  font-size: 15px;
  color: var(--fg-faint);
  letter-spacing: -0.01em;
}

.plan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  text-align: left;
}
@media (min-width: 768px) {
  .plan-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.plan {
  border-radius: var(--radius-14);
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--black-08);
}
.plan--featured {
  background: var(--fg);
  border-color: var(--fg);
}
.plan__period {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
  color: var(--fg-faint);
}
.plan--featured .plan__period {
  color: rgba(255, 255, 255, 0.4);
}
.plan__price {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 4px;
  color: var(--fg);
}
.plan--featured .plan__price {
  color: #fff;
}
.plan__per {
  font-size: 11px;
  margin-bottom: 1.25rem;
  color: var(--fg-faint);
}
.plan--featured .plan__per {
  color: rgba(255, 255, 255, 0.4);
}

.plan__feats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}
.plan__feat {
  display: flex;
  align-items: center;
  gap: 6px;
}
.plan__feat .icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--accent-green);
}
.plan--featured .plan__feat .icon {
  color: rgba(255, 255, 255, 0.5);
}
.plan__feat span {
  font-size: 12.5px;
  letter-spacing: -0.01em;
  color: var(--fg-muted);
}
.plan--featured .plan__feat span {
  color: rgba(255, 255, 255, 0.7);
}

/* Final CTA */
.cta-final {
  max-width: var(--container-cta);
  margin: 0 auto 5rem;
  padding: 0 2rem;
}
.cta-final__box {
  background: var(--bg-soft);
  border-radius: var(--radius-20);
  padding: 4rem 2rem;
  text-align: center;
}
.cta-final h2 {
  font-size: 36px;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin-bottom: 0.75rem;
}
.cta-final p {
  font-size: 15px;
  color: var(--fg-faint);
  letter-spacing: -0.01em;
  margin-bottom: 2rem;
}
.cta-final__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  justify-content: center;
}

/* Footer */
.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 2.5rem;
  border-top: 0.5px solid var(--border);
}
.footer span {
  font-size: 12px;
  color: var(--fg-faint);
}
.footer__links {
  display: flex;
  gap: 1rem;
}
.footer__links a {
  font-size: 12px;
  color: var(--fg-faint);
  cursor: pointer;
  transition: color 0.15s ease;
}
.footer__links a:hover {
  color: var(--fg);
}