/* PUBG UA — character-held card concept, local preview 2026-08-11.
   Visual-only layer: HTML copy, heading hierarchy and SEO metadata stay intact. */

:root {
  --cc-ink: #050b11;
  --cc-panel: rgba(31, 29, 38, 0.96);
  --cc-panel-strong: rgba(38, 35, 47, 0.98);
  --cc-line: rgba(189, 181, 207, 0.2);
  --cc-line-strong: rgba(199, 187, 224, 0.38);
  --cc-white: #f5f7f8;
  --cc-muted: #b4c0c7;
  --cc-blue: #19a8f2;
  --cc-amber: #ffad27;
  --cc-card-shadow: 0 18px 42px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.045) inset;
  --cc-character-shadow: drop-shadow(0 15px 13px rgba(0, 0, 0, 0.3));
}

html {
  background: var(--cc-ink);
}

body.editorial-page,
body.internal-page {
  color: var(--cc-white);
  background:
    linear-gradient(rgba(4, 10, 15, 0.95), rgba(4, 10, 15, 0.978)),
    url("/assets/character-cards/invite-background-depth-v2.webp") center / cover fixed no-repeat,
    var(--cc-ink);
}

body.editorial-page::selection,
body.internal-page::selection {
  color: #071017;
  background: #ffc45d;
}

/* Header — larger navigation, restrained glass rather than a heavy bar. */
.site-header {
  border-bottom: 1px solid rgba(146, 213, 243, 0.18);
  background: rgba(4, 11, 17, 0.8);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
}

.topbar {
  min-height: 88px;
}

.brand img {
  width: 154px;
  filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.32));
}

.desktop-nav {
  gap: clamp(20px, 2vw, 36px);
}

.desktop-nav a {
  position: relative;
  padding: 13px 0;
  color: #dbe4e8;
  font-size: 0.91rem;
  font-weight: 700;
  letter-spacing: 0.025em;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cc-amber), var(--cc-blue));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.desktop-nav a:hover::after,
.desktop-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.discord-link {
  min-height: 48px;
  border: 1px solid rgba(255, 196, 91, 0.52);
  border-radius: 7px;
  background: linear-gradient(115deg, #ffd47c, var(--cc-amber));
  box-shadow: 0 10px 25px rgba(255, 173, 39, 0.16);
}

/* The supplied background becomes an actual scene, not a faint texture. */
.editorial-page .editorial-hero,
.internal-page .subhero {
  isolation: isolate;
  overflow: hidden;
  border-bottom: 0;
  background-image:
    linear-gradient(180deg, rgba(4, 10, 14, 0.18) 0%, rgba(4, 11, 16, 0.22) 48%, #050c12 100%),
    linear-gradient(90deg, rgba(4, 10, 14, 0.16), transparent 31%, transparent 70%, rgba(4, 10, 14, 0.15)),
    url("/assets/character-cards/invite-background-depth-v2.webp");
  background-position: center, center, center;
  background-size: cover, cover, cover;
  background-repeat: no-repeat;
}

.editorial-page .editorial-hero {
  min-height: min(900px, 94svh);
  padding-top: 132px;
}

.editorial-page .editorial-hero::after,
.internal-page .subhero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 42%;
  background: linear-gradient(transparent, #050c12 94%);
  pointer-events: none;
}

.editorial-page .hero-grid {
  opacity: 0.075;
}

.editorial-page .hero-content {
  width: min(880px, 100%);
}

.editorial-page .hero-logo {
  width: min(650px, 78vw);
  filter: drop-shadow(0 24px 42px rgba(0, 0, 0, 0.38));
}

.editorial-page .hero-copy {
  width: min(760px, 100%);
  margin-block: 20px 28px;
  padding: 22px 32px;
  border: 1px solid rgba(205, 231, 242, 0.17);
  border-radius: 8px;
  background: rgba(4, 13, 19, 0.74);
  box-shadow: 0 15px 38px rgba(0, 0, 0, 0.23);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.internal-page .subhero {
  min-height: 600px;
  padding-top: 160px;
}

.internal-page .subhero-inner {
  position: relative;
  z-index: 2;
  max-width: 850px;
  padding: 38px 42px;
  border: 1px solid rgba(196, 226, 239, 0.18);
  border-radius: 8px;
  background: rgba(4, 13, 19, 0.76);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
}

/* Cleaner section rhythm. */
.editorial-page .section-shell,
.internal-page .section-shell {
  padding-block: clamp(48px, 6vw, 82px);
}

.editorial-page .section-heading,
.internal-page .section-heading {
  margin-bottom: 26px;
}

.editorial-page .section-heading h2,
.internal-page .section-heading h2 {
  max-width: 15ch;
  font-size: clamp(2.35rem, 4.5vw, 4.35rem);
  line-height: 0.98;
}

.editorial-page .section-intro,
.internal-page .section-intro {
  max-width: 70ch;
  color: var(--cc-muted);
  line-height: 1.75;
}

.editorial-page .feature-section {
  display: block;
  padding-top: 86px;
}

.editorial-page .feature-section .section-heading,
.editorial-page .feature-section .section-intro,
.editorial-page .feature-section .feature-grid {
  margin-right: 0;
  margin-left: 0;
}

/* Shared stage grids. */
.editorial-page .feature-grid,
.internal-page .feature-grid,
.internal-page .content-grid,
.internal-page .stats-grid,
.editorial-page .faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px 42px;
}

.editorial-page .feature-grid > *,
.internal-page .feature-grid > *,
.internal-page .content-grid > *,
.internal-page .stats-grid > * {
  grid-column: auto !important;
}

.editorial-page .feature-grid .rank-panel,
.internal-page .rank-panel,
.editorial-page .faq-grid .faq-item,
.internal-page .content-grid > .wide {
  grid-column: 1 / -1 !important;
}

/* Base character-held card. */
:is(
  .editorial-page .feature-card,
  .editorial-page .step-card,
  .editorial-page .faq-item,
  .editorial-page .cta-panel,
  .internal-page .feature-card,
  .internal-page .step-card,
  .internal-page .info-card,
  .internal-page .stat-card,
  .internal-page .split-copy,
  .internal-page .cta-panel
) {
  --cc-character: url("/assets/character-cards/web/girls-01-left.webp");
  position: relative;
  min-width: 0;
  min-height: 350px;
  padding: 42px 36px 38px 43%;
  overflow: visible;
  border: 1px solid var(--cc-line);
  border-radius: 9px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.026), transparent 42%),
    radial-gradient(circle at 92% 8%, rgba(127, 98, 170, 0.13), transparent 36%),
    var(--cc-panel);
  box-shadow: var(--cc-card-shadow);
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

:is(
  .editorial-page .feature-card,
  .editorial-page .step-card,
  .editorial-page .faq-item,
  .editorial-page .cta-panel,
  .internal-page .feature-card,
  .internal-page .step-card,
  .internal-page .info-card,
  .internal-page .stat-card,
  .internal-page .split-copy,
  .internal-page .cta-panel
)::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: auto;
  bottom: -22px;
  left: -34px;
  width: 50%;
  height: calc(100% + 48px);
  background-image: var(--cc-character);
  background-position: left bottom;
  background-size: contain;
  background-repeat: no-repeat;
  filter: var(--cc-character-shadow);
  pointer-events: none;
}

