/* CLS hardening: this layout layer is loaded by the initial document. */
/* Root-hub interaction layer. Loaded only by each domain's main index page. */
.do-hub-polish {
  --do-motion-accent: var(--accent, #8f7cff);
  --do-motion-surface: var(--panel, rgba(255,255,255,.08));
  --do-page-padding-left: 0px;
  --do-page-padding-right: 0px;
  --do-viewport-width: 100vw;
}

body.do-hub-polish[data-do-site="extra"] {
  color: var(--ink);
  color-scheme: dark;
}

body.do-hub-polish[data-do-site="extra"] .hero::after {
  content: none;
}

body.do-hub-polish[data-do-site="extra"] .do-domain-orbit-core {
  background: linear-gradient(135deg, #ff8d76, #65def1);
}

body.do-hub-polish:is([data-do-site="generator"],[data-do-site="developer"]) .hero-actions a[href="#collection"] {
  display: none;
}

body.do-hub-polish[data-do-site="games"] .submit-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  text-decoration: none;
}

body.do-hub-polish {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}

body.do-hub-polish > .do-network-bar {
  position: sticky;
  top: 0;
  left: auto;
  width: calc(100% + var(--do-page-padding-left) + var(--do-page-padding-right));
  max-width: none;
  margin-left: calc(-1 * var(--do-page-padding-left));
  transform: none;
  align-self: stretch;
  flex: 0 0 auto;
  border-bottom: 1px solid color-mix(in srgb, var(--do-motion-accent) 30%, #3b4350);
  background: color-mix(in srgb, #0d1118 94%, var(--do-motion-accent) 6%);
  box-shadow: 0 12px 34px rgba(0,0,0,.28), inset 0 -1px rgba(255,255,255,.035);
}

body.do-hub-polish .do-network-logo-mark {
  background: linear-gradient(135deg, #72d6ee, #b8ee72);
  color: #0c1018;
}

/* Keep the full network visible on laptops by compacting it. The existing
   base breakpoint still switches to Menu at 1180px and below. */
@media (min-width: 1181px) and (max-width: 1600px) {
  body.do-hub-polish .do-network-inner {
    box-sizing: border-box;
    width: calc(100% - 28px);
    max-width: none;
    min-height: 52px;
    margin-right: 14px;
    margin-left: 14px;
    padding: 0;
    display: flex;
    gap: .75rem;
  }

  body.do-hub-polish .do-network-logo {
    min-width: max-content;
    margin: 0;
    font-size: .72rem;
  }

  body.do-hub-polish .do-network-toggle {
    display: none;
  }

  body.do-hub-polish .do-network-links {
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: .08rem;
    padding-top: 0;
  }

  body.do-hub-polish .do-network-links a {
    box-sizing: border-box;
    flex: 0 0 auto;
    min-height: 32px;
    padding: .4rem .46rem;
    font-size: .66rem;
  }
}

/* The global bar is the single hub header. Hide each site's older local copy. */
body.do-hub-polish :is(
  header.site-header,
  header.masthead,
  header.hub-header,
  nav.network-nav
) {
  display: none !important;
}

/* One compact footer for every hub. The domain directory already lives above. */
body.do-hub-polish footer {
  position: relative;
  left: 50%;
  box-sizing: border-box;
  width: var(--do-viewport-width) !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  transform: translateX(-50%);
  padding-right: clamp(20px, 4vw, 64px) !important;
  padding-left: clamp(20px, 4vw, 64px) !important;
  border-top: 1px solid color-mix(in srgb, var(--do-motion-accent) 24%, var(--border, rgba(255,255,255,.12)));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--panel, #141820) 91%, var(--do-motion-accent) 9%),
    color-mix(in srgb, var(--bg, #0d1017) 95%, #000)
  );
  box-shadow: 0 -12px 38px rgba(0,0,0,.16);
}

body.do-hub-polish .do-standard-footer {
  padding-top: clamp(26px, 4vw, 44px) !important;
  padding-bottom: clamp(26px, 4vw, 44px) !important;
}

body.do-hub-polish[data-do-site="developer"] .do-support-cta {
  margin-top: clamp(4rem, 7vw, 7rem);
  margin-bottom: clamp(5rem, 8vw, 8rem);
}

.do-standard-footer .do-footer-inner {
  display: grid;
  grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr);
  gap: 24px 48px;
  width: min(1280px, 100%);
  margin: 0 auto;
  align-items: center;
}

.do-standard-footer .do-footer-brand {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.do-standard-footer .do-footer-brand strong {
  color: var(--ink, var(--text, #f7f7f5));
  font-size: .98rem;
}

.do-standard-footer .do-footer-brand > span {
  color: color-mix(in srgb, var(--do-motion-accent) 72%, white);
  font-size: .79rem;
  font-weight: 760;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.do-standard-footer .do-footer-brand small {
  margin-top: 7px;
  color: var(--muted, #aeb8c8);
  font-size: .78rem;
}

body.do-hub-polish footer :is(nav, .footer-network, .footer-links) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .38rem 1.15rem;
  max-width: 100%;
}

.do-standard-footer .do-footer-actions { justify-content: flex-end; }

body.do-hub-polish footer :is(nav, .footer-network, .footer-links) a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: .42rem .12rem;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  line-height: 1.1;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease;
  color: color-mix(in srgb, var(--do-footer-color, var(--do-motion-accent)) 58%, white);
}

body.do-hub-polish footer :is(nav, .footer-network, .footer-links) a::before {
  content: none;
}

body.do-hub-polish footer a[data-do-footer-site="main"] { --do-footer-color: #b8ee72; }
body.do-hub-polish footer a[data-do-footer-site="tools"] { --do-footer-color: #65def1; }
body.do-hub-polish footer a[data-do-footer-site="extra"] { --do-footer-color: #ff8d76; }
body.do-hub-polish footer a[data-do-footer-site="games"] { --do-footer-color: #c89cff; }
body.do-hub-polish footer a[data-do-footer-site="education"] { --do-footer-color: #a8df82; }
body.do-hub-polish footer a[data-do-footer-site="creative"] { --do-footer-color: #ff8fc7; }
body.do-hub-polish footer a[data-do-footer-site="generator"] { --do-footer-color: #b6a0ff; }
body.do-hub-polish footer a[data-do-footer-site="developer"] { --do-footer-color: #59e0c1; }
body.do-hub-polish footer a[data-do-footer-site="services"] { --do-footer-color: #ffbd69; }
body.do-hub-polish footer a[data-do-footer-site="socialmedia"] { --do-footer-color: #78adff; }
body.do-hub-polish footer a[data-do-footer-site="contact"] { --do-footer-color: #ff9f7a; }
body.do-hub-polish footer a[data-do-footer-site="privacy"] { --do-footer-color: #8fc4ff; }
body.do-hub-polish footer a[data-do-footer-site="terms"] { --do-footer-color: #c4a7ff; }
body.do-hub-polish footer a[data-do-footer-site="copyright"] { --do-footer-color: #f4c46f; }
body.do-hub-polish footer a[data-do-footer-site="settings"] { --do-footer-color: #8bd8c7; }

body.do-hub-polish footer :is(nav, .footer-network, .footer-links) a:is(:hover, :focus-visible) {
  color: color-mix(in srgb, var(--do-motion-accent) 68%, white);
  border-bottom-color: currentColor;
  background: transparent;
  transform: translateY(-1px);
}

.do-hub-polish [hidden] { display: none !important; }

.do-hub-polish :is(
  main > section:not(.hero):not(.hub-hero):not(.do-domain-orbit-section):not(.do-education-orbit-host):not(.do-support-cta):not(.faq-panel):not(.trust-panel):not(.contact-section):not(.contact-strip),
  .collection-section,
  .education-about
) {
  position: relative;
  border-top: 0 !important;
}

.do-hub-polish :is(
  main > section:not(.hero):not(.hub-hero):not(.do-domain-orbit-section):not(.do-education-orbit-host):not(.do-support-cta):not(.faq-panel):not(.trust-panel):not(.contact-section):not(.contact-strip),
  .collection-section,
  .education-about
)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--do-motion-accent) 26%, var(--border, #3b4350)) 14% 86%, transparent);
  pointer-events: none;
}

/* Extra already receives the shared collection divider; its original
   block border otherwise draws a second rule above and below the process. */
body.do-hub-polish[data-do-site="extra"] .process {
  border-block: 0;
}

body.do-hub-polish:is([data-do-site="generator"],[data-do-site="developer"]) .hub-hero {
  min-height: auto;
  padding-top: clamp(62px, 8vw, 108px);
  padding-bottom: clamp(56px, 7vw, 92px);
}

body.do-hub-polish:is([data-do-site="generator"],[data-do-site="developer"]) .collection-section {
  padding: clamp(38px, 5vw, 62px) 0 20px;
}

.do-hub-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin: clamp(34px, 5vw, 64px) 0 10px;
}
.do-hub-search label { min-width: 0; }
.do-hub-search input {
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid color-mix(in srgb, var(--do-motion-accent) 35%, var(--border, #3b4350));
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel, #141820) 92%, transparent);
  color: inherit;
  font: inherit;
  outline: none;
}
.do-hub-search input:focus {
  border-color: var(--do-motion-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--do-motion-accent) 18%, transparent);
}
.do-hub-search-status {
  min-width: 112px;
  color: var(--muted, #aeb8c8);
  font-size: .86rem;
  text-align: right;
}

.do-collapsible-section .section-heading {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between;
  gap: 24px !important;
  margin-bottom: 24px;
}
.do-section-heading-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
  max-width: 920px;
}
.do-section-heading-copy h2 { margin: 0 !important; }
.do-section-toggle {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--do-motion-accent) 42%, var(--border, #3b4350));
  border-radius: 999px;
  background: color-mix(in srgb, var(--do-motion-accent) 9%, var(--panel, #141820));
  color: color-mix(in srgb, var(--do-motion-accent) 72%, white);
  font: 750 .84rem/1 system-ui, sans-serif;
  cursor: pointer;
}
.do-section-toggle:hover,
.do-section-toggle:focus-visible { border-color: var(--do-motion-accent); }

body.do-hub-polish::before,
body.do-hub-polish::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  inset: -34vmax;
  will-change: transform;
}

body.do-hub-polish::before {
  background:
    radial-gradient(circle at 22% 28%, color-mix(in srgb, var(--do-motion-accent) 30%, transparent) 0 10%, transparent 32%),
    radial-gradient(circle at 76% 36%, color-mix(in srgb, var(--accent-two, var(--do-motion-accent)) 24%, transparent) 0 9%, transparent 30%),
    radial-gradient(circle at 54% 78%, color-mix(in srgb, var(--do-motion-accent) 18%, transparent) 0 12%, transparent 34%);
  opacity: .72;
  filter: blur(28px) saturate(1.12);
  animation: do-ambient-drift-a 22s ease-in-out infinite alternate;
}

body.do-hub-polish::after {
  background: conic-gradient(
    from 35deg at 50% 50%,
    transparent 0 20%,
    color-mix(in srgb, var(--do-motion-accent) 14%, transparent) 29%,
    transparent 42% 68%,
    color-mix(in srgb, var(--accent-two, var(--do-motion-accent)) 12%, transparent) 78%,
    transparent 90%
  );
  opacity: .5;
  filter: blur(42px);
  animation: do-ambient-drift-b 30s linear infinite;
}

@keyframes do-ambient-drift-a {
  0% { transform: translate3d(-3%, -2%, 0) scale(.96) rotate(-3deg); }
  45% { transform: translate3d(4%, 1%, 0) scale(1.04) rotate(2deg); }
  100% { transform: translate3d(-1%, 5%, 0) scale(1.01) rotate(5deg); }
}

@keyframes do-ambient-drift-b {
  0% { transform: rotate(0deg) scale(.94); }
  50% { transform: rotate(180deg) scale(1.06); }
  100% { transform: rotate(360deg) scale(.94); }
}

.do-hub-polish :is(
  a.primary-button,
  a.hero-button,
  a.button,
  a.nav-cta,
  a.header-cta,
  a.tpt-cta,
  a.play,
  .hero-actions > a,
  .suite-card > a
) {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .72rem 1rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--do-motion-accent) 48%, var(--border, transparent));
  border-radius: 999px;
  background: color-mix(in srgb, var(--do-motion-accent) 13%, var(--do-motion-surface));
  color: inherit;
  font-weight: 800;
  line-height: 1.15;
  text-decoration: none;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--do-motion-accent) 12%, transparent);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}

.do-hub-polish :is(
  a.primary-button,
  a.hero-button,
  a.button.primary,
  a.nav-cta,
  a.header-cta,
  a.tpt-cta,
  a.play
) {
  background: linear-gradient(135deg, var(--do-motion-accent), color-mix(in srgb, var(--do-motion-accent) 62%, #ffffff));
  color: var(--bg, #11131a);
  border-color: transparent;
}

.do-hub-polish :is(
  a.primary-button,
  a.hero-button,
  a.button,
  a.nav-cta,
  a.header-cta,
  a.tpt-cta,
  a.play,
  .hero-actions > a,
  .suite-card > a
)::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(105deg, transparent 22%, rgba(255,255,255,.28) 48%, transparent 72%);
  transform: translateX(-140%);
  transition: transform .55s ease;
}

.do-hub-polish :is(
  a.primary-button,
  a.hero-button,
  a.button,
  a.nav-cta,
  a.header-cta,
  a.tpt-cta,
  a.play,
  .hero-actions > a,
  .suite-card > a
):is(:hover, :focus-visible) {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--do-motion-accent) 74%, white);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--do-motion-accent) 22%, transparent);
}

.do-hub-polish :is(
  a.primary-button,
  a.hero-button,
  a.button,
  a.nav-cta,
  a.header-cta,
  a.tpt-cta,
  a.play,
  .hero-actions > a,
  .suite-card > a
):is(:hover, :focus-visible)::after { transform: translateX(140%); }

.do-hub-polish .suite-card > a {
  width: fit-content;
  max-width: 100%;
  border-radius: .8rem;
  text-align: left;
}

.do-hub-polish :is(
  .network-card,
  .card,
  .tool-card,
  .service-card,
  .suite-card,
  .profile-card,
  .network-grid > a,
  .trust > article
) {
  transform: translateZ(0);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  transition: transform .26s cubic-bezier(.2,.72,.22,1), border-color .26s ease, box-shadow .26s ease, filter .26s ease;
}

.do-hub-polish :is(
  .network-card,
  .card,
  .tool-card,
  .service-card,
  .suite-card,
  .profile-card,
  .network-grid > a,
  .trust > article
) :is(h2, h3) {
  transition: color .24s ease, transform .24s ease;
}

.do-hub-polish :is(
  .network-card,
  .card,
  .tool-card,
  .service-card,
  .suite-card,
  .profile-card,
  .network-grid > a,
  .trust > article
) :is(.icon, .card-icon, .tool-icon, .profile-icon) {
  transition: transform .28s cubic-bezier(.2,.72,.22,1), filter .28s ease;
}

.do-hub-polish :is(
  a.network-card,
  a.card,
  a.tool-card,
  a.profile-card,
  .network-grid > a
):is(:hover, :focus-visible),
.do-hub-polish :is(.service-card, .suite-card, .trust > article):hover {
  transform: translateY(-5px) scale(1.008);
  border-color: color-mix(in srgb, var(--do-motion-accent) 58%, var(--border, transparent));
  box-shadow: 0 22px 52px color-mix(in srgb, var(--do-motion-accent) 14%, rgba(0,0,0,.16));
  filter: saturate(1.035) brightness(1.015);
}

@media (hover: hover) {
  .do-hub-polish :is(
    .network-card,
    .card,
    .tool-card,
    .service-card,
    .suite-card,
    .profile-card,
    .network-grid > a,
    .trust > article
  ):is(:hover, :focus-within) :is(h2, h3) {
    color: color-mix(in srgb, var(--do-motion-accent) 62%, var(--text, var(--ink, white)));
    transform: translateX(3px);
  }

  .do-hub-polish :is(
    .network-card,
    .card,
    .tool-card,
    .service-card,
    .suite-card,
    .profile-card,
    .network-grid > a,
    .trust > article
  ):is(:hover, :focus-within) :is(.icon, .card-icon, .tool-icon, .profile-icon) {
    transform: translateY(-2px) scale(1.06);
    filter: saturate(1.12) brightness(1.06);
  }

  .do-hub-polish :is(a.network-card, a.card, a.tool-card, a.profile-card, .network-grid > a):active {
    transform: translateY(-1px) scale(.995);
  }
}

.do-hub-polish :is(.hub-facts, .hero-facts, .game-facts, .hub-stats) > div {
  transition: background-color .24s ease, color .24s ease;
}

.do-hub-polish :is(.hub-facts, .hero-facts, .game-facts, .hub-stats) > div:hover {
  background: color-mix(in srgb, var(--do-motion-accent) 9%, transparent);
}

.do-hub-polish :is(.hub-facts, .hero-facts, .game-facts, .hub-stats) > div strong {
  transition: transform .24s ease, color .24s ease;
}

.do-hub-polish :is(.hub-facts, .hero-facts, .game-facts, .hub-stats) > div:hover strong {
  color: color-mix(in srgb, var(--do-motion-accent) 74%, white);
  transform: scale(1.045);
}

.do-hub-polish :is(a, button, input, select, summary):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--do-motion-accent) 70%, white);
  outline-offset: 3px;
}

.do-hub-polish .do-network-links { gap: .32rem; }
.do-hub-polish .do-network-links a {
  --do-nav-color: var(--muted, #aeb4c0);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  border-color: color-mix(in srgb, var(--do-nav-color) 24%, var(--border, transparent));
  background: color-mix(in srgb, var(--do-nav-color) 7%, var(--panel, transparent));
  color: color-mix(in srgb, var(--do-nav-color) 78%, var(--text, white));
  transition: transform .18s ease, color .18s ease, border-color .18s ease, background-color .18s ease;
}
.do-hub-polish .do-network-links a:is(:hover, :focus-visible) {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--do-nav-color) 68%, white);
  background: color-mix(in srgb, var(--do-nav-color) 15%, var(--panel, transparent));
  color: color-mix(in srgb, var(--do-nav-color) 38%, white);
}
.do-hub-polish .do-network-links a[aria-current="page"] {
  border-color: transparent;
  background: linear-gradient(135deg, color-mix(in srgb, var(--do-nav-color) 72%, #fff), var(--do-nav-color));
  color: #0c1018;
}

.do-network-links a[data-do-nav-site="main"] { --do-nav-color: #b8ee72; }
.do-network-links a[data-do-nav-site="tools"] { --do-nav-color: #65def1; }
.do-network-links a[data-do-nav-site="extra"] { --do-nav-color: #ff8d76; }
.do-network-links a[data-do-nav-site="games"] { --do-nav-color: #c89cff; }
.do-network-links a[data-do-nav-site="education"] { --do-nav-color: #a8df82; }
.do-network-links a[data-do-nav-site="creative"] { --do-nav-color: #ff8fc7; }
.do-network-links a[data-do-nav-site="generator"] { --do-nav-color: #b6a0ff; }
.do-network-links a[data-do-nav-site="developer"] { --do-nav-color: #59e0c1; }
.do-network-links a[data-do-nav-site="services"] { --do-nav-color: #ffbd69; }
.do-network-links a[data-do-nav-site="contact"] { --do-nav-color: #ff9f7a; }
.do-network-links a[data-do-nav-site="socialmedia"] { --do-nav-color: #78adff; }

/* Shared network orbit for every subdomain's main index. */
.do-domain-orbit-section {
  position: relative;
  z-index: 1;
  clear: both;
  width: min(1120px, calc(100% - 32px));
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(380px, 1.28fr);
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  margin: clamp(42px, 7vw, 88px) auto;
  padding: clamp(28px, 5vw, 58px);
  border: 1px solid color-mix(in srgb, var(--do-motion-accent) 28%, var(--border, transparent));
  border-radius: 28px;
  background: color-mix(in srgb, var(--panel, #141b26) 88%, transparent);
  box-shadow: 0 26px 70px rgba(0,0,0,.18);
}

.do-domain-orbit-copy > p {
  margin: 0 0 12px;
  color: var(--do-motion-accent);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.do-domain-orbit-copy h2 {
  margin: 0;
  color: var(--ink, var(--text, #f5f6f3));
  font-size: clamp(1.9rem, 4vw, 3.5rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.do-domain-orbit-copy > span {
  display: block;
  max-width: 430px;
  margin-top: 18px;
  color: var(--muted, #a9b1be);
  line-height: 1.65;
}

.do-domain-orbit {
  --do-orbit-turn: 0deg;
  --do-orbit-label-turn: 0deg;
  position: relative;
  z-index: 3;
  width: min(500px, 100%);
  aspect-ratio: 1;
  margin: auto;
}

.do-domain-orbit-track {
  position: absolute;
  inset: 0;
  color: var(--do-motion-accent);
  pointer-events: none;
  transform: rotate(var(--do-orbit-turn));
  transform-origin: 50% 50%;
  will-change: transform;
}

.do-domain-orbit-ring {
  position: absolute;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .28;
}

.do-domain-orbit .track-outer .do-domain-orbit-ring { inset: 3%; }
.do-domain-orbit .track-middle { color: var(--accent-two, #72d6ee); }
.do-domain-orbit .track-middle .do-domain-orbit-ring { inset: 17%; }
.do-domain-orbit .track-inner { color: #c89cff; }
.do-domain-orbit .track-inner .do-domain-orbit-ring { inset: 26%; }

.do-domain-orbit-label {
  --do-domain-color: var(--do-motion-accent);
  position: absolute;
  z-index: 3;
  padding: .48rem .7rem;
  border: 1px solid var(--do-domain-color);
  border-radius: 999px;
  background: rgba(15,20,30,.96);
  color: var(--do-domain-color);
  font-size: .68rem;
  font-weight: 850;
  line-height: 1;
  pointer-events: auto;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 0 18px color-mix(in srgb, var(--do-domain-color) 22%, transparent), 0 8px 24px rgba(0,0,0,.2);
  transform: translate(-50%,-50%) rotate(var(--do-orbit-label-turn));
  transform-origin: center;
  will-change: transform;
}

.do-domain-orbit-label:is(:hover,:focus-visible) {
  color: #fff;
  background: #18202d;
  box-shadow: 0 0 26px color-mix(in srgb, var(--do-domain-color) 42%, transparent), 0 10px 28px rgba(0,0,0,.24);
}

.do-domain-orbit .track-outer .position-a { top: 3%; left: 50%; }
.do-domain-orbit .track-outer .position-b { top: 73.5%; left: 90.7%; }
.do-domain-orbit .track-outer .position-c { top: 73.5%; left: 9.3%; }
.do-domain-orbit .track-middle .position-a { top: 33.5%; left: 78.5%; }
.do-domain-orbit .track-middle .position-b { top: 83%; left: 50%; }
.do-domain-orbit .track-middle .position-c { top: 33.5%; left: 21.5%; }
.do-domain-orbit .track-inner .position-a { top: 26%; left: 50%; }
.do-domain-orbit .track-inner .position-b { top: 62%; left: 70.8%; }
.do-domain-orbit .track-inner .position-c { top: 62%; left: 29.2%; }

.do-domain-orbit-core {
  position: absolute;
  z-index: 2;
  inset: 38%;
  display: grid;
  place-items: center;
  padding: 8px;
  border-radius: 28%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--do-motion-accent) 62%, #72d6ee), color-mix(in srgb, var(--do-motion-accent) 62%, #b8ee72));
  color: #0c1018;
  font-size: clamp(.68rem, 1.5vw, 1rem);
  font-weight: 950;
  line-height: 1.05;
  text-align: center;
  overflow-wrap: anywhere;
  box-shadow: 0 0 60px color-mix(in srgb, var(--do-motion-accent) 20%, transparent);
  animation: do-sun-breathe 6s ease-in-out infinite;
}

.do-hub-polish .orbit-core {
  animation: do-sun-breathe 6s ease-in-out infinite;
}

.do-domain-orbit-host > :is(.eyebrow, h1, .hero-copy, .lede, p.sub) {
  animation: do-hero-settle .72s cubic-bezier(.2,.75,.22,1) both;
}

/* Extra uses a long, multiline display heading. Its descenders need a little
   more leading than the compact single-line hub titles so adjacent lines
   remain visually separate at every responsive size and browser zoom. */
body.do-hub-polish[data-do-site="extra"] .hero.do-domain-orbit-host h1 {
  line-height: 1.04;
}

/* Let the Extra hero read as a distinct rounded panel instead of appearing
   attached to the network header. */
body.do-hub-polish[data-do-site="extra"] main > .hero.do-domain-orbit-host {
  margin-top: clamp(16px, 1.5vw, 24px);
}

@keyframes do-hero-settle {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes do-sun-breathe {
  0%, 100% { filter: saturate(1); box-shadow: 0 0 48px color-mix(in srgb, var(--do-motion-accent, var(--accent)) 16%, transparent); }
  50% { filter: saturate(1.08) brightness(1.035); box-shadow: 0 0 72px color-mix(in srgb, var(--do-motion-accent, var(--accent)) 26%, transparent); }
}

.do-domain-orbit-label[data-orbit-site="main"] { --do-domain-color: #b8ee72; }
.do-domain-orbit-label[data-orbit-site="tools"] { --do-domain-color: #65def1; }
.do-domain-orbit-label[data-orbit-site="games"] { --do-domain-color: #c89cff; }
.do-domain-orbit-label[data-orbit-site="extra"] { --do-domain-color: #ff8d76; }
.do-domain-orbit-label[data-orbit-site="education"] { --do-domain-color: #a8df82; }
.do-domain-orbit-label[data-orbit-site="creative"] { --do-domain-color: #ff8fc7; }
.do-domain-orbit-label[data-orbit-site="generator"] { --do-domain-color: #b6a0ff; }
.do-domain-orbit-label[data-orbit-site="developer"] { --do-domain-color: #59e0c1; }
.do-domain-orbit-label[data-orbit-site="services"] { --do-domain-color: #ffbd69; }
.do-domain-orbit-label[data-orbit-site="socialmedia"] { --do-domain-color: #78adff; }

/* Dock the shared orbit beside each existing hero, matching the Home layout. */
.do-domain-orbit-host {
  position: relative !important;
  box-sizing: border-box;
  overflow-x: clip;
  min-height: 620px;
  padding-right: clamp(410px, 44vw, 540px) !important;
}

.do-domain-orbit-host::before,
.do-domain-orbit-host::after {
  pointer-events: none !important;
}

.do-domain-orbit-host > .do-domain-orbit {
  position: absolute;
  top: 50%;
  right: clamp(-18px, 1vw, 20px);
  width: clamp(390px, 43vw, 500px);
  margin: 0;
  transform: translateY(-50%);
}

.do-education-orbit-host {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto 42px;
  padding-top: clamp(24px, 4vw, 52px);
  padding-bottom: clamp(24px, 4vw, 52px);
  border-bottom: 1px solid var(--line, rgba(255,255,255,.12));
}

body.do-hub-polish[data-do-site="education"] main#main-content {
  width: min(1280px, calc(100vw - 40px));
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
}

/* Education's upstream hub uses body padding for its standalone header. The
   shared network bar owns that outer edge after integration, so keep the body
   flush and let the bounded hub sections provide their own breathing room. */
body.do-hub-polish[data-do-site="education"] {
  --do-page-padding-left: 0px !important;
  --do-page-padding-right: 0px !important;
  padding: 0 !important;
  align-items: stretch;
}

body.do-hub-polish[data-do-site="education"] .do-support-cta {
  margin-top: clamp(3rem, 6vw, 5.5rem);
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}

body.do-hub-polish[data-do-site="education"] .do-education-orbit-host > h1 {
  text-align: center;
}

body.do-hub-polish[data-do-site="education"] .section {
  width: 100%;
  max-width: none;
  margin-right: auto;
  margin-left: auto;
}

/* The two contact calls become proper full-width bands instead of inset cards. */
body.do-hub-polish[data-do-site="socialmedia"] .contact-strip,
body.do-hub-polish[data-do-site="services"] .contact-section {
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding-right: max(clamp(24px, 5vw, 72px), calc((100vw - 1280px) / 2));
  padding-left: max(clamp(24px, 5vw, 72px), calc((100vw - 1280px) / 2));
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

body.do-hub-polish[data-do-site="socialmedia"] .contact-strip {
  margin-top: clamp(46px, 7vw, 86px);
  margin-bottom: 0;
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(28px, 4vw, 48px);
}

body.do-hub-polish[data-do-site="services"] .contact-section {
  margin-top: clamp(48px, 7vw, 92px);
  margin-bottom: 0;
  padding-top: clamp(42px, 6vw, 76px);
  padding-bottom: clamp(42px, 6vw, 76px);
}

/* Keep the Home contact prompt compact; navigation already provides other routes. */
body.do-hub-polish[data-do-site="main"] .contact-section {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-top: clamp(42px, 6vw, 72px);
  margin-bottom: clamp(42px, 6vw, 72px);
  padding: clamp(30px, 4vw, 52px);
  border-radius: 24px;
}

body.do-hub-polish[data-do-site="main"] .contact-section h2 {
  max-width: 760px;
  font-size: clamp(2.25rem, 4.4vw, 4rem);
}

body.do-hub-polish[data-do-site="main"] .contact-actions {
  align-items: center;
}

@media (min-width: 1181px) {
  /* Extra's descriptive headline is substantially longer than the other hub
     titles. Keep the complete introduction and orbit comfortably inside the
     desktop hero instead of letting the inherited display scale crowd them. */
  body.do-hub-polish[data-do-site="extra"] .hero.do-domain-orbit-host {
    min-height: 720px;
    padding-top: clamp(56px, 5vw, 82px);
    padding-bottom: clamp(56px, 5vw, 82px);
    padding-left: clamp(48px, 5vw, 84px);
    padding-right: clamp(470px, 42vw, 540px) !important;
  }

  body.do-hub-polish[data-do-site="extra"] .hero.do-domain-orbit-host h1 {
    max-width: 780px;
    font-size: clamp(4rem, 5.25vw, 6rem);
    line-height: 1.04;
  }

  body.do-hub-polish[data-do-site="extra"] .hero.do-domain-orbit-host .lede {
    max-width: 720px;
  }

  body.do-hub-polish[data-do-site="extra"] .hero.do-domain-orbit-host > .do-domain-orbit {
    /* Orbit labels sit outside their circular tracks. Keep a deliberate
       label-safe gutter so longer names never meet the hero's clip edge. */
    right: clamp(58px, 4vw, 76px);
    width: clamp(410px, 35vw, 460px);
  }

  body.do-hub-polish[data-do-site="education"] .do-education-orbit-host {
    max-width: 1280px;
    min-height: 650px;
    padding-right: clamp(500px, 42vw, 570px) !important;
  }

  body[data-do-site="services"] .hero.do-domain-orbit-host {
    display: block;
  }
  body[data-do-site="services"] .hero.do-domain-orbit-host .hero-panel {
    max-width: 620px;
    margin-top: 32px;
  }
}

@media (max-width: 1180px) {
  .do-domain-orbit-host {
    min-height: 0;
    padding-right: 0 !important;
  }
  .do-domain-orbit-host > .do-domain-orbit {
    position: relative;
    top: auto;
    right: auto;
    width: min(500px, 100%);
    margin: clamp(34px, 7vw, 64px) auto 0;
    transform: none;
  }
  .do-education-orbit-host {
    padding-right: 0 !important;
  }
}

/* Inactive placeholders stay absent; future enabled units occupy a banner row. */
.do-hub-polish [data-ad-placement][hidden] { display: none !important; }
.do-hub-polish [data-ad-placement]:not([hidden]) {
  position: relative;
  z-index: 1;
  clear: both;
  width: min(970px, calc(100% - 32px));
  min-height: 90px;
  margin: clamp(24px, 4vw, 48px) auto;
  overflow: hidden;
  contain: layout;
}
.do-hub-polish [data-ad-placement]:not([hidden]) .adsbygoogle {
  width: 100%;
  min-height: 90px;
}

.do-hub-polish .do-reveal {
  opacity: 0;
  transform: translateY(22px) scale(.985);
  transition: opacity .62s ease var(--do-reveal-delay, 0ms), transform .62s cubic-bezier(.2,.75,.22,1) var(--do-reveal-delay, 0ms);
}
.do-hub-polish .do-reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 760px) {
  body.do-hub-polish > footer {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  body.do-hub-polish::before { opacity: .52; filter: blur(22px) saturate(1.08); }
  body.do-hub-polish::after { opacity: .34; filter: blur(32px); }
  .do-hub-polish .do-network-links a { min-height: 42px; }
  .do-hub-polish :is(.hero-actions, .hub-hero .hero-actions) { gap: .7rem; }
  .do-domain-orbit-section {
    grid-template-columns: 1fr;
    width: min(100% - 20px, 620px);
    padding: 28px 14px 34px;
    text-align: center;
  }
  .do-domain-orbit-copy > span { margin-right: auto; margin-left: auto; }
  .do-domain-orbit { max-width: 430px; }
  .do-domain-orbit-label { padding: .42rem .56rem; font-size: .6rem; }
  body.do-hub-polish footer {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  .do-standard-footer .do-footer-inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .do-standard-footer .do-footer-actions { justify-content: flex-start; }
  body.do-hub-polish[data-do-site="main"] .contact-section {
    grid-template-columns: 1fr;
    padding: 26px 22px;
    border-radius: 18px;
  }
  body.do-hub-polish footer :is(nav, .footer-network, .footer-links) {
    width: 100%;
    justify-content: flex-start;
    gap: .55rem;
  }
  .do-hub-search { grid-template-columns: 1fr; }
  .do-hub-search-status { min-width: 0; text-align: left; }
  .do-collapsible-section .section-heading {
    align-items: flex-start !important;
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  body.do-hub-polish[data-do-site="main"] .orbit {
    /* Labels rotate beyond the orbit's own box. Paint containment clipped the
       widest label on narrow screens even though the hero allows overflow. */
    contain: layout;
  }

  .do-domain-orbit { width: min(100% - 20px, 390px); }
  .do-domain-orbit-label { padding: .36rem .46rem; font-size: .54rem; }
  .do-domain-orbit .track-outer .do-domain-orbit-ring { inset: 7%; }
  .do-domain-orbit .track-middle .do-domain-orbit-ring { inset: 20%; }
  .do-domain-orbit .track-inner .do-domain-orbit-ring { inset: 30%; }
  .do-domain-orbit .track-outer .position-a { top: 7%; left: 50%; }
  .do-domain-orbit .track-outer .position-b { top: 71.5%; left: 87.2%; }
  .do-domain-orbit .track-outer .position-c { top: 71.5%; left: 12.8%; }
  .do-domain-orbit .track-middle .position-a { top: 35%; left: 76%; }
  .do-domain-orbit .track-middle .position-b { top: 80%; left: 50%; }
  .do-domain-orbit .track-middle .position-c { top: 35%; left: 24%; }
  .do-domain-orbit .track-inner .position-a { top: 30%; left: 50%; }
  .do-domain-orbit .track-inner .position-b { top: 60%; left: 67.3%; }
  .do-domain-orbit .track-inner .position-c { top: 60%; left: 32.7%; }
  .do-domain-orbit-core { inset: 39%; font-size: .58rem; }
}

@media (prefers-reduced-motion: reduce) {
  .do-hub-polish *, .do-hub-polish *::before, .do-hub-polish *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .do-hub-polish .do-reveal { opacity: 1; transform: none; }
  .do-hub-polish :is(
    .network-card,
    .card,
    .tool-card,
    .service-card,
    .suite-card,
    .profile-card,
    .network-grid > a,
    .trust > article
  ):is(:hover, :focus-within, :active) {
    transform: none !important;
  }
}