main.home-page {
  overflow: clip;
}

.home-page .home-hero {
  position: relative;
  padding-block: clamp(3rem, 6vw, 6rem);
  background: linear-gradient(110deg, var(--color-soft-white) 0 61%, var(--color-cobalt-blue) 61% 100%);
}

.home-page .home-hero__grid,
.home-page .quick-links__intro,
.home-page .explorer__top,
.home-page .community__top,
.home-page .style__top,
.home-page .freshness__top,
.home-page .route-section__grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem;
}

.home-page .home-hero__copy {
  grid-column: span 5;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  padding-block: 1.5rem;
}

.home-page .home-hero__copy > * { margin: 0; }
.home-page .home-hero__copy .lead { max-width: 35rem; }
.home-page .home-hero__title { font-size: var(--font-size-display); max-width: 36rem; }
.home-page .home-hero__actions { width: 100%; }
.home-page .home-hero__note {
  max-width: 34rem;
  padding: .75rem 1rem;
  border: 1px solid rgba(255,253,247,.8);
  border-radius: var(--radius-md);
  background: var(--color-glass-white);
  color: var(--color-ink);
  font-size: var(--font-size-small);
  line-height: 1.45;
}

.home-page .home-hero__visual {
  grid-column: span 7;
  min-width: 0;
  position: relative;
  align-self: center;
  margin: 0;
}

.home-page .home-hero__visual img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(255,253,247,.42);
  border-radius: var(--radius-feature);
  object-fit: cover;
  object-position: 68% center;
  box-shadow: var(--shadow-float);
}

.home-page .home-hero__checkpoint {
  position: absolute;
  z-index: 1;
  right: 4%;
  bottom: -1.25rem;
  display: grid;
  width: 5.25rem;
  height: 5.25rem;
  place-items: center;
  border: 7px solid var(--color-lemon-yellow);
  border-radius: 50%;
  background: var(--color-coral-orange);
  color: var(--color-soft-white);
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: var(--font-weight-black);
  transform: rotate(-10deg);
}

.home-page .home-hero__star {
  position: absolute;
  top: 12%;
  right: 46%;
  color: var(--color-lemon-yellow);
  font-size: 2rem;
}

.home-page .home-hero__checkpoint,
.home-page .home-hero__star { animation: home-float 4s ease-in-out infinite; }

.home-page .home-section-heading { margin: 0; }
.home-page .quick-links { background: var(--color-sky-tint); }
.home-page .quick-links__heading { grid-column: span 4; min-width: 0; }
.home-page .quick-links__intro-copy { grid-column: span 5; min-width: 0; max-width: 32.5rem; }
.home-page .quick-links__intro-copy > * { margin: 0; }
.home-page .quick-links__mark {
  grid-column: span 3;
  min-width: 0;
  align-self: center;
  color: var(--color-coral-orange);
  font-family: var(--font-heading);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: var(--font-weight-black);
  line-height: 1;
  text-align: right;
}

