.levels-page {
  overflow: hidden;
}

.levels-page .section {
  position: relative;
}

.levels-section-intro {
  min-width: 0;
}

.levels-section-intro > :last-child {
  margin-bottom: 0;
}

.levels-hero {
  padding-top: clamp(2rem, 4vw, 3.5rem);
}

.levels-hero__panel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(24.375rem, 7fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  min-width: 0;
  overflow: hidden;
  border: var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--color-cream);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  box-shadow: var(--shadow-soft);
}

.levels-hero__panel::after {
  position: absolute;
  z-index: 0;
  width: 13rem;
  height: 13rem;
  border-radius: 50%;
  background: var(--color-apricot);
  content: "";
  opacity: 0.58;
  right: -5rem;
  top: -5rem;
}

.levels-hero__copy,
.levels-hero__figure {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.levels-hero__copy {
  display: flex;
  max-width: 36.875rem;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.levels-hero__copy .eyebrow,
.levels-hero__copy h1,
.levels-hero__copy p {
  margin: 0;
}

.levels-hero__lead {
  max-width: 40rem;
  font-size: var(--font-size-lead);
  line-height: var(--line-height-lead);
}

.levels-hero__notice {
  max-width: 32rem;
  color: var(--color-cocoa);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.levels-hero__actions {
  width: 100%;
}

.levels-hero__actions > * {
  min-width: 0;
}

.levels-hero__figure {
  width: 100%;
  max-width: 43rem;
  justify-self: end;
  overflow: hidden;
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-apricot);
  padding: var(--space-3);
}

.levels-hero__figure img,
.levels-upgrades__figure img {
  width: 100%;
  max-width: 100%;
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.levels-factors__intro {
  max-width: 42.5rem;
}

.levels-factors__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr);
  gap: var(--space-4);
  align-items: start;
  min-width: 0;
  margin-top: var(--space-6);
}

.levels-factor {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-soft);
}

.levels-factor > * {
  margin: 0;
}

.levels-factor--prepare {
  background: var(--color-cream);
}

.levels-factor--queue {
  margin-top: var(--space-5);
  background: var(--color-mint);
  border-color: var(--color-pistachio);
}

.levels-factor--capacity {
  margin-top: var(--space-5);
  background: var(--color-apricot);
}

.levels-factor__number {
  color: var(--color-mandarin);
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}

.levels-factor p {
  max-width: 56ch;
}

.levels-rhythm::before {
  position: absolute;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background: var(--color-apricot);
  content: "";
  opacity: 0.45;
  right: -10rem;
  top: 10rem;
}

.levels-rhythm__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 47.5rem;
  margin-left: clamp(0rem, 8vw, 8rem);
}

.levels-rhythm__intro {
  max-width: 42.5rem;
}

.levels-rhythm__steps {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-6);
  margin: var(--space-6) 0;
  padding: 0;
  list-style: none;
  counter-reset: rhythm;
}

.levels-rhythm__steps > li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-4);
  min-width: 0;
  counter-increment: rhythm;
}

.levels-rhythm__steps > li::before {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-mandarin);
  color: var(--color-chocolate);
  content: counter(rhythm);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
}

.levels-rhythm__step-copy {
  display: flex;
  min-width: 0;
  max-width: 42.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.levels-rhythm__step-copy > * {
  margin: 0;
}

.levels-rhythm__step-copy p {
  max-width: 70ch;
}

.levels-rhythm__tip {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-3);
  width: 100%;
  max-width: 53.75rem;
}

.levels-rhythm__tip p {
  max-width: 42.5rem;
}

.levels-rhythm__tip-icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 2px solid var(--color-chocolate);
  border-radius: 50%;
  background: var(--color-cream);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 1;
}

.levels-decision__intro {
  max-width: 42.5rem;
}

