/* 2026-08-22: additive feature update. Existing HUBBY layout and visual system remain unchanged. */

.hubby-new-grid,
.hubby-playroom-grid {
  display: grid;
  margin-top: 70px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.hubby-new-grid article,
.hubby-playroom-grid article {
  display: flex;
  min-height: 430px;
  padding: 34px;
  border: 1px solid var(--final-line);
  border-radius: var(--final-radius);
  flex-direction: column;
  color: var(--final-ink);
  background: #fff;
}

.hubby-new-grid article:nth-child(2),
.hubby-playroom-grid article:nth-child(2) {
  background: var(--final-cyan-pale);
}

.hubby-new-grid article:nth-child(3),
.hubby-playroom-grid article:nth-child(3) {
  background: var(--final-orange-pale);
}

.hubby-new-grid article > span,
.hubby-playroom-grid article > span {
  color: var(--final-orange);
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .14em;
}

.hubby-new-grid article > i,
.hubby-playroom-grid article > i {
  display: grid;
  width: 88px;
  height: 88px;
  margin: 54px 0 36px;
  place-items: center;
  border: 1px solid var(--final-line);
  border-radius: 24px;
  background: rgba(255, 255, 255, .72);
  font-size: 1.7rem;
  font-style: normal;
  font-weight: 950;
}

.hubby-new-grid h3,
.hubby-playroom-grid h3 {
  margin: 0;
  font-size: clamp(1.7rem, 2.5vw, 2.65rem);
  line-height: 1.08;
}

.hubby-new-grid article > p,
.hubby-playroom-grid article > p {
  margin: 17px 0 0;
  color: var(--final-muted);
  line-height: 1.85;
}

.hubby-new-grid article > a {
  margin-top: auto;
  padding-top: 28px;
  color: var(--cyan-deep);
  font-size: .78rem;
  font-weight: 950;
}

.hubby-proximity {
  display: grid;
  padding: clamp(105px, 10vw, 165px) max(32px, calc((100vw - 1360px) / 2));
  color: #fff;
  background:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    var(--final-ink-deep);
  background-size: 38px 38px;
  grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr);
  gap: clamp(55px, 8vw, 120px);
}

.hubby-proximity-copy > p:first-child {
  display: flex;
  align-items: center;
  margin: 0 0 24px;
  color: var(--final-cyan);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .17em;
  gap: 14px;
}

.hubby-proximity-copy > p:first-child span {
  width: 48px;
  height: 1px;
  background: currentColor;
}

.hubby-proximity-copy h2 {
  margin: 0;
  font-size: clamp(3.5rem, 6.2vw, 7rem);
  line-height: .94;
  letter-spacing: -.075em;
}

.hubby-proximity-copy > p:not(:first-child) {
  margin: 30px 0 0;
  color: rgba(255, 255, 255, .7);
  line-height: 1.95;
}

.hubby-proximity-games {
  display: flex;
  margin-top: 30px;
  flex-wrap: wrap;
  gap: 8px;
}

.hubby-proximity-games span {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  color: var(--final-cyan-bright);
  background: rgba(255, 255, 255, .06);
  font-size: .7rem;
  font-weight: 900;
}

.hubby-proximity-copy .hubby-proximity-note {
  padding: 20px;
  border-left: 3px solid var(--final-orange);
  color: rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .05);
  font-size: .75rem;
  line-height: 1.8;
}

.hubby-connect-steps {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
  list-style: none;
}

.hubby-connect-steps li {
  display: grid;
  min-height: 155px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  grid-template-columns: 62px 1fr;
  gap: 22px;
}

.hubby-connect-steps li > b {
  color: var(--final-orange);
  font-size: .72rem;
  letter-spacing: .12em;
}

.hubby-connect-steps small,
.hubby-connect-steps strong {
  display: block;
}

.hubby-connect-steps small {
  color: var(--final-cyan);
  font-size: .58rem;
  font-weight: 950;
  letter-spacing: .16em;
}

