.building-page {
  --soft-sage: #edf3ef;
  --cream-white: #fff;
  --paper: #fcfdfb;
  background: var(--paper);
}
.building-page *,
.building-page .brand b {
  letter-spacing: 0;
}
.building-page [hidden] {
  display: none !important;
}
.build-wrap {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 48px;
}
.building-page .mast.marketing-mast {
  max-width: 1280px;
  padding-inline: 48px;
  min-height: 92px;
}
.building-page .brand .mark {
  display: block;
}
.building-page .brand .mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.build-eyebrow {
  color: var(--oxblood);
  font: 500 13px/1.5 var(--sans);
  margin: 0 0 16px;
}
.build-opening.founder-note {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.opening-copy {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding-block: 16px 24px;
}
.opening-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: 660px;
}
.opening-prelude {
  font: 500 40px/1.1 var(--serif);
  margin: 0;
}
.opening-person {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-soft);
  font: 16px/1.5 var(--sans);
}
.opening-person a {
  font-weight: 600;
  color: var(--oxblood);
  text-decoration: none;
  border-bottom: 2px solid var(--lemon);
}
.founder-portrait {
  display: block;
  width: 64px;
  height: 80px;
  object-fit: contain;
  border-radius: 3px;
}
.opening-memory {
  width: 100%;
  max-width: 400px;
  margin: 0;
}
.opening-memory > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: contain;
}
.opening-memory figcaption {
  margin-top: 8px;
  font: 12px/1.5 var(--sans);
  color: var(--ink-soft);
}
.opening-story {
  width: 100%;
  max-width: 660px;
}
.opening-story h2 {
  font: 500 32px/1.2 var(--serif);
  margin: 0 0 16px;
  text-wrap: balance;
}
.opening-story > p:not(.build-eyebrow) {
  font: 16px/1.65 var(--sans);
  margin: 0 0 12px;
  color: var(--ink-soft);
}
.opening-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 20px;
}
.primary-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--ink);
  color: white;
  text-decoration: none;
  font: 500 15px/1.5 var(--sans);
}
.primary-link:hover {
  background: var(--oxblood);
  border-color: var(--oxblood);
}
.quiet-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  font: 500 14px/1.5 var(--sans);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.quiet-link:hover {
  color: var(--oxblood);
}
.opening-age {
  display: grid;
  gap: 6px;
  margin: 24px 0 8px;
  font: 500 14px/1.5 var(--sans);
}
.opening-age span {
  display: block;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 400;
}
.explorer {
  padding-block: 36px 44px;
  background: #f0f6f5;
  border-block: 1px solid var(--line);
  scroll-margin-top: 24px;
}
.explorer .section-heading {
  text-align: center;
  margin-bottom: 12px;
}
.explorer .section-heading h2 {
  font-size: 34px;
}
.section-heading {
  margin-bottom: 30px;
}
.section-heading h2 {
  font: 500 40px/1.15 var(--serif);
  margin: 0 0 12px;
}
.section-heading > p:last-child:not(.build-eyebrow) {
  font: 16px/1.6 var(--sans);
  color: var(--ink-soft);
  margin: 0;
}
.archipelago {
  position: relative;
  max-width: 1100px;
  margin-inline: auto;
}
.archipelago-tower {
  position: absolute;
  left: 39%;
  top: 28px;
  width: 22%;
  height: 390px;
  object-fit: contain;
  pointer-events: none;
}
.future-islands {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.future-islands img {
  position: absolute;
  width: 54px;
  height: 72px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.55;
}
.future-islands img:nth-child(1) {
  left: 34%;
  top: 8px;
}
.future-islands img:nth-child(2) {
  right: 33%;
  top: 204px;
}
.future-islands img:nth-child(3) {
  left: 38%;
  bottom: 8px;
}
.kit-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(2, 220px);
  gap: 12px 0;
}
.kit-tabs button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: 0;
  padding: 4px 12px;
  min-width: 0;
  font: 500 17px/1.4 var(--serif);
  color: var(--ink);
}
.kit-tabs button:nth-child(odd) {
  grid-column: 1 / span 2;
}
.kit-tabs button:nth-child(even) {
  grid-column: 4 / span 2;
}
.kit-tabs button:nth-child(n + 3) {
  grid-row: 2;
}
.kit-tabs button[aria-selected="true"] {
  color: var(--oxblood);
}
.island-name {
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  text-align: center;
}
.kit-tabs button[aria-selected="true"] .island-name {
  border-bottom-color: var(--oxblood);
}
.island-subject {
  color: var(--ink-soft);
  font: 12px/1.5 var(--sans);
}
.island-picture {
  position: relative;
  display: block;
  width: 100%;
  max-width: 280px;
  height: 164px;
  mix-blend-mode: multiply;
}
.island-vignette {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  clip-path: polygon(
    20% 0,
    80% 0,
    100% 18%,
    100% 70%,
    65% 100%,
    35% 100%,
    0 70%,
    0 18%
  );
}
.island-ground {
  position: absolute;
  left: 22%;
  bottom: 0;
  width: 56%;
  height: 110px;
  object-fit: contain;
}
.island-ground + .island-vignette {
  height: 108px;
}
.kit-tabs button:hover {
  color: var(--oxblood);
}
.kit-tabs button:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 3px;
  border-radius: 4px;
}
.kit-panel {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) minmax(0, 1.1fr);
  max-width: 1100px;
  margin-inline: auto;
  gap: 24px;
  padding: 24px 0 0;
  border-top: 1px solid var(--line-strong);
  align-items: start;
  outline-offset: 8px;
}
.kit-heading {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
.kit-world {
  min-width: 0;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  margin: 0;
}
.kit-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  mix-blend-mode: darken;
  margin: 0;
}
.kit-art img {
  position: absolute;
  width: 300%;
  height: 200%;
  max-width: none;
  left: calc(var(--col) * -100%);
  top: calc(var(--row) * -100%);
}
.kit-art.single {
  aspect-ratio: 3/2;
  mix-blend-mode: multiply;
}
.kit-art.single img {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: contain;
}
.kit-world figcaption {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 8px 0 0;
  padding: 8px 0;
  font: 12px/1.5 var(--sans);
  color: var(--ink-soft);
}
.kit-world figcaption span:first-child {
  color: var(--oxblood);
}
.mission-link,
.text-link {
  font: 500 15px/1.5 var(--sans);
  border: 0;
  background: none;
  padding: 0 0 4px;
  border-bottom: 1px solid var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 20px;
}
.kit-actions {
  display: flex;
  align-items: center;
  min-height: 48px;
  margin-top: 24px;
}
.mission-link {
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--ink);
  color: white;
  gap: 10px;
}
.mission-link:hover {
  background: var(--oxblood);
  border-color: var(--oxblood);
}
.text-link:hover {
  color: var(--oxblood);
  border-color: var(--oxblood);
}
.play-symbol {
  font-size: 12px;
}
.mission-availability {
  font: 13px/1.5 var(--sans);
  color: var(--ink-soft);
}
.kit-copy {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
}
.kit-kicker {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--oxblood);
  font: 500 12px/1.5 var(--sans);
  margin-bottom: 12px;
}
.kit-kicker span:last-child {
  color: var(--ink-soft);
  font-family: var(--mono);
}
.kit-heading h2 {
  font: 500 26px/1.2 var(--serif);
  margin: 0;
  text-wrap: balance;
}
.kit-subject {
  font: 14px/1.5 var(--sans);
  color: var(--ink-soft);
  margin: 12px 0 0;
}
.build-label {
  color: var(--oxblood);
  font: 500 13px/1.5 var(--sans);
  margin: 0 0 10px;
}
.math-outcomes {
  margin: 0;
}
.math-outcomes > div {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.math-outcomes > div:last-child {
  border-bottom: 0;
}
.math-outcomes dt {
  font: 13px/1.6 var(--sans);
  color: var(--ink-soft);
}
.math-outcomes dd {
  margin: 0;
  font: 15px/1.5 var(--sans);
}

.journey-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
}
.journey-steps li {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-content: start;
  align-items: baseline;
}
.step-number {
  color: var(--oxblood);
  font: 12px/1.4 var(--mono);
  margin-top: 18px;
}
.journey-steps h3 {
  margin: 18px 0 0;
  font: 500 21px/1.3 var(--serif);
}
.journey-steps li > p {
  grid-column: 2;
  margin: 10px 0 0;
  font: 14px/1.65 var(--sans);
  color: var(--ink-soft);
}
.build-faq {
  padding-block: 64px;
  max-width: 900px;
}
.build-faq details {
  border-top: 1px solid var(--line);
}
.build-faq summary {
  padding: 20px 0;
  cursor: pointer;
  font: 500 17px/1.5 var(--sans);
}
.build-faq details p {
  font: 15px/1.7 var(--sans);
  max-width: 70ch;
  margin: 0;
  padding-bottom: 24px;
  color: var(--ink-soft);
}
.building-page footer {
  border-top: 1px solid var(--line);
  padding: 28px 0;
}
.building-page footer .build-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
  font: 13px/1.5 var(--sans);
}
.building-page footer .footer-brand {
  font: 500 24px/1.5 var(--serif);
  text-decoration: none;
}
.building-page footer span {
  flex: 1 1 auto;
  color: var(--ink-soft);
}
.mission-dialog {
  width: calc(100% - 32px);
  max-width: 1140px;
  height: calc(100dvh - 40px);
  max-height: 920px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
}
.mission-dialog::backdrop {
  background: #173a3266;
}
.mission-dialog[open] {
  display: flex;
  flex-direction: column;
}
.mission-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.mission-bar h2 {
  font-size: 22px;
  line-height: 1.3;
}
.mission-bar p,
.mission-direct {
  font: 12px/1.5 var(--sans);
}
.mission-bar p {
  margin-top: 4px;
}
.icon-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid var(--line-strong);
  background: none;
  border-radius: 4px;
  font: 28px/1 var(--sans);
}
#missionFrameSlot {
  flex: 1;
  min-height: 0;
}
#missionFrameSlot iframe {
  border: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#missionLoading {
  position: absolute;
  inset-inline: 20px;
  top: 50%;
  z-index: 1;
  margin: 0;
  font: 14px/1.5 var(--sans);
  padding: 12px 20px;
  background: var(--paper);
  pointer-events: none;
}
.mission-direct {
  padding: 12px 20px;
  border-top: 1px solid var(--line);
}
.no-script {
  padding: 20px 0;
  font: 15px/1.6 var(--sans);
}
:is(.primary-link, .quiet-link, .mission-link, .text-link):focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 4px;
}
@media (max-width: 1100px) {
  .build-wrap,
  .building-page .mast.marketing-mast {
    padding-inline: 32px;
  }
  .kit-panel {
    grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 20px;
  }
  .journey-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px;
  }
}
@media (max-width: 800px) {
  .opening-copy {
    gap: 16px;
    padding-block: 16px 24px;
  }
  .opening-memory {
    max-width: 360px;
  }

  .math-outcomes > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .kit-panel {
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 16px 24px;
  }
  .kit-copy {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}
@media (max-width: 600px) {
  .build-wrap,
  .building-page .mast.marketing-mast {
    padding-inline: 22px;
  }
  .building-page .mast.marketing-mast {
    min-height: 76px;
  }
  .marketing-nav .how-link {
    display: none;
  }
  .opening-prelude {
    font-size: 32px;
  }
  .opening-person {
    gap: 10px;
    font-size: 14px;
  }
  .founder-portrait {
    width: 56px;
    height: 70px;
  }
  .opening-memory {
    max-width: 280px;
  }
  .opening-memory figcaption {
    font-size: 11px;
  }
  .opening-story h2 {
    font-size: 28px;
  }
  .opening-story > p:not(.build-eyebrow) {
    font-size: 15px;
  }
  .opening-age {
    font-size: 13px;
  }
  .build-eyebrow {
    font-size: 12px;
    margin-bottom: 14px;
  }
  .opening-actions {
    gap: 20px;
  }
  .explorer {
    padding-block: 28px 32px;
  }
  .explorer .section-heading h2 {
    font-size: 28px;
    max-width: 22ch;
    margin-inline: auto;
  }
  .section-heading h2 {
    font-size: 32px;
  }
  .section-heading > p:last-child:not(.build-eyebrow) {
    font-size: 15px;
  }
  .archipelago-tower {
    left: calc(50% - 53px);
    top: 0;
    width: 106px;
    height: 178px;
  }
  .future-islands img {
    width: 46px;
    height: 62px;
  }
  .future-islands img:nth-child(1) {
    left: 8%;
    top: 40px;
  }
  .future-islands img:nth-child(2) {
    right: 8%;
    top: 16px;
  }
  .future-islands img:nth-child(3) {
    left: auto;
    right: 9%;
    top: 106px;
    bottom: auto;
  }
  .kit-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 186px);
    gap: 16px 8px;
    padding-top: 0;
    padding-bottom: 20px;
  }
  .kit-tabs button:nth-child(odd) {
    grid-column: 1;
  }
  .kit-tabs button:nth-child(even) {
    grid-column: 2;
  }
  .kit-tabs button {
    padding: 0;
    font-size: 15px;
  }
  .island-picture {
    height: 128px;
  }
  .island-ground {
    height: 84px;
  }
  .island-ground + .island-vignette {
    height: 80px;
  }
  .island-subject {
    font-size: 11px;
  }
  .kit-panel {
    gap: 16px;
    padding-top: 20px;
  }
  .kit-heading h2 {
    font-size: 24px;
  }
  .kit-subject {
    font-size: 14px;
    margin-top: 8px;
  }
  .kit-world {
    width: 100%;
  }
  .kit-world figcaption {
    font-size: 11px;
  }
  .kit-world figcaption span:last-child {
    display: none;
  }
  .math-outcomes > div {
    grid-template-columns: 88px 1fr;
    gap: 12px;
    padding: 12px 0;
  }
  .math-outcomes dd {
    font-size: 15px;
  }
  .kit-actions {
    margin-top: 16px;
  }
  .mission-link {
    width: 100%;
    justify-content: center;
    font-size: 14px;
  }

  .journey-steps {
    gap: 28px 20px;
    margin-top: 24px;
  }
  .journey-steps h3 {
    font-size: 19px;
  }
  .journey-steps li > p {
    font-size: 13px;
    grid-column: 1/-1;
  }
  .build-faq {
    padding-block: 44px;
  }
  .build-faq summary {
    font-size: 16px;
  }
  .building-page footer span {
    flex-basis: 100%;
    order: 1;
  }
  .mission-dialog {
    width: calc(100% - 16px);
    height: calc(100dvh - 16px);
  }
  .mission-bar {
    padding: 12px;
    gap: 12px;
  }
  .mission-bar h2 {
    font-size: 18px;
  }
  .mission-direct {
    padding: 10px 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .building-page * {
    scroll-behavior: auto;
  }
}

