/* TGL destinations: shared premium components for the membership, community, gaming and Aether
   destination pages and the homepage membership band. Builds on the tokens in the compiled base,
   style.css and tgl-design.css. Loaded only where these components render (inc/destinations.php). */

:root {
  --dest-line: rgb(255 255 255 / 0.08);
  --dest-line-strong: rgb(255 255 255 / 0.14);
  --dest-panel: rgb(10 13 24 / 0.96);
  --dest-amber: #ffbe85;
  --dest-periwinkle: #a3b8ff;
  --dest-violet: #8170f2;
}
.dest { background: var(--ink); overflow-x: clip; }
/* Brand focus ring for keyboard users, matching the community pages; :where keeps it overridable. */
.dest :where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.dest .icon, .home-lounges .icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dest [id] { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
.dest-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; }
.dest-actions--center { justify-content: center; }

/* ---------- Status chips: one vocabulary, word plus shape (filled = available, hollow = not yet) ---------- */
.status-chip {
  --c: 182 191 207;
  display: inline-flex; align-items: center; gap: 0.5em; padding: 0.45em 0.75em; border: 1px solid rgb(var(--c) / 0.34);
  border-radius: 999px; background: rgb(var(--c) / 0.08); color: rgb(var(--c));
  font: 600 0.64rem/1 var(--font-hud); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; vertical-align: middle;
}
.status-chip::before { content: ""; width: 6px; height: 6px; border: 1px solid currentColor; border-radius: 50%; }
.status-chip--available { --c: 124 240 191; }
.status-chip--available::before, .status-chip--development::before { background: currentColor; box-shadow: 0 0 8px currentColor; }
.status-chip--development, .status-chip--planned { --c: 201 188 255; }
.status-chip--proposed { --c: 255 210 138; }
.status-chip--preview { --c: 166 241 255; }
.status-chip--unavailable { --c: 190 198 214; }

/* ---------- Hero ---------- */
.dest-hero {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center;
  min-height: clamp(640px, 92svh, 1040px); padding: calc(var(--nav-h) + clamp(2rem, 6vh, 4.5rem)) 0 clamp(3.5rem, 9vh, 6.5rem);
  background: #06070d;
}
.dest-hero__art { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.dest-hero__art img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--art-pos, 50% 50%); animation: hero-settle 2.6s var(--ease-out) both; }
.dest-hero__art::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.dest-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(5 6 11 / 0.95) 0%, rgb(5 6 11 / 0.84) 32%, rgb(5 6 11 / 0.42) 60%, rgb(5 6 11 / 0.2) 100%),
    linear-gradient(180deg, rgb(5 6 11 / 0.7) 0%, transparent 20%, transparent 68%, var(--ink) 100%);
}
.dest-hero__inner { display: grid; gap: clamp(2.5rem, 5vw, 6rem); align-items: center; width: min(100% - 2 * var(--gutter), var(--container-wide)); margin-inline: auto; }
.dest-hero.has-visual .dest-hero__inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
.dest-hero__copy { display: grid; gap: 1.4rem; justify-items: start; max-width: 720px; }
.dest-hero__crumb { gap: 0.6em; margin: 0; }
.dest-hero__crumb span:nth-child(2) { color: var(--fg-faint); }
.dest-hero__crumb span:last-child { color: var(--fg); }
.dest-hero__title {
  max-width: 15ch; font-size: clamp(2.6rem, 3.3vw + 1rem, 5.6rem); line-height: 0.98; letter-spacing: -0.045em; text-wrap: balance;
  text-shadow: 0 2px 40px rgb(3 5 10 / 0.5);
}
.dest-hero__title em {
  display: block; font-style: normal; color: transparent; text-shadow: none;
  background: linear-gradient(100deg, #e9fcff 0%, var(--accent) 45%, var(--violet-glow) 110%);
  -webkit-background-clip: text; background-clip: text;
}
.dest-hero__lede { max-width: 54ch; color: var(--text-soft); font-size: clamp(1.05rem, 0.45vw + 0.92rem, 1.28rem); line-height: 1.6; }
.dest-hero__actions { margin-top: 0.6rem; }
.dest-hero__status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.8rem; max-width: 62ch; margin: 0.4rem 0 0; color: var(--fg-muted); font-size: 0.92rem; line-height: 1.5; }
.dest-hero__visual { position: relative; display: grid; place-items: center; min-width: 0; }

/* Art directions. Photographic plates come from the approved, people-free lounge renders; the rest are
   CSS light compositions, so no new imagery or third-party artwork is introduced. */