:is(
  .editorial-page .feature-card,
  .editorial-page .step-card,
  .editorial-page .faq-item,
  .editorial-page .cta-panel,
  .internal-page .feature-card,
  .internal-page .step-card,
  .internal-page .info-card,
  .internal-page .stat-card,
  .internal-page .split-copy,
  .internal-page .cta-panel
)::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -1px;
  right: 22px;
  left: 22px;
  height: 2px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--cc-amber) 22%, var(--cc-blue) 78%, transparent);
  opacity: 0.85;
  pointer-events: none;
}

:is(
  .editorial-page .feature-card,
  .editorial-page .step-card,
  .editorial-page .faq-item,
  .internal-page .feature-card,
  .internal-page .step-card,
  .internal-page .info-card,
  .internal-page .stat-card
):hover {
  border-color: var(--cc-line-strong);
  box-shadow: 0 21px 48px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.055) inset;
  transform: translateY(-3px);
}

/* Even cards are held from the opposite side. */
:is(
  .editorial-page .feature-grid,
  .editorial-page .steps-grid,
  .editorial-page .faq-grid,
  .internal-page .feature-grid,
  .internal-page .content-grid,
  .internal-page .stats-grid,
  .internal-page .steps-grid
) > :nth-child(even) {
  padding-right: 43%;
  padding-left: 36px;
}

:is(
  .editorial-page .feature-grid,
  .editorial-page .steps-grid,
  .editorial-page .faq-grid,
  .internal-page .feature-grid,
  .internal-page .content-grid,
  .internal-page .stats-grid,
  .internal-page .steps-grid
) > :nth-child(even)::before {
  right: -34px;
  left: auto;
  background-position: right bottom;
}

/* Fourteen reviewed character poses, cycled per collection. */
:is(.feature-grid, .content-grid, .stats-grid, .steps-grid, .faq-grid) > :nth-child(1) { --cc-character: url("/assets/character-cards/web/girls-01-left.webp"); }
:is(.feature-grid, .content-grid, .stats-grid, .steps-grid, .faq-grid) > :nth-child(2) { --cc-character: url("/assets/character-cards/web/mens-02-right.webp"); }
:is(.feature-grid, .content-grid, .stats-grid, .steps-grid, .faq-grid) > :nth-child(3) { --cc-character: url("/assets/character-cards/web/girls-09-left.webp"); }
:is(.feature-grid, .content-grid, .stats-grid, .steps-grid, .faq-grid) > :nth-child(4) { --cc-character: url("/assets/character-cards/web/mens-10-right.webp"); }
:is(.feature-grid, .content-grid, .stats-grid, .steps-grid, .faq-grid) > :nth-child(5) { --cc-character: url("/assets/character-cards/web/girls-18-left.webp"); }
:is(.feature-grid, .content-grid, .stats-grid, .steps-grid, .faq-grid) > :nth-child(6) { --cc-character: url("/assets/character-cards/web/mens-18-right-v2.webp"); }
:is(.feature-grid, .content-grid, .stats-grid, .steps-grid, .faq-grid) > :nth-child(7) { --cc-character: url("/assets/character-cards/web/girls-23-left.webp"); }
:is(.feature-grid, .content-grid, .stats-grid, .steps-grid, .faq-grid) > :nth-child(8) { --cc-character: url("/assets/character-cards/web/mens-12-right.webp"); }
:is(.feature-grid, .content-grid, .stats-grid, .steps-grid, .faq-grid) > :nth-child(9) { --cc-character: url("/assets/character-cards/web/girls-10-left.webp"); }
:is(.feature-grid, .content-grid, .stats-grid, .steps-grid, .faq-grid) > :nth-child(10) { --cc-character: url("/assets/character-cards/web/mens-17-right.webp"); }
:is(.feature-grid, .content-grid, .stats-grid, .steps-grid, .faq-grid) > :nth-child(11) { --cc-character: url("/assets/character-cards/web/girls-03-left.webp"); }
:is(.feature-grid, .content-grid, .stats-grid, .steps-grid, .faq-grid) > :nth-child(12) { --cc-character: url("/assets/character-cards/web/mens-14-right.webp"); }
:is(.feature-grid, .content-grid, .stats-grid, .steps-grid, .faq-grid) > :nth-child(13) { --cc-character: url("/assets/character-cards/web/girls-27-left.webp"); }
:is(.feature-grid, .content-grid, .stats-grid, .steps-grid, .faq-grid) > :nth-child(14) { --cc-character: url("/assets/character-cards/web/mens-26-right.webp"); }

/* Hide the previous abstract illustrations; the characters are now the visual system. */
.editorial-page .feature-visual,
.editorial-page .feature-card .icon-frame,
.internal-page .feature-card .icon-frame {
  display: none;
}

.editorial-page .feature-card {
  min-height: 390px;
}

/* Direction prototype: a real card is part of the character illustration,
   so fingers visibly wrap around its edge instead of holding empty air. */
.editorial-page .feature-card--search {
  min-height: 430px;
  padding: 70px 44px 68px 39%;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.editorial-page .feature-card--search::before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  background-image: url("/assets/character-cards/web/girls-01-left-card-v2.webp");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.24));
}

.editorial-page .feature-card--search::after {
  display: none;
}

.editorial-page .feature-card--search:hover {
  transform: translateY(-3px);
  box-shadow: none;
}

.editorial-page .feature-card--stats {
  min-height: 430px;
  padding: 70px 39% 68px 44px;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.editorial-page .feature-card--stats::before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  background-image: url("/assets/character-cards/web/mens-02-right-card-v2.webp");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.24));
}