/* Product first; real examples and small voxel illustrations. */
.opening-copy {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  justify-items: stretch;
  gap: 56px;
  padding-block: 58px;
}
.opening-story {
  max-width: none;
}
.opening-story h1 {
  font: 500 clamp(38px, 5vw, 64px)/1.05 var(--serif);
  margin: 16px 0 24px;
  letter-spacing: -0.025em;
}
.opening-story > p:not(.build-eyebrow) {
  font-size: 18px;
  max-width: 43ch;
}
.opening-age {
  margin: 20px 0;
}
.opening-person {
  margin-top: 24px;
}
.opening-memory {
  max-width: none;
}
.kit-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-rows: auto;
  gap: 24px;
  margin-bottom: 24px;
  align-items: start;
}
.kit-tabs button:nth-child(n) {
  grid-column: auto;
  grid-row: auto;
}
.island-picture {
  width: 100%;
  aspect-ratio: 3/2;
  height: auto;
}
.island-vignette {
  width: 100%;
  height: 100%;
  object-fit: contain;
  clip-path: none;
}

.journey-steps {
  margin-top: 20px;
}
.journey-steps h3,
.step-number {
  margin-top: 0;
}
@media (max-width: 560px) {
  .journey-steps {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .journey-steps li > p {
    grid-column: 2;
  }
}
@media (max-width: 820px) {
  .opening-copy {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding-block: 32px;
  }
  .opening-memory {
    max-width: 440px;
  }
  .kit-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

/* Membership: the two worlds (the website wave, 2026-10-17: Math, then Spanish and robotics). Mobile first: one
   world card at a time on a plain CSS scroll-snap track with the next card peeking, so a swipe works natively; the
   two cards side by side from 900px, where the arrows and dots step aside. Each world carries its own tint, ink and
   accent (deep blue and gold for math, amber and ink for Spanish and robotics) as CSS variables, and its atmosphere
   is inline SVG ornament behind our own voxel art: no stock pictures, no new raster art. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.membership {
  padding-block: 56px 0;
  background: var(--paper);
}
.membership .build-wrap {
  padding-inline: 16px;
}
.plans-head {
  display: grid;
  gap: 14px;
  padding-bottom: 28px;
}
.membership h2 {
  font: 500 30px/1.12 var(--serif);
  margin: 0;
  max-width: 24ch;
  text-wrap: balance;
}

.plans-lede {
  font: 16px/1.65 var(--sans);
  color: var(--ink-soft);
  margin: 0;
  max-width: 52ch;
}
.plan-join:focus-visible,
.world-preview:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 3px;
}
.world-card {
  --wt: #e9eff9;
  --wi: #1b2f4f;
  --wa: #c9962e;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--wi) 30%, white);
  border-radius: 18px;
  background: white;
  overflow: hidden;
  box-shadow: 0 24px 48px -34px color-mix(in srgb, var(--wi) 60%, transparent);
}
.world-art {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--wt);
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--wi) 18%, white);
}
.world-ornament {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--wa);
}
.world-window {
  position: absolute;
  left: 14%;
  right: 14%;
  top: 16%;
  bottom: 0;
  display: block;
  overflow: hidden;
  border: 3px solid var(--wi);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: var(--paper-2);
  box-shadow: 0 18px 30px -18px color-mix(in srgb, var(--wi) 70%, transparent);
}
.world-window img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.world-badge {
  position: absolute;
  left: 14px;
  bottom: 12px;
  width: 58px;
  height: 58px;
  padding: 5px;
  border: 2px solid var(--wi);
  border-radius: 50%;
  background: white;
  box-shadow: 0 8px 16px -10px color-mix(in srgb, var(--wi) 70%, transparent);
}
.world-badge img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.world-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 20px 24px;
}
.world-kicker {
  margin: 0 0 8px;
  font: 600 12px/1.4 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wa-ink, var(--wi));
}
.world h3 {
  font: 500 27px/1.15 var(--serif);
  margin: 0;
  color: var(--wi);
  text-wrap: balance;
}
.world-hook {
  font: italic 400 18px/1.4 var(--serif);
  margin: 8px 0 0;
  color: var(--ink);
}
.plan-list {
  list-style: none;
  padding: 16px 0 0;
  margin: 16px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  font: 15px/1.5 var(--sans);
}
.plan-list li {
  position: relative;
  padding-left: 26px;
}
.plan-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--wi);
  border-bottom: 2px solid var(--wi);
  transform: rotate(-45deg);
}
.world-buy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-top: auto;
  padding-top: 18px;
}
.plan-price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}
.plan-amount {
  font: 500 40px/1.1 var(--serif);
  color: var(--wi);
}
.plan-per {
  font: 14px/1.5 var(--sans);
  color: var(--ink-soft);
}
.plan-weekly {
  margin: 2px 0 0;
  font: 14px/1.5 var(--sans);
  color: var(--ink-soft);
}
.world-status {
  display: block;
  margin: 8px 0 18px;
  font: 600 14px/1.5 var(--sans);
  color: var(--ink);
}
.world-status.is-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.world-status.is-open::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--leaf);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--leaf) 25%, white);
}
.plan-join {
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid var(--wi);
  border-radius: 6px;
  background: var(--wi);
  color: white;
  font: 500 15px/1.5 var(--sans);
  text-decoration: none;
  transition:
    background 0.2s,
    transform 0.2s,
    border-color 0.2s;
}
.plan-join:hover {
  background: var(--oxblood);
  border-color: var(--oxblood);
}
.world-preview {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  align-self: flex-start;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--oxblood);
  font: 600 14px/1.5 var(--sans);
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.world-preview:hover {
  color: var(--ink);
  border-bottom-color: currentColor;
}
/* Two tiles of one size, side by side on a wide screen and one above the other on a phone. Each is a poster with a play mark that opens the clip large in a dialog (the founder, 2026-10-16); the clip sits whole inside its square tile. */
.lesson-videos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.lesson-pop {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--paper) 30%, transparent);
  border-radius: 12px;
  background: #0d1c33;
  box-shadow: 0 14px 26px -16px #000;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1/1;
  transition:
    transform 0.2s,
    border-color 0.2s;
}
.lesson-pop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.lesson-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: var(--lemon);
  color: var(--ink);
  font: 20px/1 var(--sans);
  padding-left: 4px;
  box-shadow: 0 8px 18px -8px #000;
}
.lesson-pop:hover {
  border-color: var(--lemon);
}
.lesson-pop:focus-visible {
  outline: 3px solid var(--lemon);
  outline-offset: 3px;
}

