:root {
  --ink: #f7f4ff;
  --muted: #b8b2ca;
  --panel: #211a3d;
  --panel-2: #2a2150;
  --line: rgba(255, 255, 255, .13);
  --midnight: #0c0918;
  --midnight-2: #15102a;
  --gold: #f5c518;
  --gold-2: #ffdf68;
  --violet: #9c6bff;
  --blue: #5bb9ff;
  --green: #54d37b;
  --danger: #ff717b;
  --radius: 24px;
  --shadow: 0 20px 60px rgba(0, 0, 0, .34), 0 5px 0 rgba(0, 0, 0, .24);
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 10% 0%, rgba(92, 63, 170, .28), transparent 28rem),
    radial-gradient(circle at 90% 15%, rgba(245, 197, 24, .09), transparent 24rem),
    linear-gradient(180deg, var(--midnight-2), var(--midnight) 55%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, #000, transparent 78%);
}

a { color: inherit; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 12px;
  color: #181027;
  background: var(--gold);
  font-weight: 900;
}
.skip-link:focus { top: 16px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 76px;
  padding: 11px max(22px, calc((100vw - 1200px) / 2));
  border-bottom: 1px solid var(--line);
  background: rgba(12, 9, 24, .86);
  backdrop-filter: blur(18px);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-right: auto;
  color: var(--ink);
  font-size: 18px;
  font-weight: 850;
  text-decoration: none;
  letter-spacing: -.02em;
}
.wordmark b { color: var(--gold); }
.mark-wrap {
  width: 48px;
  height: 48px;
  padding: 4px;
  overflow: hidden;
  border: 2px solid var(--gold);
  border-radius: 15px;
  background: #050507;
  box-shadow: 0 0 0 4px rgba(245,197,24,.12);
}
.mark-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; }