.dest-hero--lounge::before {
  background:
    linear-gradient(90deg, rgb(5 6 11 / 0.95) 0%, rgb(5 6 11 / 0.8) 36%, rgb(5 6 11 / 0.35) 66%, rgb(5 6 11 / 0.55) 100%),
    linear-gradient(180deg, rgb(5 6 11 / 0.7) 0%, transparent 20%, transparent 66%, var(--ink) 100%);
}
.dest-hero--arena .dest-hero__art {
  background:
    radial-gradient(55% 70% at 74% 105%, rgb(43 228 255 / 0.28), transparent 62%),
    conic-gradient(from 168deg at 62% -6%, transparent 0deg, rgb(43 228 255 / 0.1) 6deg, transparent 13deg, transparent 22deg, rgb(139 108 255 / 0.12) 28deg, transparent 34deg),
    conic-gradient(from 160deg at 88% -6%, transparent 0deg, rgb(43 228 255 / 0.08) 8deg, transparent 15deg),
    linear-gradient(180deg, #05060c, #0a0e1a 70%, #07070c);
}
.dest-hero--arena .dest-hero__art::after {
  inset: 52% -20% -10%; transform: perspective(500px) rotateX(62deg); transform-origin: 50% 0;
  background: linear-gradient(rgb(43 228 255 / 0.18) 1px, transparent 1px) 0 0 / 100% 46px, linear-gradient(90deg, rgb(43 228 255 / 0.18) 1px, transparent 1px) 0 0 / 46px 100%;
  -webkit-mask-image: radial-gradient(60% 80% at 60% 0%, #000, transparent); mask-image: radial-gradient(60% 80% at 60% 0%, #000, transparent);
}
.dest-hero--studio .dest-hero__art {
  background:
    radial-gradient(40% 55% at 78% 40%, rgb(43 228 255 / 0.16), transparent 70%),
    radial-gradient(45% 60% at 92% 90%, rgb(255 190 133 / 0.14), transparent 70%),
    linear-gradient(160deg, #070910, #0b1020 60%, #07070c);
}
.dest-hero--signal .dest-hero__art {
  background:
    radial-gradient(42% 60% at 76% 46%, rgb(139 108 255 / 0.24), transparent 70%),
    radial-gradient(30% 40% at 90% 20%, rgb(255 93 166 / 0.12), transparent 70%),
    repeating-radial-gradient(circle at 76% 46%, transparent 0 46px, rgb(139 108 255 / 0.07) 47px 48px),
    linear-gradient(160deg, #07060f, #0c0a1c 60%, #07070c);
}
.dest-hero--calm .dest-hero__art {
  background: radial-gradient(60% 70% at 85% 0%, rgb(43 228 255 / 0.12), transparent 65%), linear-gradient(180deg, #070912, #090d18 70%, var(--ink));
}
.dest-hero--calm .dest-hero__art::after {
  background: linear-gradient(rgb(255 255 255 / 0.03) 1px, transparent 1px) 0 0 / 100% 56px, linear-gradient(90deg, rgb(255 255 255 / 0.03) 1px, transparent 1px) 0 0 / 56px 100%;
  -webkit-mask-image: radial-gradient(70% 80% at 80% 30%, #000, transparent); mask-image: radial-gradient(70% 80% at 80% 30%, #000, transparent);
}
.dest-hero--calm { min-height: clamp(560px, 70svh, 820px); }
.dest-hero--command .dest-hero__art {
  background: radial-gradient(50% 60% at 70% 30%, rgb(43 228 255 / 0.13), transparent 70%), radial-gradient(40% 50% at 95% 95%, rgb(139 108 255 / 0.14), transparent 70%), linear-gradient(170deg, #06080f, #0a0f1d 60%, var(--ink));
}
.dest-hero--command .dest-hero__art::after {
  background: linear-gradient(rgb(43 228 255 / 0.05) 1px, transparent 1px) 0 0 / 100% 32px, linear-gradient(90deg, rgb(43 228 255 / 0.05) 1px, transparent 1px) 0 0 / 32px 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 70%); mask-image: linear-gradient(90deg, transparent 30%, #000 70%);
}
.dest-hero--aether { --accent: #a3b8ff; --accent-core: #e3eaff; }
.dest-hero--aether .dest-hero__art { background: radial-gradient(50% 60% at 78% 45%, rgb(129 112 242 / 0.2), transparent 70%), #05050c; }
.dest-hero--aether .dest-hero__art img { object-fit: contain; object-position: var(--art-pos, 78% 50%); }
@media (min-width: 961px) {
  .dest-hero--aether .dest-hero__art img { position: absolute; inset: 8% 0 8% 46%; width: 54%; height: 84%; object-position: 60% 50%; }
}
.dest-hero--aether .dest-hero__title em { background: linear-gradient(100deg, #e3eaff, #a3b8ff 42%, #8170f2 78%, #6a4de3); -webkit-background-clip: text; background-clip: text; }

/* ---------- Launch-status ledger ---------- */
.dest-ledger { border-block: 1px solid var(--dest-line); background: rgb(10 13 24 / 0.92); }
.dest-ledger__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dest-ledger__grid > p { display: grid; align-content: start; justify-items: start; gap: 0.75rem; margin: 0; padding: 1.6rem clamp(1rem, 2vw, 2rem); border-left: 1px solid var(--dest-line); color: var(--fg-muted); font-size: 0.95rem; line-height: 1.55; }
.dest-ledger__grid > p:first-child { padding-left: 0; border-left: 0; }
.dest-ledger strong { color: var(--fg); font-weight: 600; }

/* ---------- Bands and headings ---------- */
.dest-band { position: relative; padding-block: clamp(4rem, 7vw, 7rem); }
.dest-band--deep { background: linear-gradient(180deg, var(--ink), var(--navy) 14%, var(--navy) 86%, var(--ink)); }
.dest-band--editor { padding-block: clamp(3rem, 5vw, 5rem); border-bottom: 1px solid var(--dest-line); }
.dest-band--aether { --accent: #a3b8ff; --accent-core: #e3eaff; background: radial-gradient(60% 50% at 80% 10%, rgb(129 112 242 / 0.1), transparent 70%), linear-gradient(180deg, var(--ink), #0b0f1a 14%, #0b0f1a 86%, var(--ink)); }
.dest-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem clamp(2rem, 6vw, 6rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.dest-head__main { display: grid; gap: 1.1rem; }
.dest-head__kicker { display: inline-flex; align-items: center; gap: 0.8rem; margin: 0; color: var(--accent); font: 600 0.72rem/1 var(--font-hud); letter-spacing: 0.2em; text-transform: uppercase; }
.dest-head__kicker span { color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.dest-head__kicker span::after { content: ""; display: inline-block; width: 22px; height: 1px; margin-left: 0.8rem; vertical-align: middle; background: currentColor; }
.dest .display-title, .home-lounges .display-title { font-size: clamp(2.1rem, 2.1vw + 1.15rem, 3.6rem); }
.dest-head__intro { max-width: 48ch; margin: 0; color: var(--text-soft); font-size: clamp(1rem, 0.25vw + 0.95rem, 1.1rem); line-height: 1.7; }
.dest-head--stack, .dest-head--center { grid-template-columns: 1fr; }
.dest-head--center { justify-items: center; text-align: center; }
.dest-head--center .dest-head__intro { max-width: 60ch; }

/* ---------- Membership tiers ---------- */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.6rem); align-items: stretch; padding-top: 1.2rem; }
.tier {
  position: relative; display: flex; flex-direction: column; gap: 1.3rem; min-width: 0; padding: clamp(1.6rem, 2.2vw, 2.4rem);
  border: 1px solid var(--dest-line); border-radius: 20px; background: linear-gradient(180deg, rgb(22 26 44 / 0.85), rgb(9 11 20 / 0.96));
  box-shadow: 0 30px 60px -40px rgb(0 0 0 / 0.9);
}
.tier--lounge { background: radial-gradient(110% 55% at 100% 0%, rgb(43 228 255 / 0.1), transparent 60%), linear-gradient(180deg, rgb(20 28 44 / 0.88), rgb(9 11 20 / 0.96)); }
.tier--featured {
  border-color: transparent;
  background:
    radial-gradient(110% 50% at 100% 0%, rgb(139 108 255 / 0.16), transparent 60%) padding-box,
    linear-gradient(180deg, #11152b, #090b16) padding-box,
    linear-gradient(145deg, rgb(43 228 255 / 0.95), rgb(139 108 255 / 0.95) 55%, rgb(43 228 255 / 0.3)) border-box;
  box-shadow: 0 44px 90px -44px rgb(43 228 255 / 0.4), 0 30px 60px -40px rgb(0 0 0 / 0.9);
}
.tier__badge {
  position: absolute; top: 0; left: 50%; translate: -50% -50%; margin: 0; padding: 0.55rem 0.95rem; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(100deg, var(--accent), var(--violet-glow)); color: #05060c; font: 700 0.62rem/1 var(--font-hud); letter-spacing: 0.18em; text-transform: uppercase;
}
.tier__name { font-size: clamp(1.5rem, 0.9vw + 1.15rem, 1.95rem); letter-spacing: -0.03em; }
.tier__tagline { margin-top: 0.55rem; color: var(--text-soft); line-height: 1.5; }
.tier__price { display: grid; gap: 0.75rem; padding-block: 1.25rem; border-block: 1px solid var(--dest-line); }
.tier__amount { display: flex; align-items: baseline; gap: 0.35rem; margin: 0; color: var(--fg); font: 600 clamp(2.6rem, 2.2vw + 1.6rem, 3.6rem)/1 var(--font-display); letter-spacing: -0.05em; }
.tier__amount span { color: var(--fg-muted); font: 500 1rem/1 var(--font-sans); letter-spacing: 0; }
.tier__price-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem; margin: 0; color: var(--fg-muted); font-size: 0.86rem; }
.tier__for { color: var(--fg-muted); font-size: 0.95rem; line-height: 1.6; }
.tier__inherits { margin: 0; color: var(--accent); font: 600 0.7rem/1.4 var(--font-hud); letter-spacing: 0.14em; text-transform: uppercase; }
.tier__list { display: grid; gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.tier__list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 0.75rem; color: var(--fg); font-size: 0.95rem; line-height: 1.45; }
.tier__list .icon { width: 20px; height: 20px; margin-top: 0.05rem; color: var(--accent); }
.tier__list li.is-planned .icon { color: #c9bcff; }
.tier__list em { display: block; margin-top: 0.3rem; color: #7cf0bf; font: 600 0.6rem/1 var(--font-hud); font-style: normal; letter-spacing: 0.16em; text-transform: uppercase; }
.tier__list li.is-planned em { color: #c9bcff; }
.tier__action { display: grid; justify-items: start; gap: 0.9rem; margin-top: auto; padding-top: 0.8rem; }
.tier__action .btn { justify-content: center; width: 100%; }
.tier__closed { display: flex; align-items: center; gap: 0.65rem; width: 100%; margin: 0; padding: 0.95rem 1rem; border: 1px dashed rgb(255 255 255 / 0.2); border-radius: 10px; color: var(--text-soft); font-size: 0.88rem; line-height: 1.4; }
@media (min-width: 1101px) { .tier--featured { translate: 0 -14px; } }
@media (max-width: 1100px) { .tiers { grid-template-columns: 1fr; max-width: 660px; margin-inline: auto; gap: 2rem; } }

/* Billing status */
.billing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: clamp(2.5rem, 4vw, 3.5rem); overflow: hidden; border: 1px solid var(--dest-line); border-radius: 16px; background: var(--dest-line); }
.billing__col { padding: clamp(1.4rem, 2.4vw, 2.2rem); background: var(--dest-panel); }
.billing h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 1.1rem; font-size: 1.15rem; letter-spacing: -0.01em; }
.billing h3 .icon { width: 22px; height: 22px; color: var(--accent); }
.billing ul { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.billing li { position: relative; padding-left: 1.3rem; color: var(--text-soft); line-height: 1.6; }
.billing li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; rotate: 45deg; border: 1px solid var(--accent); }

/* ---------- Comparison table ---------- */
/* clip (unlike hidden) is not a scroll container, so the tier headings below can stay pinned while the table scrolls. */
.compare-wrap { overflow: hidden; overflow: clip; border: 1px solid var(--dest-line); border-radius: 18px; background: rgb(8 10 19 / 0.92); }
.compare { width: 100%; border-collapse: collapse; table-layout: fixed; }
.compare__benefit-col { width: 46%; }
.compare th, .compare td { padding: 1rem clamp(0.6rem, 1.4vw, 1.4rem); border-bottom: 1px solid var(--dest-line); vertical-align: middle; }
.compare thead th {
  position: sticky; top: calc(var(--nav-h) + var(--wp-admin--admin-bar--height, 0px)); z-index: 2;
  padding-block: 1.4rem; background: rgb(13 15 23); box-shadow: inset 0 -1px 0 var(--dest-line); text-align: center; vertical-align: bottom;
}
.compare thead th:first-child { color: var(--fg-muted); font: 600 0.68rem/1 var(--font-hud); letter-spacing: 0.18em; text-align: left; text-transform: uppercase; }
.compare__tier { display: block; color: var(--fg); font: 600 1.05rem/1.2 var(--font-display); letter-spacing: -0.02em; }
.compare__tier-short { display: none; }
.compare__price { display: block; margin-top: 0.4rem; color: var(--accent); font: 600 0.7rem/1 var(--font-hud); letter-spacing: 0.14em; }
.compare .is-featured { background: rgb(139 108 255 / 0.06); }
.compare thead th.is-featured { background: rgb(21 21 37); box-shadow: inset 0 3px 0 var(--violet-glow), inset 0 -1px 0 var(--dest-line); }
.compare__group th { padding-block: 0.95rem; background: rgb(43 228 255 / 0.045); color: var(--accent); font: 600 0.66rem/1 var(--font-hud); letter-spacing: 0.2em; text-align: left; text-transform: uppercase; }
.compare tbody th[scope="row"] { color: var(--fg); font-weight: 400; line-height: 1.45; text-align: left; }
.compare__label { display: block; margin-bottom: 0.55rem; }
.compare__note { display: block; margin-top: 0.55rem; color: var(--fg-muted); font-size: 0.82rem; line-height: 1.5; }
.compare td { text-align: center; }
.compare td .icon { display: block; width: 22px; height: 22px; margin-inline: auto; stroke-width: 2; }
.compare td.is-yes .icon { color: var(--accent); }
.compare td.is-no .icon { color: rgb(255 255 255 / 0.28); }
.compare tbody:last-child tr:last-child > * { border-bottom: 0; }
@media (max-width: 640px) {
  .compare__benefit-col { width: 52%; }
  .compare__tier-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .compare__tier-short { display: block; }
  .compare__tier { font-size: 0.9rem; }
  .compare__price { font-size: 0.62rem; letter-spacing: 0.04em; }
  .compare th, .compare td { padding: 0.85rem 0.35rem; }
  .compare tbody th[scope="row"], .compare thead th:first-child, .compare__group th { padding-left: 0.9rem; }
  .compare tbody th[scope="row"] { font-size: 0.9rem; }
  .compare .status-chip { font-size: 0.56rem; letter-spacing: 0.1em; }
}

/* ---------- Editorial split, prose and figure ---------- */
.dest-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 6vw, 6.5rem); align-items: center; }
.dest-prose { display: grid; gap: 1.2rem; justify-items: start; }
.dest-prose > p:not(.dest-head__kicker) { max-width: 56ch; color: var(--text-soft); font-size: clamp(1rem, 0.3vw + 0.95rem, 1.12rem); line-height: 1.75; }
.dest-prose .display-title { margin-bottom: 0.3rem; }
.dest-figure { position: relative; margin: 0; overflow: hidden; border: 1px solid rgb(255 255 255 / 0.08); border-radius: 20px; box-shadow: 0 50px 100px -50px #000; }
.dest-figure img { width: 100%; aspect-ratio: 4 / 3.3; object-fit: cover; }
.dest-figure::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgb(5 6 11 / 0.7)); }
.dest-figure figcaption { position: absolute; z-index: 1; left: 1.3rem; bottom: 1.2rem; color: rgb(228 231 238 / 0.82); font: 500 0.66rem/1 var(--font-hud); letter-spacing: 0.2em; text-transform: uppercase; }
.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 2rem; width: 100%; margin: 0.8rem 0 0; padding: 0; list-style: none; }
.pillars li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0.25rem 0.9rem; align-items: start; }
.pillars .icon { grid-row: span 2; width: 26px; height: 26px; margin-top: 0.05rem; color: var(--accent); }
.pillars strong { color: var(--fg); font-weight: 600; }
.pillars span { color: var(--fg-muted); font-size: 0.92rem; line-height: 1.55; }

/* ---------- Ecosystem map ---------- */
.ecosystem { position: relative; }
.ecosystem::before {
  content: ""; position: absolute; inset: 18% 22%; pointer-events: none;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 1px), rgb(43 228 255 / 0.3) 50%, transparent calc(50% + 1px)),
    linear-gradient(to top right, transparent calc(50% - 1px), rgb(139 108 255 / 0.3) 50%, transparent calc(50% + 1px));
}
.ecosystem__hub {
  position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: 0.9rem;
  width: 230px; padding: 1.8rem 1.2rem; border-radius: 50%; aspect-ratio: 1; align-content: center; text-align: center;
  background: radial-gradient(closest-side, rgb(43 228 255 / 0.16), rgb(10 13 24 / 0.98) 70%); border: 1px solid rgb(43 228 255 / 0.35);
  box-shadow: 0 0 0 10px rgb(10 13 24 / 0.9), 0 0 60px rgb(43 228 255 / 0.2);
}
.ecosystem__hub img { width: 56px; }
.ecosystem__hub p { display: grid; justify-items: center; gap: 0.5rem; margin: 0; color: var(--fg); line-height: 1.3; }
.ecosystem__nodes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 7vw, 6rem) clamp(16rem, 24vw, 22rem); margin: 0; padding: 0; list-style: none; }
.ecosystem__node { position: relative; z-index: 1; display: grid; justify-items: start; align-content: start; gap: 0.75rem; padding: clamp(1.4rem, 2vw, 2rem); border: 1px solid var(--dest-line); border-radius: 18px; background: var(--dest-panel); }
.ecosystem__node .icon { width: 30px; height: 30px; color: var(--accent); }
.ecosystem__node--aether .icon { color: var(--dest-periwinkle); }
.ecosystem__node--lounges .icon { color: var(--dest-amber); }
.ecosystem__node h3 { font-size: 1.3rem; letter-spacing: -0.02em; }
.ecosystem__node p { color: var(--text-soft); line-height: 1.6; }

/* ---------- Members' calendar ---------- */
.cadence { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); margin: 0; padding: 0; list-style: none; }
.cadence::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: linear-gradient(90deg, var(--accent), var(--violet-glow) 70%, transparent); }
.cadence__step { position: relative; display: grid; justify-items: start; align-content: start; gap: 0.85rem; padding-top: 2.5rem; }
.cadence__step::before { content: ""; position: absolute; top: 0; left: 0; width: 15px; height: 15px; border: 2px solid var(--accent); border-radius: 50%; background: var(--ink); box-shadow: 0 0 14px rgb(43 228 255 / 0.5); }
.cadence__when { color: var(--accent); font: 600 0.7rem/1 var(--font-hud); letter-spacing: 0.2em; text-transform: uppercase; }
.cadence h3 { font-size: clamp(1.15rem, 0.5vw + 1rem, 1.4rem); line-height: 1.25; letter-spacing: -0.02em; }
.cadence p { color: var(--text-soft); line-height: 1.6; }

/* ---------- Principles ---------- */
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; overflow: hidden; list-style: none; border: 1px solid var(--dest-line); border-radius: 18px; background: var(--dest-line); }
.principles li { display: grid; align-content: start; gap: 0.8rem; padding: clamp(1.5rem, 2.4vw, 2.4rem); background: var(--dest-panel); }
.principles .icon { width: 30px; height: 30px; color: var(--accent); }
.principles h3 { font-size: 1.2rem; letter-spacing: -0.015em; }
.principles p { color: var(--text-soft); line-height: 1.6; }

/* ---------- FAQ ---------- */
.dest-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.dest-faq > .dest-head { position: sticky; top: calc(var(--nav-h) + 2rem); margin-bottom: 0; }
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.4rem 0.2rem; cursor: pointer; list-style: none;
  color: var(--fg); font: 600 clamp(1.02rem, 0.3vw + 0.95rem, 1.15rem)/1.4 var(--font-display); letter-spacing: -0.01em; transition: color var(--dur-fast);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent-core); }