.lesson-dialog {
  max-width: 760px;
  height: auto;
  max-height: calc(100dvh - 24px);
}
.lesson-dialog[open] {
  display: flex;
  flex-direction: column;
}
#lessonVideoSlot {
  display: grid;
  place-items: center;
  padding: 12px;
  background: #0d1c33;
  min-height: 0;
}
#lessonVideoSlot video {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100dvh - 140px);
  object-fit: contain;
  background: #0d1c33;
}

.roads-title {
  font: 500 20px/1.35 var(--serif);
  margin: 0 0 14px;
}
.road-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.road-name {
  padding: 10px 12px 0;
  font: 500 17px/1.3 var(--serif);
}
.road-line {
  padding: 2px 12px 12px;
  font: 13px/1.45 var(--sans);
  color: var(--ink-soft);
}
.roads-note {
  font: 13px/1.6 var(--sans);
  color: var(--ink-soft);
  margin: 14px 0 0;
}
.plans-terms-wrap {
  padding-block: 24px 56px;
}
.guide-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 18px 20px;
  align-items: center;
  padding: 20px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: white;
  box-shadow: 0 20px 40px -30px color-mix(in srgb, var(--ink) 60%, transparent);
}
.guide-cover {
  display: block;
  grid-row: span 1;
}
.guide-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 420/595;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  box-shadow:
    6px 8px 0 -2px var(--lemon),
    0 10px 18px -10px #0006;
  transform: rotate(-2deg);
  background: var(--paper-2);
}
.guide-copy {
  display: grid;
  gap: 6px;
  justify-items: start;
  min-width: 0;
}
.guide-kicker {
  margin: 0;
  color: var(--oxblood);
  font: 600 12px/1.4 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.08em !important;
}
.guide-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font: 500 21px/1.25 var(--serif);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
}
.guide-link:hover {
  color: var(--oxblood);
  border-color: var(--oxblood);
}
.guide-link:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 4px;
}
.guide-line {
  margin: 0;
  font: 14px/1.5 var(--sans);
  color: var(--ink-soft);
}
.plans-terms {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  font: 15px/1.55 var(--sans);
  color: var(--ink);
}
.plans-terms li {
  padding-left: 24px;
  position: relative;
}
.plans-terms li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--leaf);
  border-bottom: 2px solid var(--leaf);
  transform: rotate(-45deg);
}
.will-reveal {
  opacity: 0;
  transform: translateY(18px);
}
.will-reveal.revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 120ms);
}
@media (hover: hover) {
  .plan-join:hover {
    transform: translateY(-1px);
  }
  .world-card:hover .world-window {
    transform: translateY(-3px);
  }
  .world-window {
    transition: transform 0.3s ease;
  }
}
@media (max-width: 360px) {
  .world-copy {
    padding: 18px 16px 22px;
  }
}
@media (min-width: 600px) {
  .world-copy {
    padding: 24px 24px 28px;
  }

  .road-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .membership {
    padding-top: 88px;
  }
  .membership .build-wrap {
    padding-inline: 48px;
  }
  .membership h2 {
    font-size: 42px;
  }
  .plans-head {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 20px 64px;
    align-items: end;
    padding-bottom: 36px;
  }
  .plans-head .build-eyebrow,
  .plans-head h2 {
    grid-column: 1;
  }

  .plans-lede {
    grid-column: 1 / -1;
    font-size: 18px;
    max-width: 60ch;
  }
  .world h3 {
    font-size: 28px;
  }

  .guide-card {
    grid-template-columns: 150px minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 20px 40px;
    padding: 28px 36px;
  }
  .plans-terms {
    grid-column: 3;
    padding: 0 0 0 36px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}
@media (min-width: 1100px) {
  .world-copy {
    padding: 26px 28px 30px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .will-reveal {
    opacity: 1;
    transform: none;
  }
  .plan-join,
  .world-window,
  .lesson-pop {
    transition: none;
  }
  .plan-join:hover,
  .world-card:hover .world-window {
    transform: none;
  }
}

@media (max-width: 600px) {
  .lesson-videos {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }
}