.editorial-page .feature-card--stats::after {
  display: none;
}

.editorial-page .feature-card--stats:hover {
  transform: translateY(-3px);
  box-shadow: none;
}

/* V3 composition: one larger guide character per two-card row.
   The character points toward the row instead of pretending to hold each card. */
.editorial-page .feature-grid {
  column-gap: 0;
  row-gap: 56px;
  overflow: visible;
}

.editorial-page .feature-grid > .feature-card:not(.rank-panel) {
  min-height: 390px;
  padding: 52px 48px;
  overflow: visible;
  border: 1px solid var(--cc-line);
  border-radius: 0;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.026), transparent 42%),
    radial-gradient(circle at 92% 8%, rgba(127, 98, 170, 0.13), transparent 36%),
    var(--cc-panel);
  box-shadow: var(--cc-card-shadow);
}

.editorial-page .feature-grid > .feature-card:nth-child(odd):not(.rank-panel) {
  border-right: 0;
  border-radius: 9px 0 0 9px;
}

.editorial-page .feature-grid > .feature-card:nth-child(even):not(.rank-panel) {
  border-left-color: rgba(199, 187, 224, 0.11);
  border-radius: 0 9px 9px 0;
  box-shadow: inset 1px 0 rgba(199, 187, 224, 0.08), var(--cc-card-shadow);
}

.editorial-page .feature-grid > .feature-card:not(.rank-panel)::before {
  display: none;
  top: auto;
  bottom: -22px;
  width: 43%;
  height: calc(100% + 56px);
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  filter: var(--cc-character-shadow);
}

.editorial-page .feature-grid > .feature-card:not(.rank-panel)::after {
  display: block;
  top: -1px;
  right: 22px;
  left: 22px;
  width: auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(154, 130, 193, 0.7), transparent);
}

.editorial-page .feature-grid > .feature-card:not(.rank-panel):hover {
  transform: none;
  border-color: var(--cc-line-strong);
}

/* Row 1 — guide at the left edge. */
.editorial-page .feature-grid > .feature-card:nth-child(1)::before {
  display: block;
  left: -18px;
  background-image: url("/assets/character-cards/web/girls-08-point-right-down-v2.webp");
  background-position: left bottom;
}

.editorial-page .feature-grid > .feature-card:nth-child(1) .feature-copy {
  padding-left: 31% !important;
}

/* Row 2 — guide at the right edge. */
.editorial-page .feature-grid > .feature-card:nth-child(4)::before {
  display: block;
  right: -18px;
  left: auto;
  background-image: url("/assets/character-cards/web/mens-02-point-left-down-v2.webp");
  background-position: right bottom;
}

.editorial-page .feature-grid > .feature-card:nth-child(4) .feature-copy {
  padding-right: 31% !important;
}

/* Row 3 — guide returns to the left. */
.editorial-page .feature-grid > .feature-card:nth-child(5)::before {
  display: block;
  left: -18px;
  background-image: url("/assets/character-cards/web/girls-18-left.webp");
  background-position: left bottom;
}

.editorial-page .feature-grid > .feature-card:nth-child(5) .feature-copy {
  padding-left: 31% !important;
}

.editorial-page .feature-copy {
  position: relative;
  z-index: 5;
  width: 100% !important;
  height: 100%;
  padding: 0 !important;
}

.editorial-page .feature-card h3,
.internal-page .feature-card h3,
.internal-page .info-card h3,
.editorial-page .faq-item h3,
.editorial-page .step-card h3,
.internal-page .step-card h3 {
  color: var(--cc-white);
  font-size: clamp(1.28rem, 1.8vw, 1.68rem);
  line-height: 1.16;
}

.editorial-page .feature-card p,
.internal-page .feature-card p,
.internal-page .info-card p,
.internal-page .stat-card span,
.editorial-page .faq-item p,
.editorial-page .step-card p,
.internal-page .step-card p,
.internal-page .split-copy p {
  color: var(--cc-muted);
  line-height: 1.67;
}

.editorial-page .feature-card .text-link,
.internal-page .text-link {
  position: relative;
  z-index: 6;
  margin-top: auto;
  color: #66caf7;
}

/* Ranked keeps its real rank imagery inside the held card. */
.editorial-page .rank-panel {
  min-height: 430px;
  padding-left: 29%;
}

.editorial-page .rank-panel-grid,
.internal-page .rank-panel-grid {
  position: relative;
  z-index: 5;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.4fr);
  align-items: center;
}

.editorial-page .rank-progression,
.internal-page .rank-progression {
  gap: 7px;
}

/* Three steps remain a clear three-part flow, now with character support. */
.editorial-page .steps-grid,
.internal-page .steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 38px;
  border: 0;
}

.editorial-page .step-card,
.internal-page .step-card {
  min-height: 390px;
  padding: 36px 28px 32px 39%;
  border: 1px solid var(--cc-line);
  border-radius: 9px;
  background: var(--cc-panel);
  box-shadow: var(--cc-card-shadow);
}

.editorial-page .step-card:nth-child(even),
.internal-page .step-card:nth-child(even) {
  padding-right: 39%;
  padding-left: 28px;
}

.editorial-page .step-card::before,
.internal-page .step-card::before {
  left: -8px;
  width: 44%;
  height: calc(100% + 48px);
  background-color: transparent !important;
  background-image: var(--cc-character) !important;
  background-position: left bottom !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}

.editorial-page .step-card:nth-child(even)::before,
.internal-page .step-card:nth-child(even)::before {
  right: -8px;
  left: auto;
  background-position: right bottom !important;
}

.editorial-page .step-number,
.internal-page .step-number {
  position: relative;
  z-index: 5;
  margin-bottom: 24px;
  color: rgba(255, 186, 64, 0.28);
  font-size: clamp(3.3rem, 5vw, 5.6rem);
}

.editorial-page .step-card h3,
.editorial-page .step-card p,
.internal-page .step-card h3,
.internal-page .step-card p {
  position: relative;
  z-index: 5;
}

/* FAQ rows have more room and work as strong SEO-readable content cards. */
.editorial-page .faq-grid {
  grid-template-columns: 1fr;
  gap: 42px;
  border: 0;
}

.editorial-page .faq-item {
  min-height: 320px;
  padding-left: 32%;
}

.editorial-page .faq-item:nth-child(even) {
  padding-right: 32%;
  padding-left: 44px;
}

.editorial-page .faq-item::before {
  width: 38%;
}

.editorial-page .faq-item h3,
.editorial-page .faq-item p {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 62ch;
}