.site-header nav { display: flex; align-items: center; gap: 4px; }
.site-header nav a {
  padding: 10px 13px;
  border-radius: 12px;
  color: var(--muted);
  font-weight: 750;
  text-decoration: none;
}
.site-header nav a:hover { color: var(--ink); background: rgba(255,255,255,.08); }
.site-header nav .nav-cta {
  color: #251a00;
  background: var(--gold);
}
.site-header nav .nav-cta:hover { color: #251a00; background: var(--gold-2); }
.nav-toggle {
  display: none;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: var(--panel);
  font-weight: 800;
}

main {
  position: relative;
  width: min(1200px, calc(100% - 36px));
  margin: 0 auto;
  padding: 46px 0 96px;
}

.premium-panel, .product-card, .release-card, .content-card, .support-card {
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), transparent 38%),
    linear-gradient(180deg, rgba(41,32,79,.98), rgba(27,21,54,.98));
  box-shadow: var(--shadow);
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 34px;
  min-height: 560px;
  padding: clamp(32px, 6vw, 74px);
  overflow: hidden;
  border-radius: 34px;
}
.hero::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  right: -140px;
  bottom: -230px;
  border-radius: 50%;
  background: rgba(245,197,24,.12);
  filter: blur(2px);
}
.hero-copy { align-self: center; position: relative; z-index: 2; }
.eyebrow {
  margin: 0 0 10px;
  color: var(--gold-2);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
h1, h2, h3 { letter-spacing: -.035em; }
.hero h1, .page-hero h1, .product-detail h1 {
  margin: 0;
  font-size: clamp(46px, 7vw, 82px);
  line-height: .96;
}
.hero h1 span, .page-hero h1 span { color: var(--gold); }
.hero-lede, .page-hero > p:last-child, .detail-lede {
  max-width: 730px;
  color: #d5cfe6;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
}
.hero-actions, .card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--ink);
  background: rgba(255,255,255,.08);
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.16);
  transition: transform .16s ease, filter .16s ease, background .16s ease;
}
.button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.button.primary {
  color: #251a00;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  border-color: #ffe99a;
  box-shadow: inset 0 1px rgba(255,255,255,.7), 0 5px 0 #8b6a00, 0 13px 24px rgba(0,0,0,.26);
}
.button.secondary { background: linear-gradient(180deg, #6fc8ff, #438cd8); border-color: #9addff; }
.button.quiet { color: #d9d3e9; border-color: var(--line); }
.button.large { min-height: 56px; padding-inline: 24px; font-size: 17px; }

.trust-row { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 27px; color: #bfb8d2; font-size: 14px; font-weight: 750; }
.hero-mark { position: relative; display: grid; place-items: center; align-self: center; min-height: 360px; }
.hero-mark img {
  position: relative;
  z-index: 3;
  width: min(280px, 82%);
  aspect-ratio: 1;
  object-fit: cover;
  border: 5px solid var(--gold);
  border-radius: 30%;
  background: #030305;
  box-shadow: 0 0 0 10px rgba(245,197,24,.12), 0 28px 54px rgba(0,0,0,.45);
}
.hero-mark > span {
  position: absolute;
  z-index: 4;
  bottom: 14px;
  padding: 8px 15px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(12,9,24,.88);
  font-weight: 850;
}
.hero-orbit { position: absolute; border: 1px solid rgba(245,197,24,.28); border-radius: 50%; }
.orbit-one { width: 340px; height: 340px; }
.orbit-two { width: 420px; height: 280px; transform: rotate(-20deg); }

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: 78px 4px 22px;
}
.section-heading h2, .split-section h2, .studio-note h2, .detail-grid h2 { margin: 0; font-size: clamp(30px, 4vw, 46px); }
.text-link, .back-link { color: var(--gold-2); font-weight: 850; text-decoration: none; }

.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.product-grid.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product-card {
  display: flex;
  flex-direction: column;
  min-height: 390px;
  padding: 23px;
  border-radius: var(--radius);
}
.product-card[hidden] { display: none; }
.product-top { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.product-icon, .detail-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 17px;
  background: rgba(255,255,255,.08);
  font-size: 31px;
}
.product-card .eyebrow { margin-top: 24px; }
.product-card h3 { margin: 0; font-size: 28px; }
.product-card > p:not(.eyebrow) { color: var(--muted); line-height: 1.55; }
.status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
}
.status.gold { color: var(--gold-2); background: rgba(245,197,24,.1); }
.status.blue { color: #8fd4ff; background: rgba(91,185,255,.1); }
.status.violet { color: #c5a8ff; background: rgba(156,107,255,.1); }
.status.green { color: #8cf0aa; background: rgba(84,211,123,.1); }
.platforms { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 16px; }
.platforms span {
  padding: 5px 9px;
  border-radius: 8px;
  color: #d8d2e7;
  background: rgba(255,255,255,.07);
  font-size: 12px;
  font-weight: 800;
}
.platforms.large { justify-content: start; margin-top: 16px; }
.platforms.large span { font-size: 14px; }
.card-actions { margin-top: 18px; }
.card-actions .button { flex: 1; }

.split-section { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 78px; }
.service-panel, .newsletter-panel { padding: clamp(26px, 4vw, 44px); border-radius: 28px; }
.split-section p { color: var(--muted); line-height: 1.6; }
.newsletter-form { display: grid; gap: 12px; }
label, legend { color: #ede9f6; font-weight: 800; }
input, textarea, select {
  width: 100%;
  min-height: 48px;
  margin-top: 7px;
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  color: var(--ink);
  background: rgba(8,6,18,.78);
}
textarea { min-height: 150px; resize: vertical; }
fieldset { display: flex; flex-wrap: wrap; gap: 8px 15px; padding: 11px 0 0; border: 0; }
fieldset label { color: var(--muted); font-size: 14px; }
fieldset input { width: auto; min-height: 0; margin: 0 5px 0 0; }
.form-message { min-height: 24px; margin: 0; font-weight: 750; }
.form-message.error { color: #ff9aa1; }
.studio-note { max-width: 820px; padding: 84px 0 0; }
.studio-note p:last-child { color: var(--muted); font-size: 18px; line-height: 1.65; }

.page-hero { max-width: 900px; padding: 34px 0 54px; }
.page-hero h1 { font-size: clamp(44px, 7vw, 78px); }
.catalog-tools { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 24px; }
.filter-chip {
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,.05);
  font-weight: 800;
  cursor: pointer;
}
.filter-chip.active { color: #251a00; border-color: var(--gold); background: var(--gold); }
.catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.empty-state { padding: 38px; text-align: center; color: var(--muted); }

.back-link { display: inline-block; margin-bottom: 22px; }
.product-detail {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  padding: clamp(28px, 5vw, 58px);
  border-radius: 32px;
}
.store-product-detail { grid-template-columns: minmax(0, 1fr); }
.store-product-detail .detail-copy { max-width: 1040px; }
.detail-icon { width: 160px; height: 160px; border-radius: 42px; font-size: 82px; }
.detail-status { display: flex; align-items: center; gap: 14px; color: var(--muted); font-weight: 750; }
.product-detail h1 { font-size: clamp(46px, 7vw, 76px); }
.detail-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; padding-top: 44px; }
.detail-grid > article { padding: 28px; }
.release-card { border-radius: 24px; }
.detail-grid p { color: var(--muted); line-height: 1.6; }
.feature-list { display: grid; gap: 13px; margin: 24px 0 0; padding: 0; list-style: none; }
.feature-list li { display: flex; gap: 11px; color: #ddd7ec; font-size: 17px; }
.feature-list span { color: var(--gold); font-weight: 900; }

.content-shell { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: 22px; align-items: start; }
.content-card, .support-card { padding: 28px; border-radius: 24px; }
.content-card h1, .support-card h2 { margin-top: 0; }
.notice {
  padding: 13px 15px;
  border: 1px solid rgba(84,211,123,.7);
  border-radius: 12px;
  color: #b9f5ca;
  background: rgba(84,211,123,.1);
  line-height: 1.5;
}
.notice.error { color: #ffc0c4; border-color: rgba(255,113,123,.7); background: rgba(255,113,123,.1); }
.support-meta { color: var(--muted); font-size: 14px; }
.faq-list { display: grid; gap: 12px; }
details { padding: 15px 17px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.04); }
summary { cursor: pointer; font-weight: 850; }
details p { color: var(--muted); line-height: 1.55; }

.classic-nav {
  display: flex;
  align-items: center;
  gap: 5px 14px;
  min-height: 74px;
  padding: 12px max(22px, calc((100vw - 1200px) / 2));
  border-bottom: 1px solid var(--line);
  background: rgba(12,9,24,.9);
}
.classic-nav .brand { margin-right: auto; color: var(--ink); font-weight: 900; text-decoration: none; }
.classic-nav a { color: var(--muted); font-weight: 750; text-decoration: none; }
.classic-nav a:hover { color: var(--gold); }
.game-frame { width: 100%; aspect-ratio: 16 / 10; border: 2px solid var(--gold); border-radius: 20px; background: #0a0714; box-shadow: var(--shadow); }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; }
th { color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

.site-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  width: min(1200px, calc(100% - 36px));
  margin: 0 auto;
  padding: 40px 0 48px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.site-footer strong { color: var(--ink); font-size: 18px; }
.site-footer p { max-width: 600px; margin: 8px 0 0; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: end; gap: 9px 16px; }
.footer-links a { color: var(--muted); font-weight: 750; text-decoration: none; }
.footer-links a:hover { color: var(--gold); }
.copyright { grid-column: 1 / -1; font-size: 13px; }

.auth-main { display: grid; place-items: center; min-height: calc(100vh - 180px); }
.auth-card {
  width: min(620px, 100%);
  padding: clamp(28px, 6vw, 58px);
  border-radius: 32px;
}
.auth-card h1 { margin: 0; font-size: clamp(38px, 7vw, 64px); line-height: 1; }
.auth-card > div > p:last-child, .auth-switch { color: var(--muted); line-height: 1.6; }
.auth-card form { display: grid; gap: 16px; margin-top: 28px; }
.auth-switch a { color: var(--gold-2); font-weight: 850; }

.workspace-main { width: min(1320px, calc(100% - 36px)); }
.workspace-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0 34px;
}
.workspace-heading h1 { margin: 0; font-size: clamp(42px, 7vw, 72px); line-height: 1; }
.workspace-heading > div > p:last-child { color: var(--muted); }
.workspace-actions { display: flex; align-items: end; gap: 10px; }
.compact-label { min-width: 240px; font-size: 12px; }
.compact-label select { min-height: 44px; }
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.metric-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  align-items: center;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.055);
}
.metric-card .metric-icon { grid-row: 1 / 3; font-size: 28px; }
.metric-card strong { font-size: 31px; line-height: 1; }
.metric-card > span:last-child { color: var(--muted); font-size: 13px; font-weight: 800; }
.workspace-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 22px;
}
.workspace-grid .content-card { min-width: 0; }
.panel-heading { display: flex; justify-content: space-between; align-items: start; gap: 18px; }
.panel-heading h2 { margin: 0; }
.workspace-list { display: grid; gap: 10px; margin-top: 22px; }
.workspace-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 64px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}
.workspace-row-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.workspace-row strong, .workspace-row small, .timeline-row strong, .timeline-row small { display: block; }
.workspace-row small, .timeline-row small { margin-top: 4px; color: var(--muted); }
.row-icon, .avatar {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,.09);
  font-size: 22px;
  font-weight: 900;
}
.row-icon { font-size: 9px; letter-spacing: .04em; }
.avatar { color: #251a00; background: var(--gold); font-size: 17px; }
.status-select { width: auto; min-width: 112px; margin: 0; }
.role-pill {
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: capitalize;
}
.role-owner, .status-answered { color: var(--gold-2); }
.role-admin, .status-open { color: #8fd4ff; }
.role-member, .status-closed { color: #b9f5ca; }
.inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(130px, .5fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 22px;
}
.inline-form .button { margin-bottom: 1px; }
.pending-note, .empty-copy { color: var(--muted); font-size: 14px; }
.timeline-row { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 7px 2px; }
.timeline-dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #251a00;
  background: var(--gold);
  font-size: 12px;
  font-weight: 950;
}
.workspace-settings { margin-top: 22px; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-mark { min-height: 300px; }
  .product-grid, .catalog-grid, .product-grid.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-section, .detail-grid, .content-shell { grid-template-columns: 1fr; }
  .product-detail { grid-template-columns: 130px 1fr; }
  .detail-icon { width: 120px; height: 120px; font-size: 62px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-grid { grid-template-columns: 1fr; }
  .inline-form { grid-template-columns: 1fr 1fr; }
  .inline-form .button { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .site-header { flex-wrap: wrap; min-height: 66px; padding-inline: 18px; }
  .mark-wrap { width: 42px; height: 42px; }
  .nav-toggle { display: inline-flex; }
  .site-header nav { display: none; width: 100%; padding: 8px 0 4px; }
  .site-header nav.open { display: grid; grid-template-columns: 1fr 1fr; }
  .site-header nav a { text-align: center; }
  main { width: min(100% - 24px, 1200px); padding-top: 24px; }
  .hero { min-height: 0; padding: 30px 22px; border-radius: 26px; }
  .hero-mark { min-height: 250px; }
  .hero-mark img { width: 210px; }
  .orbit-one { width: 250px; height: 250px; }
  .orbit-two { width: 290px; height: 210px; }
  .hero h1, .page-hero h1 { font-size: clamp(42px, 14vw, 62px); }
  .section-heading { align-items: start; flex-direction: column; padding-top: 58px; }
  .product-grid, .catalog-grid, .product-grid.two-up { grid-template-columns: 1fr; }
  .product-card { min-height: 350px; }
  .split-section { margin-top: 58px; }
  .product-detail { grid-template-columns: 1fr; }
  .detail-icon { width: 96px; height: 96px; border-radius: 28px; font-size: 48px; }
  .site-footer { grid-template-columns: 1fr; }
  .footer-links { justify-content: start; }
  .workspace-heading, .workspace-actions { align-items: stretch; flex-direction: column; }
  .compact-label { min-width: 0; }
  .metric-grid { grid-template-columns: 1fr; }
  .inline-form { grid-template-columns: 1fr; }
  .inline-form .button { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.community-console { margin-top: 2rem; }
.community-space-tabs { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }
.community-space-pill { padding: .55rem .8rem; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; font-size: .82rem; }
.community-compose { display: grid; grid-template-columns: minmax(150px,.7fr) minmax(220px,1.3fr) auto; gap: .8rem; align-items: end; margin: 1rem 0; }
.community-compose .wide-label { grid-column: 1 / -1; }
.community-compose textarea { min-height: 110px; resize: vertical; }
.community-feed { display: grid; gap: 1rem; margin-top: 1.3rem; }
.community-post { padding: 1.2rem; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.035); }
.community-post h3 { margin: .25rem 0; }
.community-body { white-space: pre-wrap; }
.community-comments { display: grid; gap: .6rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.1); }
.community-comment { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; font-size: .9rem; }
.comment-form { display: flex; gap: .6rem; margin-top: .4rem; }
.comment-form input { flex: 1; }
.text-button { border: 0; background: transparent; color: var(--accent, #bfa1ff); cursor: pointer; text-decoration: underline; }
@media (max-width: 760px) {
  .community-compose { grid-template-columns: 1fr; }
  .community-compose .wide-label { grid-column: auto; }
  .comment-form { flex-direction: column; }
}

/* =========================================================
   PEAK PLAY 3.0 — ORIGINAL ORANGE / BLUE STUDIO SYSTEM
   ========================================================= */
:root {
  --ink: #f8fbff;
  --muted: #a9bdd8;
  --panel: #0b2145;
  --panel-2: #102b59;
  --line: rgba(122, 174, 255, .24);
  --midnight: #020a19;
  --midnight-2: #06142d;
  --gold: #ff6a00;
  --gold-2: #ff9a3d;
  --violet: #1769ff;
  --blue: #4c9bff;
  --green: #5be09d;
  --danger: #ff667d;
  --radius: 10px;
  --shadow: 0 20px 64px rgba(0, 6, 22, .36);
}

html { color-scheme: dark; }
body {
  background:
    radial-gradient(circle at 85% 5%, rgba(23, 105, 255, .2), transparent 34rem),
    radial-gradient(circle at 10% 35%, rgba(255, 106, 0, .12), transparent 32rem),
    linear-gradient(180deg, #06142d 0%, #020a19 72%);
}
body::before, .hero::after { display: none; }
::selection { color: #fff; background: var(--gold); }

.site-header {
  min-height: 82px;
  border-bottom: 3px solid var(--gold);
  background: rgba(3, 14, 35, .94);
  backdrop-filter: blur(20px);
}
.wordmark { gap: 12px; font-size: 19px; letter-spacing: -.04em; }
.wordmark > span:last-child { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 5px; }
.wordmark b { color: var(--gold); }
.wordmark small { grid-column: 1 / -1; color: var(--muted); font-size: 9px; letter-spacing: .25em; }
.mark-wrap {
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.mark-wrap img { object-fit: contain; }
.site-header nav a { border-radius: 4px; text-transform: uppercase; font-size: 12px; letter-spacing: .06em; }
.site-header nav a:hover { background: rgba(76, 155, 255, .13); }
.site-header nav .nav-cta { color: #fff; background: var(--gold); }
.site-header nav .nav-cta:hover { color: #fff; background: #ff8129; }
.nav-toggle { border-radius: 4px; }

main { width: min(1240px, calc(100% - 40px)); padding-top: 56px; }
.premium-panel, .product-card, .release-card, .content-card, .support-card {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(16, 43, 89, .97), rgba(7, 25, 55, .97));
  box-shadow: var(--shadow);
}
.eyebrow { color: var(--gold-2); font-size: 12px; letter-spacing: .18em; }
h1, h2, h3 { letter-spacing: -.045em; }

.hero {
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  min-height: 630px;
  padding: 74px 0 76px;
  border-top: 1px solid rgba(76, 155, 255, .2);
  border-bottom: 1px solid rgba(76, 155, 255, .2);
  border-radius: 0;
}
.hero h1 { max-width: 800px; font-size: clamp(62px, 8vw, 112px); line-height: .85; text-transform: uppercase; }
.hero h1 span, .page-hero h1 span { color: var(--gold); }
.hero-lede, .page-hero > p:last-child, .detail-lede { color: #c8d7eb; }
.hero-copy { align-self: center; }
.hero-brand-panel {
  align-self: stretch;
  display: grid;
  grid-template-rows: 1fr auto auto;
  min-height: 480px;
  padding: 30px;
  border: 1px solid #277fff;
  border-top: 8px solid var(--blue);
  border-bottom: 8px solid var(--gold);
  border-radius: 6px;
  background: linear-gradient(160deg, #0b2c62, #06152e 68%);
  box-shadow: 20px 24px 0 rgba(23, 105, 255, .12), var(--shadow);
}
.hero-brand-panel > img { align-self: center; justify-self: center; width: min(360px, 92%); max-height: 340px; object-fit: contain; }
.broadcast-label { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.broadcast-label strong { color: #fff; padding: 5px 9px; background: var(--gold); }
.studio-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-top: 1px solid var(--line); }
.studio-stats div { padding: 14px 12px 0 0; }
.studio-stats dt { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.studio-stats dd { margin: 5px 0 0; font-weight: 900; }
.trust-row { gap: 8px; }
.trust-row span { padding: 7px 10px; border-left: 3px solid var(--blue); color: #d2deef; background: rgba(76, 155, 255, .08); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }

.button { min-height: 48px; border-radius: 5px; box-shadow: none; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
.button.primary { color: #fff; border: 1px solid #ff9a3d; background: var(--gold); box-shadow: 0 5px 0 #9f3f00; }
.button.secondary { color: #fff; border-color: #79b6ff; background: var(--violet); }
.button.quiet { color: #dce8f7; border-color: rgba(76, 155, 255, .38); background: rgba(23, 105, 255, .08); }
.button:hover { transform: translateY(-2px); filter: brightness(1.1); }
.text-link, .back-link { color: #75b3ff; text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }

.section-heading { padding-top: 96px; }
.section-heading h2, .split-section h2, .studio-note h2, .detail-grid h2 { font-size: clamp(34px, 4.3vw, 58px); }
.featured-grid, .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-card {
  position: relative;
  min-height: 400px;
  padding: 26px;
  border-radius: 6px;
  border-top: 5px solid var(--blue);
}
.product-card::after { display: none; }
.product-card.compact-card { border-top-color: var(--gold); }
.game-rank { color: rgba(255,255,255,.14); font-size: 58px; font-weight: 950; line-height: .85; letter-spacing: -.08em; }
.product-card .eyebrow { margin-top: 32px; }
.product-card h3 { font-size: 34px; text-transform: uppercase; }
.product-card > p:not(.eyebrow) { color: var(--muted); font-size: 15px; }
.status { border-radius: 3px; text-transform: uppercase; letter-spacing: .07em; }
.status.orange { color: #fff; border-color: var(--gold); background: rgba(255, 106, 0, .2); }
.status.blue { color: #cfe4ff; border-color: #4c9bff; background: rgba(23, 105, 255, .18); }
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.card-actions .button { flex: none; width: 100%; }

.roadmap-section { margin-top: 104px; scroll-margin-top: 98px; }
.roadmap-heading { align-items: start; padding-top: 0; border-bottom: 1px solid var(--line); }
.roadmap-heading > p { max-width: 480px; color: var(--muted); line-height: 1.6; }
.studio-roadmap { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.studio-roadmap li { display: grid; grid-template-columns: 120px 1fr auto; gap: 28px; align-items: center; padding: 26px 0; border-top: 1px solid var(--line); }
.studio-roadmap li > span { color: var(--gold-2); font-size: 11px; font-weight: 950; letter-spacing: .12em; }
.studio-roadmap li h3 { margin: 0 0 6px; font-size: 23px; text-transform: uppercase; }
.studio-roadmap li p { margin: 0; color: var(--muted); line-height: 1.55; }
.studio-roadmap li > strong { min-width: 100px; color: #9ac8ff; font-size: 11px; text-align: right; text-transform: uppercase; letter-spacing: .08em; }
.standards-section { margin-top: 108px; }
.service-panel, .newsletter-panel { border-radius: 6px; border-top: 5px solid var(--gold); }
.newsletter-panel { border-top-color: var(--blue); }

.page-hero { max-width: 980px; padding-top: 52px; }
.page-hero h1 { font-size: clamp(60px, 8vw, 104px); line-height: .88; text-transform: uppercase; }
.catalog-tools { padding: 20px 0 30px; border-top: 1px solid var(--line); }
.filter-chip { border-radius: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.filter-chip.active { color: #fff; border-color: var(--gold); background: var(--gold); }

.product-detail {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 42px;
  padding: 54px 0 66px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.detail-number { align-self: start; color: rgba(255,255,255,.12); font-size: 142px; font-weight: 950; line-height: .8; letter-spacing: -.1em; }
.product-detail h1 { font-size: clamp(64px, 9vw, 112px); line-height: .88; text-transform: uppercase; }
.detail-status { color: var(--muted); text-transform: uppercase; font-size: 12px; letter-spacing: .06em; }
.platforms span { border-radius: 3px; color: #d9e8fa; background: rgba(76, 155, 255, .13); }
.game-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 54px; background: var(--line); border: 1px solid var(--line); }
.game-plan-grid article { min-height: 290px; padding: 30px; background: #071a38; }
.game-plan-grid h2 { font-size: 30px; }
.game-plan-grid p:last-child { color: var(--muted); line-height: 1.6; }
.game-plan-grid .hook-card { background: #0c2f68; border-top: 5px solid var(--gold); }
.game-plan-grid .hook-card h2 { color: #fff; font-size: 34px; }
.game-roadmap { scroll-margin-top: 98px; }
.game-roadmap .studio-roadmap li { grid-template-columns: 90px 1fr; }
.engineering-grid { align-items: stretch; }
.engineering-grid > article { padding: 34px; border: 1px solid var(--line); background: rgba(7, 26, 56, .88); }
.engineering-grid h3 { margin-top: 32px; color: var(--gold-2); text-transform: uppercase; }
.release-facts { display: grid; gap: 0; margin: 26px 0 0; }
.release-facts div { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.release-facts dt { color: var(--muted); }
.release-facts dd { margin: 0; font-weight: 850; text-align: right; }
.asset-note { max-width: 850px; padding: 92px 0 28px; }
.asset-note h2 { margin: 0; font-size: clamp(38px, 5vw, 64px); }
.asset-note p:last-child { color: var(--muted); font-size: 18px; line-height: 1.65; }

.site-footer { border-top: 3px solid var(--gold); }
.site-footer strong { color: #fff; letter-spacing: .05em; }
.footer-links a:hover { color: var(--gold-2); }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .hero-brand-panel { min-height: 430px; }
  .featured-grid, .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-plan-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .site-header { min-height: 72px; }
  .site-header nav.open { grid-template-columns: 1fr 1fr; }
  main { width: min(100% - 26px, 1240px); padding-top: 30px; }
  .hero { gap: 42px; padding: 48px 0; }
  .hero h1, .page-hero h1 { font-size: clamp(54px, 17vw, 78px); }
  .hero-brand-panel { min-height: 360px; padding: 20px; box-shadow: 9px 12px 0 rgba(23, 105, 255, .12); }
  .studio-stats { grid-template-columns: 1fr; }
  .studio-stats div { display: flex; align-items: baseline; justify-content: space-between; padding-right: 0; }
  .featured-grid, .catalog-grid { grid-template-columns: 1fr; }
  .section-heading { padding-top: 72px; }
  .roadmap-heading { flex-direction: column; }
  .studio-roadmap li { grid-template-columns: 1fr; gap: 10px; }
  .studio-roadmap li > strong { text-align: left; }
  .product-detail { grid-template-columns: 1fr; gap: 20px; }
  .detail-number { font-size: 84px; }
  .product-detail h1 { font-size: clamp(56px, 17vw, 78px); }
  .game-plan-grid article { min-height: 0; }
}

/* =========================================================
   PEAK PLAY 4.0 — SUMMIT FLAG / PREMIUM PUBLISHER SYSTEM
   ========================================================= */
:root {
  --ink: #f8fbff;
  --muted: #9fb5d2;
  --panel: #071b3b;
  --panel-2: #0a2858;
  --line: rgba(126, 177, 255, .2);
  --midnight: #020817;
  --midnight-2: #04132d;
  --gold: #ff6a00;
  --gold-2: #ff9a3d;
  --violet: #1769ff;
  --blue: #3b8cff;
  --green: #64e4a4;
  --radius: 18px;
  --shadow: 0 34px 90px rgba(0, 5, 20, .48);
}

body {
  background:
    radial-gradient(circle at 88% 6%, rgba(23, 105, 255, .18), transparent 32rem),
    radial-gradient(circle at 5% 42%, rgba(255, 106, 0, .09), transparent 29rem),
    linear-gradient(180deg, #03102a 0%, #020817 52%, #01050e 100%);
}
body::before {
  display: block;
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgba(116, 166, 242, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116, 166, 242, .035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, #000, transparent 82%);
}

.site-header {
  min-height: 88px;
  padding-block: 13px;
  border-bottom: 1px solid rgba(104, 157, 239, .2);
  background: rgba(2, 8, 23, .82);
  box-shadow: 0 10px 38px rgba(0, 4, 17, .24);
  backdrop-filter: blur(24px) saturate(130%);
}
.wordmark { gap: 13px; }
.wordmark > span:last-child { color: var(--gold); font-size: 20px; font-weight: 950; letter-spacing: -.055em; }
.wordmark b { color: var(--blue); }
.wordmark small { color: #8299b9; font-size: 8px; letter-spacing: .28em; }
.mark-wrap { width: 56px; height: 56px; }
.mark-wrap img { object-fit: contain; }
.site-header nav { gap: 6px; }
.site-header nav a { padding: 11px 14px; border-radius: 999px; color: #9fb2cc; }
.site-header nav a:hover { color: #fff; background: rgba(59, 140, 255, .12); }
.site-header nav .nav-cta {
  color: #fff;
  border: 1px solid rgba(255, 166, 99, .75);
  background: linear-gradient(135deg, #ff4d00, #ff7a16);
  box-shadow: 0 8px 24px rgba(255, 82, 0, .22);
}
.site-header nav .nav-cta:hover { color: #fff; background: linear-gradient(135deg, #ff6421, #ff8b2c); }

main { width: min(1320px, calc(100% - 48px)); padding-top: 36px; }
.hero {
  isolation: isolate;
  grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr);
  gap: clamp(34px, 5vw, 78px);
  min-height: min(760px, calc(100vh - 138px));
  padding: clamp(46px, 7vw, 96px);
  overflow: hidden;
  border: 1px solid rgba(126, 177, 255, .2);
  border-radius: 34px;
  background-image:
    linear-gradient(90deg, rgba(1, 7, 20, .98) 0%, rgba(2, 10, 29, .9) 36%, rgba(2, 10, 29, .42) 68%, rgba(2, 8, 23, .24) 100%),
    linear-gradient(180deg, rgba(2, 8, 23, .05), rgba(2, 8, 23, .68)),
    url('/peak-play-hero-v2.webp');
  background-position: center;
  background-size: cover;
  box-shadow: 0 42px 110px rgba(0, 4, 20, .58), inset 0 1px rgba(255,255,255,.06);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(115deg, transparent 52%, rgba(59, 140, 255, .08) 52.2%, transparent 52.6%),
    radial-gradient(circle at 78% 25%, rgba(255, 106, 0, .16), transparent 18rem);
  pointer-events: none;
}
.hero::after {
  display: block;
  content: "";
  position: absolute;
  right: -11%;
  bottom: -38%;
  z-index: -1;
  width: 620px;
  height: 620px;
  border: 1px solid rgba(59, 140, 255, .22);
  border-radius: 50%;
  box-shadow: 0 0 0 86px rgba(59, 140, 255, .025), 0 0 0 170px rgba(255, 106, 0, .018);
}
.hero-copy { max-width: 760px; }
.hero .eyebrow { margin-bottom: 20px; color: #ff9a52; }
.hero h1 {
  max-width: 780px;
  font-size: clamp(74px, 9vw, 132px);
  line-height: .78;
  letter-spacing: -.075em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero h1 span {
  display: inline-block;
  color: transparent;
  background: linear-gradient(100deg, #ff4d00 0%, #ff8b2c 58%, #ffc08e 100%);
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 10px 32px rgba(255, 91, 0, .18));
}
.hero-lede { max-width: 680px; margin-top: 30px; color: #c8d7ec; font-size: clamp(18px, 1.7vw, 23px); }
.hero-actions { margin-top: 32px; }
.button { border-radius: 999px; }
.button.primary {
  border-color: #ffae72;
  background: linear-gradient(135deg, #ff4d00, #ff7816);
  box-shadow: 0 11px 34px rgba(255, 82, 0, .25), inset 0 1px rgba(255,255,255,.28);
}
.button.secondary {
  border-color: rgba(126, 177, 255, .62);
  background: linear-gradient(135deg, rgba(15, 76, 181, .95), rgba(23, 105, 255, .95));
  box-shadow: 0 11px 34px rgba(23, 105, 255, .18);
}
.button.quiet { border-color: rgba(126, 177, 255, .24); background: rgba(8, 31, 68, .64); }
.trust-row { gap: 10px; margin-top: 34px; }
.trust-row span {
  padding: 8px 12px 8px 14px;
  border: 1px solid rgba(126, 177, 255, .16);
  border-left: 3px solid var(--blue);
  border-radius: 4px 999px 999px 4px;
  color: #b8c9df;
  background: rgba(2, 16, 39, .7);
  backdrop-filter: blur(10px);
}

.hero-brand-panel {
  position: relative;
  align-self: center;
  grid-template-rows: auto auto auto auto;
  min-height: 0;
  padding: clamp(26px, 3.5vw, 42px);
  border: 1px solid rgba(159, 193, 241, .3);
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(7, 29, 66, .82), rgba(2, 12, 31, .74));
  box-shadow: 0 28px 78px rgba(0, 4, 18, .48), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(24px) saturate(125%);
}
.hero-brand-panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 106, 0, .38), transparent 31%, transparent 68%, rgba(59, 140, 255, .4));
}
.hero-brand-panel > img { width: 100%; max-height: none; filter: drop-shadow(0 16px 36px rgba(0, 4, 16, .4)); }
.brand-promise { max-width: 390px; margin: 8px auto 28px; color: #c6d5e8; font-size: 15px; line-height: 1.55; text-align: center; }
.broadcast-label { padding: 13px 0; }
.broadcast-label strong { border-radius: 999px; background: var(--blue); }
.studio-stats div { padding-top: 17px; }
.studio-stats dd { color: #f8fbff; }

.section-heading { padding-top: 112px; }
.section-heading h2, .split-section h2, .studio-note h2, .detail-grid h2 { letter-spacing: -.055em; }
.eyebrow { color: #ff9a52; }
.premium-panel, .product-card, .release-card, .content-card, .support-card {
  border-color: rgba(126, 177, 255, .18);
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), transparent 32%),
    linear-gradient(180deg, rgba(8, 32, 71, .96), rgba(3, 16, 39, .98));
}
.product-card {
  border-top: 1px solid rgba(126, 177, 255, .28);
  border-radius: 20px;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.product-card.compact-card { border-top: 3px solid var(--gold); }
.product-card:hover { transform: translateY(-5px); border-color: rgba(126, 177, 255, .42); box-shadow: 0 30px 70px rgba(0, 5, 22, .42); }
.game-rank { color: rgba(255,255,255,.1); }
.product-card h3 { text-transform: none; }
.status { border-radius: 999px; }
.studio-roadmap li { padding-inline: 4px; }
.studio-roadmap li > span { color: #ff9a52; }
.service-panel, .newsletter-panel { border-radius: 22px; }
.site-footer { border-top: 1px solid rgba(126, 177, 255, .2); }
.site-footer strong { color: var(--gold-2); }

@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; min-height: 0; background-position: 62% center; }
  .hero-copy { max-width: 820px; }
  .hero-brand-panel { width: min(600px, 100%); justify-self: end; }
}

@media (max-width: 680px) {
  .site-header { min-height: 74px; }
  .mark-wrap { width: 46px; height: 46px; }
  .wordmark > span:last-child { font-size: 17px; }
  main { width: min(100% - 24px, 1320px); }
  .hero {
    gap: 44px;
    padding: 42px 24px 26px;
    border-radius: 24px;
    background-image:
      linear-gradient(180deg, rgba(1, 7, 20, .96) 0%, rgba(2, 10, 29, .76) 55%, rgba(2, 8, 23, .82) 100%),
      url('/peak-play-hero-v2.webp');
    background-position: 67% center;
  }
  .hero h1 { font-size: clamp(54px, 15vw, 70px); line-height: .82; letter-spacing: -.065em; }
  .hero-lede { margin-top: 24px; font-size: 18px; }
  .hero-actions .button { width: 100%; }
  .trust-row { display: grid; }
  .hero-brand-panel { padding: 24px 18px; border-radius: 20px; }
  .brand-promise { margin-bottom: 20px; font-size: 14px; }
  .studio-stats { grid-template-columns: 1fr; }
}

/* =========================================================
   PEAK PLAY 5.0 — PLAYER-FIRST CAMPAIGN SYSTEM
   ========================================================= */
:root {
  --signal-orange: #ff5a0a;
  --summit-orange: #ff8b2c;
  --play-cobalt: #1769ff;
  --route-blue: #54a4ff;
  --deep-navy: #020817;
}

.site-header { max-width: 1600px; margin-inline: auto; }
.mark-wrap { filter: drop-shadow(0 7px 18px rgba(0, 4, 16, .38)); }
.wordmark > span:last-child { color: var(--signal-orange); }
.wordmark b { color: #4a9eff; }

.hero {
  grid-template-columns: minmax(0, 1.2fr) minmax(390px, .8fr);
  background-image:
    linear-gradient(90deg, rgba(1, 7, 20, .99) 0%, rgba(2, 10, 29, .9) 42%, rgba(2, 10, 29, .35) 72%, rgba(2, 8, 23, .12) 100%),
    linear-gradient(180deg, rgba(2, 8, 23, .02), rgba(2, 8, 23, .72)),
    url('/peak-play-hero-v3.webp');
  background-position: center;
}
.hero h1 {
  max-width: 880px;
  font-size: clamp(58px, 6.9vw, 108px);
  line-height: .9;
  letter-spacing: -.072em;
  text-wrap: pretty;
}
.hero h1 span { margin-top: .12em; font-size: .72em; line-height: .98; }
.hero-brand-panel { overflow: hidden; }
.hero-brand-panel > img { margin: -8% 0 -3%; transform: scale(1.08); }
.hero-brand-panel .studio-stats { border-bottom: 1px solid var(--line); padding-bottom: 17px; }
.panel-link {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
  color: #dceaff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .09em;
  text-decoration: none;
  text-transform: uppercase;
}
.panel-link span { color: var(--summit-orange); font-size: 18px; line-height: .7; transition: transform .2s ease; }
.panel-link:hover span { transform: translateX(5px); }

.signal-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 28px 0 0;
  padding: 18px 22px;
  overflow: hidden;
  border: 1px solid rgba(126, 177, 255, .15);
  border-radius: 999px;
  color: #afc3dc;
  background: linear-gradient(90deg, rgba(255, 90, 10, .08), rgba(23, 105, 255, .08));
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
  white-space: nowrap;
}
.signal-strip i { color: var(--signal-orange); font-size: 8px; font-style: normal; }

.flagship-section {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(480px, 1.14fr);
  gap: clamp(42px, 7vw, 100px);
  align-items: center;
  padding: 126px 0 14px;
  scroll-margin-top: 110px;
}
.flagship-copy h2 {
  max-width: 680px;
  margin: 10px 0 26px;
  font-size: clamp(46px, 6vw, 82px);
  line-height: .92;
  letter-spacing: -.062em;
}
.flagship-copy > p:not(.eyebrow) { max-width: 620px; color: #b8c9de; font-size: 18px; line-height: 1.7; }
.feature-list { display: grid; gap: 0; margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.feature-list li { display: grid; grid-template-columns: 180px 1fr; gap: 20px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.feature-list strong { color: #f8fbff; }
.feature-list span { color: var(--muted); }
.flagship-copy .hero-actions { align-items: center; }

.runway-demo {
  position: relative;
  min-height: 650px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(126, 177, 255, .32);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 90, 10, .16), transparent 25%),
    linear-gradient(180deg, #081f49, #030c20 76%);
  box-shadow: 0 44px 100px rgba(0, 5, 24, .52), inset 0 1px rgba(255,255,255,.08);
}
.runway-demo::before, .runway-demo::after {
  content: "";
  position: absolute;
  top: 94px;
  bottom: 70px;
  width: 1px;
  background: linear-gradient(transparent, rgba(126, 177, 255, .52), transparent);
}
.runway-demo::before { left: 26%; }
.runway-demo::after { right: 26%; }
.demo-hud {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(126, 177, 255, .22);
  border-radius: 14px;
  background: rgba(2, 10, 28, .78);
  backdrop-filter: blur(15px);
}
.demo-hud span { display: grid; }
.demo-hud span:last-child { justify-items: end; }
.demo-hud small, .demo-threat small, .demo-gate small { color: #8da7c6; font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.demo-hud strong { color: #fff; font-size: 30px; line-height: 1; }
.demo-stage { color: var(--summit-orange); font-size: 11px; font-weight: 900; letter-spacing: .11em; }
.demo-track {
  position: absolute;
  inset: 92px 20px 64px;
  overflow: hidden;
  border-radius: 18px;
  background:
    repeating-linear-gradient(180deg, transparent 0 58px, rgba(168, 200, 244, .08) 59px 60px),
    linear-gradient(90deg, rgba(80, 33, 166, .22) 0 49.5%, rgba(255,255,255,.18) 49.5% 50.5%, rgba(13, 114, 192, .23) 50.5% 100%);
}
.demo-track::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, transparent 50%, rgba(23, 105, 255, .11));
}
.demo-threat {
  position: absolute;
  top: 28px;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 96px;
  height: 70px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 128, 56, .7);
  border-top: 4px solid var(--signal-orange);
  border-radius: 10px;
  background: #071631;
  box-shadow: 0 13px 30px rgba(0,0,0,.34);
}
.demo-threat strong { color: #fff; font-size: 28px; }
.demo-gates {
  position: absolute;
  top: 166px;
  left: 50%;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 150px));
  gap: 24px;
  width: calc(100% - 48px);
  transform: translateX(-50%);
  animation: gate-pressure 3.8s ease-in-out infinite alternate;
}
.demo-gate {
  display: grid;
  place-items: center;
  min-height: 116px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 12px;
  box-shadow: 0 24px 46px rgba(0,0,0,.28);
}
.demo-gate.left { background: linear-gradient(145deg, #6424cf, #2d126e); }
.demo-gate.right { background: linear-gradient(145deg, #22c6ef, #1769ff); }
.demo-gate strong { color: #fff; font-size: 45px; letter-spacing: -.06em; }
.demo-gate small { color: rgba(255,255,255,.78); }
.demo-squad {
  position: absolute;
  right: 16%;
  bottom: 28px;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 14px);
  gap: 6px;
  padding: 17px 17px 36px;
  border: 1px solid rgba(93, 174, 255, .45);
  border-radius: 18px;
  background: rgba(4, 18, 43, .72);
  box-shadow: 0 0 45px rgba(23, 105, 255, .27);
  animation: squad-steer 2.5s ease-in-out infinite alternate;
}
.demo-squad i { width: 14px; height: 14px; border-radius: 4px; background: var(--route-blue); }
.demo-squad i:nth-child(3n) { background: var(--signal-orange); }
.demo-squad i:nth-child(3n+1) { background: #ffc04b; }
.demo-squad span { position: absolute; bottom: 8px; left: 0; width: 100%; color: #fff; font-size: 12px; font-weight: 900; text-align: center; }
.demo-prompt { position: absolute; right: 0; bottom: 22px; left: 0; margin: 0; color: #8fc3ff; font-size: 10px; font-weight: 900; letter-spacing: .16em; text-align: center; }

@keyframes gate-pressure { from { transform: translate(-50%, -22px) scale(.82); } to { transform: translate(-50%, 82px) scale(1); } }
@keyframes squad-steer { from { right: 58%; } to { right: 16%; } }

.brand-standard { margin-top: 116px; padding-top: 10px; scroll-margin-top: 110px; }
.standard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.standard-grid article {
  min-height: 270px;
  padding: 30px;
  border: 1px solid rgba(126, 177, 255, .18);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(10, 40, 88, .86), rgba(3, 16, 39, .96));
}
.standard-grid article:nth-child(2) { border-color: rgba(255, 128, 56, .3); }
.standard-grid article > span { color: rgba(255,255,255,.12); font-size: 52px; font-weight: 950; letter-spacing: -.08em; }
.standard-grid h3 { margin: 36px 0 10px; color: #fff; font-size: 24px; }
.standard-grid p { margin: 0; color: var(--muted); line-height: 1.65; }
.service-panel, .newsletter-panel { position: relative; overflow: hidden; }
.service-panel::after, .newsletter-panel::after { content: ""; position: absolute; width: 180px; height: 180px; border: 1px solid rgba(126, 177, 255, .14); border-radius: 50%; right: -80px; bottom: -90px; box-shadow: 0 0 0 38px rgba(23, 105, 255, .025); }

.platform-section {
  display: grid;
  grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr);
  gap: clamp(34px, 6vw, 82px);
  align-items: center;
  margin-top: 116px;
  padding: clamp(34px, 6vw, 72px);
  border: 1px solid rgba(126, 177, 255, .22);
  border-radius: 30px;
  background:
    radial-gradient(circle at 0 100%, rgba(255, 90, 10, .13), transparent 35%),
    radial-gradient(circle at 100% 0, rgba(23, 105, 255, .18), transparent 38%),
    linear-gradient(150deg, rgba(7, 31, 70, .98), rgba(2, 12, 31, .98));
  box-shadow: 0 34px 90px rgba(0, 5, 24, .34), inset 0 1px rgba(255, 255, 255, .05);
  scroll-margin-top: 110px;
}
.platform-copy h2 {
  margin: 9px 0 22px;
  font-size: clamp(40px, 5.2vw, 68px);
  line-height: .94;
  letter-spacing: -.058em;
}
.platform-copy > p:not(.eyebrow) { color: #b8c9de; font-size: 17px; line-height: 1.72; }
.platform-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.platform-grid article {
  min-height: 210px;
  padding: 24px;
  border: 1px solid rgba(126, 177, 255, .16);
  border-radius: 18px;
  background: rgba(3, 16, 39, .7);
}
.platform-grid article:nth-child(2), .platform-grid article:nth-child(4) { border-color: rgba(255, 128, 56, .24); }
.platform-grid span { color: var(--summit-orange); font-size: 11px; font-weight: 950; letter-spacing: .14em; }
.platform-grid h3 { margin: 34px 0 8px; color: #fff; font-size: 21px; }
.platform-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.58; }

@media (max-width: 1120px) {
  .site-header { flex-wrap: wrap; }
  .nav-toggle { display: inline-flex; }
  .site-header nav { display: none; width: 100%; padding: 8px 0 4px; }
  .site-header nav.open { display: flex; flex-wrap: wrap; justify-content: flex-end; }
  .hero, .flagship-section, .platform-section { grid-template-columns: 1fr; }
  .hero-brand-panel { width: min(640px, 100%); justify-self: end; }
  .flagship-copy { max-width: 780px; }
  .runway-demo { width: min(720px, 100%); justify-self: end; }
}

@media (max-width: 760px) {
  .hero {
    background-image:
      linear-gradient(180deg, rgba(1, 7, 20, .98) 0%, rgba(2, 10, 29, .83) 58%, rgba(2, 8, 23, .87) 100%),
      url('/peak-play-hero-v3.webp');
    background-position: 69% center;
  }
  .hero h1 { font-size: clamp(48px, 13.8vw, 68px); }
  .hero h1 span { font-size: .72em; }
  .signal-strip { justify-content: flex-start; overflow-x: auto; border-radius: 16px; scrollbar-width: none; }
  .flagship-section { gap: 48px; padding-top: 84px; }
  .feature-list li { grid-template-columns: 1fr; gap: 4px; }
  .runway-demo { min-height: 560px; border-radius: 22px; }
  .demo-track { bottom: 58px; }
  .demo-gates { gap: 12px; }
  .standard-grid { grid-template-columns: 1fr; }
  .standard-grid article { min-height: 220px; }
  .standard-grid h3 { margin-top: 18px; }
  .platform-section { margin-top: 84px; padding: 30px 22px; }
  .platform-grid { grid-template-columns: 1fr; }
  .platform-grid article { min-height: 180px; }
  .platform-grid h3 { margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-gates, .demo-squad { animation: none; }
}

/* ---------- v5 product spotlight ---------- */
.product-led-site {
  --studio-navy: #020b1d;
  --studio-blue: #1769ff;
  --studio-orange: #ff681f;
  background:
    radial-gradient(circle at 85% 5%, rgba(23, 105, 255, .16), transparent 32rem),
    radial-gradient(circle at 10% 28%, rgba(255, 104, 31, .09), transparent 30rem),
    linear-gradient(180deg, #02091a 0%, #06152c 52%, #020a19 100%);
}
.product-led-site::before { opacity: .12; }
.product-led-site .site-header {
  max-width: none;
  border-bottom-color: rgba(126, 177, 255, .16);
  background: rgba(2, 9, 26, .9);
}
.product-led-site .wordmark > span:last-child { color: #ff7a20; }
.product-led-site .wordmark b { color: #6daeff; }
.product-led-site .mark-wrap { border: 0; background: transparent; box-shadow: none; }
.product-led-site .site-header nav { gap: 2px; }
.product-led-site .site-header nav a { padding-inline: 11px; font-size: 11px; white-space: nowrap; }
.product-led-site main { width: min(1320px, calc(100% - 48px)); padding: 32px 0 110px; }
.product-led-site .button.release-pending {
  color: #d8e4f5;
  border-color: rgba(150, 179, 217, .25);
  background: rgba(91, 113, 143, .14);
  box-shadow: none;
  cursor: default;
}
.product-led-site .button.release-pending:hover { transform: none; filter: none; }

.product-hero-v5 {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr);
  gap: clamp(38px, 7vw, 100px);
  align-items: center;
  min-height: 610px;
  padding: clamp(50px, 7vw, 94px);
  overflow: hidden;
  border: 1px solid rgba(126, 177, 255, .2);
  border-radius: 34px;
  background:
    linear-gradient(90deg, rgba(2, 10, 29, .96) 0%, rgba(2, 10, 29, .76) 58%, rgba(2, 10, 29, .3) 100%),
    url('/peak-play-hero-v3.webp') 70% center / cover;
  box-shadow: 0 45px 120px rgba(0, 3, 15, .56), inset 0 1px rgba(255, 255, 255, .05);
}
.hero-v5-copy h1 {
  max-width: 790px;
  margin: 10px 0 28px;
  font-size: clamp(54px, 6.4vw, 86px);
  line-height: .91;
  letter-spacing: -.065em;
}
.hero-v5-copy h1 span { color: #ff7738; }
.hero-v5-copy > p:not(.eyebrow) { max-width: 720px; color: #c6d4e7; font-size: clamp(18px, 2vw, 22px); line-height: 1.62; }
.hero-v5-brand {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
  padding: 34px;
  border: 1px solid rgba(126, 177, 255, .25);
  border-radius: 26px;
  background: linear-gradient(150deg, rgba(8, 32, 72, .88), rgba(2, 12, 31, .9));
  backdrop-filter: blur(14px);
}
.hero-v5-brand > img { display: block; width: min(100%, 390px); height: auto; margin-inline: auto; }
.hero-five { display: flex; gap: 18px; align-items: center; padding-top: 26px; border-top: 1px solid rgba(126, 177, 255, .2); }
.hero-five strong { color: #ff7738; font-size: 70px; line-height: .8; letter-spacing: -.08em; }
.hero-five span { color: #dbe9fb; font-size: 15px; font-weight: 850; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; }
.hero-v5-brand .trust-row { margin: 0; gap: 8px; }
.hero-v5-brand .trust-row span { flex: 1; min-width: 0; padding: 10px 8px; text-align: center; }

.spotlight-intro { max-width: 820px; margin: 116px auto 44px; text-align: center; }
.spotlight-intro h2 { margin: 10px 0 18px; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -.055em; }
.spotlight-intro > p:last-child { color: #aebfd5; font-size: 18px; line-height: 1.65; }
.spotlight-intro.compact { margin-top: 0; }
.spotlight-stack { display: grid; gap: 30px; }
.spotlight-product {
  display: grid;
  grid-template-columns: minmax(380px, .86fr) minmax(0, 1.14fr);
  gap: clamp(38px, 6vw, 80px);
  align-items: center;
  min-height: 620px;
  padding: clamp(34px, 5vw, 68px);
  border: 1px solid rgba(126, 177, 255, .22);
  border-radius: 30px;
  background:
    radial-gradient(circle at 0 100%, rgba(255, 104, 31, .11), transparent 38%),
    linear-gradient(145deg, rgba(8, 32, 72, .96), rgba(2, 12, 31, .98));
  box-shadow: 0 32px 90px rgba(0, 4, 20, .4), inset 0 1px rgba(255, 255, 255, .04);
  scroll-margin-top: 110px;
}
.spotlight-product.spotlight-reverse { grid-template-columns: minmax(0, 1.14fr) minmax(380px, .86fr); }
.spotlight-product.spotlight-reverse .spotlight-copy { order: 2; }
.spotlight-product.spotlight-reverse .product-artwork { order: 1; }
.product-kicker { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; color: #9db1cb; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.title-icon { width: 86px; height: 86px; margin: 36px 0 24px; border-radius: 22px; object-fit: cover; box-shadow: 0 18px 44px rgba(0, 0, 0, .38); }
.spotlight-copy h2 { margin: 8px 0 18px; font-size: clamp(48px, 5.3vw, 72px); line-height: .95; letter-spacing: -.06em; }
.spotlight-copy > p:not(.eyebrow) { max-width: 600px; color: #afc2da; line-height: 1.65; }
.spotlight-copy .spotlight-lede { color: #f2f7ff !important; font-size: clamp(19px, 2vw, 23px); }

.product-artwork {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(126, 177, 255, .2);
  border-radius: 26px;
  background: linear-gradient(150deg, #0b2858, #030d20);
  box-shadow: 0 28px 70px rgba(0, 2, 15, .46), inset 0 1px rgba(255,255,255,.08);
}
.product-artwork::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 0, rgba(73, 147, 255, .22), transparent 42%); }
.product-artwork.trivia::before, .product-artwork.flight::before { background: radial-gradient(circle at 80% 0, rgba(255, 118, 46, .28), transparent 46%); }
.product-shot { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; }
.product-icon { position: absolute; z-index: 2; right: 22px; bottom: 22px; width: 104px; height: 104px; border: 5px solid #07152e; border-radius: 25px; object-fit: cover; box-shadow: 0 20px 45px rgba(0,0,0,.48); }
.spotlight-art { aspect-ratio: 1.04; padding: 24px; }
.spotlight-art .product-shot { border-radius: 16px; }

.learning-section { margin-top: 130px; scroll-margin-top: 110px; }
.learning-grid-v5 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.learning-product { overflow: hidden; border: 1px solid rgba(126, 177, 255, .18); border-radius: 26px; background: linear-gradient(165deg, rgba(10, 40, 88, .94), rgba(3, 15, 37, .98)); box-shadow: 0 25px 70px rgba(0, 4, 20, .34); }
.learning-art { aspect-ratio: 1.45; border: 0; border-bottom: 1px solid rgba(126, 177, 255, .16); border-radius: 0; box-shadow: none; }
.learning-art .product-shot { object-fit: cover; }
.learning-art .product-icon { display: none; }
.learning-copy { display: flex; flex-direction: column; min-height: 340px; padding: 26px; }
.learning-title { display: flex; align-items: center; gap: 16px; }
.learning-title > img { flex: 0 0 auto; width: 66px; height: 66px; border-radius: 17px; object-fit: cover; box-shadow: 0 12px 30px rgba(0,0,0,.34); }
.learning-title h3, .learning-title h2 { margin: 4px 0 0; color: #fff; font-size: clamp(25px, 2.6vw, 34px); line-height: 1.05; }
.learning-copy > p { color: #afc2da; line-height: 1.62; }
.learning-copy .card-meta { margin-top: auto; }
.learning-copy .card-actions { padding-top: 22px; }
.learning-copy .card-actions .button { flex: 1; }

.mission-v5 { margin-top: 130px; padding: clamp(42px, 6vw, 76px); border: 1px solid rgba(255, 118, 46, .25); border-radius: 30px; background: radial-gradient(circle at 95% 5%, rgba(255, 104, 31, .16), transparent 34%), linear-gradient(145deg, #061937, #020b1d); }
.mission-v5 > h2 { max-width: 900px; margin: 10px 0 48px; font-size: clamp(42px, 5.5vw, 70px); line-height: 1; letter-spacing: -.06em; }
.mission-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.mission-pillars article { padding: 26px; border-top: 1px solid rgba(126, 177, 255, .23); }
.mission-pillars span { color: #ff7738; font-size: 12px; font-weight: 950; letter-spacing: .12em; }
.mission-pillars h3 { margin: 28px 0 9px; font-size: 22px; }
.mission-pillars p { margin: 0; color: #aebfd5; line-height: 1.6; }

.coming-soon-banner { display: flex; gap: 40px; align-items: center; justify-content: space-between; margin-top: 34px; padding: clamp(32px, 5vw, 56px); border: 1px solid rgba(126, 177, 255, .18); border-radius: 26px; background: linear-gradient(120deg, rgba(14, 48, 98, .88), rgba(3, 15, 37, .96)); }
.coming-soon-banner h2 { margin: 6px 0 12px; font-size: clamp(30px, 4vw, 48px); }
.coming-soon-banner p:last-child { max-width: 740px; margin-bottom: 0; color: #aebfd5; line-height: 1.62; }
.coming-soon-banner .button { flex: 0 0 auto; }

.directory-hero { max-width: 1020px; padding: 72px 0 64px; }
.directory-hero h1 { margin: 12px 0 28px; font-size: clamp(58px, 8vw, 104px); line-height: .88; letter-spacing: -.07em; }
.directory-hero h1 span { color: #ff7738; }
.directory-hero > p:last-child { max-width: 790px; color: #b9c9dd; font-size: 20px; line-height: 1.65; }
.portfolio-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 72px; }
.portfolio-summary article { display: grid; gap: 7px; min-height: 150px; padding: 25px 28px; border: 1px solid rgba(126, 177, 255, .2); border-radius: 21px; background: linear-gradient(150deg, rgba(10, 40, 88, .88), rgba(3, 15, 37, .97)); }
.portfolio-summary strong { color: #ff7738; font-size: clamp(42px, 5vw, 64px); line-height: .9; letter-spacing: -.06em; }
.portfolio-summary span { align-self: end; color: #c5d4e7; font-size: 12px; font-weight: 850; letter-spacing: .08em; line-height: 1.45; text-transform: uppercase; }
.portfolio-directory-section, .support-directory-section { margin-top: 104px; }
.portfolio-summary + .portfolio-directory-section, .portfolio-summary + .support-directory-section { margin-top: 0; }
.directory-section-heading { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: clamp(32px, 6vw, 76px); align-items: end; margin-bottom: 32px; }
.directory-section-heading h2 { margin: 8px 0 0; font-size: clamp(39px, 5vw, 62px); line-height: .96; letter-spacing: -.055em; }
.directory-section-heading > p { max-width: 620px; margin: 0; color: #b5c6da; font-size: 17px; line-height: 1.68; }
.directory-catalog-tools { margin-bottom: 25px; }
.directory-list { display: grid; gap: 26px; }
.directory-product { position: relative; display: grid; grid-template-columns: minmax(340px, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 76px); align-items: center; min-height: 490px; padding: clamp(28px, 4vw, 48px); overflow: hidden; border: 1px solid rgba(126, 177, 255, .2); border-radius: 28px; background: linear-gradient(150deg, rgba(8, 32, 72, .95), rgba(2, 12, 31, .98)); }
.directory-rank { position: absolute; right: 24px; top: 12px; color: rgba(255,255,255,.055); font-size: 90px; font-weight: 950; letter-spacing: -.08em; }
.directory-art { aspect-ratio: 1.25; padding: 18px; }
.directory-art .product-shot { border-radius: 14px; }
.directory-art .product-icon { width: 78px; height: 78px; right: 16px; bottom: 16px; border-width: 4px; border-radius: 20px; }
.directory-copy { position: relative; z-index: 2; }
.directory-copy > p { max-width: 680px; color: #b4c5da; font-size: 18px; line-height: 1.65; }
.directory-copy .product-kicker { margin: 26px 0; }

.store-detail-v5 .back-link { display: inline-block; margin: 14px 0 28px; }
.store-showcase { display: grid; grid-template-columns: minmax(380px, .88fr) minmax(0, 1.12fr); gap: clamp(40px, 7vw, 86px); align-items: center; min-height: 650px; padding: clamp(34px, 5vw, 68px); border: 1px solid rgba(126, 177, 255, .22); border-radius: 30px; background: radial-gradient(circle at 0 100%, rgba(255, 104, 31, .1), transparent 40%), linear-gradient(145deg, rgba(8, 32, 72, .98), rgba(2, 12, 31, .98)); }
.store-title { display: flex; align-items: center; gap: 22px; margin: 38px 0 24px; }
.store-title > img { width: 92px; height: 92px; border-radius: 23px; object-fit: cover; box-shadow: 0 18px 44px rgba(0,0,0,.4); }
.store-title h1 { margin: 5px 0 0; font-size: clamp(48px, 5.5vw, 76px); line-height: .92; letter-spacing: -.06em; }
.store-showcase .detail-lede { max-width: 620px; color: #d5e1f0; }
.detail-art { aspect-ratio: 1.02; padding: 22px; }
.detail-art .product-shot { border-radius: 16px; }
.product-story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.product-story-grid article { min-height: 290px; padding: 30px; border: 1px solid rgba(126, 177, 255, .18); border-radius: 22px; background: linear-gradient(150deg, rgba(10, 40, 88, .76), rgba(3, 15, 37, .94)); }
.product-story-grid h2 { margin: 28px 0 12px; font-size: 28px; }
.product-story-grid p:last-child { color: #afc2da; line-height: 1.65; }
.product-story-grid .install-card { border-color: rgba(255, 118, 46, .28); }
.detail-mission { margin-top: 28px; }
.detail-mission > h2 { margin-bottom: 20px; }
.detail-mission > p:last-child { max-width: 820px; color: #b4c5da; font-size: 18px; line-height: 1.65; }

.coming-soon-page .catalog-grid { margin-bottom: 70px; }
.coming-soon-page .product-card { min-height: 410px; }
.coming-soon-page .product-card .card-actions { margin-top: auto; }
.coming-hero { max-width: 1100px; }

@media (max-width: 1180px) {
  .product-led-site .site-header { flex-wrap: wrap; }
  .product-led-site .nav-toggle { display: inline-flex; }
  .product-led-site .site-header nav { display: none; width: 100%; padding-bottom: 8px; }
  .product-led-site .site-header nav.open { display: flex; flex-wrap: wrap; justify-content: flex-end; }
  .product-hero-v5 { grid-template-columns: 1fr; }
  .hero-v5-brand { width: min(620px, 100%); justify-self: end; }
  .spotlight-product, .spotlight-product.spotlight-reverse, .directory-product, .store-showcase { grid-template-columns: 1fr; }
  .spotlight-product.spotlight-reverse .spotlight-copy, .spotlight-product.spotlight-reverse .product-artwork { order: initial; }
  .spotlight-art, .detail-art { width: min(760px, 100%); justify-self: center; }
  .directory-art { width: min(680px, 100%); }
}

@media (max-width: 820px) {
  .product-led-site main { width: min(100% - 28px, 1320px); padding-top: 18px; }
  .product-hero-v5 { min-height: auto; padding: 42px 26px; border-radius: 24px; background-position: 65% center; }
  .hero-v5-copy h1 { font-size: clamp(48px, 13vw, 68px); }
  .hero-v5-brand { padding: 26px 20px; }
  .hero-v5-brand .trust-row { display: grid; grid-template-columns: 1fr; }
  .spotlight-intro { margin-top: 82px; }
  .spotlight-product { min-height: auto; padding: 28px 22px; border-radius: 24px; }
  .spotlight-copy h2 { font-size: clamp(42px, 12vw, 60px); }
  .spotlight-art { aspect-ratio: 1; padding: 12px; }
  .product-icon { width: 74px; height: 74px; right: 12px; bottom: 12px; border-width: 4px; border-radius: 19px; }
  .learning-section, .mission-v5 { margin-top: 88px; }
  .learning-grid-v5, .mission-pillars, .product-story-grid { grid-template-columns: 1fr; }
  .learning-copy { min-height: auto; }
  .learning-copy .card-meta { margin-top: 24px; }
  .mission-v5 { padding: 36px 22px; border-radius: 24px; }
  .coming-soon-banner { align-items: flex-start; flex-direction: column; }
  .portfolio-summary, .directory-section-heading { grid-template-columns: 1fr; }
  .portfolio-summary { margin-bottom: 56px; }
  .portfolio-summary article { min-height: 125px; }
  .portfolio-directory-section, .support-directory-section { margin-top: 76px; }
  .directory-hero { padding: 56px 4px 42px; }
  .directory-hero h1 { font-size: clamp(52px, 16vw, 78px); }
  .directory-product, .store-showcase { min-height: auto; padding: 25px 20px; border-radius: 23px; }
  .directory-art { aspect-ratio: 1.08; padding: 10px; }
  .directory-rank { font-size: 62px; }
  .store-title { align-items: flex-start; flex-direction: column; }
  .store-title h1 { font-size: clamp(44px, 13vw, 64px); }
  .product-story-grid article { min-height: auto; }
  .product-led-site .site-header nav.open { display: grid; grid-template-columns: 1fr 1fr; }
  .product-led-site .site-header nav a { white-space: normal; }
}

/* ---------- v5.1 player care and product forums ---------- */
.care-site .care-hero { max-width: 1080px; }
.care-site .back-link { display: inline-block; margin: 14px 0 28px; }
.care-product-hero {
  display: grid;
  grid-template-columns: minmax(410px, .95fr) minmax(0, 1.05fr);
  gap: clamp(42px, 7vw, 90px);
  align-items: center;
  min-height: 590px;
  padding: clamp(38px, 5vw, 68px);
  border: 1px solid rgba(126, 177, 255, .22);
  border-radius: 30px;
  background: radial-gradient(circle at 100% 0, rgba(23, 105, 255, .18), transparent 38%), linear-gradient(145deg, rgba(8, 32, 72, .98), rgba(2, 12, 31, .98));
  box-shadow: 0 34px 100px rgba(0, 4, 20, .42);
}
.care-product-hero h1 { margin: 38px 0 22px; font-size: clamp(54px, 6vw, 82px); line-height: .9; letter-spacing: -.065em; }
.care-product-hero h1 span { color: #ff7738; }
.care-product-hero > div:first-child > p:not(.eyebrow) { max-width: 680px; color: #c2d1e5; font-size: 19px; line-height: 1.66; }
.care-product-visual { position: relative; display: grid; place-items: center; aspect-ratio: 1.06; min-width: 0; padding: 22px; overflow: hidden; border: 1px solid rgba(126, 177, 255, .22); border-radius: 25px; background: linear-gradient(150deg, #10346f, #030d20); }
.care-product-visual::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 0, rgba(255, 119, 56, .22), transparent 42%); }
.care-shot { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border-radius: 15px; object-fit: contain; }
.care-icon { position: absolute; z-index: 2; right: 18px; bottom: 18px; width: 92px; height: 92px; border: 4px solid #07152e; border-radius: 23px; object-fit: cover; box-shadow: 0 18px 42px rgba(0,0,0,.48); }
.care-concept-visual { display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 1.06; padding: 36px; overflow: hidden; border: 1px solid rgba(126, 177, 255, .2); border-radius: 25px; background: radial-gradient(circle at 78% 10%, rgba(255, 104, 31, .18), transparent 35%), linear-gradient(145deg, #0d2d63, #020b1d); }
.care-concept-visual > span { margin-bottom: auto; color: rgba(255,255,255,.09); font-size: 96px; font-weight: 950; letter-spacing: -.08em; }
.care-concept-visual p, .care-concept-visual small { color: #9fb4cf; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.care-concept-visual strong { margin: 8px 0; font-size: clamp(40px, 5vw, 68px); letter-spacing: -.06em; }

.care-directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.care-directory-card { display: flex; flex-direction: column; min-height: 360px; padding: 28px; border: 1px solid rgba(126, 177, 255, .18); border-radius: 23px; background: linear-gradient(155deg, rgba(10, 40, 88, .9), rgba(3, 15, 37, .98)); box-shadow: 0 24px 65px rgba(0,4,20,.3); }
.care-directory-card > img { width: 78px; height: 78px; margin-bottom: 34px; border-radius: 20px; object-fit: cover; box-shadow: 0 13px 34px rgba(0,0,0,.35); }
.care-directory-card .care-rank { margin-bottom: 34px; color: rgba(255,255,255,.1); font-size: 64px; font-weight: 950; letter-spacing: -.08em; }
.care-directory-card h3 { margin: 5px 0 12px; font-size: clamp(28px, 3vw, 38px); line-height: 1; }
.care-directory-card > p:not(.eyebrow) { color: #aebfd5; line-height: 1.6; }
.care-directory-card .button { width: fit-content; margin-top: auto; }
.prerelease-care .care-directory-card { min-height: 300px; }
.concept-care .care-directory-card { min-height: 290px; border-style: dashed; }

.care-guides { margin-top: 100px; }
.care-guides > div:first-child { max-width: 760px; }
.care-guides h2 { margin: 8px 0 36px; font-size: clamp(40px, 5vw, 62px); }
.care-guide-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.care-guide-grid article { min-height: 270px; padding: 26px; border: 1px solid rgba(126,177,255,.18); border-radius: 21px; background: rgba(5, 23, 53, .82); }
.care-guide-grid span { color: #ff7738; font-size: 12px; font-weight: 950; letter-spacing: .14em; }
.care-guide-grid h3 { margin: 34px 0 10px; font-size: 21px; }
.care-guide-grid p { margin: 0; color: #aebfd5; font-size: 14px; line-height: 1.65; }

.care-service-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr); gap: 20px; margin-top: 34px; }
.care-service-grid > aside { display: grid; align-content: start; gap: 20px; }
.care-service-card { padding: clamp(28px, 4vw, 44px); border: 1px solid rgba(126,177,255,.2); border-radius: 24px; background: linear-gradient(150deg, rgba(10, 40, 88, .9), rgba(3, 15, 37, .98)); }
.care-service-card.primary-care { border-color: rgba(255,119,56,.25); }
.care-service-card h2 { margin: 8px 0 14px; font-size: clamp(30px, 4vw, 46px); }
.care-service-card > p:not(.eyebrow) { color: #afc2da; line-height: 1.65; }
.care-ticket-form { display: grid; gap: 18px; margin-top: 30px; }
.care-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.care-ticket-form textarea { min-height: 150px; resize: vertical; }
.care-form-note { display: flex; gap: 10px; padding: 15px 17px; border: 1px solid rgba(255,119,56,.22); border-radius: 14px; color: #b8c9de; background: rgba(255,104,31,.06); font-size: 13px; line-height: 1.5; }
.care-form-note strong { flex: 0 0 auto; color: #fff; }
.lookup-output { margin-top: 18px; }
.care-safety { border-color: rgba(255,119,56,.28); }
.support-faq-section { margin-top: 104px; padding: clamp(30px, 5vw, 54px); border: 1px solid rgba(126,177,255,.2); border-radius: 28px; background: radial-gradient(circle at 100% 0, rgba(23,105,255,.14), transparent 38%), linear-gradient(145deg, rgba(8,32,72,.93), rgba(2,12,31,.98)); }
.support-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.support-faq-grid details { overflow: hidden; border: 1px solid rgba(126,177,255,.18); border-radius: 17px; background: rgba(2,12,31,.62); }
.support-faq-grid summary { position: relative; padding: 21px 52px 21px 21px; color: #eff6ff; font-size: 16px; font-weight: 850; line-height: 1.4; cursor: pointer; list-style: none; }
.support-faq-grid summary::-webkit-details-marker { display: none; }
.support-faq-grid summary::after { content: "+"; position: absolute; top: 17px; right: 20px; color: #ff7738; font-size: 24px; font-weight: 600; }
.support-faq-grid details[open] summary::after { content: "−"; }
.support-faq-grid details[open] summary { border-bottom: 1px solid rgba(126,177,255,.14); }
.support-faq-grid details p { margin: 0; padding: 19px 21px 22px; color: #b5c6da; line-height: 1.68; }

.community-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 16px; }
.community-principles article { min-height: 260px; padding: 30px; border: 1px solid rgba(126,177,255,.18); border-radius: 23px; background: rgba(5, 23, 53, .82); }
.community-principles span { color: #ff7738; font-size: 12px; font-weight: 950; }
.community-principles h2 { margin: 48px 0 10px; font-size: 27px; }
.community-principles p { margin: 0; color: #aebfd5; line-height: 1.6; }
.forum-topic-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.forum-topic-row span { padding: 9px 12px; border: 1px solid rgba(126,177,255,.22); border-radius: 999px; color: #d9e6f7; background: rgba(23,105,255,.08); font-size: 11px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.forum-shell { margin-top: 30px; padding: clamp(28px, 4vw, 48px); border: 1px solid rgba(126,177,255,.2); border-radius: 26px; background: linear-gradient(145deg, rgba(8,32,72,.94), rgba(2,12,31,.98)); }
.forum-shell-head { display: flex; gap: 30px; align-items: flex-start; justify-content: space-between; padding-bottom: 30px; border-bottom: 1px solid rgba(126,177,255,.16); }
.forum-shell-head h2 { margin: 7px 0 10px; font-size: clamp(34px, 4vw, 50px); }
.forum-shell-head p:last-child { max-width: 780px; color: #aebfd5; line-height: 1.6; }
.forum-gate { margin-top: 24px; padding: 34px; border: 1px solid rgba(126,177,255,.18); border-radius: 20px; background: rgba(3,15,37,.8); }
.forum-gate h3, .forum-gate h2 { margin: 8px 0 12px; font-size: clamp(30px, 4vw, 46px); }
.forum-gate p { max-width: 760px; color: #afc2da; line-height: 1.65; }
.concept-forum-gate { margin-top: 30px; }
.forum-compose { display: grid; grid-template-columns: minmax(180px,.65fr) minmax(280px,1.35fr); gap: 15px; margin: 28px 0; }
.forum-compose label:nth-child(3) { grid-column: 1 / -1; }
.forum-compose textarea { min-height: 130px; resize: vertical; }
.forum-compose .button { width: fit-content; }
.forum-post-card { border-radius: 21px; background: rgba(2,12,31,.78); }
.forum-post-heading h3 { margin: 16px 0 8px; font-size: 27px; }
.forum-moderation-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.forum-moderation-controls:empty { display: none; }
.forum-moderation-controls .button { min-height: 36px; padding: 8px 13px; font-size: 10px; }
.forum-comment { padding: 15px; border: 1px solid rgba(126,177,255,.12); border-radius: 14px; background: rgba(255,255,255,.025); }
.forum-comment-meta { display: flex; gap: 10px; color: #9eb3ce; font-size: 12px; text-transform: uppercase; }
.forum-comment p { margin-bottom: 0; color: #c6d5e7; line-height: 1.55; }
.forum-comment-form { display: grid; gap: 10px; margin-top: 15px; }
.forum-comment-form textarea { min-height: 84px; resize: vertical; }
.forum-comment-form .button { width: fit-content; }
.forum-empty { padding: 34px; border: 1px dashed rgba(126,177,255,.24); border-radius: 18px; }
.forum-empty h3 { margin: 8px 0 10px; font-size: 27px; }
.forum-empty p:last-child { color: #aebfd5; }
.community-safety { display: grid; grid-template-columns: minmax(280px,.7fr) minmax(0,1.3fr) auto; gap: 34px; align-items: center; margin-top: 30px; padding: clamp(30px,5vw,56px); border: 1px solid rgba(255,119,56,.27); border-radius: 26px; background: radial-gradient(circle at 100% 0, rgba(255,104,31,.12), transparent 35%), #061937; }
.community-safety h2 { margin: 6px 0 0; font-size: clamp(32px,4vw,48px); }
.community-safety > p { color: #b6c7db; line-height: 1.65; }
.community-safety .button { white-space: nowrap; }

@media (max-width: 1100px) {
  .care-product-hero, .care-service-grid { grid-template-columns: 1fr; }
  .care-product-visual, .care-concept-visual { width: min(700px,100%); }
  .care-directory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .care-guide-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .community-safety { grid-template-columns: 1fr; }
  .community-safety .button { width: fit-content; }
}

@media (max-width: 700px) {
  .care-product-hero { min-height: auto; padding: 28px 21px; border-radius: 23px; }
  .care-product-hero h1 { font-size: clamp(48px,15vw,68px); }
  .care-directory-grid, .care-guide-grid, .community-principles, .care-form-grid { grid-template-columns: 1fr; }
  .support-faq-section { margin-top: 76px; padding: 27px 19px; border-radius: 22px; }
  .support-faq-grid { grid-template-columns: 1fr; }
  .care-directory-card { min-height: 310px; }
  .care-guide-grid article { min-height: auto; }
  .care-form-note, .forum-shell-head { align-items: flex-start; flex-direction: column; }
  .forum-compose { grid-template-columns: 1fr; }
  .forum-compose label:nth-child(3) { grid-column: auto; }
  .forum-shell { padding: 23px 17px; }
  .community-safety { gap: 18px; padding: 30px 22px; }
}

/* ---------- Private studio operations and release governance ---------- */
.admin-section { margin-top: 74px; }
.admin-section-heading { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr); gap: 34px; align-items: end; margin-bottom: 24px; }
.admin-section-heading h2 { margin: 7px 0 0; font-size: clamp(34px, 4.6vw, 58px); line-height: .98; letter-spacing: -.05em; }
.admin-section-heading > p { max-width: 620px; margin: 0; color: #afc2da; line-height: 1.65; }
.admin-stat-card { min-height: 185px; }
.admin-login-card { display: grid; gap: 18px; }
.admin-login-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.admin-login-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.admin-token-fallback { padding-top: 14px; border-top: 1px solid rgba(126,177,255,.16); }
.admin-token-fallback summary { cursor: pointer; color: #afc2da; font-size: 13px; font-weight: 800; }
.admin-token-fallback label { display: block; margin-top: 14px; }
.admin-token-fallback .button { margin-top: 10px; }
.railway-cost-controls { display: grid; grid-template-columns: repeat(2,minmax(220px,380px)); gap: 14px; align-items: end; margin-bottom: 18px; }
.railway-cost-controls label { display: grid; gap: 7px; color: #afc2da; font-size: 12px; font-weight: 850; letter-spacing: .04em; }
.railway-cost-summary { margin-bottom: 18px; }
.railway-cost-table-wrap { overflow-x: auto; border: 1px solid rgba(126,177,255,.18); border-radius: 19px; background: rgba(5,23,53,.86); }
.railway-cost-table { width: 100%; min-width: 1380px; border-collapse: collapse; }
.railway-cost-table th, .railway-cost-table td { padding: 15px 16px; border-bottom: 1px solid rgba(126,177,255,.13); text-align: left; vertical-align: top; }
.railway-cost-table th { color: #ff9a66; font-size: 10px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.railway-cost-table td { color: #d5e2f2; font-size: 13px; line-height: 1.45; }
.railway-cost-table td:nth-child(2) { color: #8fdcff; font-weight: 850; text-transform: capitalize; }
.railway-cost-table td:nth-child(3), .railway-cost-table td:nth-child(4), .railway-cost-table td:nth-child(5), .railway-cost-table td:nth-child(6), .railway-cost-table td:nth-child(7) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.railway-cost-table strong, .railway-cost-table small { display: block; }
.railway-cost-table small { margin-top: 5px; color: #8ea7c4; }
.railway-cost-table tbody tr:last-child td { border-bottom: 0; }
.railway-cost-note { margin-top: 14px; }
.platform-card { border-color: rgba(84, 211, 123, .34); background: radial-gradient(circle at 100% 0, rgba(84, 211, 123, .12), transparent 40%), rgba(5, 23, 53, .9); }
.release-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.release-card-admin { padding: 28px; border: 1px solid rgba(126, 177, 255, .2); border-radius: 24px; background: linear-gradient(150deg, rgba(8, 32, 72, .94), rgba(2, 12, 31, .98)); }
.release-card-admin.release-public { border-top: 3px solid #54d37b; }
.release-card-admin.release-private { border-top: 3px solid #4c9bff; }
.release-card-heading { display: flex; gap: 18px; align-items: start; justify-content: space-between; }
.release-card-heading h3 { margin: 3px 0 0; font-size: clamp(25px, 3vw, 34px); line-height: 1; letter-spacing: -.04em; }
.release-card-heading .status { flex: 0 0 auto; }
.release-priority { margin: 0 0 8px; color: #ff9a66; font-size: 10px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.release-progress { display: grid; gap: 10px; margin-top: 24px; }
.release-progress > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.release-progress strong { color: #f8fbff; font-size: 15px; }
.release-progress span { color: #8ea7c4; font-size: 10px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.release-progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(126, 177, 255, .13); }
.release-progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff7738, #ffd45e 45%, #54d37b); box-shadow: 0 0 20px rgba(84, 211, 123, .25); }
.release-progress-private .release-progress-track span { background: linear-gradient(90deg, #285dc8, #4c9bff); }
.app-roadmap { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.app-roadmap li { display: grid; gap: 7px; justify-items: center; min-width: 0; padding: 11px 5px; border: 1px solid rgba(126, 177, 255, .14); border-radius: 11px; background: rgba(2, 12, 31, .54); text-align: center; }
.app-roadmap li > span { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 999px; color: #89a1be; background: rgba(126, 177, 255, .1); font-size: 12px; font-weight: 950; }
.app-roadmap small { color: #8ea7c4; font-size: 8px; font-weight: 900; letter-spacing: .04em; line-height: 1.25; text-transform: uppercase; }
.app-roadmap .roadmap-done > span { color: #032117; background: #54d37b; }
.app-roadmap .roadmap-current { border-color: rgba(255, 154, 102, .48); background: rgba(255, 119, 56, .08); }
.app-roadmap .roadmap-current > span { color: #201105; background: #ff9a66; }
.app-roadmap .roadmap-blocked { border-color: rgba(255, 96, 96, .44); }
.app-roadmap .roadmap-blocked > span { color: #fff; background: #cf4545; }
.app-roadmap .roadmap-hold { opacity: .58; }
.release-meta { display: grid; gap: 0; margin: 25px 0 0; }
.release-meta-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; padding: 15px 0; border-top: 1px solid rgba(126, 177, 255, .15); }
.release-meta dt { color: #8ea7c4; font-size: 10px; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.release-meta dd { margin: 0; color: #d5e2f2; line-height: 1.55; }
.release-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.checklist-item { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 18px; padding: 23px; border: 1px solid rgba(126, 177, 255, .18); border-radius: 19px; background: rgba(5, 23, 53, .82); }
.checklist-number { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(255, 119, 56, .52); border-radius: 13px; color: #ff9a66; font-size: 11px; font-weight: 950; letter-spacing: .08em; }
.checklist-item h3 { margin: 1px 0 9px; font-size: 20px; }
.checklist-item p { margin: 0; color: #afc2da; line-height: 1.55; }

@media (max-width: 900px) {
  .release-board, .release-checklist { grid-template-columns: 1fr; }
  .admin-section-heading { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .admin-login-grid, .railway-cost-controls { grid-template-columns: 1fr; }
  .release-card-admin { padding: 22px 18px; }
  .release-card-heading { display: grid; }
  .release-progress > div:first-child { align-items: flex-start; flex-direction: column; gap: 5px; }
  .app-roadmap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .release-meta-row { grid-template-columns: 1fr; gap: 7px; }
  .checklist-item { grid-template-columns: 42px minmax(0, 1fr); gap: 13px; padding: 19px 16px; }
  .checklist-number { width: 38px; height: 38px; }
}

/* ---------- Peak Play cinematic studio ident ---------- */
body.studio-ident-active { overflow: hidden; }
.studio-ident[hidden], .studio-ident-seen .studio-ident { display: none; }
.studio-ident {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background: #01040b;
  isolation: isolate;
}
.studio-ident::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 8;
  pointer-events: none;
  opacity: .22;
  background: radial-gradient(circle at center, transparent 20%, rgba(0,0,0,.82) 82%);
}
.studio-ident::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: .08;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.18) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}
.ident-stage { position: absolute; inset: 0; display: grid; place-items: center; perspective: 900px; }
.ident-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 72%, rgba(22,104,255,.2), transparent 24%),
    radial-gradient(circle at 48% 76%, rgba(255,92,20,.14), transparent 32%),
    linear-gradient(180deg, #01040b, #03112b 70%, #020611);
}
.ident-sky { position: absolute; inset: 0; opacity: 0; }
.ident-sky i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #d9eaff; box-shadow: 0 0 10px #78b5ff; }
.ident-sky i:nth-child(1) { left: 8%; top: 18%; }.ident-sky i:nth-child(2) { left: 17%; top: 63%; }.ident-sky i:nth-child(3) { left: 28%; top: 28%; }.ident-sky i:nth-child(4) { left: 37%; top: 76%; }.ident-sky i:nth-child(5) { left: 46%; top: 14%; }.ident-sky i:nth-child(6) { left: 55%; top: 54%; }.ident-sky i:nth-child(7) { left: 64%; top: 22%; }.ident-sky i:nth-child(8) { left: 73%; top: 69%; }.ident-sky i:nth-child(9) { left: 83%; top: 34%; }.ident-sky i:nth-child(10) { left: 92%; top: 78%; }.ident-sky i:nth-child(11) { left: 13%; top: 85%; }.ident-sky i:nth-child(12) { left: 88%; top: 11%; }
.ident-beam { position: absolute; top: -40%; width: 18%; height: 145%; opacity: 0; filter: blur(24px); mix-blend-mode: screen; transform-origin: 50% 100%; }
.ident-beam-orange { left: 25%; background: linear-gradient(180deg, transparent, rgba(255,78,0,.5) 58%, rgba(255,132,45,.04)); transform: rotate(25deg) translateX(-80%); }
.ident-beam-blue { right: 25%; background: linear-gradient(180deg, transparent, rgba(34,123,255,.54) 58%, rgba(69,153,255,.04)); transform: rotate(-25deg) translateX(80%); }
.ident-horizon { position: absolute; top: 70%; left: 50%; width: 120%; height: 1px; opacity: 0; transform: translateX(-50%); background: linear-gradient(90deg, transparent, #145bd1 38%, #fff 50%, #ff6a1b 62%, transparent); box-shadow: 0 0 24px #2d7bff, 0 0 54px rgba(255,92,20,.6); }
.ident-summit-glow { position: absolute; top: 50%; left: 50%; width: 38vw; height: 38vw; max-width: 560px; max-height: 560px; border-radius: 50%; opacity: 0; transform: translate(-50%,-45%) scale(.3); background: radial-gradient(circle, rgba(255,255,255,.4), rgba(44,130,255,.22) 18%, rgba(255,93,17,.08) 46%, transparent 70%); filter: blur(5px); }
.ident-mark { position: absolute; left: 50%; top: 50%; width: clamp(180px, 22vw, 340px); height: auto; transform: translate(-50%,-50%); }
.ident-mark-ghost { opacity: 0; filter: blur(22px) saturate(1.5); transform: translate(-50%,-50%) scale(.72); }
.ident-mark-main { z-index: 3; opacity: 0; clip-path: inset(100% 0 0 0); filter: drop-shadow(0 0 28px rgba(49,129,255,.38)); }
.ident-charge { position: absolute; left: 50%; top: 50%; z-index: 2; width: clamp(240px, 31vw, 480px); height: clamp(240px, 31vw, 480px); border: 1px solid rgba(117,181,255,.5); border-radius: 50%; opacity: 0; transform: translate(-50%,-50%) scale(.45); box-shadow: inset 0 0 60px rgba(23,105,255,.18), 0 0 80px rgba(255,105,22,.1); }
.ident-charge::before, .ident-charge::after { content: ""; position: absolute; inset: 9%; border: 1px solid rgba(255,113,42,.3); border-radius: 50%; transform: rotate(33deg) scaleY(.6); }
.ident-charge::after { border-color: rgba(80,153,255,.45); transform: rotate(-28deg) scaleX(.62); }
.ident-flash { position: absolute; inset: 0; z-index: 5; opacity: 0; background: #f7fbff; }
.ident-wordmark { position: absolute; z-index: 6; left: 50%; top: 48%; display: grid; justify-items: center; width: min(680px, 76vw); opacity: 0; transform: translate(-50%,-50%) scale(.86); filter: blur(10px); }
.ident-wordmark img { display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 70px rgba(0,0,0,.8)); }
.ident-wordmark p { margin: -2px 0 0; color: #adc5e3; font-size: clamp(9px,1vw,13px); font-weight: 900; letter-spacing: .38em; text-indent: .38em; }
.ident-presents { position: absolute; z-index: 6; top: 14%; left: 0; width: 100%; opacity: 0; color: #a9bdd7; font-size: clamp(10px,1vw,13px); font-weight: 900; letter-spacing: .42em; text-align: center; text-indent: .42em; }
.ident-tagline { position: absolute; z-index: 6; right: 0; bottom: 14%; left: 0; display: flex; justify-content: center; gap: clamp(16px,3vw,42px); color: #d8e7f8; font-size: clamp(9px,1vw,12px); font-weight: 900; letter-spacing: .2em; text-align: center; }
.ident-tagline span { opacity: 0; transform: translateY(10px); }
.ident-progress { position: absolute; z-index: 7; bottom: 0; left: 0; width: 0; height: 3px; background: linear-gradient(90deg, #ff5b0e, #ff963b 43%, #fff 50%, #4b9cff 57%, #0d57da); box-shadow: 0 0 18px rgba(87,155,255,.65); }
.ident-skip { position: absolute; z-index: 20; top: max(20px,env(safe-area-inset-top)); right: max(22px,env(safe-area-inset-right)); padding: 11px 15px; border: 1px solid rgba(159,188,226,.28); border-radius: 999px; opacity: 0; color: #d6e5f7; background: rgba(4,16,38,.68); backdrop-filter: blur(12px); font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.ident-skip:hover { color: #fff; border-color: rgba(255,124,52,.68); background: rgba(255,97,20,.12); }
.ident-exiting { animation: ident-exit .62s ease both; }

.ident-playing .ident-sky { animation: ident-stars 5.8s .2s ease both; }
.ident-playing .ident-sky i { animation: ident-twinkle 1.6s ease-in-out infinite alternate; }
.ident-playing .ident-sky i:nth-child(3n) { animation-delay: .45s; }.ident-playing .ident-sky i:nth-child(3n+1) { animation-delay: .9s; }
.ident-playing .ident-presents { animation: ident-presents 1.65s .18s ease both; }
.ident-playing .ident-beam-orange { animation: ident-beam-orange 2.3s .62s cubic-bezier(.2,.7,.1,1) both; }
.ident-playing .ident-beam-blue { animation: ident-beam-blue 2.3s .62s cubic-bezier(.2,.7,.1,1) both; }
.ident-playing .ident-horizon { animation: ident-horizon 2.1s 1s ease both; }
.ident-playing .ident-summit-glow { animation: ident-glow 2.6s .9s ease both; }
.ident-playing .ident-mark-ghost { animation: ident-ghost 2.3s .92s ease both; }
.ident-playing .ident-mark-main { animation: ident-mark 2.35s 1.05s cubic-bezier(.2,.85,.2,1) both; }
.ident-playing .ident-charge { animation: ident-charge 2s 1.1s cubic-bezier(.2,.8,.2,1) both; }
.ident-playing .ident-flash { animation: ident-flash .78s 2.85s ease both; }
.ident-playing .ident-wordmark { animation: ident-wordmark 3.35s 3.02s cubic-bezier(.15,.8,.2,1) both; }
.ident-playing .ident-tagline span:nth-child(1) { animation: ident-tagline 1.55s 4.1s ease both; }
.ident-playing .ident-tagline span:nth-child(2) { animation: ident-tagline 1.55s 4.32s ease both; }
.ident-playing .ident-tagline span:nth-child(3) { animation: ident-tagline 1.55s 4.54s ease both; }
.ident-playing .ident-progress { animation: ident-progress 6.5s linear both; }
.ident-playing .ident-skip { animation: ident-skip-in .4s .58s ease both; }

@keyframes ident-stars { 0%{opacity:0;transform:scale(1.08)} 18%,82%{opacity:.72} 100%{opacity:.2;transform:scale(1)} }
@keyframes ident-twinkle { from{opacity:.25;transform:scale(.7)} to{opacity:1;transform:scale(1.5)} }
@keyframes ident-presents { 0%{opacity:0;transform:translateY(9px)} 25%,65%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(-7px)} }
@keyframes ident-beam-orange { 0%{opacity:0;transform:rotate(25deg) translateX(-90%)} 42%{opacity:.72} 100%{opacity:.08;transform:rotate(-8deg) translateX(95%)} }
@keyframes ident-beam-blue { 0%{opacity:0;transform:rotate(-25deg) translateX(90%)} 42%{opacity:.78} 100%{opacity:.08;transform:rotate(8deg) translateX(-95%)} }
@keyframes ident-horizon { 0%{opacity:0;transform:translateX(-50%) scaleX(.03)} 52%{opacity:1} 100%{opacity:0;transform:translateX(-50%) scaleX(1)} }
@keyframes ident-glow { 0%{opacity:0;transform:translate(-50%,-45%) scale(.2)} 56%{opacity:1} 100%{opacity:0;transform:translate(-50%,-45%) scale(1.45)} }
@keyframes ident-ghost { 0%{opacity:0;transform:translate(-50%,-50%) scale(.55)} 48%{opacity:.9} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.38)} }
@keyframes ident-mark { 0%{opacity:0;clip-path:inset(100% 0 0 0);transform:translate(-50%,-45%) scale(.88)} 35%{opacity:1} 72%{clip-path:inset(0);transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;clip-path:inset(0);transform:translate(-50%,-50%) scale(1.04)} }
@keyframes ident-charge { 0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(-20deg)} 45%{opacity:.85} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.35) rotate(38deg)} }
@keyframes ident-flash { 0%,100%{opacity:0} 18%{opacity:.92} 36%{opacity:.12} 48%{opacity:.55} }
@keyframes ident-wordmark { 0%{opacity:0;filter:blur(14px);transform:translate(-50%,-50%) scale(.82)} 22%{opacity:1;filter:blur(0);transform:translate(-50%,-50%) scale(1.025)} 34%,86%{opacity:1;filter:blur(0);transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;filter:blur(3px);transform:translate(-50%,-52%) scale(1.015)} }
@keyframes ident-tagline { 0%{opacity:0;transform:translateY(10px)} 32%,82%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(-4px)} }
@keyframes ident-progress { from{width:0} to{width:100%} }
@keyframes ident-skip-in { from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:none} }
@keyframes ident-exit { from{opacity:1;filter:blur(0)} to{opacity:0;filter:blur(5px)} }

.footer-intro-replay { padding: 0; border: 0; color: #b8c9de; background: transparent; font: inherit; cursor: pointer; text-align: left; }
.footer-intro-replay:hover { color: #fff; }

@media (max-width: 700px) {
  .ident-wordmark { top: 46%; width: 90vw; }
  .ident-mark { width: 52vw; }
  .ident-wordmark p { margin-top: 7px; letter-spacing: .2em; text-indent: .2em; }
  .ident-tagline { bottom: 12%; flex-direction: column; gap: 10px; padding-inline: 24px; }
  .ident-presents { top: 18%; padding-inline: 24px; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-ident::after, .ident-sky, .ident-beam, .ident-horizon, .ident-summit-glow, .ident-mark, .ident-charge, .ident-flash, .ident-presents, .ident-tagline, .ident-progress { display: none; }
  .ident-playing .ident-wordmark { opacity: 1; filter: none; transform: translate(-50%,-50%); animation: none; }
  .ident-playing .ident-skip { opacity: 1; animation: none; }
  .ident-exiting { animation-duration: .12s; }
}

/* ---------- Peak Play audiovisual ident master ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.studio-ident::before,
.studio-ident::after,
.ident-stage::before { display: none; }

.ident-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #0a1d42, #020712 72%);
}

.ident-video,
.ident-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #020712;
}

.ident-poster { display: none; }
.ident-media-failed .ident-video { display: none; }
.ident-media-failed .ident-poster { display: block; }

.ident-controls {
  position: absolute;
  z-index: 20;
  top: max(20px, env(safe-area-inset-top));
  right: max(22px, env(safe-area-inset-right));
  display: flex;
  gap: 9px;
  align-items: center;
}

.ident-sound,
.ident-skip {
  position: static;
  min-height: 42px;
  padding: 11px 15px;
  border: 1px solid rgba(191, 215, 245, .34);
  border-radius: 999px;
  opacity: 1;
  color: #f4f8ff;
  background: rgba(2, 12, 31, .78);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .24);
  backdrop-filter: blur(14px);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.ident-sound:hover,
.ident-sound:focus-visible,
.ident-skip:hover,
.ident-skip:focus-visible {
  color: #fff;
  border-color: rgba(255, 122, 38, .82);
  background: rgba(10, 31, 69, .92);
  outline: 3px solid rgba(80, 151, 255, .34);
  outline-offset: 2px;
}

.ident-sound[aria-pressed="true"] {
  color: #06162f;
  border-color: #fff;
  background: #fff;
}

.ident-progress {
  position: absolute;
  z-index: 18;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
  box-shadow: none;
}

.ident-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #ff5b0b 0 47%, #fff 50%, #176fff 53% 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .12s linear;
}

.ident-playing .ident-skip,
.ident-playing .ident-progress { animation: none; }

@media (max-width: 700px) {
  .ident-controls {
    top: max(14px, env(safe-area-inset-top));
    right: 14px;
    left: 14px;
    justify-content: space-between;
  }

  .ident-sound,
  .ident-skip {
    min-height: 40px;
    padding: 10px 12px;
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ident-video { display: none; }
  .ident-poster { display: block; }
  .ident-sound,
  .ident-progress { display: none; }
}

/* ---------- Basecamp, Journal, and current-build media ---------- */
.product-gallery { margin-top: 32px; padding: clamp(30px, 5vw, 58px); border: 1px solid rgba(126,177,255,.2); border-radius: 28px; background: linear-gradient(145deg, rgba(8,32,72,.94), rgba(2,12,31,.98)); box-shadow: 0 28px 80px rgba(0,4,20,.38); }
.gallery-heading { display: flex; gap: 40px; align-items: end; justify-content: space-between; margin-bottom: 30px; }
.gallery-heading h2 { margin: 8px 0 0; font-size: clamp(34px,4.5vw,56px); line-height: .98; letter-spacing: -.05em; }
.gallery-heading > p { max-width: 460px; margin: 0; color: #aebfd5; line-height: 1.65; }
.gallery-track { display: grid; grid-template-columns: 1.45fr 1fr; gap: 18px; }
.gallery-frame { margin: 0; overflow: hidden; border: 1px solid rgba(126,177,255,.18); border-radius: 20px; background: #020a19; }
.gallery-frame.gallery-primary { grid-row: span 2; }
.gallery-frame img { display: block; width: 100%; height: 100%; min-height: 220px; object-fit: cover; aspect-ratio: 2.17; }
.gallery-frame.gallery-primary img { min-height: 100%; }
.gallery-frame figcaption { display: flex; gap: 12px; align-items: center; min-height: 62px; padding: 14px 17px; color: #c0d0e4; font-size: 13px; line-height: 1.45; }
.gallery-frame figcaption span { color: #ff7738; font-size: 10px; font-weight: 950; letter-spacing: .12em; }

.basecamp-preview { margin-top: 34px; padding: clamp(36px, 6vw, 68px); border: 1px solid rgba(126,177,255,.2); border-radius: 30px; background: radial-gradient(circle at 100% 0, rgba(23,105,255,.18), transparent 38%), linear-gradient(150deg, #071d40, #020b1d 70%); }
.basecamp-heading { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(280px,.85fr); gap: 50px; align-items: end; }
.basecamp-heading h2 { max-width: 760px; margin: 8px 0 0; font-size: clamp(40px,5.2vw,68px); line-height: .96; letter-spacing: -.055em; }
.basecamp-heading > p { margin: 0; color: #b7c8dc; font-size: 17px; line-height: 1.68; }
.basecamp-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin-top: 42px; }
.basecamp-tile, .basecamp-grid .journal-card { min-height: 330px; }
.basecamp-tile { display: flex; flex-direction: column; padding: 34px; overflow: hidden; border: 1px solid rgba(126,177,255,.2); border-radius: 23px; color: inherit; background: linear-gradient(150deg, rgba(10,40,88,.9), rgba(3,15,37,.98)); text-decoration: none; transition: transform .2s ease, border-color .2s ease; }
.basecamp-tile:hover { transform: translateY(-4px); border-color: rgba(255,119,56,.58); }
.basecamp-tile > span { color: #ff7738; font-size: 11px; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
.basecamp-tile h3 { max-width: 460px; margin: 58px 0 12px; font-size: clamp(31px,4vw,48px); line-height: .96; letter-spacing: -.045em; }
.basecamp-tile p { max-width: 560px; color: #afc2da; line-height: 1.62; }
.basecamp-tile strong { margin-top: auto; color: #fff; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

.summit-dispatch { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(330px,.85fr); gap: clamp(34px,6vw,90px); align-items: center; margin-top: 34px; padding: clamp(38px,6vw,70px); overflow: hidden; border: 1px solid rgba(255,119,56,.35); border-radius: 30px; background: radial-gradient(circle at 0 100%, rgba(255,104,31,.2), transparent 40%), radial-gradient(circle at 100% 0, rgba(23,105,255,.22), transparent 38%), #061937; box-shadow: 0 30px 80px rgba(0,4,20,.38); scroll-margin-top: 110px; }
.dispatch-copy h2 { margin: 9px 0 14px; font-size: clamp(42px,5.6vw,72px); line-height: .94; letter-spacing: -.06em; }
.dispatch-copy > p:not(.eyebrow) { max-width: 680px; color: #b8c9de; font-size: 17px; line-height: 1.65; }
.dispatch-signals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.dispatch-signals span { padding: 9px 12px; border: 1px solid rgba(126,177,255,.22); border-radius: 999px; color: #d7e6f8; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.dispatch-form { display: grid; gap: 15px; padding: 26px; border: 1px solid rgba(126,177,255,.23); border-radius: 22px; background: rgba(2,12,31,.75); box-shadow: inset 0 1px rgba(255,255,255,.05); }
.dispatch-form label { display: grid; gap: 9px; color: #dce8f8; font-size: 12px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.dispatch-form input { min-height: 54px; padding: 0 16px; border: 1px solid rgba(126,177,255,.24); border-radius: 13px; color: #fff; background: #071731; }
.dispatch-form .button { width: 100%; }
.dispatch-form .form-message { min-height: 20px; margin: 0; color: #9fb3cc; font-size: 12px; line-height: 1.5; }

.basecamp-hero, .journal-hero { display: grid; grid-template-columns: minmax(0,1.18fr) minmax(350px,.82fr); gap: clamp(42px,7vw,96px); align-items: center; min-height: 620px; padding: clamp(48px,7vw,88px); overflow: hidden; border: 1px solid rgba(126,177,255,.22); border-radius: 32px; background: radial-gradient(circle at 86% 12%, rgba(23,105,255,.24), transparent 34%), radial-gradient(circle at 8% 92%, rgba(255,104,31,.14), transparent 34%), linear-gradient(145deg,#061a3a,#020916 72%); box-shadow: 0 45px 120px rgba(0,3,15,.52); }
.basecamp-hero h1, .journal-hero h1 { margin: 12px 0 26px; font-size: clamp(58px,7.6vw,100px); line-height: .87; letter-spacing: -.07em; }
.basecamp-hero h1 span, .journal-hero h1 span { color: #ff7738; }
.basecamp-hero > div > p:not(.eyebrow), .journal-hero > div > p:not(.eyebrow) { max-width: 760px; color: #c3d2e5; font-size: clamp(18px,2vw,21px); line-height: 1.65; }
.basecamp-hero aside, .journal-hero aside { display: grid; gap: 16px; padding: 34px; border: 1px solid rgba(126,177,255,.25); border-radius: 24px; background: rgba(7,28,63,.78); backdrop-filter: blur(14px); }
.basecamp-hero aside > span { color: #ff7738; font-size: 11px; font-weight: 950; letter-spacing: .15em; }
.basecamp-hero aside > strong { padding-bottom: 16px; border-bottom: 1px solid rgba(126,177,255,.16); color: #eef6ff; font-size: 21px; line-height: 1.25; }
.basecamp-hero aside > small { color: #aebfd5; line-height: 1.6; }

.basecamp-loop { margin-top: 34px; padding: clamp(36px,5vw,60px); border: 1px solid rgba(126,177,255,.2); border-radius: 27px; background: linear-gradient(145deg,rgba(8,32,72,.95),rgba(2,12,31,.98)); }
.basecamp-loop-head { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: center; }
.basecamp-loop-head h2 { margin: 7px 0 0; font-size: clamp(36px,4.6vw,58px); line-height: .98; letter-spacing: -.05em; }
.basecamp-loop blockquote { margin: 0; padding: 26px 30px; border-left: 4px solid #ff7738; border-radius: 0 17px 17px 0; color: #f1f7ff; background: rgba(255,104,31,.08); font-size: clamp(20px,2.5vw,29px); font-weight: 780; line-height: 1.35; }
.engagement-loop { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 42px; border: 1px solid rgba(126,177,255,.16); border-radius: 20px; overflow: hidden; }
.engagement-loop article { min-height: 230px; padding: 24px; border-right: 1px solid rgba(126,177,255,.16); background: rgba(3,15,37,.72); }
.engagement-loop article:last-child { border-right: 0; }
.engagement-loop span { color: #ff7738; font-size: 10px; font-weight: 950; letter-spacing: .14em; }
.engagement-loop h3 { margin: 42px 0 10px; font-size: 26px; }
.engagement-loop p { margin: 0; color: #aebfd5; line-height: 1.55; }
.basecamp-loop-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 25px; }

.journal-hero aside h2 { margin: 4px 0 2px; font-size: 36px; line-height: 1; letter-spacing: -.04em; }
.journal-hero aside ul { display: grid; gap: 14px; margin: 10px 0 0; padding: 0; list-style: none; }
.journal-hero aside li { position: relative; padding: 0 0 14px 25px; border-bottom: 1px solid rgba(126,177,255,.15); color: #c5d5e8; line-height: 1.5; }
.journal-hero aside li::before { content: "✓"; position: absolute; left: 0; color: #ff7738; font-weight: 950; }
.journal-lead { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); gap: 20px; margin-top: 32px; }
.journal-lead > aside { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 34px; border: 1px solid rgba(255,119,56,.3); border-radius: 24px; background: linear-gradient(155deg,rgba(255,104,31,.13),rgba(3,15,37,.96)); }
.journal-lead > aside > span { color: #ff7738; font-size: 10px; font-weight: 950; letter-spacing: .15em; }
.journal-lead > aside > strong { padding-bottom: 17px; border-bottom: 1px solid rgba(126,177,255,.15); font-size: 24px; }
.journal-lead > aside > p { color: #adbed3; line-height: 1.6; }
.journal-library { margin-top: 110px; }
.journal-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.journal-card { overflow: hidden; border: 1px solid rgba(126,177,255,.19); border-radius: 24px; background: linear-gradient(155deg,rgba(9,37,81,.94),rgba(2,12,31,.98)); transition: transform .2s ease, border-color .2s ease; }
.journal-card:hover { transform: translateY(-4px); border-color: rgba(255,119,56,.55); }
.journal-card > a { display: flex; flex-direction: column; min-height: 370px; padding: 30px; color: inherit; text-decoration: none; }
.journal-card-meta { display: flex; flex-wrap: wrap; gap: 9px 16px; align-items: center; color: #9fb3cc; font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.journal-card-meta span:first-child { color: #ff7738; }
.journal-card h3, .journal-card h2 { margin: 58px 0 14px; font-size: clamp(28px,3.2vw,42px); line-height: 1; letter-spacing: -.045em; }
.journal-card p { color: #b7c8dc; line-height: 1.62; }
.journal-card-foot { display: flex; gap: 20px; justify-content: space-between; margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(126,177,255,.15); color: #9fb3cc; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.journal-card-foot strong { color: #f3f8ff; }
.journal-featured > a { min-height: 440px; padding: clamp(34px,5vw,56px); }
.journal-featured h2 { max-width: 770px; margin-top: 78px; font-size: clamp(42px,5.5vw,68px); }
.journal-featured p { max-width: 800px; font-size: 18px; }
.editorial-disclosure { display: grid; grid-template-columns: minmax(300px,.8fr) minmax(0,1.2fr); gap: 60px; align-items: center; margin-top: 34px; padding: clamp(34px,5vw,58px); border: 1px solid rgba(126,177,255,.18); border-radius: 26px; background: rgba(5,23,53,.82); }
.editorial-disclosure h2 { margin: 7px 0 0; font-size: clamp(32px,4vw,50px); line-height: 1; }
.editorial-disclosure > p { color: #b7c8dc; line-height: 1.72; }

.journal-entry-site main { width: min(1180px,calc(100% - 48px)); }
.journal-article { margin-top: 26px; }
.journal-article > header { max-width: 980px; padding: clamp(44px,7vw,82px) 0 58px; }
.journal-article > header h1 { margin: 22px 0 25px; font-size: clamp(54px,8vw,96px); line-height: .9; letter-spacing: -.068em; }
.journal-article > header > p { max-width: 820px; color: #c0d0e3; font-size: clamp(19px,2.2vw,24px); line-height: 1.6; }
.editorial-byline { display: flex; gap: 13px; align-items: center; margin-top: 32px; }
.editorial-byline img { width: 48px; height: 48px; border-radius: 12px; object-fit: contain; background: #07152e; }
.editorial-byline div { display: grid; gap: 3px; }
.editorial-byline span { color: #97acc7; font-size: 12px; }
.article-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(290px,.42fr); gap: clamp(46px,8vw,110px); align-items: start; padding: clamp(38px,6vw,70px); border: 1px solid rgba(126,177,255,.18); border-radius: 30px; background: linear-gradient(150deg,rgba(8,32,72,.88),rgba(2,12,31,.98)); }
.article-body { max-width: 740px; }
.article-body section + section { margin-top: 54px; padding-top: 46px; border-top: 1px solid rgba(126,177,255,.16); }
.article-body h2 { margin: 0 0 20px; font-size: clamp(31px,4vw,47px); line-height: 1; letter-spacing: -.045em; }
.article-body p { color: #c1d0e2; font-size: 18px; line-height: 1.82; }
.family-challenge { position: sticky; top: 110px; padding: 28px; border: 1px solid rgba(255,119,56,.38); border-radius: 21px; background: radial-gradient(circle at 100% 0,rgba(255,104,31,.15),transparent 44%),#061937; }
.family-challenge h2 { margin: 7px 0 22px; font-size: 30px; line-height: 1.05; }
.family-challenge ol { display: grid; gap: 14px; padding-left: 24px; }
.family-challenge li { padding-left: 7px; color: #e2ecf8; line-height: 1.55; }
.family-challenge > p:last-child { padding-top: 18px; border-top: 1px solid rgba(126,177,255,.15); color: #9fb3cc; font-size: 12px; line-height: 1.55; }
.article-next { display: flex; gap: 40px; align-items: center; justify-content: space-between; margin-top: 34px; padding: clamp(34px,5vw,58px); border: 1px solid rgba(126,177,255,.2); border-radius: 26px; background: #061937; }
.article-next h2 { margin: 7px 0 10px; font-size: clamp(32px,4vw,48px); }
.article-next p:last-child { max-width: 700px; color: #afc2da; line-height: 1.6; }
.article-next .button { flex: 0 0 auto; }

.ai-provider-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(290px,1fr)); gap: 16px; }
.ai-provider-card { display: grid; align-content: start; gap: 12px; margin: 0; }
.ai-service-token-card { margin-bottom: 16px; }
.ai-service-token-card > h3 { margin-bottom: 6px; }
.ai-token-output { overflow-wrap: anywhere; user-select: all; }
.ai-service-token-row { display: grid; grid-template-columns: minmax(220px,.7fr) minmax(260px,1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid rgba(126,177,255,.15); }
.ai-service-token-row span { color: #9fb3cc; font-size: 13px; }
.ai-provider-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; align-items: center; }
.ai-provider-actions input { min-width: 0; }
.ai-feature-group { margin: 0 0 14px; padding: 0; overflow: hidden; }
.ai-feature-group summary { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 18px 20px; cursor: pointer; text-transform: capitalize; }
.ai-feature-group summary::marker { color: #ff7738; }
.ai-feature-row { display: grid; grid-template-columns: minmax(230px,.8fr) minmax(320px,1.2fr) auto auto; gap: 12px; align-items: center; padding: 14px 20px; border-top: 1px solid rgba(126,177,255,.15); }
.ai-feature-row > div { display: grid; gap: 4px; }
.ai-feature-row small { color: #97acc7; line-height: 1.45; }
.ai-feature-row input[type="checkbox"] { width: 22px; height: 22px; accent-color: #ff7738; }
.ai-usage-table { padding: 0; overflow: hidden; }
.ai-usage-row { display: grid; grid-template-columns: minmax(190px,.75fr) minmax(180px,.75fr) minmax(240px,1.5fr) auto; gap: 8px 16px; align-items: center; padding: 15px 18px; border-bottom: 1px solid rgba(126,177,255,.14); }
.ai-usage-row:last-child { border-bottom: 0; }
.ai-usage-row span { color: #b7c8dc; font-size: 13px; }
.ai-usage-row small { grid-column: 1/-1; color: #8198b5; }

@media (max-width: 1050px) {
  .basecamp-heading, .summit-dispatch, .basecamp-hero, .journal-hero, .journal-lead, .editorial-disclosure, .article-layout { grid-template-columns: 1fr; }
  .gallery-track { grid-template-columns: 1fr; }
  .gallery-frame.gallery-primary { grid-row: auto; }
  .gallery-frame.gallery-primary img { min-height: 0; }
  .engagement-loop { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .engagement-loop article:nth-child(2) { border-right: 0; }
  .engagement-loop article:nth-child(-n+2) { border-bottom: 1px solid rgba(126,177,255,.16); }
  .journal-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .family-challenge { position: static; }
  .ai-feature-row, .ai-usage-row { grid-template-columns: 1fr; align-items: stretch; }
  .ai-service-token-row { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .product-led-site main, .journal-entry-site main { width: min(100% - 28px,1320px); padding-top: 18px; }
  .gallery-heading, .basecamp-heading, .article-next { display: grid; grid-template-columns: 1fr; gap: 20px; }
  .product-gallery, .basecamp-preview, .summit-dispatch, .basecamp-loop, .article-layout { padding: 27px 20px; border-radius: 22px; }
  .basecamp-grid, .journal-grid { grid-template-columns: 1fr; }
  .basecamp-hero, .journal-hero { grid-template-columns: 1fr; min-height: auto; padding: 42px 23px; border-radius: 24px; }
  .basecamp-hero h1, .journal-hero h1 { font-size: clamp(50px,15vw,70px); }
  .basecamp-hero aside, .journal-hero aside { padding: 24px; }
  .basecamp-loop-head { grid-template-columns: 1fr; gap: 24px; }
  .engagement-loop { grid-template-columns: 1fr; }
  .engagement-loop article, .engagement-loop article:nth-child(2) { min-height: 190px; border-right: 0; border-bottom: 1px solid rgba(126,177,255,.16); }
  .engagement-loop article:last-child { border-bottom: 0; }
  .engagement-loop h3 { margin-top: 25px; }
  .journal-card > a { min-height: 330px; padding: 24px; }
  .journal-card h3, .journal-card h2, .journal-featured h2 { margin-top: 42px; }
  .journal-article > header { padding-top: 32px; }
  .journal-article > header h1 { font-size: clamp(47px,14vw,70px); }
  .article-layout { gap: 48px; }
  .article-body p { font-size: 17px; }
  .article-next .button { width: 100%; }
  .ai-provider-actions { grid-template-columns: 1fr; }
}