:root {
  --page: #fdfcf9;
  --ink: #1b1a14;
  --quiet: #75736a;
  --hair: #e4e0d5;
  --olive: #474622;
  --sand: #bab38c;
  --bar: 52px;
  --gutter: clamp(20px, 6vw, 96px);
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + 16px); }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.5;
  letter-spacing: -0.008em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, video { display: block; max-width: 100%; height: auto; }
figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, p, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }

h1, h2 { font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; }
h2 { font-size: clamp(38px, 5.2vw, 84px); }
h3 { font-size: 1.15em; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--olive);
  color: #fff;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .2s ease;
}
.button:hover { opacity: .86; }
.button--small { min-height: 36px; padding: 0 16px; font-size: 14px; }

.textlink {
  color: var(--olive);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--sand);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

a:focus-visible, button:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }

.bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--bar);
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 clamp(16px, 3vw, 44px);
  background: rgba(253, 252, 249, .82);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(27, 26, 20, .06);
}
.bar__brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.02em; font-size: 16px; text-decoration: none; }
.bar__brand img { width: 22px; height: auto; }
.bar__nav { display: flex; gap: 26px; margin-left: auto; font-size: 14px; }
.bar__nav a { color: var(--quiet); text-decoration: none; }
.bar__nav a:hover { color: var(--ink); }