.home-page .quick-links__grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.home-page .quick-link {
  display: flex;
  min-width: 0;
  min-height: 18rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  border: var(--border-default);
  border-radius: var(--radius-card);
  background: var(--color-soft-white);
  box-shadow: var(--edge-rubber);
  color: var(--color-ink);
  text-decoration: none;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.home-page .quick-link > * { margin: 0; }
.home-page .quick-link:nth-child(3) { border-color: rgba(255,253,247,.35); background: var(--color-cobalt-blue); color: var(--color-soft-white); }
.home-page .quick-link:nth-child(3) h3 { color: var(--color-soft-white); }
.home-page .quick-link:nth-child(4) { border-color: transparent; background: var(--color-lemon-yellow); }
.home-page .quick-link:hover { color: inherit; transform: translateY(-2px); }
.home-page .quick-link:focus-visible { outline: 2px solid var(--color-turquoise); outline-offset: 4px; }
.home-page .quick-link__number {
  display: inline-grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: 50%;
  background: var(--color-coral-tint);
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: var(--font-weight-black);
}
.home-page .quick-link:nth-child(2) .quick-link__number { background: var(--color-turquoise); }
.home-page .quick-link:nth-child(3) .quick-link__number { background: var(--color-lemon-yellow); }
.home-page .quick-link__arrow { margin-top: auto; font-size: 1.4rem; transition: transform var(--transition-fast); }
.home-page .quick-link:hover .quick-link__arrow { transform: translateX(4px); }

.home-page .explorer__shell {
  padding: clamp(1.5rem, 4vw, 2rem);
  border-radius: var(--radius-feature);
  background: var(--color-sky-tint);
}
.home-page .explorer__heading { grid-column: span 5; min-width: 0; max-width: 35rem; }
.home-page .explorer__heading > * { margin: 0; }
.home-page .explorer__form { grid-column: span 7; min-width: 0; display: flex; flex-direction: column; gap: .75rem; }
.home-page .explorer__form label { margin: 0; }
.home-page .explorer__form input { min-height: 3.25rem; border-width: 2px; border-radius: var(--radius-card); }
.home-page .explorer__help { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-small); }
.home-page .topic-chips { display: flex; min-width: 0; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.home-page .topic-chip { min-width: 0; min-height: 2.75rem; padding: .55rem .85rem; border: 1px solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-soft-white); color: var(--color-ink); font-size: var(--font-size-small); font-weight: var(--font-weight-bold); }
.home-page .topic-chip[aria-pressed="true"] { background: var(--color-lemon-yellow); box-shadow: inset 0 0 0 2px var(--color-ink); }
.home-page .topic-chip[aria-pressed="true"]::before { content: "• "; }
.home-page .explorer__results { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.home-page .sample-card { min-width: 0; padding: 1.25rem; border: var(--border-default); border-radius: var(--radius-card); background: var(--color-soft-white); }
.home-page .sample-card > * { margin: 0; }
.home-page .sample-card > * + * { margin-top: .75rem; }
.home-page .sample-card p { font-size: var(--font-size-small); }
.home-page .explorer__empty { margin: 1.5rem 0 0; padding: 1rem; border-radius: var(--radius-md); background: var(--color-coral-tint); }

.home-page .basics__intro { max-width: 40rem; }
.home-page .basics__intro > * { margin: 0; }
.home-page .basics__intro > * + * { margin-top: 1rem; }
.home-page .basics__grid { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.home-page .basic-step { min-width: 0; display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; border: var(--border-default); border-radius: var(--radius-card); background: var(--color-soft-white); }
.home-page .basic-step > * { margin: 0; }
.home-page .basic-step__top { display: flex; min-width: 0; align-items: center; gap: .75rem; }
.home-page .basic-step__number { display: grid; width: 2.5rem; min-width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 50%; background: var(--color-sky-tint); font-family: var(--font-heading); font-size: 1.4rem; font-weight: var(--font-weight-black); }
.home-page .basic-step:nth-child(2) .basic-step__number { background: var(--color-coral-tint); }
.home-page .basic-step:nth-child(4) .basic-step__number { background: var(--color-lemon-yellow); }
.home-page .basic-step__toggle { width: 100%; min-height: 2.75rem; padding: .5rem .75rem; border: 1px solid var(--color-ink); border-radius: var(--radius-md); background: var(--color-soft-white); font-size: var(--font-size-small); font-weight: var(--font-weight-bold); text-align: left; }
.home-page .basic-step__detail { font-size: var(--font-size-small); }
.home-page .basic-step__detail ul { margin: 0; padding-left: 1.2em; }
.home-page .basic-step__detail li + li { margin-top: .4rem; }
.home-page .basic-step__plan { padding: .7rem; border-radius: var(--radius-md); background: var(--color-sky-tint); font-size: var(--font-size-small); font-weight: var(--font-weight-bold); }

.home-page .route-section { background: var(--color-cobalt-blue); }
.home-page .route-section__copy { grid-column: span 5; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.home-page .route-section__copy > * { margin: 0; }
.home-page .route-section__copy h2, .home-page .route-section__copy p { color: var(--color-soft-white); }
.home-page .route-section__copy p { max-width: 38rem; }
.home-page .route-section__copy mark { font-weight: var(--font-weight-bold); }
.home-page .route-section__mistakes { width: 100%; padding: 1.25rem; border-radius: var(--radius-card); background: var(--color-coral-tint); color: var(--color-ink); }
.home-page .route-section__mistakes h3 { color: var(--color-ink); }
.home-page .route-section__mistakes > * { margin: 0; }
.home-page .route-section__mistakes > * + * { margin-top: .75rem; }
.home-page .route-section__mistakes ul { padding-left: 1.2em; }
.home-page .route-section__mistakes li + li { margin-top: .55rem; }
.home-page .route-section__visual { grid-column: span 7; min-width: 0; position: relative; margin: 0; }
.home-page .route-section__visual img { width: 100%; max-width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-feature); object-fit: cover; }
.home-page .route-markers { position: absolute; inset: auto 1rem 1rem auto; display: flex; width: min(17.5rem, calc(100% - 2rem)); min-width: 0; flex-direction: column; gap: .75rem; }
.home-page .route-marker { width: 100%; min-width: 0; padding: .8rem; border: 1px solid rgba(255,253,247,.72); border-radius: var(--radius-md); background: var(--color-glass-white); color: var(--color-ink); font-size: var(--font-size-small); text-align: left; backdrop-filter: blur(10px); }
.home-page .route-marker strong { display: block; }
.home-page .route-marker.is-active { box-shadow: 0 0 0 3px var(--color-lemon-yellow); }
.home-page .route-link { color: var(--color-lemon-yellow); font-weight: var(--font-weight-bold); }

.home-page .community__copy { grid-column: span 5; min-width: 0; align-self: center; max-width: 37rem; }
.home-page .community__copy > * { margin: 0; }
.home-page .community__copy > * + * { margin-top: 1rem; }
.home-page .community__image { grid-column: span 7; min-width: 0; margin: 0; }
.home-page .community__image img { width: 100%; max-width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius-feature); object-fit: cover; object-position: 62% center; }
.home-page .community__cards { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.home-page .community-card { display: flex; min-width: 0; flex-direction: column; gap: 1rem; padding: 1.5rem; border: var(--border-default); border-radius: var(--radius-card); color: var(--color-ink); text-decoration: none; box-shadow: var(--edge-rubber); transition: transform var(--transition-fast); }
.home-page .community-card > * { margin: 0; }
.home-page .community-card:hover { color: var(--color-ink); transform: translateY(-2px); }
.home-page .community-card--competition { background: var(--color-turquoise); }
.home-page .community-card--crossplay { background: var(--color-soft-white); border-color: var(--color-cobalt-blue); }
.home-page .community-card--community { background: var(--color-lemon-yellow); }
.home-page .community-card__arrow { margin-top: auto; font-size: 1.3rem; }

.home-page .style-section { position: relative; background: var(--color-coral-tint); }
.home-page .style__copy { grid-column: span 6; min-width: 0; max-width: 40rem; }
.home-page .style__copy > * { margin: 0; }
.home-page .style__copy > * + * { margin-top: 1rem; }
.home-page .style__word { grid-column: span 6; min-width: 0; align-self: center; color: rgba(36,84,214,.16); font-family: var(--font-heading); font-size: clamp(4rem, 13vw, 9rem); font-weight: var(--font-weight-black); line-height: .8; text-align: right; }
.home-page .style__panels { display: grid; min-width: 0; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.home-page .style-panel { grid-column: span 5; min-width: 0; padding: 1.5rem; border: var(--border-default); border-radius: var(--radius-card); background: var(--color-soft-white); }
.home-page .style-panel > * { margin: 0; }
.home-page .style-panel > * + * { margin-top: .75rem; }
.home-page .style-panel p { font-size: var(--font-size-small); }
.home-page .style__notice { grid-column: span 12; min-width: 0; max-width: 47.5rem; padding: 1rem 1.25rem; border-left: 5px solid var(--color-coral-orange); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--color-ink); color: var(--color-soft-white); }
.home-page .style__notice > * { margin: 0; }
.home-page .style__notice > * + * { margin-top: .35rem; }
.home-page .style__notice strong { color: var(--color-lemon-yellow); }

.home-page .freshness__copy { grid-column: span 7; min-width: 0; max-width: 42.5rem; }
.home-page .freshness__copy > * { margin: 0; }
.home-page .freshness__copy > * + * { margin-top: 1rem; }
.home-page .freshness__check { grid-column: span 5; min-width: 0; align-self: center; color: rgba(22,199,193,.28); font-family: var(--font-heading); font-size: clamp(4rem, 12vw, 8rem); font-weight: var(--font-weight-black); line-height: .8; text-align: right; }
.home-page .status-grid { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.home-page .status-card { min-width: 0; padding: 1.5rem; border: var(--border-default); border-radius: var(--radius-card); background: var(--color-soft-white); }
.home-page .status-card > * { margin: 0; }
.home-page .status-card > * + * { margin-top: .75rem; }
.home-page .status-card p { font-size: var(--font-size-small); }
.home-page .status-card__tag { display: inline-flex; padding: .35rem .55rem; border-radius: var(--radius-pill); background: var(--color-sky-tint); font-size: var(--font-size-micro); font-weight: var(--font-weight-black); text-transform: uppercase; }
.home-page .status-card:nth-child(2) .status-card__tag { background: var(--color-lemon-yellow); }
.home-page .status-card:nth-child(3) .status-card__tag { background: var(--color-coral-tint); }
.home-page .freshness__cta { margin: 1.5rem 0 0; }

.home-page .faq-section { background: var(--color-sky-tint); }
.home-page .faq-section__intro { max-width: 35rem; margin-inline: auto; text-align: center; }
.home-page .faq-section__intro > * { margin: 0; }
.home-page .faq-section__intro > * + * { margin-top: 1rem; }
.home-page .faq-list { max-width: 47.5rem; margin: 2rem auto 0; }
.home-page .faq-item { margin: 0; border: var(--border-default); border-radius: var(--radius-md); background: var(--color-soft-white); overflow: hidden; }
.home-page .faq-item + .faq-item { margin-top: 1rem; }
.home-page .faq-question { display: flex; width: 100%; min-height: 3.25rem; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; color: var(--color-ink); font-weight: var(--font-weight-bold); text-align: left; }
.home-page .faq-question::after { content: "+"; font-size: 1.5rem; line-height: 1; }
.home-page .faq-question[aria-expanded="true"]::after { content: "−"; }
.home-page .faq-answer { padding: 0 1rem 1rem; }
.home-page .faq-answer p { margin: 0; }

.home-page .next-round { position: relative; background: var(--color-cobalt-blue); color: var(--color-soft-white); }
.home-page .next-round::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 2.5rem; border-radius: 0 0 50% 50%; background: var(--color-soft-white); }
.home-page .next-round__intro { position: relative; max-width: 42.5rem; margin-inline: auto; padding-top: 2rem; text-align: center; }
.home-page .next-round__intro > * { margin: 0; }
.home-page .next-round__intro > * + * { margin-top: 1rem; }
.home-page .next-round h2, .home-page .next-round p { color: var(--color-soft-white); }
.home-page .next-round__cards { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.home-page .next-card { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.5rem; border: 1px solid rgba(255,253,247,.7); border-radius: var(--radius-card); background: var(--color-glass-white); color: var(--color-ink); text-decoration: none; box-shadow: var(--edge-rubber); transition: transform var(--transition-fast); }
.home-page .next-card > * { margin: 0; }
.home-page .next-card:hover { color: var(--color-ink); transform: translateY(-2px); }
.home-page .next-card__icon { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border-radius: 50%; background: var(--color-lemon-yellow); font-weight: var(--font-weight-black); }
.home-page .next-card:nth-child(2) .next-card__icon { background: var(--color-turquoise); }
.home-page .next-card:nth-child(3) .next-card__icon { background: var(--color-coral-orange); color: var(--color-soft-white); }
.home-page .next-round__note { max-width: 38rem; margin: 2rem auto 0; color: rgba(255,253,247,.9); font-size: var(--font-size-small); text-align: center; }
.home-page .finish-line { height: .75rem; margin-top: 2rem; border-radius: var(--radius-pill); background: repeating-linear-gradient(90deg, var(--color-soft-white) 0 18px, var(--color-lemon-yellow) 18px 36px); animation: home-stripe 7s linear infinite; }

@keyframes home-float { 50% { transform: translateY(-5px) rotate(-8deg); } }
@keyframes home-stripe { to { background-position: 72px 0; } }

@media (max-width: 63.9375rem) {
  .home-page .home-hero { background: linear-gradient(145deg, var(--color-soft-white) 0 72%, var(--color-cobalt-blue) 72% 100%); }
  .home-page .home-hero__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1.25rem; }
  .home-page .home-hero__copy, .home-page .home-hero__visual { grid-column: span 8; }
  .home-page .home-hero__copy { padding-block: 0; }
  .home-page .home-hero__copy .lead { max-width: 35rem; }
  .home-page .home-hero__visual { margin-top: .5rem; }
  .home-page .quick-links__intro, .home-page .explorer__top, .home-page .community__top, .home-page .style__top, .home-page .freshness__top, .home-page .route-section__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1.25rem; }
  .home-page .quick-links__heading { grid-column: span 3; }
  .home-page .quick-links__intro-copy { grid-column: span 5; }
  .home-page .quick-links__mark { display: none; }
  .home-page .quick-links__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .home-page .explorer__heading { grid-column: span 8; }
  .home-page .explorer__form { grid-column: span 8; }
  .home-page .explorer__results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-page .basics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-page .route-section__copy, .home-page .route-section__visual { grid-column: span 8; }
  .home-page .community__copy, .home-page .community__image { grid-column: span 8; }
  .home-page .community__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-page .community-card:nth-child(3) { grid-column: span 2; }
  .home-page .style__copy { grid-column: span 8; }
  .home-page .style__word { display: none; }
  .home-page .style-panel { grid-column: span 4; }
  .home-page .freshness__copy { grid-column: span 8; }
  .home-page .freshness__check { display: none; }
  .home-page .status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-page .status-card:nth-child(3) { grid-column: span 2; }
  .home-page .next-round__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-page .next-card:nth-child(3) { grid-column: span 2; }
}

@media (max-width: 47.9375rem) {
  .home-page .section { padding-block: 3rem; }
  .home-page .home-hero { padding-top: 3rem; background: linear-gradient(145deg, var(--color-soft-white) 0 80%, var(--color-cobalt-blue) 80% 100%); }
  .home-page .home-hero__grid, .home-page .quick-links__intro, .home-page .explorer__top, .home-page .community__top, .home-page .style__top, .home-page .freshness__top, .home-page .route-section__grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .home-page .home-hero__copy, .home-page .home-hero__visual, .home-page .quick-links__heading, .home-page .quick-links__intro-copy, .home-page .explorer__heading, .home-page .explorer__form, .home-page .route-section__copy, .home-page .route-section__visual, .home-page .community__copy, .home-page .community__image, .home-page .style__copy, .home-page .freshness__copy { grid-column: 1; }
  .home-page .home-hero__title { font-size: clamp(2.75rem, 13vw, 3.4rem); }
  .home-page .home-hero__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .home-page .home-hero__actions > * { width: 100%; min-width: 0; }
  .home-page .home-hero__visual { margin-top: 1rem; }
  .home-page .home-hero__checkpoint { right: .75rem; bottom: -.75rem; width: 4.2rem; height: 4.2rem; border-width: 5px; font-size: 1.2rem; }
  .home-page .home-hero__star { right: 8%; top: 2%; }
  .home-page .quick-links__grid, .home-page .explorer__results, .home-page .basics__grid, .home-page .community__cards, .home-page .status-grid, .home-page .next-round__cards { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .home-page .quick-link { min-height: 0; }
  .home-page .explorer__shell { padding: 1rem; }
  .home-page .topic-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; }
  .home-page .topic-chip { flex: 0 0 auto; }
  .home-page .basic-step { padding: 1rem; }
  .home-page .route-markers { position: static; width: 100%; margin-top: 1rem; }
  .home-page .community-card:nth-child(3), .home-page .status-card:nth-child(3), .home-page .next-card:nth-child(3) { grid-column: 1; }
  .home-page .style__panels { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .home-page .style-panel, .home-page .style__notice { grid-column: 1; }
  .home-page .status-card, .home-page .next-card { min-width: 0; }
  .home-page .next-round::before { height: 1.5rem; }
  .home-page .next-round__intro { padding-top: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .home-hero__checkpoint,
  .home-page .home-hero__star,
  .home-page .finish-line { animation: none; }
}