.hubby-connect-steps strong {
  margin-top: 7px;
  font-size: clamp(1.3rem, 2.1vw, 2rem);
  line-height: 1.2;
}

.hubby-connect-steps p {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, .6);
  line-height: 1.75;
}

.hubby-playroom-grid .is-live {
  color: #fff;
  background: var(--final-ink);
}

.hubby-playroom-grid .is-live > p {
  color: rgba(255, 255, 255, .66);
}

.hubby-playroom-grid .is-live > i {
  color: var(--final-ink);
  background: var(--final-cyan);
}

.hubby-idea {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding: 34px;
  color: #fff;
  background: #073642;
  gap: 40px;
}

.hubby-idea small,
.hubby-idea strong {
  display: block;
}

.hubby-idea small {
  color: var(--final-cyan);
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .15em;
}

.hubby-idea strong {
  margin-top: 10px;
  font-size: clamp(1.45rem, 2.3vw, 2.4rem);
  line-height: 1.16;
}

.hubby-idea p {
  max-width: 760px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, .65);
  line-height: 1.75;
}

.hubby-idea .final-button {
  flex: 0 0 auto;
}

.hubby-coming-note {
  margin: 18px 0 0;
  color: var(--final-muted);
  font-size: .72rem;
}

/* Subpages: the additions use the same card and editorial rhythm as the original pages. */
.hubby-feature-links {
  display: grid;
  margin-top: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.hubby-feature-links article {
  min-height: 280px;
  padding: 34px;
  border-radius: 28px;
  background: var(--final-cyan-pale);
}

.hubby-feature-links article:last-child {
  background: var(--final-orange-pale);
}

.hubby-feature-links span {
  color: var(--final-orange);
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .15em;
}

.hubby-feature-links h3 {
  margin: 46px 0 0;
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.05;
}

.hubby-feature-links p {
  max-width: 650px;
  margin: 15px 0 0;
  color: var(--final-muted);
  line-height: 1.85;
}

.hubby-feature-links a {
  display: inline-block;
  margin-top: 24px;
  color: var(--cyan-deep);
  font-size: .78rem;
  font-weight: 950;
}

.hubby-game-badges {
  display: flex;
  margin-top: 15px;
  flex-wrap: wrap;
  gap: 6px;
}

.hubby-game-badges em {
  padding: 5px 8px;
  border: 1px solid rgba(8, 127, 145, .2);
  border-radius: 999px;
  color: var(--cyan-deep);
  background: rgba(255, 255, 255, .68);
  font-size: .58rem;
  font-style: normal;
  font-weight: 950;
}

.hubby-game-badges .is-experimental {
  border-color: rgba(255, 117, 0, .26);
  color: var(--final-orange);
  background: #fff7ef;
}

.sf-game-card .hubby-game-badges {
  margin-top: 18px;
}

.sf-game-card .hubby-game-badges + small {
  margin-top: 10px;
}

.hubby-guide-proximity {
  padding: clamp(105px, 10vw, 160px) max(32px, calc((100vw - 1360px) / 2));
  color: #fff;
  background: var(--final-ink);
}

.hubby-guide-proximity .sf-heading > div p {
  color: rgba(255, 255, 255, .68);
}

.hubby-guide-proximity .sf-heading > div span {
  padding: 8px 12px;
  color: var(--final-orange);
  background: rgba(255, 255, 255, .08);
}

.hubby-guide-proximity .hubby-connect-steps {
  display: grid;
  margin-top: 65px;
  border: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.hubby-guide-proximity .hubby-connect-steps li {
  display: block;
  min-height: 390px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: #062630;
}

.hubby-guide-proximity .hubby-proximity-note {
  margin: 28px 0 0;
  padding: 20px;
  border-left: 3px solid var(--final-orange);
  color: rgba(255, 255, 255, .62);
  background: rgba(255, 255, 255, .05);
  font-size: .76rem;
  line-height: 1.85;
}

.sf-beta-ticket dd,
.final-beta-ticket dd {
  white-space: nowrap;
}

.final-hero-app-shot {
  position: relative;
  z-index: 2;
  width: min(300px, 72%);
  margin: 0;
  overflow: hidden;
  border: 8px solid #041d24;
  border-radius: 38px;
  background: #cdf6fa;
  box-shadow: 0 38px 90px rgba(0, 0, 0, .4);
  transform: rotate(.8deg);
}

.final-hero-product {
  isolation: isolate;
}

.final-hero-product::before,
.final-hero-product::after {
  z-index: 0;
  pointer-events: none;
}

.final-hero-product-duo::after {
  display: none;
}

.final-hero-app-shot-primary {
  z-index: 3;
  transform: translateX(-9%) rotate(.8deg);
}

.final-hero-app-shot-secondary {
  position: absolute;
  z-index: 1;
  top: 13%;
  right: -2%;
  width: min(270px, 65%);
  border: 3px solid var(--final-orange);
  border-radius: 34px;
  background: #041416;
  box-shadow: 0 30px 75px rgba(0, 0, 0, .34);
  transform: rotate(8deg);
}

.final-hero-app-shot img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 720px) {
  .final-hero-product {
    min-height: 0 !important;
    padding: 24px 16px 30px !important;
  }

  .final-hero-app-shot {
    width: min(270px, 72vw);
    border-width: 5px;
    border-radius: 27px;
    box-shadow: 0 24px 55px rgba(0, 0, 0, .36);
    transform: rotate(.35deg);
  }

  .final-hero-app-shot-primary {
    width: min(258px, 68vw);
    transform: translateX(-8%) rotate(.35deg);
  }

  .final-hero-app-shot-secondary {
    top: 10%;
    right: -7%;
    width: min(230px, 60vw);
    border-width: 2px;
    border-radius: 25px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .32);
    transform: rotate(7deg);
  }

  .hubby-new-grid,
  .hubby-playroom-grid,
  .hubby-feature-links,
  .hubby-guide-proximity .hubby-connect-steps {
    display: flex;
    width: calc(100% + 16px);
    margin: 40px -16px 0 0;
    padding: 0 16px 18px 0;
    overflow-x: auto;
    gap: 10px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .hubby-new-grid::-webkit-scrollbar,
  .hubby-playroom-grid::-webkit-scrollbar,
  .hubby-feature-links::-webkit-scrollbar,
  .hubby-guide-proximity .hubby-connect-steps::-webkit-scrollbar {
    display: none;
  }

  .hubby-new-grid article,
  .hubby-playroom-grid article,
  .hubby-feature-links article,
  .hubby-guide-proximity .hubby-connect-steps li {
    flex: 0 0 min(84vw, 350px);
    min-height: 500px;
    padding: 25px 22px;
    scroll-snap-align: start;
  }

  .hubby-new-grid article > i,
  .hubby-playroom-grid article > i {
    margin: 45px 0 30px;
  }

  .hubby-proximity {
    display: block;
    padding: 78px 16px;
  }

  .hubby-proximity-copy h2 {
    font-size: clamp(2.8rem, 12.3vw, 4.2rem);
  }

  .hubby-connect-steps {
    margin-top: 48px;
  }

  .hubby-connect-steps li {
    grid-template-columns: 44px 1fr;
    gap: 14px;
  }

  .hubby-idea {
    display: block;
    padding: 26px 22px;
  }

  .hubby-idea .final-button {
    display: inline-flex;
    margin-top: 24px;
  }

  .hubby-feature-links article {
    min-height: 390px;
  }

  .hubby-guide-proximity {
    padding: 78px 16px;
  }

  .hubby-guide-proximity .hubby-connect-steps {
    width: calc(100% + 16px);
  }

  .sf-beta-ticket dd,
  .final-beta-ticket dd {
    font-size: .72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hubby-new-grid,
  .hubby-playroom-grid,
  .hubby-feature-links,
  .hubby-guide-proximity .hubby-connect-steps {
    scroll-behavior: auto;
  }
}

/* HUBBY CONNECT download and product page. */
.connect-page {
  --connect-cyan: #19d6e8;
  --connect-blue: #477ff2;
  --connect-ink: #051c23;
  --connect-line: rgba(25, 214, 232, .22);
  color: #f4fcfd;
  background: var(--connect-ink);
}

.connect-page p,
.connect-page h1,
.connect-page h2,
.connect-page h3,
.connect-page dl,
.connect-page ol {
  margin-top: 0;
}

.connect-hero {
  position: relative;
  display: grid;
  min-height: min(880px, calc(100dvh - 82px));
  padding: clamp(90px, 9vw, 145px) max(32px, calc((100vw - 1360px) / 2));
  overflow: hidden;
  align-items: center;
  grid-template-columns: minmax(0, .88fr) minmax(450px, 1.12fr);
  gap: clamp(55px, 8vw, 120px);
  background:
    radial-gradient(circle at 78% 23%, rgba(25, 214, 232, .2), transparent 32%),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    #051c23;
  background-size: auto, 42px 42px, 42px 42px, auto;
}

.connect-hero::after {
  position: absolute;
  right: -12%;
  bottom: -45%;
  width: 760px;
  height: 760px;
  border: 1px solid rgba(25, 214, 232, .16);
  border-radius: 50%;
  box-shadow: 0 0 0 90px rgba(25, 214, 232, .025), 0 0 0 180px rgba(25, 214, 232, .018);
  content: "";
}

.connect-hero-copy {
  position: relative;
  z-index: 2;
}

.connect-hero-copy > p:first-child,
.connect-download header > p,
.connect-flow header > p,
.connect-safety > div > p:first-child,
.connect-adapters header > p {
  color: var(--connect-cyan);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .18em;
}

.connect-hero-copy h1 {
  display: grid;
  margin-bottom: 25px;
  font-size: clamp(4rem, 7vw, 7.6rem);
  line-height: .84;
  letter-spacing: -.085em;
  gap: .12em;
}

.connect-hero-copy h1 span,
.connect-hero-copy h1 em {
  display: block;
  color: var(--connect-cyan);
  font-style: normal;
}

.connect-hero-copy h1 span { color: #f4fcfd; }

.connect-hero-copy > strong {
  display: block;
  max-width: 620px;
  font-size: clamp(1.25rem, 2vw, 2rem);
  line-height: 1.4;
}

.connect-hero-copy > p:not(:first-child) {
  max-width: 650px;
  margin: 22px 0 0;
  color: rgba(244, 252, 253, .66);
  line-height: 1.9;
}

.connect-actions {
  display: flex;
  margin-top: 34px;
  flex-wrap: wrap;
  gap: 10px;
}

.connect-console {
  position: relative;
  z-index: 2;
  border: 1px solid rgba(25, 214, 232, .42);
  border-radius: 26px;
  overflow: hidden;
  background: rgba(4, 24, 30, .9);
  box-shadow: 0 48px 110px rgba(0, 0, 0, .46), 0 0 80px rgba(25, 214, 232, .1);
  transform: perspective(1200px) rotateY(-5deg) rotateX(2deg);
}

.connect-console-top {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(25, 214, 232, .16);
  gap: 10px;
}

.connect-console-top > span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff785d;
}

.connect-console-top > span:nth-child(2) { background: #ffc459; }
.connect-console-top > span:nth-child(3) { background: #59d889; }
.connect-brand-icon { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; }
.connect-console-top b { font-size: .7rem; letter-spacing: .12em; }
.connect-console-top em { margin-left: auto; color: rgba(255, 255, 255, .38); font-size: .6rem; font-style: normal; }

.connect-console-body {
  padding: clamp(28px, 4vw, 52px);
}

.connect-console-body > p {
  color: var(--connect-cyan);
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .16em;
}

.connect-console-body h2 {
  margin-bottom: 7px;
  font-size: clamp(3rem, 5vw, 5.6rem);
  letter-spacing: -.06em;
}

.connect-console-body > strong {
  color: rgba(255, 255, 255, .72);
}

.connect-console-body dl {
  display: grid;
  margin: 36px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.connect-console-body dl div {
  display: flex;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  justify-content: space-between;
  gap: 18px;
}

.connect-console-body dt { color: rgba(255, 255, 255, .38); font-size: .58rem; font-weight: 900; letter-spacing: .14em; }
.connect-console-body dd { margin: 0; color: var(--connect-cyan); font-family: ui-monospace, monospace; font-size: .7rem; }

.connect-pulse {
  display: flex;
  align-items: center;
  margin-top: 36px;
}

.connect-pulse i {
  width: 13px;
  height: 13px;
  border: 3px solid var(--connect-cyan);
  border-radius: 50%;
  box-shadow: 0 0 18px var(--connect-cyan);
}

.connect-pulse span {
  position: relative;
  width: 50%;
  height: 1px;
  overflow: hidden;
  background: rgba(25, 214, 232, .22);
}

.connect-pulse span::after {
  position: absolute;
  width: 38%;
  height: 100%;
  background: var(--connect-cyan);
  animation: connect-signal 1.6s linear infinite;
  content: "";
}

@keyframes connect-signal {
  from { transform: translateX(-110%); }
  to { transform: translateX(360%); }
}

.connect-download,
.connect-flow,
.connect-adapters {
  padding: clamp(95px, 10vw, 155px) max(32px, calc((100vw - 1360px) / 2));
}

.connect-download {
  color: #06252d;
  background: #f4f2ec;
}

.connect-download header,
.connect-flow header,
.connect-adapters header {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  gap: clamp(40px, 8vw, 120px);
}

.connect-download header > p,
.connect-flow header > p,
.connect-adapters header > p { grid-column: 1 / -1; margin-bottom: -20px; }
.connect-download header h2,
.connect-flow header h2,
.connect-adapters header h2 { margin-bottom: 0; font-size: clamp(3rem, 5.6vw, 6.4rem); line-height: .96; letter-spacing: -.07em; }
.connect-download header > span { align-self: end; max-width: 520px; color: #60777b; line-height: 1.8; }
.connect-game-flow header > span { align-self: end; max-width: 560px; color: rgba(255, 255, 255, .6); line-height: 1.8; }

.connect-download-grid {
  display: grid;
  margin-top: 75px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.connect-download-grid article {
  display: flex;
  min-height: 610px;
  padding: clamp(28px, 4vw, 50px);
  border: 1px solid rgba(6, 37, 45, .14);
  border-radius: 30px;
  flex-direction: column;
  background: #fff;
}

.connect-download-grid article.is-available { color: #fff; background: #072b34; }
.connect-download-grid article > div:first-child { display: flex; align-items: center; justify-content: space-between; }
.connect-download-grid article > div:first-child span { color: #ff7900; font-size: .63rem; font-weight: 950; letter-spacing: .16em; }
.connect-download-grid article > div:first-child b { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 18px; background: rgba(25, 214, 232, .12); color: var(--connect-cyan); font-size: 1.6rem; }
.connect-download-grid h3 { margin: 48px 0 0; font-size: clamp(3rem, 5vw, 5.5rem); letter-spacing: -.06em; }
.connect-download-grid article > p { margin: 16px 0 0; color: #647a7e; line-height: 1.8; }
.connect-download-grid .is-available > p { color: rgba(255, 255, 255, .64); }
.connect-download-grid dl { margin: 30px 0 0; border-top: 1px solid rgba(6, 37, 45, .12); }
.connect-download-grid .is-available dl { border-color: rgba(255, 255, 255, .14); }
.connect-download-grid dl div { display: flex; padding: 12px 0; border-bottom: 1px solid rgba(6, 37, 45, .12); justify-content: space-between; }
.connect-download-grid .is-available dl div { border-color: rgba(255, 255, 255, .14); }
.connect-download-grid dt { color: #7c9195; font-size: .62rem; font-weight: 950; letter-spacing: .13em; }
.connect-download-grid dd { margin: 0; font-weight: 800; }

.connect-download-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding: 18px 20px;
  color: #04252d;
  background: var(--connect-cyan);
  font-size: .8rem;
  font-weight: 950;
}

.connect-download-button.is-disabled { color: #718489; background: #e7e7e2; cursor: not-allowed; }
.connect-sdk-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding: 14px 18px;
  border: 1px solid rgba(77, 230, 245, .45);
  color: #8bf2fb;
  font-size: .72rem;
  font-weight: 900;
}
.connect-sdk-button span { color: rgba(255, 255, 255, .52); }
.connect-sdk-button b { font: inherit; }
.connect-download-grid article > small { margin-top: 14px; color: #7e9296; font-size: .66rem; line-height: 1.6; }
.connect-download-grid .is-available > small { color: rgba(255, 255, 255, .48); }

.connect-developer-kit {
  display: grid;
  align-items: center;
  margin-top: 14px;
  padding: 24px 30px;
  border: 1px solid rgba(6, 37, 45, .14);
  background: #fff;
  grid-template-columns: 1fr minmax(260px, 360px);
  gap: 30px;
}
.connect-developer-kit strong { display: block; }
.connect-developer-kit p { margin: 6px 0 0; color: #65797d; line-height: 1.65; }
.connect-developer-kit .connect-sdk-button { margin: 0; border-color: rgba(6, 37, 45, .28); color: #06252d; }
.connect-developer-kit .connect-sdk-button span { color: #718489; }

.connect-alpha-warning {
  display: grid;
  margin-top: 14px;
  padding: 28px 32px;
  border-left: 4px solid #ff7900;
  background: #fff4e9;
  grid-template-columns: 210px 1fr;
  gap: 30px;
}

.connect-alpha-warning p { margin: 0; color: #65797d; line-height: 1.7; }
.connect-alpha-warning code { font-size: .72rem; }

.connect-flow { background: #0a2b34; }
.connect-flow header { color: #fff; }
.connect-flow ol { display: grid; margin: 75px 0 0; padding: 0; border-top: 1px solid var(--connect-line); list-style: none; }
.connect-flow li { display: grid; min-height: 170px; padding: 30px 0; border-bottom: 1px solid var(--connect-line); grid-template-columns: 90px 1fr; gap: 22px; }
.connect-flow li > b { color: #ff7900; font-size: .72rem; letter-spacing: .14em; }
.connect-flow li small,
.connect-flow li strong { display: block; }
.connect-flow li small { color: var(--connect-cyan); font-size: .6rem; font-weight: 950; letter-spacing: .15em; }
.connect-flow li strong { margin-top: 6px; font-size: clamp(1.45rem, 2.6vw, 2.5rem); }
.connect-flow li p { max-width: 850px; margin: 12px 0 0; color: rgba(255, 255, 255, .58); line-height: 1.8; }

.connect-game-flow { background: #071f27; }
.connect-platform-guide { display: grid; margin-top: 75px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.connect-platform-guide article { min-height: 280px; padding: 32px; border: 1px solid var(--connect-line); border-radius: 28px; background: rgba(255, 255, 255, .035); }
.connect-platform-guide article:last-child { background: rgba(25, 214, 232, .08); }
.connect-platform-guide article > span { color: #ff7900; font-size: .62rem; font-weight: 950; letter-spacing: .15em; }
.connect-platform-guide h3 { margin: 52px 0 0; font-size: clamp(1.7rem, 3vw, 3rem); letter-spacing: -.04em; }
.connect-platform-guide p { margin: 18px 0 0; color: rgba(255, 255, 255, .6); line-height: 1.85; }
.connect-game-note { display: grid; margin-top: 28px; padding: 28px 32px; border-left: 4px solid #ff7900; background: rgba(255, 121, 0, .08); grid-template-columns: 210px 1fr; gap: 30px; }
.connect-game-note p { margin: 0; color: rgba(255, 255, 255, .64); line-height: 1.75; }

.connect-safety {
  display: grid;
  padding: clamp(95px, 10vw, 155px) max(32px, calc((100vw - 1360px) / 2));
  color: #092a32;
  background: var(--connect-cyan);
  grid-template-columns: minmax(0, 1.15fr) minmax(350px, .85fr);
  gap: clamp(50px, 9vw, 130px);
}

.connect-safety > div h2 { margin-bottom: 24px; font-size: clamp(3.2rem, 6vw, 7rem); line-height: .9; letter-spacing: -.075em; }
.connect-safety > div > p:last-child { max-width: 770px; line-height: 1.9; }
.connect-safety dl { margin: 0; border-top: 1px solid rgba(9, 42, 50, .28); }
.connect-safety dl div { padding: 22px 0; border-bottom: 1px solid rgba(9, 42, 50, .28); }
.connect-safety dt { font-size: .64rem; font-weight: 950; letter-spacing: .15em; }
.connect-safety dd { margin: 7px 0 0; font-size: 1.25rem; font-weight: 900; }

.connect-adapters { color: #06252d; background: #f4f2ec; }
.connect-adapters > div { display: grid; margin-top: 75px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.connect-adapters article { min-height: 390px; padding: 32px; border: 1px solid rgba(6, 37, 45, .14); border-radius: 28px; background: #fff; }
.connect-adapters article:nth-child(1) { color: #fff; background: #072b34; }
.connect-adapters article:nth-child(2) { background: #e7f9fb; }
.connect-adapters article:nth-child(3) { background: #fff0df; }
.connect-adapters article > span { color: #ff7900; font-size: .62rem; font-weight: 950; letter-spacing: .15em; }
.connect-adapters h3 { margin: 72px 0 0; font-size: clamp(2.2rem, 3.5vw, 4rem); letter-spacing: -.05em; }
.connect-adapters article p { margin: 18px 0 0; color: #64797d; line-height: 1.85; }
.connect-adapters article:first-child p { color: rgba(255, 255, 255, .6); }

@media (max-width: 980px) {
  .connect-hero { grid-template-columns: 1fr; }
  .connect-console { max-width: 720px; transform: none; }
  .connect-download header,
  .connect-flow header,
  .connect-adapters header { grid-template-columns: 1fr; }
  .connect-download header > p,
  .connect-flow header > p,
  .connect-adapters header > p { margin-bottom: 0; }
  .connect-safety { grid-template-columns: 1fr; }
  .connect-adapters > div { grid-template-columns: 1fr; }
  .connect-platform-guide { grid-template-columns: 1fr; }
  .connect-adapters article { min-height: 320px; }
}

@media (max-width: 720px) {
  .connect-hero,
  .connect-download,
  .connect-flow,
  .connect-safety,
  .connect-adapters { padding: 76px 16px; }
  .connect-hero { min-height: 0; }
  .connect-hero-copy h1 { font-size: clamp(3.4rem, 17vw, 5rem); line-height: .86; gap: .1em; }
  .connect-actions { display: grid; }
  .connect-actions .final-button { justify-content: space-between; }
  .connect-console-body { padding: 24px 20px; }
  .connect-console-body dl div { display: block; }
  .connect-console-body dd { margin-top: 5px; overflow-wrap: anywhere; }
  .connect-download-grid { display: flex; width: calc(100% + 16px); margin-right: -16px; padding: 0 16px 18px 0; overflow-x: auto; scroll-snap-type: x mandatory; }
  .connect-download-grid article { flex: 0 0 min(88vw, 380px); min-height: 610px; scroll-snap-align: start; }
  .connect-developer-kit { grid-template-columns: 1fr; gap: 18px; }
  .connect-alpha-warning { grid-template-columns: 1fr; gap: 10px; }
  .connect-game-note { grid-template-columns: 1fr; gap: 10px; }
  .connect-flow li { grid-template-columns: 46px 1fr; gap: 12px; }
  .connect-safety dl { margin-top: 15px; }
  .connect-adapters article h3 { margin-top: 45px; }
}

@media (prefers-reduced-motion: reduce) {
  .connect-pulse span::after { animation: none; }
}