.levels-decision__paths {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.levels-path {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--space-5);
  align-items: center;
  min-width: 0;
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.levels-path--cream { background: var(--color-cream); }
.levels-path--mint { background: var(--color-mint); border-color: var(--color-pistachio); }
.levels-path--apricot { background: var(--color-apricot); }

.levels-path__diagnosis {
  min-width: 0;
}

.levels-path__diagnosis > :last-child {
  margin-bottom: 0;
}

.levels-path__diagnosis p {
  max-width: 38.75rem;
}

.levels-path__link {
  display: flex;
  min-width: 0;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 2px solid var(--color-chocolate);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  color: var(--color-chocolate);
  font-family: var(--font-heading);
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.levels-path__link:hover {
  border-color: var(--color-strawberry);
  color: var(--color-strawberry);
}

.levels-upgrades__intro {
  max-width: 42.5rem;
}

.levels-upgrades__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  min-width: 0;
  margin-top: var(--space-6);
}

.levels-upgrades__figure {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-cream);
  padding: var(--space-3);
}

.levels-upgrades__copy {
  display: flex;
  min-width: 0;
  max-width: 37.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.levels-upgrades__block {
  width: 100%;
  min-width: 0;
}

.levels-upgrades__block > :last-child {
  margin-bottom: 0;
}

.levels-upgrades__block p {
  max-width: 66ch;
}

.levels-upgrades__block--mint {
  border: 1px solid var(--color-pistachio);
  border-radius: var(--radius-lg);
  background: var(--color-mint);
  padding: var(--space-4);
}

.levels-skills__intro {
  max-width: 40rem;
}

.levels-skills__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
  min-width: 0;
  margin-top: var(--space-6);
}

.levels-skill {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  overflow: hidden;
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-soft);
}

.levels-skill > * { margin: 0; }
.levels-skill p { max-width: 54ch; }
.levels-skill--cream { background: var(--color-cream); }
.levels-skill--mint { margin-top: 1.25rem; background: var(--color-mint); border-color: var(--color-pistachio); }
.levels-skill--apricot { background: var(--color-apricot); }

.levels-skill__word {
  position: absolute;
  right: -1.5rem;
  bottom: 0.5rem;
  color: var(--color-strawberry);
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 800;
  opacity: 0.25;
  text-transform: uppercase;
  transform: rotate(-12deg);
}

.levels-events__inner {
  width: 100%;
  max-width: 52.5rem;
  margin-inline: auto;
}

.levels-events__intro {
  max-width: 42.5rem;
}

.levels-events__notice {
  margin-top: var(--space-5);
  border: var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-mint);
  padding: var(--space-5);
}

.levels-events__notice > :last-child { margin-bottom: 0; }
.levels-events__notice p { max-width: 47.5rem; }
.levels-events__notice-title {
  color: var(--color-chocolate);
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
}

.levels-events__list {
  display: flex;
  min-width: 0;
  max-width: 47.5rem;
  flex-direction: column;
  gap: var(--space-5);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: events;
}

.levels-events__list li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-3);
  min-width: 0;
  counter-increment: events;
}

.levels-events__list li::before {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-mandarin);
  color: var(--color-chocolate);
  content: counter(events);
  font-family: var(--font-heading);
  font-weight: 800;
}

.levels-events__list li:nth-child(2)::before { background: var(--color-strawberry); color: var(--color-white); }
.levels-events__list h3 { margin-bottom: var(--space-2); }
.levels-events__list p { max-width: 42.5rem; margin-bottom: 0; }

.levels-resources__intro {
  max-width: 42.5rem;
}

.levels-resources__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  min-width: 0;
  margin-top: var(--space-6);
}

.levels-resource {
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-soft);
  color: var(--color-chocolate);
  text-decoration: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.levels-resource:hover {
  border-color: var(--color-chocolate);
  box-shadow: 0 10px 22px rgb(74 44 36 / 12%);
  color: var(--color-chocolate);
  transform: translateY(-2px);
}

.levels-resource > * { margin: 0; }
.levels-resource p { max-width: 55ch; }
.levels-resource--restaurants { background: var(--color-mint); border-color: var(--color-pistachio); }
.levels-resource--dishes { background: var(--color-apricot); }
.levels-resource--upgrades { background: var(--color-cream); }
.levels-resource--guides { grid-column: 1 / span 2; background: var(--color-cream); }

.levels-resource__action {
  margin-top: auto;
  font-family: var(--font-heading);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.15em;
}

.levels-resources__detail {
  grid-column: 3;
  min-width: 0;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 30% 32%, var(--color-strawberry) 0 0.55rem, transparent 0.6rem),
    radial-gradient(circle at 70% 65%, var(--color-mandarin) 0 0.8rem, transparent 0.86rem),
    var(--color-mint);
}