.faq__item summary i { position: relative; flex: none; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; }
.faq__item summary i::before, .faq__item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--accent); translate: -50% -50%; transition: rotate var(--dur) var(--ease-out); }
.faq__item summary i::after { rotate: 90deg; }
.faq__item[open] summary i::after { rotate: 0deg; }
.faq__answer { padding: 0 3.5rem 1.6rem 0.2rem; color: var(--text-soft); line-height: 1.75; }
.faq__answer p + p { margin-top: 0.8rem; }
.faq__answer a { color: var(--accent); text-underline-offset: 3px; }

/* ---------- Closing ---------- */
.dest-closing .dest-actions { margin-top: 0.6rem; }

/* ---------- Visual: membership cards ---------- */
.member-cards { position: relative; width: min(100%, 540px); aspect-ratio: 1 / 0.92; container-type: inline-size; }
.member-card {
  position: absolute; display: flex; flex-direction: column; justify-content: space-between; width: 74%; aspect-ratio: 1.586; padding: 6% 7%; overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.13); border-radius: 4cqi; color: var(--fg);
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.95), inset 0 1px 0 rgb(255 255 255 / 0.12);
  animation: card-float 7s var(--ease-in-out) infinite alternate;
}
.member-card--recruit { left: 0; top: 3%; rotate: -12deg; background: linear-gradient(145deg, #1c2232, #0b0e17 72%); animation-delay: -2s; }
.member-card--lounge { left: 13%; top: 21%; rotate: -4deg; background: radial-gradient(120% 90% at 100% 0%, rgb(43 228 255 / 0.38), transparent 60%), linear-gradient(145deg, #0e2b35, #08121a 72%); animation-delay: -4.5s; }
.member-card--elite {
  left: 26%; top: 40%; rotate: 5deg; border-color: transparent;
  background:
    radial-gradient(110% 90% at 0% 100%, rgb(43 228 255 / 0.22), transparent 60%) padding-box,
    radial-gradient(120% 100% at 100% 0%, rgb(139 108 255 / 0.5), transparent 60%) padding-box,
    linear-gradient(145deg, #1a1536, #09091a 72%) padding-box,
    linear-gradient(130deg, var(--accent), var(--violet-glow) 45%, #ff8fd4 75%, var(--accent)) border-box;
}
.member-card::after { content: ""; position: absolute; inset: -40%; pointer-events: none; background: linear-gradient(115deg, transparent 42%, rgb(255 255 255 / 0.1) 50%, transparent 58%); animation: card-sheen 9s ease-in-out infinite; }
.member-card--elite::after { background: linear-gradient(115deg, transparent 40%, rgb(214 226 255 / 0.2) 50%, transparent 60%); }
.member-card__top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.member-card__top img { width: 9cqi; height: auto; filter: drop-shadow(0 0 12px rgb(43 228 255 / 0.45)); }
.member-card__brand { color: rgb(228 231 238 / 0.72); font: 600 2.1cqi/1 var(--font-hud); letter-spacing: 0.24em; text-transform: uppercase; }
.member-card__chip { width: 16%; height: 1.4cqi; border-radius: 99px; background: linear-gradient(90deg, rgb(255 255 255 / 0.3), rgb(255 255 255 / 0.05)); }
.member-card--lounge .member-card__chip { background: linear-gradient(90deg, var(--accent), rgb(43 228 255 / 0.1)); }
.member-card--elite .member-card__chip { width: 26%; background: linear-gradient(90deg, var(--accent), var(--violet-glow), rgb(255 143 212 / 0.4)); }
.member-card__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem; }
.member-card__tier { font: 600 5.4cqi/1.05 var(--font-display); letter-spacing: -0.03em; }
.member-card__price { color: var(--accent); font: 600 3.2cqi/1 var(--font-hud); letter-spacing: 0.06em; white-space: nowrap; }
.member-card__price small { margin-left: 0.15em; color: var(--fg-muted); font-size: 0.75em; }
@keyframes card-float { to { translate: 0 -8px; } }
@keyframes card-sheen { 0%, 55% { translate: -45% 0; } 100% { translate: 45% 0; } }

/* ---------- Homepage membership band ---------- */
.home-lounges { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); }
.home-lounges__art { position: absolute; inset: 0; z-index: -2; }
.home-lounges__art img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 18% 62%; opacity: 0.55; }
.home-lounges::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(5 6 11 / 0.97) 0%, rgb(5 6 11 / 0.88) 42%, rgb(5 6 11 / 0.55) 70%, rgb(5 6 11 / 0.75) 100%),
    linear-gradient(180deg, var(--ink) 0%, transparent 18%, transparent 80%, var(--ink) 100%);
}
.home-lounges__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.home-lounges__copy { display: grid; justify-items: start; gap: 1.3rem; }
.home-lounges__copy > p { max-width: 54ch; color: var(--text-soft); font-size: clamp(1rem, 0.3vw + 0.95rem, 1.12rem); line-height: 1.75; }
.home-tiers { display: grid; width: 100%; max-width: 560px; margin: 0.4rem 0; padding: 0; list-style: none; border-top: 1px solid var(--dest-line); }
.home-tiers li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.6rem 1.2rem; padding: 1rem 0; border-bottom: 1px solid var(--dest-line); }
.home-tiers__name { color: var(--fg); font: 600 1.08rem/1.2 var(--font-display); letter-spacing: -0.015em; }
.home-tiers__name small { display: block; margin-top: 0.3rem; color: var(--fg-muted); font: 400 0.85rem/1.4 var(--font-sans); letter-spacing: 0; }
.home-tiers__price { color: var(--accent); font: 600 0.82rem/1 var(--font-hud); letter-spacing: 0.08em; white-space: nowrap; }
.home-lounges__note { margin-top: 0.2rem; color: var(--fg-muted); font-size: 0.86rem; }
.home-lounges__visual { display: grid; place-items: center; }