.launch__stage { padding: calc(var(--bar) + 40px) var(--gutter) 64px; }
.launch__intro { text-align: center; }
.launch__eyebrow { font-size: clamp(18px, 1.7vw, 24px); font-weight: 500; color: var(--quiet); letter-spacing: -0.02em; }
.launch h1 { font-size: clamp(60px, 8.2vw, 136px); margin-top: 6px; }
.launch__offer { font-size: clamp(22px, 2.3vw, 34px); font-weight: 500; letter-spacing: -0.025em; margin-top: 14px; }
.launch__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; margin-top: 22px; }
.launch__proof { margin-top: 14px; font-size: 15px; color: var(--quiet); }
.launch__frame { margin-top: 40px; border-radius: 28px; overflow: hidden; background: #e9e1d0; }
.launch__frame video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.launch__line { margin-top: 40px; font-size: clamp(38px, 5.2vw, 84px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; }
.specs { margin-top: 40px; display: grid; gap: 28px; }
.spec__figure { display: flex; align-items: baseline; gap: .2em; font-size: clamp(44px, 5vw, 72px); font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.spec__figure span { font-size: .34em; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.spec__note { margin-top: 8px; color: var(--quiet); }
.spec__rule { display: none; }
.spec__cta { margin-top: 14px; color: #fff; }

.motion .launch__stage { position: relative; height: 100svh; min-height: 560px; padding: 0; overflow: hidden; }
.motion .launch__intro { position: absolute; z-index: 3; left: 0; right: 0; top: calc(var(--bar) + clamp(16px, 3.4svh, 40px)); padding: 0 20px; }
.motion .launch__frame { position: absolute; inset: 0; margin: 0; z-index: 1; border-radius: 56px; will-change: transform; }
.motion .launch__frame video { position: absolute; left: 0; top: -5%; width: 100%; height: 110%; aspect-ratio: auto; max-width: none; }
.launch__veil { display: none; }
.motion .launch__veil { display: block; position: absolute; inset: 0; opacity: 0; background: linear-gradient(to bottom, rgba(253, 252, 249, .96) 8%, rgba(253, 252, 249, .78) 28%, rgba(253, 252, 249, 0) 58%); }
.motion .launch__line { position: absolute; z-index: 2; left: var(--gutter); top: calc(var(--bar) + 7svh); margin: 0; font-size: clamp(44px, 6vw, 100px); opacity: 0; visibility: hidden; }
.motion .specs {
  --fig: clamp(38px, 7svh, 64px);
  --row: calc(var(--fig) * 1.26);
  --big: 2.5;
  --spot: calc(var(--row) * 3 + 18px);
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  top: calc(var(--bar) + clamp(14px, 4svh, 40px));
  bottom: 0;
  width: min(36vw, 560px);
  margin: 0;
  display: block;
}
.motion .spec__slot { position: relative; height: var(--row); }
.motion .spec__figure { position: absolute; left: 0; bottom: 10px; font-size: var(--fig); transform-origin: 0 100%; opacity: 0; white-space: nowrap; }
.motion .spec__rule { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hair); transform-origin: 0 50%; transform: scaleX(0); }
.motion .spec__note {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--spot) + var(--fig) * var(--big) + 18px);
  margin: 0;
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.38;
  color: var(--quiet);
  opacity: 0;
  visibility: hidden;
}
.motion .spec__cta { margin-top: 20px; }

.proof { padding: clamp(96px, 15vw, 220px) var(--gutter) clamp(80px, 11vw, 160px); }
.proof__score { font-size: 17px; font-weight: 600; color: var(--olive); letter-spacing: -0.015em; }
.proof__quote { margin-top: 24px; max-width: 1120px; }
.proof__quote p { font-size: clamp(28px, 3.5vw, 56px); font-weight: 500; line-height: 1.14; letter-spacing: -0.03em; color: #a7a59a; }
.proof__quote span { color: var(--ink); }
.proof__quote footer { margin-top: 26px; font-size: 16px; color: var(--quiet); }

.third__stage { padding: 0 var(--gutter); }
.third__frame { position: relative; margin-top: 32px; border-radius: 28px; overflow: hidden; background: #d9d3c5; }
.third__frame img { width: 100%; height: 100%; object-fit: cover; }
.third__shade { display: none; }
.third__caption { margin-top: 20px; }
.third__place { font-size: clamp(30px, 4vw, 64px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; }
.third__address { margin-top: 10px; }

.motion .third__stage { position: relative; height: 100svh; min-height: 520px; padding: 0; overflow: hidden; background: var(--page); }
.motion .third__line {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 34vw 1fr;
  align-items: center;
  font-size: clamp(30px, 4.3vw, 80px);
}
.motion .third__word--a { grid-column: 1; text-align: right; }
.motion .third__word--b { grid-column: 3; text-align: left; }
.motion .third__frame { position: absolute; inset: 0; margin: 0; z-index: 1; border-radius: 56px; will-change: transform; }
.motion .third__shade { display: block; position: absolute; inset: 0; opacity: 0; background: linear-gradient(to top, rgba(10, 9, 6, .62) 0, rgba(10, 9, 6, 0) 46%); }
.motion .third__caption { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: clamp(30px, 7svh, 64px); margin: 0; color: #fff; opacity: 0; visibility: hidden; }

.ways { padding: clamp(96px, 13vw, 200px) var(--gutter) clamp(72px, 9vw, 140px); }
.ways__picker { margin-top: clamp(40px, 5vw, 72px); display: grid; gap: 64px; }
.way__photo img { border-radius: 24px; width: auto; max-width: min(100%, var(--max)); }
.way__text { margin-top: 18px; max-width: 30em; }
.way__text h3 { font-size: clamp(28px, 2.8vw, 42px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.08; }
.way__text p { margin-top: 12px; }
.way__classes { color: var(--quiet); font-size: .92em; }
.way__text .textlink { display: inline-block; margin-top: 16px; }

.motion .ways__picker { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 88px); row-gap: 0; grid-template-rows: auto 1fr; }
.motion .way { display: contents; }
.motion .way__photo { grid-column: 1; grid-row: 1 / span 2; height: clamp(440px, 72svh, 680px); display: grid; place-items: center start; transition: opacity .7s cubic-bezier(.3, 0, .2, 1), transform .9s cubic-bezier(.3, 0, .2, 1), visibility .7s; }
.motion .way__photo img { max-height: 100%; width: auto; height: auto; }
.motion .way__text { grid-column: 2; grid-row: 2; margin-top: 32px; transition: opacity .5s ease, visibility .5s; }
.motion .way:not(.is-on) .way__photo { opacity: 0; visibility: hidden; transform: scale(.975); }
.motion .way:not(.is-on) .way__text { opacity: 0; visibility: hidden; }
.tones { grid-column: 2; grid-row: 1; align-self: end; }
.tones__label { font-size: 15px; color: var(--quiet); }
.tones__row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.tone { position: relative; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(27, 26, 20, .14); border-radius: 50%; background: var(--tone); cursor: pointer; }
.tone::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid transparent; transition: border-color .25s ease; }
.tone[aria-checked='true']::after { border-color: var(--olive); }

.teachers { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: clamp(32px, 5vw, 80px); align-items: start; padding: clamp(48px, 6vw, 96px) var(--gutter) clamp(80px, 10vw, 160px) 0; }
.teachers__photo img { width: 100%; border-radius: 0 28px 28px 0; }
.teachers__body h2 { font-size: clamp(34px, 3.6vw, 60px); }
.teachers__list { margin-top: 28px; }
.teachers__list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 11px 0; border-top: 1px solid var(--hair); }
.teachers__list dt { font-weight: 600; letter-spacing: -0.015em; }
.teachers__list dd { color: var(--quiet); text-align: right; font-size: .92em; }
.teachers__quote { margin-top: 30px; }
.teachers__quote footer, .fit__row footer { margin-top: 8px; font-size: 15px; color: var(--quiet); }

.fit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 36vw); gap: clamp(32px, 6vw, 110px); padding: clamp(48px, 7vw, 110px) 0 clamp(72px, 9vw, 140px) var(--gutter); align-items: start; }
.fit__body h2 { max-width: 11em; margin-bottom: clamp(32px, 4vw, 60px); }
.fit__row { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: 12px 32px; padding: 26px 0; border-top: 1px solid var(--hair); }
.fit__row blockquote { margin-top: 14px; color: var(--quiet); }
.fit__row .textlink { display: inline-block; margin-top: 10px; }
.fit__photo { position: sticky; top: calc(var(--bar) + 20px); }
.fit__photo img { width: 100%; max-height: calc(100svh - var(--bar) - 40px); object-fit: cover; object-position: 50% 30%; border-radius: 28px 0 0 28px; }

.box { padding: clamp(72px, 10vw, 160px) var(--gutter); text-align: center; }
.box__lead { margin-top: 12px; font-size: clamp(20px, 1.9vw, 28px); letter-spacing: -0.02em; color: var(--quiet); }
.box__photo { margin-top: clamp(36px, 4.5vw, 64px); }
.box__photo img { width: min(100%, 1086px); margin: 0 auto; border-radius: 24px; }
.box__list { max-width: 880px; margin: clamp(40px, 5vw, 72px) auto 0; text-align: left; font-size: clamp(23px, 2.4vw, 36px); font-weight: 500; line-height: 1.2; letter-spacing: -0.028em; color: #9a988c; }
.box__list li + li { margin-top: .85em; }
.box__list strong { font-weight: 500; color: var(--ink); }
.box__missing strong { color: var(--olive); }

.compare { max-width: calc(1080px + var(--gutter) * 2); margin: 0 auto; padding: clamp(40px, 6vw, 96px) var(--gutter) clamp(72px, 9vw, 140px); }
.compare__table { width: 100%; margin-top: clamp(28px, 3.5vw, 52px); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.compare__table thead th { font-size: 14px; font-weight: 500; color: var(--quiet); text-align: right; padding: 0 0 12px; }
.compare__table thead th:first-child { text-align: left; }
.compare__table tbody tr { border-top: 1px solid var(--hair); }
.compare__table tbody th { text-align: left; vertical-align: top; font-weight: 600; letter-spacing: -0.02em; padding: 20px 16px 20px 0; font-size: clamp(18px, 1.7vw, 24px); }
.compare__table small { display: block; font-size: 15px; font-weight: 400; color: var(--quiet); letter-spacing: -0.005em; margin-top: 2px; }
.compare__table td { text-align: right; padding: 20px 0 20px 16px; vertical-align: top; color: var(--quiet); white-space: nowrap; width: 14%; }
.compare__table td:last-child { color: var(--ink); font-weight: 600; font-size: clamp(20px, 1.9vw, 28px); letter-spacing: -0.03em; white-space: nowrap; }
.compare__lead { border-top: 2px solid var(--olive) !important; }
.compare__lead th { font-size: clamp(24px, 2.6vw, 40px) !important; letter-spacing: -0.035em !important; }
.compare__lead td:last-child { font-size: clamp(36px, 4.4vw, 68px) !important; line-height: 1; letter-spacing: -0.05em !important; }
.compare__lead .button { display: flex; width: max-content; margin: 12px 0 0 auto; letter-spacing: -0.01em; }
.compare__note { margin-top: 18px; font-size: 14px; color: var(--quiet); }

.end { padding: clamp(72px, 10vw, 160px) 0 0; text-align: center; }
.end h2 { font-size: clamp(44px, 7.2vw, 120px); padding: 0 20px; }
.end h2 span { display: inline-block; }
.end__offer { margin-top: 14px; font-size: clamp(20px, 2vw, 30px); letter-spacing: -0.02em; }
.end .button { margin-top: 24px; }
.end__photo { margin-top: clamp(48px, 6vw, 88px); }
.end__photo img { width: 100%; height: clamp(320px, 62vw, 860px); object-fit: cover; }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 64px; padding: 40px var(--gutter) 56px; font-size: 16px; color: var(--quiet); }
.foot__where { font-style: normal; }
.foot strong { color: var(--ink); font-weight: 600; }
.foot a { color: var(--ink); text-decoration: none; }
.foot a:hover { text-decoration: underline; }

.sticky { display: none; }

@media (max-width: 1040px) {
  .bar__nav { display: none; }
  .bar .button { margin-left: auto; }
}

@media (max-width: 760px) {
  :root { --gutter: 20px; }

  .bar { gap: 12px; }
  .bar .button { display: none; }

  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }

  .sticky {
    position: fixed;
    inset: auto 0 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) 20px;
    background: rgba(253, 252, 249, .88);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid rgba(27, 26, 20, .08);
  }
  .sticky p { font-weight: 600; font-size: 15px; line-height: 1.2; letter-spacing: -0.015em; }
  .sticky span { display: block; font-weight: 400; font-size: 14px; color: var(--quiet); }
  .sticky .button { min-height: 44px; padding: 0 26px; font-size: 16px; }

  .launch h1 { font-size: clamp(54px, 15.5vw, 74px); line-height: .98; max-width: 6.2em; margin-left: auto; margin-right: auto; }
  .launch__offer { font-size: 22px; }
  .launch__proof { font-size: 14px; max-width: 18em; margin-left: auto; margin-right: auto; }

  .motion .launch__frame { border-radius: 40px; }
  .motion .launch__frame video { top: 0; height: 100%; }
  .motion .launch__line { font-size: 46px; top: calc(var(--bar) + 24px); }
  .motion .specs {
    --fig: clamp(26px, 4.2svh, 34px);
    --big: 2.3;
    --spot: calc(var(--row) * 3 + 8px);
    left: var(--gutter);
    right: var(--gutter);
    top: calc(var(--bar) + 8px);
    width: auto;
  }
  .motion .spec__figure { bottom: 6px; }
  .motion .spec__figure span { font-size: .5em; }
  .motion .spec__note { font-size: 16px; top: calc(var(--spot) + var(--fig) * var(--big) + 10px); }
  .motion .spec__cta { display: none; }

  .motion .third__line { grid-template-columns: 1fr; grid-template-rows: 1fr 44svh 1fr; text-align: center; font-size: 11vw; justify-items: center; }
  .motion .third__word--a { grid-column: 1; grid-row: 1; align-self: end; text-align: center; padding-bottom: 14px; }
  .motion .third__word--b { grid-column: 1; grid-row: 3; align-self: start; text-align: center; padding-top: 14px; }
  .motion .third__frame { border-radius: 40px; }
  .motion .third__caption { bottom: calc(86px + env(safe-area-inset-bottom)); }

  .motion .ways__picker { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .motion .way__photo { grid-column: 1; grid-row: 1; height: min(112vw, 56svh); place-items: stretch; }
  .motion .way__photo img { width: 100%; height: 100%; max-width: none; max-height: none; min-height: 0; object-fit: cover; object-position: var(--pos, 60% 40%); }
  .tones { grid-column: 1; grid-row: 2; margin-top: 22px; align-self: start; }
  .motion .way__text { grid-column: 1; grid-row: 3; margin-top: 22px; }

  .teachers { grid-template-columns: minmax(0, 1fr); padding-right: 0; }
  .teachers__photo { padding-right: var(--gutter); }
  .teachers__body { padding: 0 var(--gutter); }

  .fit { grid-template-columns: minmax(0, 1fr); padding-right: 0; }
  .fit__body { padding-right: var(--gutter); }
  .fit__row { grid-template-columns: minmax(0, 1fr); }
  .fit__photo { position: static; order: -1; padding-left: 28vw; }
  .fit__photo img { max-height: 92vw; }

  .compare__table thead th:nth-child(2), .compare__table td:nth-child(2) { display: none; }
  .compare__table td { width: auto; }

  .foot { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .way__photo, .way__text, .button { transition: none; }
}