/* Internal page split sections. */
.internal-page .split-section {
  align-items: stretch;
  gap: 42px;
}

.internal-page .split-copy {
  --cc-character: url("/assets/character-cards/web/girls-23-left.webp");
  min-height: 440px;
  padding-left: 43%;
}

.internal-page .split-copy > * {
  position: relative;
  z-index: 5;
}

.internal-page .content-grid,
.internal-page .stats-grid {
  align-content: stretch;
}

.internal-page .info-card,
.internal-page .stat-card,
.internal-page .feature-card {
  min-height: 330px;
}

.internal-page .stat-card strong {
  position: relative;
  z-index: 5;
  display: block;
  color: #ffd06d;
  font-size: clamp(1.75rem, 3vw, 2.7rem);
}

.internal-page .info-card > *,
.internal-page .stat-card > *,
.internal-page .feature-card > * {
  position: relative;
  z-index: 5;
}

/* CTA held by the final reviewed character, with real links above the art. */
.editorial-page .cta-panel,
.internal-page .cta-panel {
  --cc-character: url("/assets/character-cards/web/mens-26-right.webp");
  display: block;
  min-height: 380px;
  padding: 58px 43% 54px 58px;
  text-align: left;
}

.editorial-page .cta-panel::before,
.internal-page .cta-panel::before {
  right: -36px;
  left: auto;
  width: 49%;
  background-position: right bottom;
  opacity: 1;
}

.editorial-page .cta-panel h2,
.editorial-page .cta-panel p,
.editorial-page .cta-panel .button-row,
.internal-page .cta-panel h2,
.internal-page .cta-panel p,
.internal-page .cta-panel .button-row {
  position: relative;
  z-index: 6;
  width: 100%;
  max-width: 700px;
}

.editorial-page .cta-panel h2,
.internal-page .cta-panel h2 {
  margin-bottom: 18px;
  font-size: clamp(2.25rem, 4vw, 3.7rem);
  line-height: 1;
}

.editorial-page .cta-panel p,
.internal-page .cta-panel p {
  margin: 0 0 28px;
}

.editorial-page .cta-panel .button-row,
.internal-page .cta-panel .button-row {
  justify-content: flex-start;
}

/* Footer uses the background palette without competing with the cards. */
.site-footer {
  border-top-color: rgba(139, 204, 233, 0.17);
  background: rgba(3, 9, 14, 0.88);
}

@media (max-width: 1100px) {
  .editorial-page .feature-grid,
  .internal-page .feature-grid,
  .internal-page .content-grid,
  .internal-page .stats-grid {
    gap: 38px 28px;
  }

  :is(
    .editorial-page .feature-card,
    .internal-page .feature-card,
    .internal-page .info-card,
    .internal-page .stat-card
  ) {
    padding-left: 39%;
  }

  :is(
    .editorial-page .feature-grid,
    .internal-page .feature-grid,
    .internal-page .content-grid,
    .internal-page .stats-grid
  ) > :nth-child(even) {
    padding-right: 39%;
    padding-left: 30px;
  }

  .editorial-page .rank-panel {
    padding-left: 27%;
  }
}