/* ---------- Numbered editorial rows ---------- */
.container--wide { width: min(100% - 2 * var(--gutter), var(--container-wide)); }
.dest-rows { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); margin: 0; padding: 0; list-style: none; }
.dest-rows--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dest-rows > li { position: relative; display: grid; align-content: start; justify-items: start; gap: 0.9rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.dest-rows > li::before { content: ""; position: absolute; top: -1px; left: 0; width: 40px; height: 1px; background: var(--accent); box-shadow: var(--glow); }
.dest-rows__index { color: var(--accent); font: 600 0.78rem/1 var(--font-hud); font-variant-numeric: tabular-nums; letter-spacing: 0.14em; }
.dest-rows h3 { font-size: clamp(1.2rem, 0.5vw + 1.05rem, 1.45rem); letter-spacing: -0.02em; }
.dest-rows p { color: var(--text-soft); line-height: 1.65; }
.dest-rows .icon { width: 30px; height: 30px; color: var(--accent); }

/* ---------- Visual: signed-out member gate ---------- */
.gate {
  display: grid; gap: 1.1rem; width: min(100%, 440px); padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--dest-line-strong); border-radius: 20px; background: linear-gradient(180deg, rgb(16 20 36 / 0.92), rgb(8 10 19 / 0.96));
  box-shadow: 0 50px 100px -50px #000, 0 0 90px -40px rgb(43 228 255 / 0.35);
}
.gate__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.gate__top img { width: 44px; height: auto; filter: drop-shadow(0 0 14px rgb(43 228 255 / 0.4)); }
.gate__title { display: flex; align-items: center; gap: 0.65rem; margin: 0; color: var(--fg); font: 600 1.2rem/1.3 var(--font-display); letter-spacing: -0.01em; }
.gate__title .icon { width: 22px; height: 22px; color: var(--accent); }
.gate__text { margin: 0; color: var(--text-soft); line-height: 1.6; }
.gate__facts { display: grid; gap: 0.6rem; margin: 0; padding: 1rem 0 0; list-style: none; border-top: 1px solid var(--dest-line); }
.gate__facts li { display: flex; align-items: flex-start; gap: 0.6rem; color: var(--fg-muted); font-size: 0.88rem; line-height: 1.45; }
.gate__facts .icon { width: 18px; height: 18px; color: #7cf0bf; }

/* ---------- Member Command Centre preview ---------- */
.cc { overflow: hidden; border: 1px solid var(--dest-line-strong); border-radius: 22px; background: linear-gradient(180deg, #0b0f1c, #080a13); box-shadow: 0 60px 120px -60px #000; }
.cc__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 0.9rem; padding: 0.95rem 1.3rem; border-bottom: 1px solid var(--dest-line); background: rgb(255 255 255 / 0.02); }
.cc__bar img { width: 26px; height: auto; }
.cc__name { color: var(--fg); font: 600 0.95rem/1 var(--font-display); }
.cc__ribbon { margin-right: auto; padding: 0.38rem 0.6rem; border: 1px dashed rgb(255 210 138 / 0.5); border-radius: 6px; background: rgb(255 210 138 / 0.08); color: #ffd28a; font: 600 0.6rem/1 var(--font-hud); letter-spacing: 0.16em; text-transform: uppercase; }
.cc__body { display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.cc__rail { padding: 1rem 0.7rem; border-right: 1px solid var(--dest-line); }
.cc__rail ul { position: sticky; top: calc(var(--nav-h) + 1rem); display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cc__rail a { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.7rem; border-radius: 8px; color: var(--fg-muted); font-size: 0.88rem; line-height: 1.3; text-decoration: none; transition: background var(--dur-fast), color var(--dur-fast); }
.cc__rail a:hover { background: rgb(43 228 255 / 0.07); color: var(--fg); }
.cc__rail .icon { width: 18px; height: 18px; color: var(--accent); }
.cc__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; padding: clamp(1rem, 2vw, 1.6rem); }
.cc-module { display: flex; flex-direction: column; gap: 0.9rem; grid-column: span 2; min-width: 0; padding: 1.3rem; border: 1px solid var(--dest-line); border-radius: 14px; background: rgb(255 255 255 / 0.02); transition: border-color var(--dur), box-shadow var(--dur); }
.cc-module--half { grid-column: span 3; }
.cc-module--full { grid-column: 1 / -1; }
.cc-module:target { border-color: rgb(43 228 255 / 0.55); box-shadow: 0 0 0 3px rgb(43 228 255 / 0.12); }
.cc-module--aether { background: radial-gradient(90% 70% at 100% 0%, rgb(129 112 242 / 0.14), transparent 70%), rgb(255 255 255 / 0.02); }
.cc-module--aether .cc-module__head .icon { color: var(--dest-periwinkle); }
.cc-module__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.7rem; }
.cc-module__head .icon { width: 22px; height: 22px; color: var(--accent); }
.cc-module__head h3 { margin-right: auto; font-size: 1.05rem; letter-spacing: -0.01em; }
.cc-module__text { color: var(--text-soft); font-size: 0.92rem; line-height: 1.55; }
.cc-state { display: grid; margin: 0; border-top: 1px dashed var(--dest-line-strong); }
.cc-state > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px dashed var(--dest-line-strong); }
.cc-state dt { color: var(--fg-muted); font-size: 0.86rem; }
.cc-state dd { margin: 0; color: #c6cddb; font: 500 0.74rem/1.4 var(--font-hud); letter-spacing: 0.06em; text-align: right; }
.cc-module--full .cc-state { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
.cc-module .text-link { align-self: flex-start; margin-top: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .cc__body { grid-template-columns: 1fr; }
  .cc__rail { display: none; }
}
@media (max-width: 1100px) {
  .dest-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-module, .cc-module--half { grid-column: span 1; }
  .cc-module--full { grid-column: 1 / -1; }
  .dest-rows--3 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cc__grid, .dest-rows { grid-template-columns: 1fr; }
  .cc-module--full .cc-state { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .dest-hero { min-height: 0; align-items: start; padding-top: calc(var(--nav-h) + 3rem); }
  .dest-hero.has-visual .dest-hero__inner, .home-lounges__grid, .dest-split, .dest-faq { grid-template-columns: 1fr; }
  .dest-hero::before { background: linear-gradient(180deg, rgb(5 6 11 / 0.82) 0%, rgb(5 6 11 / 0.72) 50%, var(--ink) 100%); }
  .dest-hero__visual { justify-self: center; width: min(100%, 520px); }
  .dest-faq > .dest-head { position: static; }
  .faq__answer { padding-right: 0.2rem; }
  .cadence { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  .cadence::before { display: none; }
  .ecosystem::before { display: none; }
  .ecosystem__hub { position: relative; left: auto; top: auto; translate: none; margin: 0 auto 1.5rem; width: 210px; }
  .ecosystem__nodes { gap: 1rem; }
  .home-lounges__visual { order: 2; }
}
@media (max-width: 760px) {
  .dest-ledger__grid { grid-template-columns: 1fr; }
  .dest-ledger__grid > p { padding: 1.3rem 0; border-left: 0; border-top: 1px solid var(--dest-line); }
  .dest-ledger__grid > p:first-child { border-top: 0; }
  .dest-head { grid-template-columns: 1fr; align-items: start; }
  .billing { grid-template-columns: 1fr; }
  .ecosystem__nodes { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .dest-hero__actions, .dest-closing .dest-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .dest-hero__actions .btn, .dest-closing .dest-actions .btn { justify-content: center; width: 100%; }
  .pillars, .principles, .cadence { grid-template-columns: 1fr; }
  .cadence::before { display: block; left: 7px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, var(--accent), var(--violet-glow) 70%, transparent); }
  .cadence__step { padding: 0 0 0 2.4rem; }
  .home-tiers li { grid-template-columns: minmax(0, 1fr) auto; }
  .home-tiers li .status-chip { grid-column: 1 / -1; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .dest-hero__art img, .member-card, .member-card::after { animation: none; }
  .faq__item summary, .faq__item summary i::after { transition: none; }
}

/* =========================================================================
   Community and gaming destinations (CP3)
   ========================================================================= */
.dest-hero--room::before {
  background:
    linear-gradient(90deg, rgb(5 6 11 / 0.95) 0%, rgb(5 6 11 / 0.82) 36%, rgb(5 6 11 / 0.4) 64%, rgb(5 6 11 / 0.55) 100%),
    linear-gradient(180deg, rgb(5 6 11 / 0.7) 0%, transparent 20%, transparent 66%, var(--ink) 100%);
}
.dest-hero--prize .dest-hero__art {
  background:
    radial-gradient(38% 55% at 76% 46%, rgb(255 190 133 / 0.18), transparent 70%),
    radial-gradient(30% 45% at 70% 60%, rgb(43 228 255 / 0.14), transparent 70%),
    radial-gradient(circle at 76% 46%, transparent 0 30%, rgb(255 255 255 / 0.03) 30.2% 30.5%, transparent 30.7% 44%, rgb(255 255 255 / 0.03) 44.2% 44.5%, transparent 44.7%),
    linear-gradient(160deg, #08070c, #100d14 60%, #07070c);
}

/* Shared helpers */
.dest .agenda__grid > .dest-head { position: sticky; top: calc(var(--nav-h) + 2rem); margin-bottom: 0; }
.dest .agenda__empty .icon { width: 36px; height: 36px; color: var(--accent); stroke-width: 1.4; }
.dest .agenda__empty :is(.btn, .text-link) svg { width: 14px; height: 14px; }
.dest-split--top { align-items: start; }
.dest-footnote { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.8rem; margin-top: 2rem; color: var(--fg-muted); font-size: 0.92rem; }
.dest-callout { display: flex; align-items: flex-start; gap: 0.9rem; max-width: 900px; margin-top: clamp(2rem, 4vw, 3rem); padding: 1.2rem 1.4rem; border: 1px solid rgb(43 228 255 / 0.25); border-left: 2px solid var(--accent); border-radius: 12px; background: rgb(43 228 255 / 0.04); color: var(--text-soft); line-height: 1.6; }
.dest-callout .icon { width: 22px; height: 22px; margin-top: 0.15rem; color: var(--accent); }
.dest-callout strong { color: var(--fg); }
.skeleton { display: block; width: var(--w, 60%); height: 10px; border-radius: 99px; background: linear-gradient(90deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.04)); }
.skeleton--soft { height: 8px; opacity: 0.6; }

/* Formats and competition types */
.formats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.format { position: relative; display: grid; align-content: start; justify-items: start; gap: 0.85rem; min-width: 0; padding: clamp(1.4rem, 2vw, 2rem); overflow: hidden; border: 1px solid var(--dest-line); border-radius: 18px; background: var(--dest-panel); transition: border-color var(--dur) var(--ease-out), translate var(--dur) var(--ease-out); }
.format:hover { border-color: rgb(43 228 255 / 0.3); translate: 0 -3px; }
.format__index { position: absolute; right: 1rem; top: 0.4rem; color: transparent; font: 700 4.2rem/1 var(--font-display); letter-spacing: -0.05em; -webkit-text-stroke: 1px rgb(255 255 255 / 0.08); }
.format .icon { width: 30px; height: 30px; color: var(--accent); }
.format h3 { font-size: 1.3rem; letter-spacing: -0.02em; }
.format p { color: var(--text-soft); line-height: 1.6; }
.format p.format__meta { color: var(--accent); font: 600 0.66rem/1.4 var(--font-hud); letter-spacing: 0.14em; text-transform: uppercase; }

/* Game titles (CSS marks only; no third-party game art) */
.titles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.title-card, .squad-game { position: relative; isolation: isolate; display: grid; align-content: start; justify-items: start; gap: 0.85rem; min-width: 0; overflow: hidden; padding: clamp(1.5rem, 2.4vw, 2.2rem); border: 1px solid var(--dest-line); border-radius: 18px; background: var(--dest-panel); }
.title-card::before, .squad-game::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.9; background: var(--title-art, none); }
.title-card--arma-reforger { --title-art: radial-gradient(120% 70% at 90% 0%, rgb(255 150 70 / 0.2), transparent 60%); }
.title-card--minecraft { --title-art: radial-gradient(120% 70% at 90% 0%, rgb(95 220 140 / 0.18), transparent 60%); }
.title-card--hell-let-loose { --title-art: radial-gradient(120% 70% at 90% 0%, rgb(200 170 120 / 0.16), transparent 60%); }
.title-card__mark { position: absolute; z-index: -1; right: -0.05em; bottom: -0.12em; color: transparent; font: 700 clamp(3.5rem, 6vw, 5.5rem)/0.85 var(--font-display); letter-spacing: -0.06em; -webkit-text-stroke: 1px rgb(255 255 255 / 0.08); }
.squad-game .title-card__mark { display: none; }
.title-card { min-height: 15rem; }
.title-card h3, .squad-game h3 { font-size: clamp(1.4rem, 1vw + 1rem, 1.8rem); letter-spacing: -0.03em; }
.title-card p, .squad-game header p { color: var(--text-soft); line-height: 1.6; }
.squad-games { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.squad-game header { display: grid; justify-items: start; gap: 0.85rem; }
.role-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0 0; padding: 1rem 0 0; list-style: none; border-top: 1px solid var(--dest-line); }
.role-list li { padding: 0.45rem 0.7rem; border: 1px solid var(--dest-line-strong); border-radius: 8px; background: rgb(255 255 255 / 0.03); color: var(--fg); font-size: 0.85rem; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps > li { position: relative; display: grid; align-content: start; gap: 0.7rem; padding: 4.2rem 0 0; counter-increment: step; }
.steps > li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 3rem; height: 3rem;
  border: 1px solid rgb(43 228 255 / 0.5); border-radius: 50%; color: var(--accent); font: 600 0.82rem/1 var(--font-hud); letter-spacing: 0.06em;
  background: radial-gradient(closest-side, rgb(43 228 255 / 0.14), transparent); box-shadow: 0 0 20px rgb(43 228 255 / 0.18);
}
.steps > li:not(:last-child)::after { content: ""; position: absolute; left: 3.6rem; right: -0.4rem; top: 1.5rem; height: 1px; background: linear-gradient(90deg, rgb(43 228 255 / 0.5), transparent); }
.steps h3 { font-size: 1.2rem; letter-spacing: -0.02em; }
.steps p { color: var(--text-soft); line-height: 1.6; }
.steps__actions { margin-top: clamp(2rem, 4vw, 3rem); }

/* Check rows (fair play, guidelines, creator benefits) */
.checks { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.checks > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 1rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.checks > li > .icon { width: 28px; height: 28px; margin-top: 0.1rem; color: var(--accent); }
.checks h3 { margin-bottom: 0.4rem; font-size: 1.15rem; letter-spacing: -0.015em; }
.checks p { color: var(--text-soft); line-height: 1.6; }
.checks .status-chip { margin-top: 0.7rem; }

/* Preview frames */
.mock { overflow: hidden; border: 1px solid var(--dest-line-strong); border-radius: 18px; background: linear-gradient(180deg, #0b0f1c, #080a13); box-shadow: 0 50px 100px -50px #000; }
.mock__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 0.9rem; padding: 0.85rem 1.2rem; border-bottom: 1px solid var(--dest-line); background: rgb(255 255 255 / 0.02); color: var(--fg); font: 600 0.9rem/1 var(--font-display); }
.mock__dots { display: inline-flex; gap: 6px; }
.mock__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgb(255 255 255 / 0.14); }
.mock__body { padding: clamp(1rem, 2.4vw, 1.8rem); }
.standings { display: grid; }
.standings__row { display: grid; grid-template-columns: 3rem minmax(0, 1fr) repeat(3, 5rem); align-items: center; gap: 1rem; padding: 0.95rem 0.6rem; border-bottom: 1px dashed var(--dest-line-strong); color: var(--fg-muted); font: 500 0.82rem/1 var(--font-hud); letter-spacing: 0.06em; }
.standings__row--head { color: var(--accent); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; border-bottom-style: solid; }
.standings__row > span:not(:nth-child(2)) { text-align: center; }
.statsmock { display: grid; gap: 1.1rem; }
.statsmock__row { display: grid; grid-template-columns: 7rem minmax(0, 1fr) 2rem; align-items: center; gap: 1rem; color: var(--fg-muted); font-size: 0.88rem; }
.statsmock__row .skeleton { height: 12px; background: linear-gradient(90deg, rgb(43 228 255 / 0.3), rgb(139 108 255 / 0.12)); }
.statsmock__row em { color: var(--fg-muted); font-style: normal; text-align: right; }
.statsmock__note { margin-top: 0.4rem; color: var(--fg-muted); font-size: 0.85rem; }
.finder { display: grid; gap: 1.2rem; }
.finder__filters { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.finder__filter { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.85rem; border: 1px solid var(--dest-line-strong); border-radius: 10px; color: var(--fg); font-size: 0.85rem; }
.finder__filter i { width: 6px; height: 6px; border: solid var(--fg-muted); border-width: 0 1px 1px 0; rotate: 45deg; translate: 0 -2px; }
.finder__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.finder__item { display: grid; gap: 0.8rem; padding: 1.1rem; border: 1px solid var(--dest-line); border-radius: 12px; background: rgb(255 255 255 / 0.02); }
.finder__game { color: var(--accent); font: 600 0.66rem/1 var(--font-hud); letter-spacing: 0.16em; text-transform: uppercase; }
.finder__slots { color: var(--fg-muted); font-size: 0.82rem; }
.finder__slots b { color: var(--fg); font-weight: 600; }
.finder-plan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.finder-plan li { display: flex; align-items: flex-start; gap: 0.7rem; color: var(--text-soft); font-size: 0.92rem; line-height: 1.5; }
.finder-plan .icon { width: 20px; height: 20px; color: var(--accent); }

/* Achievement badges */
.badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.badge { display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0.35rem 1.2rem; align-items: center; padding: 1.4rem; border: 1px solid var(--dest-line); border-radius: 18px; background: var(--dest-panel); }
.badge__medal {
  grid-row: span 2; display: grid; place-items: center; width: 72px; aspect-ratio: 1; color: var(--accent);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: radial-gradient(closest-side, rgb(43 228 255 / 0.18), rgb(43 228 255 / 0.04)), linear-gradient(160deg, #18203a, #0b0e19);
}
.badge__medal .icon { width: 30px; height: 30px; }
.badge h3 { align-self: end; font-size: 1.15rem; letter-spacing: -0.015em; }
.badge p { align-self: start; color: var(--text-soft); font-size: 0.92rem; line-height: 1.55; }

/* Rules document */
.rules-doc { display: grid; margin: 0; padding: clamp(1.4rem, 3vw, 2.4rem); list-style: none; counter-reset: clause; border: 1px solid var(--dest-line-strong); border-radius: 18px; background: linear-gradient(180deg, rgb(255 255 255 / 0.03), rgb(255 255 255 / 0.01)); }
.rules-doc li { position: relative; padding: 0.95rem 0 0.95rem 3rem; border-bottom: 1px solid var(--dest-line); color: var(--text-soft); line-height: 1.55; counter-increment: clause; }
.rules-doc li:last-child { border-bottom: 0; }
.rules-doc li::before { content: counter(clause, decimal-leading-zero); position: absolute; left: 0; top: 1.05rem; color: var(--accent); font: 600 0.78rem/1 var(--font-hud); letter-spacing: 0.08em; }
.rules-doc strong { display: block; margin-bottom: 0.2rem; color: var(--fg); font-weight: 600; }

/* ---------- Visuals ---------- */
.bracket { width: min(100%, 560px); padding: clamp(1.2rem, 2.4vw, 1.8rem); border: 1px solid var(--dest-line-strong); border-radius: 20px; background: rgb(8 10 19 / 0.82); backdrop-filter: blur(8px); box-shadow: 0 50px 100px -50px #000, 0 0 80px -40px rgb(43 228 255 / 0.4); }
.bracket__label { margin: 0 0 1rem; color: var(--fg-muted); font: 600 0.62rem/1 var(--font-hud); letter-spacing: 0.2em; text-transform: uppercase; }
.bracket__rounds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 44px; gap: 0.9rem; align-items: stretch; }
.bracket__round { display: grid; grid-template-rows: auto 1fr; gap: 0.8rem; }
.bracket__matches { display: flex; flex-direction: column; justify-content: space-around; gap: 0.7rem; }
.bracket__round-name { color: var(--accent); font: 600 0.56rem/1.2 var(--font-hud); letter-spacing: 0.14em; text-transform: uppercase; }
.bracket__match { position: relative; display: grid; gap: 3px; }
.bracket__match::after { content: ""; position: absolute; right: -0.9rem; top: 50%; width: 0.9rem; height: 1px; background: rgb(43 228 255 / 0.35); }
.bracket__slot { padding: 0.5rem 0.55rem; border: 1px solid var(--dest-line-strong); border-radius: 6px; background: rgb(255 255 255 / 0.03); color: var(--fg-muted); font: 500 0.7rem/1 var(--font-hud); letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bracket__champion { display: grid; place-items: center; align-self: center; width: 44px; aspect-ratio: 1; border: 1px solid rgb(255 190 133 / 0.5); border-radius: 50%; color: var(--dest-amber); box-shadow: 0 0 24px rgb(255 190 133 / 0.25); }
.bracket__champion .icon { width: 22px; height: 22px; }

.passport { position: relative; width: min(100%, 440px); padding: clamp(1.4rem, 3vw, 2rem); overflow: hidden; border: 1px solid transparent; border-radius: 22px; color: var(--fg); background: radial-gradient(90% 60% at 100% 0%, rgb(43 228 255 / 0.18), transparent 60%) padding-box, linear-gradient(160deg, #141a30, #090b16) padding-box, linear-gradient(140deg, rgb(43 228 255 / 0.7), rgb(255 190 133 / 0.5) 60%, rgb(139 108 255 / 0.6)) border-box; box-shadow: 0 50px 100px -50px #000, 0 0 90px -40px rgb(43 228 255 / 0.4); rotate: -2deg; }
.passport::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.018) 0 2px, transparent 2px 10px); }
.passport__head { display: flex; justify-content: space-between; gap: 1rem; color: var(--fg-muted); font: 600 0.62rem/1 var(--font-hud); letter-spacing: 0.22em; text-transform: uppercase; }
.passport__concept { color: #ffd28a; }
.passport__id { display: flex; align-items: center; gap: 1.1rem; margin-block: 1.6rem 1.3rem; }
.passport__avatar { display: grid; place-items: center; width: 74px; aspect-ratio: 1; border: 1px solid rgb(43 228 255 / 0.4); border-radius: 18px; background: radial-gradient(closest-side, rgb(43 228 255 / 0.2), transparent); }
.passport__avatar img { width: 42px; height: auto; }
.passport__label { display: block; color: var(--fg-muted); font: 600 0.6rem/1 var(--font-hud); letter-spacing: 0.2em; text-transform: uppercase; }
.passport__callsign { display: block; margin-top: 0.5rem; color: var(--fg); font: 600 1.6rem/1.1 var(--font-display); letter-spacing: -0.03em; }
.passport__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin: 0; padding-block: 1.1rem; border-block: 1px dashed var(--dest-line-strong); }
.passport__fields dt { color: var(--fg-muted); font: 600 0.56rem/1.3 var(--font-hud); letter-spacing: 0.16em; text-transform: uppercase; }
.passport__fields dd { margin: 0.4rem 0 0; color: var(--fg); }
.passport__badges { display: flex; gap: 0.7rem; margin-top: 1.2rem; }
.passport__badge { display: grid; place-items: center; width: 46px; aspect-ratio: 1; border: 1px dashed rgb(255 255 255 / 0.22); clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); color: rgb(255 255 255 / 0.35); background: rgb(255 255 255 / 0.04); }
.passport__badge .icon { width: 20px; height: 20px; }

.fireteam { width: min(100%, 460px); padding: clamp(1.3rem, 2.6vw, 1.9rem); border: 1px solid var(--dest-line-strong); border-radius: 20px; background: rgb(8 10 19 / 0.86); backdrop-filter: blur(8px); box-shadow: 0 50px 100px -50px #000, 0 0 80px -40px rgb(255 150 70 / 0.35); }
.fireteam__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.fireteam__title { color: var(--fg); font: 600 1.1rem/1.2 var(--font-display); }
.fireteam__game { color: var(--accent); font: 600 0.6rem/1 var(--font-hud); letter-spacing: 0.18em; text-transform: uppercase; }
.fireteam__slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.fireteam__slots li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0.2rem 0.7rem; align-items: center; padding: 0.8rem; border: 1px dashed rgb(255 255 255 / 0.18); border-radius: 12px; }
.fireteam__slots .icon { grid-row: span 2; width: 20px; height: 20px; color: var(--accent); }
.fireteam__slots span { color: var(--fg); font-size: 0.9rem; }
.fireteam__slots em { color: #7cf0bf; font: 600 0.56rem/1 var(--font-hud); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; }

.onair { width: min(100%, 540px); }
.onair__screen { position: relative; display: grid; place-items: center; gap: 1rem; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgb(139 108 255 / 0.4); border-radius: 18px; background: radial-gradient(60% 70% at 50% 45%, rgb(139 108 255 / 0.28), transparent 70%), radial-gradient(40% 40% at 80% 85%, rgb(255 93 166 / 0.16), transparent 70%), #0b0918; box-shadow: 0 50px 100px -50px #000, 0 0 90px -40px rgb(139 108 255 / 0.6); }
.onair__screen img { width: 18%; height: auto; filter: drop-shadow(0 0 22px rgb(43 228 255 / 0.5)); }
.onair__mark { margin-top: -0.4rem; color: var(--fg); font: 700 clamp(1.4rem, 2.6vw, 2.2rem)/1 var(--font-display); letter-spacing: -0.03em; }
.onair__mark em { color: #c9bcff; font-style: normal; }
.onair__corner { position: absolute; width: 22px; height: 22px; border: 2px solid rgb(255 255 255 / 0.5); }
.onair__corner--tl { left: 14px; top: 14px; border-width: 2px 0 0 2px; }
.onair__corner--tr { right: 14px; top: 14px; border-width: 2px 2px 0 0; }
.onair__corner--bl { left: 14px; bottom: 14px; border-width: 0 0 2px 2px; }
.onair__corner--br { right: 14px; bottom: 14px; border-width: 0 2px 2px 0; }
.onair__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.9rem; padding: 0.8rem 1rem; border: 1px solid var(--dest-line); border-radius: 12px; background: rgb(8 10 19 / 0.8); }
.onair__tag { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--fg); font-size: 0.9rem; }
.onair__tag .icon { width: 18px; height: 18px; color: #c9bcff; }
.onair__note { color: #c9bcff; font: 600 0.6rem/1 var(--font-hud); letter-spacing: 0.16em; text-transform: uppercase; }

.emblem { position: relative; display: grid; place-items: center; width: min(100%, 420px); aspect-ratio: 1; }
.emblem__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: emblem-turn 80s linear infinite; }
.emblem__outer { fill: none; stroke: rgb(255 190 133 / 0.35); stroke-width: 1; }
.emblem__inner { fill: rgb(255 190 133 / 0.04); stroke: rgb(43 228 255 / 0.35); stroke-width: 1; }
.emblem__text { fill: var(--dest-amber); font: 600 15px var(--font-hud); letter-spacing: 3px; text-transform: uppercase; }
.emblem img { position: relative; width: 34%; height: auto; filter: drop-shadow(0 0 30px rgb(43 228 255 / 0.45)); }
@keyframes emblem-turn { to { rotate: 360deg; } }

@media (max-width: 1100px) {
  .formats, .finder-plan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .titles, .squad-games, .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  .steps > li:nth-child(2)::after { display: none; }
}
@media (max-width: 960px) {
  .dest .agenda__grid > .dest-head { position: static; }
  .finder__list { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .formats, .titles, .squad-games, .badges, .steps, .finder-plan { grid-template-columns: 1fr; }
  .steps > li::after { display: none; }
  .standings__row { grid-template-columns: 2rem minmax(0, 1fr) repeat(3, 2.6rem); gap: 0.5rem; padding-inline: 0.2rem; }
  .bracket__slot { font-size: 0.6rem; padding: 0.42rem 0.35rem; }
  .bracket__rounds { gap: 0.6rem; grid-template-columns: repeat(3, minmax(0, 1fr)) 34px; }
  .bracket__champion { width: 34px; }
  .fireteam__slots { grid-template-columns: 1fr 1fr; }
  .passport__fields { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .emblem__ring { animation: none; }
  .format { transition: none; }
  .format:hover { translate: none; }
}

/* =========================================================================
   Product and trust destinations (CP4)
   ========================================================================= */
.dest-band--aether .dest-head__kicker, .dest-band--aether .status-chip--planned { --c: 201 188 255; }
.dest-band--aether .display-title em, .dest-hero--aether .dest-hero__title em { background: linear-gradient(100deg, #e3eaff, #a3b8ff 42%, #8170f2 78%, #6a4de3); -webkit-background-clip: text; background-clip: text; }

/* Roadmap lanes */
.lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.lane { display: grid; align-content: start; gap: 1rem; padding: clamp(1.2rem, 2vw, 1.6rem); border: 1px solid rgb(163 184 255 / 0.16); border-radius: 20px; background: rgb(11 15 26 / 0.85); }
.lane__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid rgb(163 184 255 / 0.14); }
.lane__head h3 { font-size: 1.6rem; letter-spacing: -0.03em; }
.lane__head p { color: var(--fg-muted); font: 600 0.62rem/1.3 var(--font-hud); letter-spacing: 0.16em; text-align: right; text-transform: uppercase; }
.lane--now .lane__head h3 { color: #c9d6ff; }
.lane__items { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.lane__item { display: grid; justify-items: start; gap: 0.55rem; padding: 1.1rem; border: 1px solid rgb(255 255 255 / 0.06); border-radius: 14px; background: rgb(255 255 255 / 0.025); }
.lane__area { color: var(--dest-periwinkle); font: 600 0.6rem/1 var(--font-hud); letter-spacing: 0.18em; text-transform: uppercase; }
.lane__item h4 { color: var(--fg); font: 600 1.05rem/1.25 var(--font-display); letter-spacing: -0.015em; }
.lane__item p { color: var(--text-soft); font-size: 0.92rem; line-height: 1.55; }

/* Milestone timeline */
.timeline { position: relative; display: grid; gap: 2.2rem; margin: 0; padding: 0 0 0 2.6rem; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--dest-periwinkle), var(--dest-violet) 60%, rgb(255 255 255 / 0.12)); }
.timeline li { position: relative; display: grid; justify-items: start; gap: 0.6rem; }
.timeline__node { position: absolute; left: -2.6rem; top: 0.2rem; width: 20px; height: 20px; border: 2px solid rgb(255 255 255 / 0.25); border-radius: 50%; background: var(--ink); }
.timeline li.is-done .timeline__node { border-color: var(--dest-periwinkle); background: var(--dest-periwinkle); box-shadow: 0 0 16px rgb(163 184 255 / 0.6); }
.timeline li.is-active .timeline__node { border-color: var(--dest-periwinkle); box-shadow: 0 0 0 5px rgb(163 184 255 / 0.15); }
.timeline li.is-target .timeline__node { border-color: var(--dest-amber); border-style: dashed; }
.timeline h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.8rem; font-size: 1.3rem; letter-spacing: -0.02em; }
.timeline__date { color: var(--dest-amber); font: 600 0.68rem/1 var(--font-hud); letter-spacing: 0.16em; text-transform: uppercase; }
.timeline p { max-width: 56ch; color: var(--text-soft); line-height: 1.65; }

/* Updates */
.updates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin: 0; padding: 0; list-style: none; }
.update { display: grid; gap: 0.7rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.update time { color: var(--accent); font: 600 0.68rem/1 var(--font-hud); letter-spacing: 0.14em; text-transform: uppercase; }
.update h3 { font-size: 1.25rem; letter-spacing: -0.02em; }
.update h3 a { color: var(--fg); text-decoration: none; }
.update h3 a:hover { color: var(--accent-core); text-decoration: underline; text-underline-offset: 4px; }
.update p { color: var(--text-soft); line-height: 1.6; }
.split-empty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

/* Help centre */
.help { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.help__intro { position: sticky; top: calc(var(--nav-h) + 2rem); display: grid; gap: 2rem; }
.help__intro .dest-head { margin-bottom: 0; }
.help-finder { display: grid; gap: 0.6rem; }
.help-finder label { color: var(--fg); font-weight: 600; }
.help-finder input { width: 100%; min-height: 50px; padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-2); color: var(--fg); font: inherit; }
.help-finder input:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.help-finder__count { min-height: 1.4em; color: var(--fg-muted); font-size: 0.88rem; }
.help__groups { display: grid; gap: clamp(2.5rem, 4vw, 3.5rem); }
.help-group[hidden], .help-group .faq__item[hidden], [data-help-empty][hidden] { display: none; }
.help-group__title { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.4rem; font-size: 1.35rem; letter-spacing: -0.02em; }
.help-group__title .icon { width: 26px; height: 26px; color: var(--accent); }
.topics { width: min(100%, 440px); padding: clamp(1.2rem, 2.4vw, 1.6rem); border: 1px solid var(--dest-line-strong); border-radius: 20px; background: rgb(10 13 24 / 0.9); box-shadow: 0 50px 100px -50px #000; }
.topics__label { margin: 0 0 0.8rem; color: var(--fg-muted); font: 600 0.62rem/1 var(--font-hud); letter-spacing: 0.2em; text-transform: uppercase; }
.topics ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.topics a { display: grid; grid-template-columns: 24px minmax(0, 1fr) 16px; align-items: center; gap: 0.8rem; padding: 0.85rem 0.9rem; border-radius: 12px; color: var(--fg); text-decoration: none; transition: background var(--dur-fast); }
.topics a:hover { background: rgb(43 228 255 / 0.07); }
.topics .icon { width: 22px; height: 22px; color: var(--accent); }
.topics a > svg:last-child { width: 14px; height: 14px; color: var(--fg-muted); }
.routes { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 1rem; }
.route { display: grid; align-content: start; justify-items: start; gap: 0.85rem; padding: clamp(1.4rem, 2.4vw, 2rem); border: 1px solid var(--dest-line); border-radius: 18px; background: var(--dest-panel); }
.route--primary { border-color: rgb(43 228 255 / 0.3); background: radial-gradient(90% 70% at 100% 0%, rgb(43 228 255 / 0.1), transparent 70%), var(--dest-panel); }
.route > .icon { width: 30px; height: 30px; color: var(--accent); }
.route h3 { font-size: 1.3rem; letter-spacing: -0.02em; }
.route p { color: var(--text-soft); line-height: 1.6; }
.route .social { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
.route .social svg { width: 22px; height: 22px; }
.help-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.help-links a { display: grid; grid-template-columns: minmax(0, 1fr) 16px; gap: 0.25rem 1rem; align-items: center; padding: 1.1rem 1.2rem; border-top: 1px solid var(--line); color: var(--fg); text-decoration: none; }
.help-links strong { font-weight: 600; }
.help-links span { grid-row: 2; color: var(--fg-muted); font-size: 0.88rem; }
.help-links svg { grid-row: span 2; width: 14px; height: 14px; color: var(--accent); transition: translate var(--dur) var(--ease-out); }
.help-links a:hover svg { translate: 4px 0; }

/* Plugins */
.plugin-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.plugin-cat { display: grid; align-content: start; justify-items: start; gap: 0.85rem; padding: clamp(1.4rem, 2.2vw, 2rem); border: 1px solid rgb(163 184 255 / 0.14); border-radius: 18px; background: rgb(11 15 26 / 0.9); transition: border-color var(--dur), translate var(--dur) var(--ease-out); }
.plugin-cat:hover { border-color: rgb(163 184 255 / 0.4); translate: 0 -3px; }
.plugin-cat__icon { display: grid; place-items: center; width: 52px; aspect-ratio: 1; border-radius: 14px; color: var(--dest-periwinkle); background: linear-gradient(145deg, rgb(129 112 242 / 0.28), rgb(163 184 255 / 0.08)); border: 1px solid rgb(163 184 255 / 0.25); }
.plugin-cat__icon .icon { width: 26px; height: 26px; }
.plugin-cat h3 { font-size: 1.25rem; letter-spacing: -0.02em; }
.plugin-cat p { color: var(--text-soft); line-height: 1.6; }
.concepts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.concept { overflow: hidden; border: 1px solid var(--dest-line); border-radius: 18px; background: var(--dest-panel); }
.concept__art { display: grid; gap: 0.7rem; padding: 1.6rem 1.4rem; border-bottom: 1px solid var(--dest-line); background: radial-gradient(90% 80% at 100% 0%, rgb(129 112 242 / 0.25), transparent 70%), #0d1122; }
.concept__art .icon { width: 34px; height: 34px; margin-bottom: 0.4rem; color: var(--dest-periwinkle); }
.concept__body { display: grid; gap: 0.7rem; padding: 1.4rem; }
.concept__cat { color: var(--dest-periwinkle); font: 600 0.62rem/1 var(--font-hud); letter-spacing: 0.18em; text-transform: uppercase; }
.concept h3 { font-size: 1.3rem; letter-spacing: -0.02em; }
.concept p { color: var(--text-soft); line-height: 1.6; }
.concept__facts { display: grid; margin: 0.3rem 0 0; border-top: 1px dashed var(--dest-line-strong); }
.concept__facts > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px dashed var(--dest-line-strong); }
.concept__facts dt { color: var(--fg-muted); font-size: 0.85rem; }
.concept__facts dd { margin: 0; color: #c6cddb; font: 500 0.72rem/1.4 var(--font-hud); letter-spacing: 0.05em; text-align: right; }
.facts-panel { display: grid; margin: 0; border-top: 1px solid rgb(163 184 255 / 0.18); }
.facts-panel > div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 0.6rem 1.2rem; align-items: start; padding: 1.2rem 0; border-bottom: 1px solid rgb(163 184 255 / 0.18); }
.facts-panel dt { grid-row: span 2; color: var(--fg); font-weight: 600; }
.facts-panel dd { margin: 0; color: var(--text-soft); line-height: 1.6; }
.facts-panel__chip { grid-column: 2; justify-self: start; }
.modules { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.6rem, 1.5vw, 1rem); width: min(100%, 420px); aspect-ratio: 1; padding: clamp(1rem, 3vw, 2rem); }
.modules__tile, .modules__slot { display: grid; place-items: center; border-radius: 22%; }
.modules__tile { color: #c9d6ff; background: linear-gradient(145deg, rgb(129 112 242 / 0.3), rgb(11 15 26 / 0.9)); border: 1px solid rgb(163 184 255 / 0.3); box-shadow: 0 20px 40px -20px #000, inset 0 1px 0 rgb(255 255 255 / 0.08); animation: module-drift 8s var(--ease-in-out) infinite alternate; }
.modules__tile:nth-child(even) { animation-delay: -4s; }
.modules__tile .icon { width: 42%; height: 42%; }
.modules__tile--4 { grid-column: 3; grid-row: 2; }
.modules__slot { grid-column: 2; grid-row: 2; color: #ffffff; border: 1.5px dashed rgb(163 184 255 / 0.7); background: radial-gradient(closest-side, rgb(163 184 255 / 0.3), transparent); box-shadow: 0 0 60px rgb(129 112 242 / 0.45); }
.modules__slot .icon { width: 40%; height: 40%; }
@keyframes module-drift { to { translate: 0 -6px; } }

@media (max-width: 1100px) {
  .lanes, .updates, .plugin-cats, .concepts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .routes { grid-template-columns: 1fr 1fr; }
  .route--primary { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .help { grid-template-columns: 1fr; }
  .help__intro { position: static; }
}
@media (max-width: 760px) {
  .lanes, .updates, .plugin-cats, .concepts, .split-empty, .routes, .help-links { grid-template-columns: 1fr; }
  .facts-panel > div { grid-template-columns: 1fr; }
  .facts-panel dt { grid-row: auto; }
  .facts-panel__chip { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .modules__tile { animation: none; }
  .plugin-cat { transition: none; }
  .plugin-cat:hover { translate: none; }
}