:where(.landingUnit, .landingBuilding, .landingGlossary) .lpSection {
  width: min(var(--section-content-width), calc(100% - var(--section-x) * 2));
  margin: 0 auto 1.375rem;
  padding: 1.5rem 0;
}

:where(.landingUnit, .landingBuilding, .landingGenre) .lpSection h2 {
  margin: 0 0 1rem;
  color: var(--cyan);
  font-size: 2rem;
  line-height: 1.05;
  font-weight: 900;
}

:where(.landingUnit, .landingBuilding) .lpSection p {
  margin: 0;
  color: var(--panel-text);
  font-size: 1.5rem;
  line-height: 1.45;
}

:where(.landingUnit, .landingBuilding) .lpSection p + p {
  margin-top: 1rem;
}

:where(.landingUnit, .landingGlossary) .lpList {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: .85rem;
}

:where(.landingUnit, .landingBuilding, .landingGlossary) .lpList li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--panel-text);
  font-size: 1.5rem;
  line-height: 1.45;
}

:where(.landingUnit, .landingBuilding, .landingGlossary, .landingLists) .lpList li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: .62em;
  width: .5rem;
  height: .5rem;
  transform: rotate(45deg);
  background: var(--cyan);
}

:where(.landingUnit, .landingBuilding, .landingGlossary, .landingLists) .lpList strong {
  color: #dff7ff;
}

:where(.landingUnit, .landingBuilding, .landingGlossary, .landingLists) .panel .lpList {
  grid-column: 1/3;
}

:where(.landingUnit, .landingBuilding) .rankText .lpList {
  grid-column: auto;
}

:where(.landingUnit, .landingBuilding) .lpMainShot {
  width: 100%;
  max-width: 60rem;
  height: auto;
  display: block;
  margin: 1rem auto 0;
  border: 1px solid #2f5468;
}

:where(.landingUnit, .landingBuilding) .lpSteps {
  list-style: none;
  counter-reset: step;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
}

:where(.landingUnit, .landingBuilding) .lpSteps li {
  counter-increment: step;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  color: var(--panel-text);
  font-size: 1.5rem;
  line-height: 1.45;
}