.levels-checklist__panel {
  width: 100%;
  max-width: 51.25rem;
  margin-inline: auto;
  border: var(--border-strong);
  border-radius: var(--radius-xl);
  background: var(--color-mint);
  padding: clamp(var(--space-5), 4vw, var(--space-7));
}

.levels-checklist__intro {
  max-width: 42.5rem;
}

.levels-checklist__list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.levels-checklist__list li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--space-3);
  min-width: 0;
  align-items: start;
}

.levels-checklist__mark {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 2px solid var(--color-chocolate);
  border-radius: var(--radius-sm);
  background: var(--color-cream);
  color: var(--color-strawberry);
  font-family: var(--font-heading);
  font-weight: 800;
}

.levels-checklist__list h3 { margin-bottom: var(--space-1); font-size: 1.125rem; }
.levels-checklist__list p { max-width: 42.5rem; margin-bottom: 0; }

.levels-closing__panel {
  border: var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--color-apricot);
  padding: clamp(var(--space-5), 5vw, var(--space-8));
}

.levels-closing__content {
  display: flex;
  width: 100%;
  max-width: 47.5rem;
  margin-inline: auto;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-cream);
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  text-align: center;
}

.levels-closing__content > * { margin: 0; }
.levels-closing__content > p:not(.levels-closing__notice) { max-width: 42.5rem; }
.levels-closing__actions { justify-content: center; }
.levels-closing__notice { max-width: 35rem; color: var(--color-cocoa); font-size: var(--font-size-small); line-height: var(--line-height-small); }

@media (max-width: 57.5rem) {
  .levels-hero__panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .levels-hero__copy {
    max-width: 40rem;
  }

  .levels-hero__figure {
    max-width: 42.5rem;
    justify-self: start;
  }
}

@media (max-width: 53.75rem) {
  .levels-upgrades__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .levels-upgrades__figure {
    max-width: 42.5rem;
  }

  .levels-upgrades__copy {
    max-width: 42.5rem;
  }
}

@media (max-width: 51.25rem) {
  .levels-factors__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .levels-factor--prepare {
    grid-column: 1 / -1;
  }

  .levels-factor--queue,
  .levels-factor--capacity {
    margin-top: 0;
  }
}

@media (max-width: 47.5rem) {
  .levels-path {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .levels-path__link {
    justify-self: start;
  }

  .levels-skills__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .levels-skill--apricot {
    grid-column: 1 / -1;
  }

  .levels-skill--mint {
    margin-top: 0;
  }

  .levels-resources__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .levels-resource--guides {
    grid-column: 1 / -1;
  }

  .levels-resources__detail {
    display: none;
  }
}

@media (max-width: 42.4375rem) {
  .levels-rhythm__content {
    margin-left: 0;
  }

  .levels-rhythm__steps > li {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .levels-rhythm__steps > li::before {
    width: 2.75rem;
    height: 2.75rem;
  }
}

@media (max-width: 38.75rem) {
  .levels-factors__grid,
  .levels-skills__grid,
  .levels-resources__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .levels-factor--prepare,
  .levels-skill--apricot,
  .levels-resource--guides {
    grid-column: auto;
  }
}

@media (max-width: 33.75rem) {
  .levels-hero__actions,
  .levels-closing__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .levels-hero__actions > .button,
  .levels-closing__actions > .button {
    width: 100%;
  }
}

@media (max-width: 32.5rem) {
  .levels-hero__panel {
    padding: var(--space-4);
  }

  .levels-hero__copy {
    gap: var(--space-3);
  }

  .levels-hero h1 {
    font-size: 2.125rem;
    line-height: 1.118;
  }

  .levels-section-intro h2,
  .levels-closing h2 {
    font-size: 1.875rem;
    line-height: 1.167;
  }

  .levels-path__link {
    width: 100%;
  }

  .levels-events__list li,
  .levels-checklist__list li {
    grid-template-columns: minmax(0, 1fr);
  }

  .levels-events__list li::before,
  .levels-checklist__mark {
    width: 2rem;
    height: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .levels-resource {
    transition: none;
  }

  .levels-resource:hover {
    transform: none;
  }
}