@media (max-width: 900px) {
  .desktop-nav,
  .discord-link {
    display: none;
  }

  .mobile-menu {
    display: block;
  }

  .editorial-page .feature-grid,
  .internal-page .feature-grid,
  .internal-page .content-grid,
  .internal-page .stats-grid,
  .editorial-page .steps-grid,
  .internal-page .steps-grid {
    grid-template-columns: 1fr;
  }

  :is(
    .editorial-page .feature-grid,
    .editorial-page .steps-grid,
    .internal-page .feature-grid,
    .internal-page .content-grid,
    .internal-page .stats-grid,
    .internal-page .steps-grid
  ) > :nth-child(even) {
    padding-right: 43%;
    padding-left: 36px;
  }

  :is(
    .editorial-page .feature-grid,
    .editorial-page .steps-grid,
    .internal-page .feature-grid,
    .internal-page .content-grid,
    .internal-page .stats-grid,
    .internal-page .steps-grid
  ) > :nth-child(even)::before {
    right: -34px;
  }

  .editorial-page .rank-panel {
    padding-left: 34%;
  }

  .editorial-page .rank-panel-grid,
  .internal-page .rank-panel-grid,
  .internal-page .split-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  body.editorial-page,
  body.internal-page {
    background-attachment: scroll;
  }

  .topbar {
    min-height: 72px;
  }

  .brand img {
    width: 126px;
  }

  .editorial-page .editorial-hero {
    min-height: 760px;
    padding: 102px 16px 66px;
    background-position: center, center, 56% center;
  }

  .editorial-page .hero-logo {
    width: min(92vw, 520px);
  }

  .editorial-page .hero-copy {
    padding: 18px 20px;
  }

  .internal-page .subhero {
    min-height: 560px;
    padding: 104px 16px 60px;
    background-position: center, center, 56% center;
  }

  .internal-page .subhero-inner {
    padding: 28px 22px;
  }

  .editorial-page .section-shell,
  .internal-page .section-shell {
    padding-block: 42px;
  }

  .editorial-page .feature-grid,
  .internal-page .feature-grid,
  .internal-page .content-grid,
  .internal-page .stats-grid,
  .editorial-page .steps-grid,
  .internal-page .steps-grid,
  .editorial-page .faq-grid {
    gap: 50px;
  }

  :is(
    .editorial-page .feature-card,
    .editorial-page .step-card,
    .editorial-page .faq-item,
    .internal-page .feature-card,
    .internal-page .step-card,
    .internal-page .info-card,
    .internal-page .stat-card,
    .internal-page .split-copy
  ) {
    min-height: 640px;
    padding: 32px 24px 330px !important;
    overflow: hidden;
  }

  :is(
    .editorial-page .feature-card,
    .editorial-page .step-card,
    .editorial-page .faq-item,
    .internal-page .feature-card,
    .internal-page .step-card,
    .internal-page .info-card,
    .internal-page .stat-card,
    .internal-page .split-copy
  )::before {
    top: auto;
    right: 0 !important;
    bottom: -20px;
    left: 0 !important;
    width: 100%;
    height: 330px;
    background-position: center bottom !important;
    background-color: transparent !important;
    background-image: var(--cc-character) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }

  .editorial-page .feature-copy {
    height: auto;
  }

  .editorial-page .feature-card:not(.rank-panel) .text-link {
    margin-top: 24px;
  }

  .editorial-page .rank-panel {
    min-height: 780px;
    padding-bottom: 350px !important;
  }

  .editorial-page .rank-progression,
  .internal-page .rank-progression {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .editorial-page .feature-grid > .feature-card:not(.rank-panel) {
    min-height: auto;
    padding: 34px 24px !important;
    border: 1px solid var(--cc-line);
    border-radius: 9px;
    box-shadow: var(--cc-card-shadow);
  }

  .editorial-page .feature-grid > .feature-card:nth-child(1),
  .editorial-page .feature-grid > .feature-card:nth-child(4),
  .editorial-page .feature-grid > .feature-card:nth-child(5) {
    min-height: 620px;
    padding-bottom: 320px !important;
  }

  .editorial-page .feature-grid > .feature-card .feature-copy {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .editorial-page .cta-panel,
  .internal-page .cta-panel {
    min-height: 650px;
    padding: 36px 22px 310px;
    overflow: hidden;
  }

  .editorial-page .cta-panel::before,
  .internal-page .cta-panel::before {
    right: 0;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 335px;
    background-position: center bottom;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.feature-card, .step-card, .faq-item, .info-card, .stat-card) {
    transition: none !important;
  }
}

/* V4: one unmistakably pointing guide per complete content row. */
.editorial-page .feature-grid > .feature-card:nth-child(1)::before {
  background-image: url("/assets/character-cards/web/girls-08-point-right-down-v2.webp");
}

.editorial-page .feature-grid > .feature-card:nth-child(1) {
  --cc-character: url("/assets/character-cards/web/girls-08-point-right-down-v2.webp");
}

.editorial-page .feature-grid > .feature-card:nth-child(4)::before {
  background-image: url("/assets/character-cards/web/mens-02-point-left-down-v2.webp");
}

.editorial-page .feature-grid > .feature-card:nth-child(4) {
  --cc-character: url("/assets/character-cards/web/mens-02-point-left-down-v2.webp");
}

.editorial-page .feature-grid > .feature-card:nth-child(5)::before {
  background-image: url("/assets/character-cards/web/girls-18-point-right-down.webp");
}

.editorial-page .feature-grid > .feature-card:nth-child(5) {
  --cc-character: url("/assets/character-cards/web/girls-18-point-right-down.webp");
}

.editorial-page .rank-panel {
  --cc-character: url("/assets/character-cards/web/girls-23-point-right-down.webp");
  padding-left: 27%;
}

.editorial-page .rank-panel::before {
  display: block;
  right: auto;
  bottom: -18px;
  left: -8px;
  width: 28%;
  height: calc(100% + 36px);
  background-position: left bottom;
}

/* A single guide introduces the entire three-card sequence. */
.editorial-page .steps-grid {
  position: relative;
  gap: 0;
  overflow: visible;
}

.editorial-page .steps-grid::after {
  content: "";
  position: absolute;
  z-index: 5;
  right: -56px;
  bottom: -22px;
  width: clamp(220px, 16vw, 300px);
  height: calc(100% + 44px);
  background: url("/assets/character-cards/web/mens-26-point-left-down.webp") right bottom / contain no-repeat;
  filter: var(--cc-character-shadow);
  pointer-events: none;
}

.editorial-page .step-card,
.editorial-page .step-card:nth-child(even) {
  min-height: 390px;
  padding: 38px 34px 34px;
  border-radius: 0;
}

.editorial-page .step-card:first-child {
  border-radius: 9px 0 0 9px;
}

.editorial-page .step-card:nth-child(2) {
  border-right: 0;
  border-left-color: rgba(199, 187, 224, 0.11);
}

.editorial-page .step-card:last-child {
  padding-right: clamp(112px, 10vw, 178px);
  border-radius: 0 9px 9px 0;
  border-left-color: rgba(199, 187, 224, 0.11);
}

.editorial-page .step-card::before {
  display: none !important;
}

/* FAQ is text-first: repeated characters only made this section noisy. */
.editorial-page .faq-item,
.editorial-page .faq-item:nth-child(even) {
  min-height: 0;
  padding: 38px 44px;
}

.editorial-page .faq-item::before {
  display: none;
}

.editorial-page .cta-panel,
.internal-page .cta-panel {
  --cc-character: url("/assets/character-cards/web/mens-26-point-left-down.webp");
}

/* Internal two-column collections follow the same one-guide-per-row rhythm. */
.internal-page :is(.feature-grid, .content-grid, .stats-grid) {
  column-gap: 0;
  row-gap: 56px;
  overflow: visible;
}

.internal-page :is(.feature-grid, .content-grid, .stats-grid) > :is(.feature-card, .info-card, .stat-card) {
  min-height: 350px;
  padding: 42px 40px;
  overflow: visible;
  border-radius: 0;
}

.internal-page :is(.feature-grid, .content-grid, .stats-grid) > :is(.feature-card, .info-card, .stat-card)::before {
  display: none;
  top: auto;
  bottom: -22px;
  width: 43%;
  height: calc(100% + 56px);
  background-size: contain;
  background-repeat: no-repeat;
}

.internal-page :is(.feature-grid, .content-grid, .stats-grid) > :nth-child(4n + 1):not(.wide) {
  --cc-character: url("/assets/character-cards/web/girls-01-point-right.webp");
  padding-left: 31%;
  border-radius: 9px 0 0 9px;
}

.internal-page :is(.feature-grid, .content-grid, .stats-grid) > :nth-child(4n + 1):not(.wide)::before {
  display: block;
  right: auto;
  left: -18px;
  background-position: left bottom;
}

.internal-page :is(.feature-grid, .content-grid, .stats-grid) > :nth-child(4n + 2):not(.wide) {
  border-left-color: rgba(199, 187, 224, 0.11);
  border-radius: 0 9px 9px 0;
}

.internal-page :is(.feature-grid, .content-grid, .stats-grid) > :nth-child(4n):not(.wide) {
  --cc-character: url("/assets/character-cards/web/mens-10-point-left.webp");
  padding-right: 31%;
  border-left-color: rgba(199, 187, 224, 0.11);
  border-radius: 0 9px 9px 0;
}

.internal-page :is(.feature-grid, .content-grid, .stats-grid) > :nth-child(4n):not(.wide)::before {
  display: block;
  right: -18px;
  left: auto;
  background-position: right bottom;
}

.internal-page :is(.feature-grid, .content-grid, .stats-grid) > :nth-child(4n + 3):not(.wide) {
  border-radius: 9px 0 0 9px;
}

.internal-page :is(.feature-grid, .content-grid, .stats-grid) > .wide {
  min-height: 0;
  padding: 42px 44px;
  border-radius: 9px;
}

.internal-page :is(.feature-grid, .content-grid, .stats-grid) > .wide::before {
  display: none;
}

/* Internal three-step flows also use one guide for the complete row. */
.internal-page .steps-grid {
  position: relative;
  gap: 0;
  overflow: visible;
}

.internal-page .steps-grid::after {
  content: "";
  position: absolute;
  z-index: 5;
  right: -56px;
  bottom: -22px;
  width: clamp(220px, 16vw, 300px);
  height: calc(100% + 44px);
  background: url("/assets/character-cards/web/mens-26-point-left-down.webp") right bottom / contain no-repeat;
  filter: var(--cc-character-shadow);
  pointer-events: none;
}

.internal-page .step-card,
.internal-page .step-card:nth-child(even) {
  min-height: 390px;
  padding: 38px 34px 34px;
  border-radius: 0;
}

.internal-page .step-card:first-child {
  border-radius: 9px 0 0 9px;
}

.internal-page .step-card:nth-child(2) {
  border-right: 0;
  border-left-color: rgba(199, 187, 224, 0.11);
}

.internal-page .step-card:last-child {
  padding-right: clamp(112px, 10vw, 178px);
  border-radius: 0 9px 9px 0;
  border-left-color: rgba(199, 187, 224, 0.11);
}

.internal-page .step-card::before {
  display: none !important;
}

@media (max-width: 900px) {
  .editorial-page .steps-grid,
  .internal-page .steps-grid {
    gap: 24px;
  }

  .editorial-page .steps-grid::after,
  .internal-page .steps-grid::after {
    display: none;
  }

  .editorial-page .step-card,
  .editorial-page .step-card:nth-child(even),
  .editorial-page .step-card:last-child,
  .internal-page .step-card,
  .internal-page .step-card:nth-child(even),
  .internal-page .step-card:last-child {
    min-height: 0;
    padding: 32px 28px !important;
    border: 1px solid var(--cc-line);
    border-radius: 9px;
  }

  .internal-page :is(.feature-grid, .content-grid, .stats-grid) {
    gap: 24px;
  }

  .internal-page :is(.feature-grid, .content-grid, .stats-grid) > :is(.feature-card, .info-card, .stat-card),
  .internal-page :is(.feature-grid, .content-grid, .stats-grid) > .wide {
    min-height: 0;
    padding: 34px 30px !important;
    border: 1px solid var(--cc-line);
    border-radius: 9px;
  }

  .internal-page :is(.feature-grid, .content-grid, .stats-grid) > :is(.feature-card, .info-card, .stat-card)::before {
    display: none !important;
  }
}

@media (max-width: 680px) {
  .editorial-page .feature-grid > .feature-card:nth-child(1) .feature-copy,
  .editorial-page .feature-grid > .feature-card:nth-child(4) .feature-copy,
  .editorial-page .feature-grid > .feature-card:nth-child(5) .feature-copy {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .editorial-page .faq-item,
  .editorial-page .faq-item:nth-child(even) {
    min-height: 0;
    padding: 32px 24px !important;
  }

  .editorial-page .faq-item::before {
    display: none !important;
  }

  .internal-page :is(.feature-grid, .content-grid, .stats-grid) > :is(.feature-card, .info-card, .stat-card),
  .internal-page :is(.feature-grid, .content-grid, .stats-grid) > .wide {
    min-height: 0;
    padding: 32px 24px !important;
  }

  .internal-page :is(.feature-grid, .content-grid, .stats-grid) > :is(.feature-card, .info-card, .stat-card)::before {
    display: none !important;
  }

  .editorial-page .rank-panel {
    padding-bottom: 320px !important;
  }

  .editorial-page .rank-panel::before {
    right: 0 !important;
    bottom: -12px;
    left: 0 !important;
    width: 100%;
    height: 310px;
    background-position: center bottom !important;
  }
}

/* V6: keep every homepage guide in a strict left/right checkerboard rhythm. */
@media (min-width: 901px) {
  .editorial-page .feature-grid > .feature-card:nth-child(1)::before,
  .editorial-page .feature-grid > .feature-card:nth-child(4)::before {
    bottom: -1px;
  }

  .editorial-page .rank-panel {
    padding-right: 27%;
    padding-left: 48px;
  }

  .editorial-page .rank-panel::before {
    right: -8px;
    left: auto;
    background-position: right bottom;
    transform: scaleX(-1);
    transform-origin: center bottom;
  }

  .editorial-page .steps-grid::after {
    right: auto;
    left: -56px;
    background-position: left bottom;
    transform: scaleX(-1);
    transform-origin: center bottom;
  }

  .editorial-page .step-card:first-child {
    padding-left: clamp(112px, 10vw, 178px);
  }

  .editorial-page .step-card:last-child {
    padding-right: 34px;
  }
}

/* V5: internal pages follow the approved homepage rhythm.
   One unique pointing guide introduces each complete information group. */
.guide-girls-05 { --cc-guide-image: url("/assets/character-cards/web/girls-05-point-right.webp"); }
.guide-mens-12 { --cc-guide-image: url("/assets/character-cards/web/mens-12-point-left.webp"); }
.guide-girls-10 { --cc-guide-image: url("/assets/character-cards/web/girls-10-point-right.webp"); }
.guide-mens-01 { --cc-guide-image: url("/assets/character-cards/web/mens-01-point-left.webp"); }
.guide-girls-03 { --cc-guide-image: url("/assets/character-cards/web/girls-03-point-right.webp"); }
.guide-mens-21 { --cc-guide-image: url("/assets/character-cards/web/mens-21-point-left.webp"); }
.guide-girls-11 { --cc-guide-image: url("/assets/character-cards/web/girls-11-point-right.webp"); }
.guide-mens-04 { --cc-guide-image: url("/assets/character-cards/web/mens-04-point-left.webp"); }
.guide-girls-15 { --cc-guide-image: url("/assets/character-cards/web/girls-15-point-right.webp"); }
.guide-mens-17 { --cc-guide-image: url("/assets/character-cards/web/mens-17-point-left.webp"); }
.guide-girls-09 { --cc-guide-image: url("/assets/character-cards/web/girls-09-point-right.webp"); }
.guide-mens-23 { --cc-guide-image: url("/assets/character-cards/web/mens-23-point-left.webp"); }

.internal-page .guide-section > :is(
  .steps-grid,
  .content-grid,
  .feature-grid,
  .split-section,
  .rank-panel
) {
  --cc-guide-width: clamp(220px, 17vw, 306px);
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.internal-page .guide-section > :is(
  .steps-grid,
  .content-grid,
  .feature-grid,
  .split-section,
  .rank-panel
)::before {
  content: "";
  position: absolute;
  z-index: 6;
  top: auto;
  bottom: -22px;
  width: var(--cc-guide-width);
  height: min(560px, calc(100% + 44px));
  background-image: var(--cc-guide-image);
  background-position: center bottom;
  background-size: contain;
  background-repeat: no-repeat;
  filter: var(--cc-character-shadow);
  transform: none;
  pointer-events: none;
}

.internal-page .guide-left > :is(
  .steps-grid,
  .content-grid,
  .feature-grid,
  .split-section,
  .rank-panel
)::before {
  right: auto;
  left: -42px;
  background-position: left bottom;
}

.internal-page .guide-right > :is(
  .steps-grid,
  .content-grid,
  .feature-grid,
  .split-section,
  .rank-panel
)::before {
  right: -42px;
  left: auto;
  background-position: right bottom;
}

/* Remove the earlier per-card character cycle from internal pages. */
.internal-page :is(.feature-grid, .content-grid, .stats-grid) > :is(.feature-card, .info-card, .stat-card)::before,
.internal-page .metric-grid > .stat-card::before,
.internal-page .step-card::before,
.internal-page .guide-section .split-copy::before {
  display: none !important;
}

.internal-page .steps-grid::after {
  display: none;
}

.internal-page :is(.feature-grid, .content-grid, .stats-grid) > :is(.feature-card, .info-card, .stat-card),
.internal-page :is(.feature-grid, .content-grid, .stats-grid) > .wide,
.internal-page .metric-grid > .stat-card,
.internal-page .guide-section .split-copy {
  padding: 42px 40px;
}

/* Reserve only the overlap zone; the main text column keeps its width. */
.internal-page .guide-left > :is(.content-grid, .feature-grid) > :nth-child(odd):not(.wide),
.internal-page .guide-left > .steps-grid > :first-child {
  padding-left: clamp(148px, 13vw, 214px) !important;
}

.internal-page .guide-right > :is(.content-grid, .feature-grid) > :nth-child(even):not(.wide),
.internal-page .guide-right > .steps-grid > :last-child {
  padding-right: clamp(148px, 13vw, 214px) !important;
}

.internal-page .guide-left > .split-section > .split-copy {
  padding-left: clamp(148px, 13vw, 214px) !important;
}

.internal-page .guide-right > .split-section > :last-child > :nth-child(even):is(.info-card, .stat-card):not(.wide) {
  padding-right: clamp(76px, 7vw, 106px) !important;
}

.internal-page .guide-left > .rank-panel {
  padding-left: clamp(176px, 16vw, 252px) !important;
}

/* Three-card groups become a deliberate two-row composition. */
.internal-page .guide-section > :is(.feature-grid, .content-grid) > :last-child:nth-child(odd):not(:first-child) {
  grid-column: 1 / -1 !important;
}

/* Keep the approved homepage CTA with a unique final character. */
.editorial-page .cta-panel {
  --cc-character: url("/assets/character-cards/web/girls-02-point-left.webp");
}

.editorial-page .cta-panel::before {
  display: block !important;
}

/* Internal CTA panels stay typography-first and do not repeat row guides. */
.internal-page .cta-panel {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  min-height: 330px;
  padding: 54px 60px;
}

.internal-page .cta-panel::before {
  display: none !important;
}

.internal-page .cta-panel h2,
.internal-page .cta-panel p {
  grid-column: 1 / 7;
}

.internal-page .cta-panel .button-row {
  grid-column: 8 / -1;
  grid-row: 1 / span 2;
  justify-content: flex-end;
}

@media (max-width: 1100px) and (min-width: 901px) {
  .internal-page .guide-section > :is(
    .steps-grid,
    .content-grid,
    .feature-grid,
    .split-section,
    .rank-panel
  ) {
    --cc-guide-width: clamp(190px, 19vw, 230px);
  }

  .internal-page .guide-left > :is(.content-grid, .feature-grid) > :nth-child(odd):not(.wide),
  .internal-page .guide-left > .steps-grid > :first-child,
  .internal-page .guide-left > .split-section > .split-copy {
    padding-left: 144px !important;
  }

  .internal-page .guide-right > :is(.content-grid, .feature-grid) > :nth-child(even):not(.wide),
  .internal-page .guide-right > .steps-grid > :last-child {
    padding-right: 144px !important;
  }
}

@media (max-width: 900px) {
  .internal-page .guide-section > :is(
    .steps-grid,
    .content-grid,
    .feature-grid,
    .split-section,
    .rank-panel
  )::before {
    display: none;
  }

  .internal-page .guide-left > :is(.content-grid, .feature-grid) > :nth-child(odd):not(.wide),
  .internal-page .guide-right > :is(.content-grid, .feature-grid) > :nth-child(even):not(.wide),
  .internal-page .guide-left > .steps-grid > :first-child,
  .internal-page .guide-right > .steps-grid > :last-child,
  .internal-page .guide-left > .split-section > .split-copy,
  .internal-page .guide-right > .split-section > :last-child > :nth-child(even):is(.info-card, .stat-card):not(.wide),
  .internal-page .guide-left > .rank-panel {
    padding: 34px 30px !important;
  }

  .internal-page .cta-panel {
    display: block;
    min-height: 0;
    padding: 46px 42px;
  }

  .internal-page .cta-panel .button-row {
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  .internal-page .guide-left > :is(.content-grid, .feature-grid) > :nth-child(odd):not(.wide),
  .internal-page .guide-right > :is(.content-grid, .feature-grid) > :nth-child(even):not(.wide),
  .internal-page .guide-left > .steps-grid > :first-child,
  .internal-page .guide-right > .steps-grid > :last-child,
  .internal-page .guide-left > .split-section > .split-copy,
  .internal-page .guide-right > .split-section > :last-child > :nth-child(even):is(.info-card, .stat-card):not(.wide),
  .internal-page .guide-left > .rank-panel {
    padding: 32px 24px !important;
  }

  .editorial-page .cta-panel,
  .internal-page .cta-panel {
    min-height: 0;
    padding: 36px 22px;
  }
}

/* V7: layouts that use the mobile navigation are text-first; desktop guides stay unchanged. */
@media (max-width: 900px) {
  .editorial-page .feature-grid {
    row-gap: 24px;
  }

  .editorial-page .feature-grid > .feature-card:not(.rank-panel),
  .editorial-page .rank-panel {
    min-height: 0;
    padding: 34px 30px !important;
  }

  .editorial-page .feature-grid > .feature-card:not(.rank-panel) {
    border: 1px solid var(--cc-line);
    border-radius: 9px;
    box-shadow: var(--cc-card-shadow);
  }

  .editorial-page .feature-grid > .feature-card::before,
  .editorial-page .rank-panel::before,
  .editorial-page .cta-panel::before,
  .editorial-page .steps-grid::after,
  .internal-page .guide-section > :is(
    .steps-grid,
    .content-grid,
    .feature-grid,
    .split-section,
    .rank-panel
  )::before {
    display: none !important;
  }

  .editorial-page .cta-panel {
    min-height: 0;
    padding: 46px 42px;
  }
}

@media (max-width: 680px) {
  .editorial-page .feature-grid > .feature-card:not(.rank-panel),
  .editorial-page .rank-panel {
    padding: 34px 24px !important;
  }

  .editorial-page .cta-panel {
    padding: 36px 22px;
  }
}

/* V8: one shared header and hero geometry across every public page.
   The homepage keeps a brighter treatment of the same approved background. */
:is(.editorial-page, .internal-page) .topbar {
  width: 100%;
  max-width: none;
  height: 88px;
  min-height: 88px;
  margin-inline: 0;
  padding-inline: clamp(20px, 4vw, 80px);
  border-color: rgba(255, 255, 255, 0.18);
  background: transparent;
  box-shadow: none;
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  animation: none;
}

:is(.editorial-page, .internal-page) .site-header {
  background: linear-gradient(90deg, rgba(3, 10, 15, 0.94), rgba(3, 10, 15, 0.84) 50%, rgba(3, 10, 15, 0.94));
}

:is(.editorial-page, .internal-page) .brand {
  width: 148px;
  height: 68px;
}

:is(.editorial-page, .internal-page) .brand img {
  width: 148px;
  margin-top: 7px;
}

:is(.editorial-page, .internal-page) .desktop-nav {
  gap: clamp(20px, 2vw, 36px);
}

:is(.editorial-page, .internal-page) .desktop-nav a {
  padding: 13px 0;
  color: #dbe4e8;
  font-size: 0.91rem;
  letter-spacing: 0.025em;
}

:is(.editorial-page, .internal-page) .desktop-nav a::after {
  bottom: 4px;
  background: linear-gradient(90deg, var(--cc-amber), var(--cc-blue));
}

:is(.editorial-page, .internal-page) .discord-link {
  min-height: 46px;
  padding-left: 16px;
  border: 1px solid rgba(255, 196, 91, 0.52);
  border-radius: 7px;
  color: var(--cc-white);
  background: rgba(2, 9, 13, 0.8);
  box-shadow: none;
}

:is(.editorial-page, .internal-page) .discord-link svg {
  width: 40px;
  height: 40px;
  color: #071018;
  background: var(--cc-amber);
}

:is(.editorial-page, .internal-page) .primary-button {
  border: 1px solid rgba(255, 255, 255, 0.48);
  background: linear-gradient(105deg, #ffd47f, #f3a52d 72%);
  box-shadow: 0 18px 55px rgba(243, 165, 45, 0.22);
}

:is(.editorial-page, .internal-page) .primary-button::before {
  background: var(--cc-blue);
}

:is(.editorial-page, .internal-page) .primary-button svg {
  background: #f3a52d;
}

:is(.editorial-page, .internal-page) .primary-button:hover {
  box-shadow: 0 20px 58px rgba(243, 165, 45, 0.31);
}

@media (min-width: 681px) {
  .page-search .subhero-content > p {
    width: min(800px, 100%);
  }
}

@media (min-width: 901px) {
  .internal-page .subhero {
    height: max(640px, 100svh);
    min-height: max(640px, 100svh);
    padding: 132px 24px 82px;
  }

  .editorial-page .editorial-hero {
    height: max(640px, 100svh);
    min-height: max(640px, 100svh);
    padding: 132px 24px 82px;
  }
}

.page-home .editorial-hero {
  background-image:
    linear-gradient(180deg, rgba(4, 10, 14, 0.07) 0%, rgba(4, 11, 16, 0.11) 48%, #050c12 100%),
    linear-gradient(90deg, rgba(4, 10, 14, 0.08), transparent 31%, transparent 70%, rgba(4, 10, 14, 0.08)),
    url("/assets/character-cards/invite-background-depth-v2.webp");
}

.page-home .hero-scope,
.page-home .hero-axis {
  display: none !important;
}

.page-home .hero-content {
  width: min(800px, 100%);
}

.page-home .hero-logo {
  display: block;
  width: min(540px, 66vw);
  margin: 0 auto;
  filter: drop-shadow(0 24px 42px rgba(0, 0, 0, 0.4));
}

.page-home .hero-title-text {
  margin: 0 0 10px;
  color: #f0f4f6;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(0.92rem, 1.55vw, 1.15rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.025em;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.72);
}

.page-home .hero-copy {
  width: min(720px, 100%);
  margin: 0 auto 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #d1dce2;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: clamp(1rem, 1.7vw, 1.14rem);
  line-height: 1.72;
}

@media (max-width: 900px) {
  :is(.editorial-page, .internal-page) .topbar {
    height: 78px;
    min-height: 78px;
    padding-inline: 20px;
  }

  .internal-page .subhero,
  .editorial-page .editorial-hero {
    min-height: 640px;
    padding: 120px 20px 74px;
  }

  :is(.editorial-page, .internal-page) .brand {
    width: 130px;
    height: 59px;
  }

  :is(.editorial-page, .internal-page) .brand img {
    width: 130px;
    margin-top: 5px;
  }
}

@media (max-width: 680px) {
  :is(.editorial-page, .internal-page) .topbar {
    padding-inline: 12px;
  }

  .internal-page .subhero,
  .editorial-page .editorial-hero {
    min-height: 600px;
    padding: 112px 18px 70px;
  }

  .page-home .hero-logo {
    width: min(84vw, 440px);
  }

  .page-home .hero-title-text {
    margin-bottom: 10px;
    font-size: clamp(0.84rem, 3.5vw, 0.98rem);
    line-height: 1.42;
  }
}