/* =========================================================================
   Planetary Online (/online) — page styles.
   Only tokens from planetary.css; font sizes in px (see design.md).
   ========================================================================= */

/* ---------- hero ---------- */
.online-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-7) var(--sp-8);
  align-items: center;
}
.online-hero h1 { font-size: calc(var(--fs-display) * 0.75); max-width: 20ch; }
.online-hero .lead { max-width: 54ch; }
.online-hero__note { margin-top: var(--sp-4); font-size: var(--fs-caption); color: var(--ps-on-dark-soft); }

.online-globe { margin: 0; position: relative; }
.online-globe__stage { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.online-globe__canvas {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  cursor: grab; touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
.online-globe__canvas.is-dragging { cursor: grabbing; }
.online-globe__toggle { position: absolute; right: 4%; bottom: 4%; }

.online-globe__legend { margin-top: var(--sp-3); font-size: var(--fs-caption); line-height: 1.4; color: var(--ps-on-dark-soft); }
.online-globe__legend ul { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin: var(--sp-3) 0 0; padding: 0; list-style: none; color: var(--ps-on-dark); font-weight: 500; }
.online-globe__legend li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.online-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--house); flex: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08); }
.online-dot--starborne { --house: var(--house-starborne); }
.online-dot--ryuken { --house: var(--house-ryuken); }
.online-dot--blackstone { --house: var(--house-blackstone); }

@media (max-width: 900px) {
  .online-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .online-globe { max-width: 520px; width: 100%; margin-inline: auto; }
}

/* ---------- definition ---------- */
.online-definition {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: var(--sp-5) var(--sp-8);
  align-items: start;
}
.online-definition__body > * + * { margin-top: var(--sp-4); }
.online-definition__text {
  font-size: var(--fs-lead); line-height: 1.6; font-weight: 300; letter-spacing: -0.01em;
  color: var(--ps-ink); max-width: 64ch;
}
@media (max-width: 900px) { .online-definition { grid-template-columns: minmax(0, 1fr); } }

/* ---------- closing statements ---------- */
.online-statement {
  margin-top: var(--sp-7); max-width: 40ch;
  font-size: var(--fs-h4); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em;
}
.online-quote { margin-top: var(--sp-7); }

/* ---------- community (on nave) ---------- */
.online-pillars {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-5);
  margin: var(--sp-8) 0 0; padding: 0; list-style: none;
}
.online-pillars li { border-top: 1px solid var(--ps-line-dark); padding-top: var(--sp-5); }
.online-pillars .icon { width: 24px; height: 24px; color: var(--ps-glow); }
.online-pillars h3 { margin-top: var(--sp-4); font-size: var(--fs-h4); line-height: 1.3; color: #fff; }
.online-pillars p { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--ps-on-dark-soft); }
.online-care {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  margin-top: var(--sp-7); padding: var(--sp-4) var(--sp-5); max-width: 76ch;
  border: 1px solid var(--ps-line-dark); border-radius: var(--r-md);
  font-size: var(--fs-caption); line-height: 1.5; color: var(--ps-on-dark-soft);
}
.online-care .icon { margin-top: 1px; color: var(--ps-glow); }
@media (max-width: 767px) { .online-pillars { grid-template-columns: minmax(0, 1fr); } }

/* ---------- in-person layer ---------- */
.online-hybrid__media { aspect-ratio: 1600 / 591; margin: 0 0 var(--sp-7); }
.online-hybrid__close {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-6) var(--sp-8); align-items: center; margin-top: var(--sp-8);
}
.online-hybrid__close .signage li { font-size: clamp(20px, 2.3vw, 32px); }
.online-hybrid__close > p { max-width: 52ch; font-size: var(--fs-lead); line-height: 1.5; font-weight: 300; color: var(--ps-ink); }
@media (max-width: 900px) { .online-hybrid__close { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .online-hybrid__media { aspect-ratio: 4 / 3; } }

/* ---------- Field Mode (on nave) ---------- */
.online-field__quote {
  padding-left: var(--sp-5); border-left: 2px solid var(--ps-glow);
  font-size: var(--fs-h4); line-height: 1.45; color: #fff;
}
.online-tools { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0; list-style: none; }
.online-field__punch { font-size: var(--fs-h4); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--ps-glow); }
.online-field__media { margin: 0; aspect-ratio: 5 / 6; background: var(--ps-carbon); }
@media (max-width: 900px) { .online-field__media { max-width: 520px; } }

/* ---------- how it works: six steps, three per row ---------- */
.steps.steps--row.online-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-7) var(--sp-6); }
@media (max-width: 1023px) { .steps.steps--row.online-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps.steps--row.online-steps { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); } }

/* ---------- why Planetary ---------- */
.online-keys { margin-top: var(--sp-2); }
.online-school-first { margin-top: var(--sp-6); max-width: 64ch; color: var(--ps-graphite); }
.online-school-first strong { color: var(--ps-ink); font-weight: 600; }

/* ---------- waitlist ---------- */
#waitlist .admission__contact p { margin: 0; }
.online-next__title { margin-top: var(--sp-6); font-size: var(--fs-h4); color: #fff; }
.online-next { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--ps-on-dark); }
.online-form-lang { margin: 0 0 var(--sp-3); font-size: var(--fs-small); color: var(--ps-graphite); }