:where(.landingUnit, .landingBuilding) .lpSteps li.hasShot {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  align-content: start;
  gap: 1rem 1.25rem;
  padding: 1.25rem 1.5rem 1.5rem;
  background: linear-gradient(135deg, #051626ee, #020712f2);
  box-shadow: inset 0 0 1.25rem #00b4ff33;
}

:where(.landingUnit, .landingBuilding) .lpSteps li.hasShot::before {
  grid-row: 1;
  grid-column: 1;
}

:where(.landingUnit, .landingBuilding) .lpSteps li.hasShot span {
  grid-row: 1;
  grid-column: 2;
  align-self: center;
}

:where(.landingUnit, .landingBuilding) .lpSteps li.hasShot img {
  grid-row: 2;
  grid-column: 1 / -1;
  margin: 0;
}

:where(.landingUnit, .landingBuilding) .lpSteps li::before {
  content: counter(step);
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #00d9ff;
  border-radius: .25rem;
  color: #dff7ff;
  background: linear-gradient(#064e69, #05283b);
  box-shadow: inset 0 0 .75rem #4edcff2f;
  font-family: var(--font-title);
  font-size: 1.5rem;
}

:where(.landingUnit, .landingBuilding, .landingGenre, .landingGlossary) .lpClosingLine {
  margin: 0;
  max-width: 48rem;
  color: #d8edf5;
  font-size: calc(1.05 * var(--download-content-unit));
  line-height: 1.4;
}

:where(.landingUnit, .landingBuilding, .landingGenre, .landingGlossary) .download .play {
  margin-top: 0;
}

:where(.landingUnit, .landingBuilding) .lpTable {
  margin: 1rem 0 0;
  border-collapse: collapse;
  color: var(--panel-text);
  font-size: 1.5rem;
  line-height: 1.4;
}

:where(.landingUnit, .landingBuilding) .lpTable th,
:where(.landingUnit, .landingBuilding) .lpTable td {
  padding: .4rem .9rem;
  border: 1px solid #2f5468;
  text-align: left;
}

:where(.landingUnit, .landingBuilding) .lpTable th {
  color: var(--cyan);
  font-weight: 700;
}

@media (orientation: portrait) {
  :where(.landingUnit, .landingBuilding) .lpSteps {
    grid-template-columns: 1fr;
  }
}

:where(.landingUnit, .landingBuilding) .lpSection a,
:where(.landingUnit, .landingBuilding) .panel a,
:where(.landingUnit, .landingBuilding) .lpTable a,
:where(.landingUnit, .landingBuilding) .lpSteps a,
:where(.landingUnit, .landingBuilding) .unitAbilities a,
:where(.landingUnit, .landingBuilding) .unitDesc a {
  color: var(--cyan);
  text-decoration: none;
}

:where(.landingUnit, .landingBuilding, .landingGlossary) .lpSection a:hover,
:where(.landingUnit, .landingBuilding, .landingGlossary) .panel a:hover,
:where(.landingUnit, .landingBuilding, .landingGlossary) .lpTable a:hover,
:where(.landingUnit, .landingBuilding, .landingGlossary) .lpSteps a:hover,
:where(.landingUnit, .landingBuilding, .landingGlossary) .unitAbilities a:hover,
:where(.landingUnit, .landingBuilding, .landingGlossary) .unitDesc a:hover {
  color: #fff;
}

:where(.landingBuilding, .landingLists) .lpList {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: .85rem;
  max-width: 72rem;
}

:where(.landingBuilding) .lpSection {
  scroll-margin-top: 5rem;
}

:where(.landingBuilding) .lpSection h3 {
  margin: 1.5rem 0 .5rem;
  color: var(--cyan);
  font-size: 1.5rem;
  line-height: 1.1;
}

:where(.landingBuilding) .lpSection .lpTable + p,
:where(.landingBuilding) .lpSection .lpList + p,
:where(.landingBuilding) .lpSection .lpSteps + p {
  margin-top: 1rem;
}

:where(.landingGenre) .lpSection {
  width: min(var(--section-content-width), calc(100% - var(--section-x) * 2));
  margin: 0 auto 1.375rem;
  padding: 1.5rem 2rem;
}

:where(.landingGenre) .chips + .lpSection {
  margin-top: 2.5rem;
}

:where(.landingGenre) .lpSection p {
  margin: 0;
  max-width: 72rem;
  color: var(--panel-text);
  font-size: 1.15rem;
  line-height: 1.45;
}

:where(.landingGlossary) .lpSection h1 {
  margin: 0;
  color: var(--cyan);
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.05;
  letter-spacing: .06em;
}

:where(.landingGlossary) .lpSection p {
  margin: 1rem 0 0;
  max-width: 72rem;
  color: var(--panel-text);
  font-size: 1.5rem;
  line-height: 1.45;
}

:where(.landingGlossary) .glossaryGroups {
  width: 100%;
  max-width: var(--section-width);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.125rem;
  margin: 0 auto;
  padding: 1.5rem var(--section-x) 1.375rem;
}

:where(.landingGlossary) .glossaryGroups .panel {
  min-height: 0;
}

:where(.landingGlossary) .glossaryGroups .lpList li {
  padding-left: 0;
}

:where(.landingGlossary) .glossaryGroups .lpList li::before {
  content: none;
}

:where(.landingGlossary) .lpSection a,
:where(.landingGlossary) .panel a,
:where(.landingGlossary) .lpTable a,
:where(.landingGlossary) .lpSteps a,
:where(.landingGlossary) .unitAbilities a,
:where(.landingGlossary) .unitDesc a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}

:where(.landingCentered) .hero .heroText {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

:where(.landingSteps) .lpSteps {
  list-style: none;
  counter-reset: step;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.75rem;
}

:where(.landingSteps) .lpSteps li {
  counter-increment: step;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 72rem;
  color: var(--panel-text);
  font-size: 1.15rem;
  line-height: 1.45;
}

:where(.landingSteps) .lpSteps li::before {
  content: counter(step);
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #00d9ff;
  border-radius: .25rem;
  color: #dff7ff;
  background: linear-gradient(#064e69, #05283b);
  box-shadow: inset 0 0 .75rem #4edcff2f;
  font-family: var(--font-title);
  font-size: 1.25rem;
}

:where(.landingLists) .lpList li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--panel-text);
  font-size: 1.15rem;
  line-height: 1.45;
}

:where(.landingTable) .lpTable {
  width: 100%;
  max-width: 72rem;
  border-collapse: collapse;
  margin-top: 1.25rem;
  color: var(--panel-text);
  font-size: 1.1rem;
}

:where(.landingTable) .lpTable th,
:where(.landingTable) .lpTable td {
  padding: .85rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #2f5468;
}

:where(.landingTable) .lpTable thead th {
  color: var(--cyan);
  font-weight: 900;
}

:where(.landingTable) .lpTable td:last-child {
  color: #dff7ff;
  font-weight: 700;
}