/* Home-only product showcase styling. Other public routes keep their existing UI. */
body[data-public-route="introduction"] {
  --home-measure: 1200px;
  --home-line: rgba(214, 214, 214, .105);
  --home-surface: rgba(17, 17, 17, .78);
  --home-text: #f2f2f2;
  --home-muted: #a8a8a8;
  --home-accent: #ffffff;
  background: #090909;
  overflow-x: clip;
}

body[data-public-route="introduction"] #introduction {
  width: 100%;
  max-width: none;
  margin: 0;
  overflow-x: clip;
  isolation: isolate;
}

/* Quiet, centered navigation like the reference rather than a dashboard bar. */
body[data-public-route="introduction"] .topbar {
  width: min(calc(100% - 64px), 1024px);
  min-height: 70px;
  margin: 0 auto;
  padding: 10px 0;
  gap: clamp(16px, 2vw, 30px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-public-route="introduction"] .public-wordmark img {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  padding: 0;
  border-radius: 10px;
  border-color: rgba(255, 255, 255, .14);
  background: #070707;
  box-shadow: none;
  object-fit: cover;
  transform: scale(1.08);
}

body[data-public-route="introduction"] .public-nav {
  gap: clamp(14px, 1.7vw, 24px);
}

body[data-public-route="introduction"] .public-nav a {
  color: #adadad;
  font-size: 12px;
  font-weight: 600;
}

body[data-public-route="introduction"] .public-nav a::after {
  display: none;
}

body[data-public-route="introduction"] .public-nav a:hover,
body[data-public-route="introduction"] .public-nav a[aria-current] {
  color: #f3f3f3;
}

body:not(.public-dashboard-mode)[data-public-route="introduction"] .topbar-actions .btn.primary.topbar-dashboard {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #ffffff;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 7px 22px rgba(255, 255, 255, .08);
  color: #0a0a0a;
  overflow: visible;
}

body:not(.public-dashboard-mode)[data-public-route="introduction"] .topbar-actions .btn.primary.topbar-dashboard:hover,
body:not(.public-dashboard-mode)[data-public-route="introduction"] .topbar-actions .btn.primary.topbar-dashboard:focus-visible {
  border-color: #ffffff;
  background: #eeeeee;
  color: #000000;
}

body[data-public-route="introduction"] .dashboard-spider-icon {
  width: 30px;
  height: 36px;
  flex: 0 0 30px;
  margin: -7px 0 -5px -5px;
  object-fit: contain;
  pointer-events: none;
}

/* Reference-scale hero: the same compact two-column opening, with Headless data. */
body[data-public-route="introduction"] #introduction > .hero-primary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .78fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  width: min(calc(100% - 64px), 1024px);
  min-height: calc(100svh - 70px);
  margin: 0 auto;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-public-route="introduction"] .hero-copy,
body[data-public-route="introduction"] .hero-module-stream {
  position: relative;
  top: -53px;
}

body[data-public-route="introduction"] .hero-copy {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: 650px;
  padding: 0;
  transform: none;
}

body[data-public-route="introduction"] .hero-copy h1.hero-headline {
  display: grid;
  width: min(620px, calc(100vw - 40px));
  max-width: 620px;
  margin: 0 0 30px;
  color: #f3f3f3;
  font: 700 clamp(40px, 3.2vw, 46px)/1.5 "Manrope", "Segoe UI", sans-serif;
  letter-spacing: -.065em;
  text-shadow: none;
  text-wrap: initial;
}

body[data-public-route="introduction"] .hero-copy h1.hero-headline .hero-headline-lead,
body[data-public-route="introduction"] .hero-copy h1.hero-headline .hero-editorial {
  white-space: nowrap;
}

body[data-public-route="introduction"] .hero-copy h1.hero-headline .hero-headline-lead {
  color: #f3f3f3;
}

body[data-public-route="introduction"] .hero-copy h1.hero-headline .hero-editorial {
  max-width: none;
  margin-top: 0;
  color: #f3f3f3;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

body[data-public-route="introduction"] .hero-copy h1.hero-headline .hero-accent {
  color: #ffffff;
  background: none;
  -webkit-text-fill-color: currentColor;
}

body[data-public-route="introduction"] .hero-copy > p.hero-description {
  width: min(560px, calc(100vw - 40px));
  max-width: 560px;
  margin: 0;
  color: #b5b5b5;
  font: 400 18px/1.75 "Manrope", "Segoe UI", sans-serif;
  letter-spacing: -.015em;
}

body[data-public-route="introduction"] .hero-actions--paired {
  gap: 10px;
  margin-top: 65px;
}

body[data-public-route="introduction"] .hero-actions--paired .hero-cta {
  min-height: 51px;
  height: 51px;
  gap: 9px;
  padding-inline: 18px;
  border: 1px solid rgba(216, 216, 216, .14);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(41, 41, 41, .94), rgba(25, 25, 25, .98));
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 6px 18px rgba(0,0,0,.16);
  color: #f1f1f1;
  font: 650 13px/1 "Manrope", "Segoe UI", sans-serif;
}

body[data-public-route="introduction"] .hero-actions--paired .hero-cta:hover,
body[data-public-route="introduction"] .hero-actions--paired .hero-cta:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(198, 198, 198, .3);
  background: linear-gradient(180deg, rgba(51, 51, 51, .97), rgba(30, 30, 30, .99));
  color: #fafafa;
}

body[data-public-route="introduction"] .hero-actions--paired .hero-cta--docs,
body[data-public-route="introduction"] .hero-actions--paired .hero-cta--docs:hover,
body[data-public-route="introduction"] .hero-actions--paired .hero-cta--docs:focus-visible {
  border-color: #ffffff;
  background: #ffffff;
  color: #090909;
  box-shadow: 0 8px 24px rgba(255, 255, 255, .08);
}

body[data-public-route="introduction"] .hero-actions--paired .hero-cta--invite .hero-cta-icon,
body[data-public-route="introduction"] .hero-actions--paired .hero-cta--invite .hero-cta-icon svg {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
  color: #bfbfbf;
}

body[data-public-route="introduction"] .hero-actions--paired .hero-cta--invite {
  min-width: 181px;
}

body[data-public-route="introduction"] .hero-module-stream {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: min(100%, 330px);
  height: 350px;
  overflow: visible;
  transform: none;
  translate: none;
}

body[data-public-route="introduction"] .hero-module-mask {
  width: calc(100% + 54px);
  height: 350px;
  margin-left: -27px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
}

body[data-public-route="introduction"] .hero-module-track {
  padding-left: 27px;
  animation-duration: 48s;
}

body[data-public-route="introduction"] .hero-module-set {
  gap: 42px;
  padding-bottom: 42px;
}

body[data-public-route="introduction"] .hero-module-pill {
  min-width: 120px;
  max-width: 190px;
  min-height: 40px;
  padding: 7px 10px;
  gap: 8px;
  border-color: rgba(203, 203, 203, .17);
  border-top-color: rgba(222, 222, 222, .25);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(27, 27, 27, .92), rgba(14, 14, 14, .95));
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 8px 22px rgba(0,0,0,.18);
  color: #d0d0d0;
}

body[data-public-route="introduction"] .hero-module-pill:hover,
body[data-public-route="introduction"] .hero-module-pill:focus-visible {
  border-color: rgba(194, 194, 194, .36);
  background: linear-gradient(145deg, rgba(35, 35, 35, .97), rgba(18, 18, 18, .98));
  color: #f2f2f2;
}

body[data-public-route="introduction"] .hero-module-icon {
  width: 22px;
  height: 22px;
  flex-basis: 22px;
  border-color: rgba(188, 188, 188, .19);
  border-radius: 7px;
  background: rgba(141, 141, 141, .09);
  box-shadow: none;
  color: #a9a9a9;
}

body[data-public-route="introduction"] .hero-module-icon svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.65;
  filter: grayscale(1) brightness(1.22);
}

body[data-public-route="introduction"] .hero-module-label {
  font: 650 11px/1.2 "Manrope", "Segoe UI", sans-serif;
  letter-spacing: -.015em;
}

body[data-public-route="introduction"] .hero-scroll-prompt { display: none !important; }

/* Home sections use roomy editorial beats; visuals remain product-specific. */
body[data-public-route="introduction"] #introduction > .home-scene:not(.home-integrations) {
  width: min(calc(100% - 96px), var(--home-measure));
  max-width: var(--home-measure);
  margin-inline: auto;
}

body[data-public-route="introduction"] .home-scene[data-home-fog]::after {
  opacity: calc(var(--scene-progress, 0) * .22);
  filter: blur(42px);
}

body[data-public-route="introduction"] .headless-network-showcase {
  margin-block: clamp(150px, 18vh, 220px) clamp(170px, 19vh, 240px);
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-public-route="introduction"] .guild-network-layout {
  width: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-public-route="introduction"] .guild-network-stage {
  height: clamp(500px, 58vw, 700px);
  min-height: 500px;
  border: 0;
  border-radius: 0;
  background: radial-gradient(ellipse at 50% 49%, rgba(183, 183, 183, .035), transparent 44%);
  box-shadow: none;
}

body[data-public-route="introduction"] .guild-network-stage::before {
  inset: 5% 10%;
  border: 1px solid rgba(178, 178, 178, .1);
  border-radius: 50%;
  opacity: .55;
}

body[data-public-route="introduction"] .network-community-strip {
  max-width: 100%;
  margin-top: 30px;
  padding: 22px 0 0;
  border-top: 1px solid var(--home-line);
  border-bottom: 0;
}

body[data-public-route="introduction"] .network-community-items { gap: 10px; }

body[data-public-route="introduction"] .network-community-card {
  min-height: 62px;
  padding: 10px 12px;
  border-color: rgba(214, 214, 214, .1);
  border-radius: 13px;
  background: rgba(14, 14, 14, .72);
}

body[data-public-route="introduction"] .security-feature {
  width: min(calc(100% - 96px), var(--home-measure));
  margin: clamp(190px, 23vh, 300px) auto;
  padding: clamp(42px, 6vw, 76px);
  gap: clamp(48px, 8vw, 110px);
  border: 1px solid rgba(214, 214, 214, .09);
  border-radius: 30px;
  background: linear-gradient(120deg, rgba(17, 17, 17, .74), rgba(12, 12, 12, .44));
  box-shadow: inset 0 1px rgba(255,255,255,.018), 0 28px 80px rgba(0,0,0,.16);
}

body[data-public-route="introduction"] .security-feature h2,
body[data-public-route="introduction"] .product-bento-heading h2,
body[data-public-route="introduction"] .home-showcase-copy h2,
body[data-public-route="introduction"] .home-more-heading h2,
body[data-public-route="introduction"] .home-foundation-heading h2,
body[data-public-route="introduction"] .home-cta-content h2 {
  color: var(--home-text);
  font-size: clamp(36px, 3.5vw, 48px);
  line-height: 1.08;
  letter-spacing: -.055em;
  text-wrap: balance;
}

body[data-public-route="introduction"] .security-feature h2 { margin: 20px 0 18px; }

body[data-public-route="introduction"] .security-feature p,
body[data-public-route="introduction"] .product-bento-heading p,
body[data-public-route="introduction"] .home-showcase-copy > p,
body[data-public-route="introduction"] .home-more-heading > p,
body[data-public-route="introduction"] .home-foundation-heading > p,
body[data-public-route="introduction"] .home-cta-content > p {
  color: var(--home-muted);
  font-size: 15px;
  line-height: 1.8;
}

body[data-public-route="introduction"] .security-policy {
  padding: clamp(24px, 3vw, 38px);
  border-color: rgba(214, 214, 214, .11);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(16, 16, 16, .84), rgba(12, 12, 12, .68));
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 22px 65px rgba(0,0,0,.2);
}

body[data-public-route="introduction"] .policy-row { min-height: 66px; }

body[data-public-route="introduction"] .product-bento {
  width: min(calc(100% - 96px), var(--home-measure));
  margin: clamp(210px, 25vh, 330px) auto;
  padding: 0;
  border-top: 0;
}

body[data-public-route="introduction"] .product-bento-heading {
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  column-gap: clamp(40px, 7vw, 92px);
  align-items: end;
  margin: 0 0 46px;
}

body[data-public-route="introduction"] .product-bento-heading > .eyebrow { margin-bottom: 16px; }
body[data-public-route="introduction"] .product-bento-heading h2 { max-width: 720px; font-size: clamp(38px, 3.7vw, 50px); }
body[data-public-route="introduction"] .product-bento-heading p { max-width: 440px; font-size: 15px; }

body[data-public-route="introduction"] .product-bento-grid {
  grid-auto-rows: minmax(145px, auto);
  gap: 20px;
}

body[data-public-route="introduction"] .product-bento-grid .bento-card {
  min-height: 440px;
  border-color: rgba(214, 214, 214, .105);
  border-radius: 25px;
  background: linear-gradient(145deg, rgba(20, 20, 20, .9), rgba(12, 12, 12, .9));
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 20px 58px rgba(0,0,0,.18);
}

body[data-public-route="introduction"] .product-bento-grid .bento-card-radar,
body[data-public-route="introduction"] .product-bento-grid .bento-card-logs { min-height: 520px; }

body[data-public-route="introduction"] .product-bento-grid .bento-card-access,
body[data-public-route="introduction"] .product-bento-grid .bento-card-assistant { min-height: 430px; }

body[data-public-route="introduction"] .bento-copy { padding: 10px 30px 32px; }
body[data-public-route="introduction"] .bento-copy h3 { font-size: clamp(22px, 2vw, 28px); }
body[data-public-route="introduction"] .bento-copy p { font-size: 14px; line-height: 1.75; }
body[data-public-route="introduction"] .bento-link { font-size: 12px; }
body[data-public-route="introduction"] .bento-visual-label { left: 26px; bottom: 20px; font-size: 9px; }

body[data-public-route="introduction"] .home-showcase,
body[data-public-route="introduction"] .home-more,
body[data-public-route="introduction"] .home-final-cta,
body[data-public-route="introduction"] .home-foundation {
  width: min(calc(100% - 96px), var(--home-measure));
  min-height: clamp(640px, 78vh, 860px);
  margin: clamp(190px, 23vh, 300px) auto;
  padding: clamp(44px, 5vw, 68px);
}

body[data-public-route="introduction"] .home-showcase {
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: clamp(48px, 7vw, 92px);
  padding-block: clamp(76px, 8vw, 112px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-public-route="introduction"] .home-scene--moderation,
body[data-public-route="introduction"] .home-scene--audit {
  padding: clamp(42px, 5vw, 68px);
  border: 1px solid rgba(214, 214, 214, .085);
  border-radius: 30px;
  background: linear-gradient(125deg, rgba(16, 16, 16, .55), rgba(12, 12, 12, .2));
  box-shadow: inset 0 1px rgba(255,255,255,.018);
}

body[data-public-route="introduction"] .home-showcase--reverse {
  grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
}

body[data-public-route="introduction"] .home-showcase-copy { max-width: 540px; }

body[data-public-route="introduction"] .home-showcase-copy h2,
body[data-public-route="introduction"] .home-more-heading h2,
body[data-public-route="introduction"] .home-cta-content h2 { margin: 20px 0 18px; }

body[data-public-route="introduction"] .home-showcase-copy > p,
body[data-public-route="introduction"] .home-more-heading > p,
body[data-public-route="introduction"] .home-cta-content > p {
  max-width: 520px;
  font-size: 15px;
  line-height: 1.8;
}

body[data-public-route="introduction"] .home-showcase-copy .eyebrow,
body[data-public-route="introduction"] .home-more-heading .eyebrow {
  color: #b1b1b1;
  font-size: 9px;
  letter-spacing: .13em;
}

body[data-public-route="introduction"] .home-feature-points { gap: 9px; margin: 24px 0 28px; }

body[data-public-route="introduction"] .home-feature-points span {
  padding: 9px 12px;
  border-color: rgba(214, 214, 214, .12);
  border-radius: 999px;
  background: rgba(15, 15, 15, .68);
  color: #c4c4c4;
  font-size: 11px;
}

body[data-public-route="introduction"] .home-feature-points span::before {
  background: #898989;
  box-shadow: 0 0 9px rgba(186, 186, 186, .35);
}

body[data-public-route="introduction"] .home-scene-cta {
  min-height: 46px;
  padding-inline: 17px;
  border-color: rgba(214, 214, 214, .13);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(40, 40, 40, .88), rgba(21, 21, 21, .94));
  color: #e0e0e0;
  font-size: 12px;
}

body[data-public-route="introduction"] .home-voice-visual,
body[data-public-route="introduction"] .home-case-visual,
body[data-public-route="introduction"] .home-role-visual,
body[data-public-route="introduction"] .home-audit-visual,
body[data-public-route="introduction"] .home-music-visual,
body[data-public-route="introduction"] .home-operations-visual {
  min-height: 500px;
  border-color: rgba(214, 214, 214, .11);
  border-radius: 22px;
  background: radial-gradient(ellipse at 75% 6%, rgba(119, 119, 119, .075), transparent 44%), linear-gradient(145deg, rgba(17, 17, 17, .9), rgba(11, 11, 11, .92));
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 24px 72px rgba(0,0,0,.22);
}

body[data-public-route="introduction"] .home-visual-chrome {
  min-height: 48px;
  padding-inline: 22px;
  border-color: rgba(214, 214, 214, .08);
  color: #8f8f8f;
  font-size: 9px;
}

body[data-public-route="introduction"] .home-visual-chrome b { color: #bdbdbd; }
body[data-public-route="introduction"] .home-visual-chrome em { font-size: 8px; }

body[data-public-route="introduction"] .home-integrations {
  margin-block: clamp(190px, 23vh, 300px);
  padding-block: clamp(100px, 13vh, 150px);
}

body[data-public-route="introduction"] .home-integrations-heading {
  width: min(calc(100% - 64px), 760px);
  margin-bottom: clamp(42px, 6vh, 72px);
}

body[data-public-route="introduction"] .home-integrations-heading h2 {
  color: #f2f2f2;
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1.14;
  letter-spacing: -.05em;
}

body[data-public-route="introduction"] .home-integrations-heading h2 span {
  color: #bdbdbd;
}

body[data-public-route="introduction"] .home-integrations-heading p {
  color: #a8a8a8;
  font-size: 15px;
}

body[data-public-route="introduction"] .home-integrations-set { gap: 24px; padding-right: 24px; }

body[data-public-route="introduction"] .home-integration-card {
  width: clamp(290px, 24vw, 350px);
  min-height: 176px;
  padding: 27px 28px 22px;
  border-color: rgba(214, 214, 214, .115);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(19, 19, 19, .95), rgba(12, 12, 12, .95));
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 20px 54px rgba(0,0,0,.2);
}

body[data-public-route="introduction"] .home-integration-icon {
  width: 48px;
  height: 48px;
  border-radius: 15px;
}

body[data-public-route="introduction"] .home-integration-copy strong { font-size: 16px; }
body[data-public-route="introduction"] .home-integration-copy small { font-size: 12px; line-height: 1.65; }
body[data-public-route="introduction"] .home-integration-state { font-size: 9px; }

body[data-public-route="introduction"] .home-foundation,
body[data-public-route="introduction"] .home-more {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body[data-public-route="introduction"] .home-foundation-heading,
body[data-public-route="introduction"] .home-more-heading,
body[data-public-route="introduction"] .product-bento-heading {
  max-width: 850px;
  margin: 0 auto clamp(40px, 6vh, 72px);
  text-align: center;
}

body[data-public-route="introduction"] .home-foundation-heading .eyebrow,
body[data-public-route="introduction"] .home-more-heading .eyebrow,
body[data-public-route="introduction"] .product-bento-heading .eyebrow {
  justify-content: center;
  color: #b1b1b1;
  font-size: 9px;
}

body[data-public-route="introduction"] .home-foundation-heading h2,
body[data-public-route="introduction"] .home-more-heading h2,
body[data-public-route="introduction"] .product-bento-heading h2 {
  max-width: 850px;
  margin: 20px auto 16px;
}

body[data-public-route="introduction"] .home-foundation-heading > p,
body[data-public-route="introduction"] .home-more-heading > p,
body[data-public-route="introduction"] .product-bento-heading > p {
  max-width: 660px;
  margin: 0 auto;
}

body[data-public-route="introduction"] .home-foundation-grid,
body[data-public-route="introduction"] .home-more-grid {
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  gap: 16px;
}

body[data-public-route="introduction"] .home-foundation-grid .doc-detail-card,
body[data-public-route="introduction"] .home-more-card {
  min-height: 210px;
  padding: 26px;
  border-color: rgba(214, 214, 214, .1);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(19, 19, 19, .82), rgba(12, 12, 12, .82));
}

body[data-public-route="introduction"] .home-more-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  align-items: center;
  min-height: 118px;
  padding: 23px;
}

body[data-public-route="introduction"] .home-more-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 13px;
}

body[data-public-route="introduction"] .home-more-card-copy strong { font-size: 15px; }
body[data-public-route="introduction"] .home-more-card-copy small { font-size: 12px; line-height: 1.6; }

body[data-public-route="introduction"] .home-more-actions { margin-top: 28px; text-align: center; }

body[data-public-route="introduction"] .more-commands-pill {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 12px;
}

body[data-public-route="introduction"] .home-final-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 310px);
  align-items: center;
  min-height: 0;
  margin-block: clamp(210px, 25vh, 330px) clamp(130px, 15vh, 190px);
  padding: clamp(40px, 5.5vw, 74px);
  border: 1px solid rgba(214, 214, 214, .12);
  border-radius: 30px;
  background: linear-gradient(120deg, rgba(17, 17, 17, .86), rgba(12, 12, 12, .72));
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 28px 80px rgba(0,0,0,.2);
}

body[data-public-route="introduction"] .home-cta-content h2 { max-width: 740px; }
body[data-public-route="introduction"] .home-cta-actions { gap: 10px; margin-top: 28px; }
body[data-public-route="introduction"] .home-cta-actions .btn {
  min-height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(30, 30, 30, .86);
  border-color: rgba(214, 214, 214, .14);
  color: #ebebeb;
  font-size: 12px;
}

body:not(.public-dashboard-mode)[data-public-route="introduction"] .home-cta-actions .btn.primary {
  border-color: rgba(214, 214, 214, .14);
  background: linear-gradient(180deg, rgba(41, 41, 41, .94), rgba(25, 25, 25, .98));
  box-shadow: inset 0 1px rgba(255,255,255,.035);
  color: #f1f1f1;
}

body[data-public-route="introduction"] .home-cta-community-rail {
  padding-left: 24px;
  border-left-color: rgba(214, 214, 214, .12);
}

body[data-public-route="introduction"] .site-footer {
  width: min(calc(100% - 96px), var(--home-measure));
  margin: 0 auto;
  padding: 28px 0 44px;
  border-top-color: rgba(214, 214, 214, .1);
}

body[data-public-route="introduction"] .site-footer nav { gap: 22px; }
body[data-public-route="introduction"] .site-footer nav a { color: #a4a4a4; font-size: 12px; }

@media (min-width: 1600px) {
  body[data-public-route="introduction"] { --home-measure: 1200px; }
}

@media (max-width: 1100px) {
  body[data-public-route="introduction"] #introduction > .hero-primary {
    grid-template-columns: minmax(0, 1fr) minmax(230px, .7fr);
    gap: 24px;
    width: min(calc(100% - 56px), 960px);
  }

  body[data-public-route="introduction"] .hero-copy h1.hero-headline { font-size: clamp(36px, 4vw, 44px); line-height: 1.16; margin-bottom: 24px; }
  body[data-public-route="introduction"] .hero-copy > p.hero-description { font-size: 15px; }
  body[data-public-route="introduction"] .hero-actions--paired { margin-top: 34px; }
  body[data-public-route="introduction"] .hero-module-stream { width: min(100%, 300px); }
  body[data-public-route="introduction"] #introduction > .home-scene:not(.home-integrations),
  body[data-public-route="introduction"] .security-feature,
  body[data-public-route="introduction"] .product-bento { width: min(calc(100% - 64px), 960px); }
  body[data-public-route="introduction"] .home-showcase,
  body[data-public-route="introduction"] .home-more,
  body[data-public-route="introduction"] .home-final-cta,
  body[data-public-route="introduction"] .home-foundation { width: min(calc(100% - 64px), 960px); }
}

@media (max-width: 820px) {
  body[data-public-route="introduction"] .topbar { width: calc(100% - 40px); }
  body[data-public-route="introduction"] #introduction > .hero-primary {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    justify-items: center;
    gap: 28px;
    width: min(calc(100% - 48px), 680px);
    min-height: calc(100svh - 70px);
    padding-block: 72px 54px;
  }

  body[data-public-route="introduction"] .hero-copy,
  body[data-public-route="introduction"] .hero-module-stream { top: 0; }
  body[data-public-route="introduction"] .hero-copy { max-width: 650px; text-align: center; }
  body[data-public-route="introduction"] .hero-copy h1.hero-headline { margin-inline: auto; font-size: clamp(38px, 6vw, 48px); }
  body[data-public-route="introduction"] .hero-copy > p.hero-description { margin-inline: auto; }
  body[data-public-route="introduction"] .hero-actions--paired { justify-content: center; width: 100%; }
  body[data-public-route="introduction"] .hero-module-stream { grid-column: 1; grid-row: 2; justify-self: center; width: min(100%, 350px); height: 300px; }
  body[data-public-route="introduction"] .hero-module-mask { height: 300px; }

  body[data-public-route="introduction"] #introduction > .home-scene:not(.home-integrations),
  body[data-public-route="introduction"] .security-feature,
  body[data-public-route="introduction"] .product-bento,
  body[data-public-route="introduction"] .home-showcase,
  body[data-public-route="introduction"] .home-more,
  body[data-public-route="introduction"] .home-final-cta,
  body[data-public-route="introduction"] .home-foundation {
    width: min(calc(100% - 48px), 680px);
    margin-block: 140px;
  }

  body[data-public-route="introduction"] .security-feature { grid-template-columns: 1fr; }
  body[data-public-route="introduction"] .home-showcase,
  body[data-public-route="introduction"] .home-showcase--reverse {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 34px;
    min-height: 0;
    padding: clamp(28px, 6vw, 46px);
  }

  body[data-public-route="introduction"] .home-showcase:not(.home-scene--moderation):not(.home-scene--audit) { padding-block: 56px; }

  body[data-public-route="introduction"] .home-showcase--reverse .home-showcase-visual { grid-column: 1; grid-row: 2; }
  body[data-public-route="introduction"] .home-showcase--reverse .home-showcase-copy { grid-column: 1; grid-row: 1; }
  body[data-public-route="introduction"] .home-showcase-copy { max-width: 640px; }
  body[data-public-route="introduction"] .home-showcase-visual { width: 100%; }
  body[data-public-route="introduction"] .home-voice-visual,
  body[data-public-route="introduction"] .home-case-visual,
  body[data-public-route="introduction"] .home-role-visual,
  body[data-public-route="introduction"] .home-audit-visual,
  body[data-public-route="introduction"] .home-music-visual,
  body[data-public-route="introduction"] .home-operations-visual { min-height: 440px; }
  body[data-public-route="introduction"] .home-foundation,
  body[data-public-route="introduction"] .home-more { padding: 0; }
  body[data-public-route="introduction"] .home-final-cta { grid-template-columns: 1fr; gap: 42px; }
  body[data-public-route="introduction"] .home-cta-community-rail { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--home-line); }
}

@media (max-width: 600px) {
  body[data-public-route="introduction"] .topbar { min-height: 62px; }
  body[data-public-route="introduction"] .public-wordmark { font-size: 18px; }
  body[data-public-route="introduction"] .hero-copy,
  body[data-public-route="introduction"] .hero-module-stream { top: 0; }
  body[data-public-route="introduction"] #introduction > .hero-primary {
    width: calc(100% - 40px);
    min-height: auto;
    padding-block: clamp(70px, 12vh, 104px) 54px;
  }

  body[data-public-route="introduction"] .hero-copy h1.hero-headline {
    font-size: clamp(30px, 8vw, 38px);
    line-height: 1.12;
    letter-spacing: -.067em;
  }

  body[data-public-route="introduction"] .hero-copy h1.hero-headline .hero-headline-lead,
  body[data-public-route="introduction"] .hero-copy h1.hero-headline .hero-editorial { white-space: normal; }
  body[data-public-route="introduction"] .hero-copy h1.hero-headline .hero-headline-lead { display: block; }
  body[data-public-route="introduction"] .hero-copy h1.hero-headline .hero-editorial { display: block; }
  body[data-public-route="introduction"] .hero-copy > p.hero-description { font-size: 14px; line-height: 1.75; }
  body[data-public-route="introduction"] .hero-actions--paired { gap: 8px; margin-top: 25px; }
  body[data-public-route="introduction"] .hero-actions--paired .hero-cta { min-height: 44px; height: 44px; padding-inline: 14px; font-size: 11px; }
  body[data-public-route="introduction"] .hero-module-stream { width: min(100%, 330px); height: 260px; }
  body[data-public-route="introduction"] .hero-module-mask { height: 260px; }
  body[data-public-route="introduction"] .hero-module-set { gap: 36px; padding-bottom: 36px; }
  body[data-public-route="introduction"] .hero-module-pill { min-height: 43px; padding: 7px 11px; }

  body[data-public-route="introduction"] #introduction > .home-scene:not(.home-integrations),
  body[data-public-route="introduction"] .security-feature,
  body[data-public-route="introduction"] .product-bento,
  body[data-public-route="introduction"] .home-showcase,
  body[data-public-route="introduction"] .home-more,
  body[data-public-route="introduction"] .home-final-cta,
  body[data-public-route="introduction"] .home-foundation { width: calc(100% - 36px); margin-block: 116px; }

  body[data-public-route="introduction"] .security-feature { padding: 28px 22px; border-radius: 24px; }
  body[data-public-route="introduction"] .security-feature h2,
  body[data-public-route="introduction"] .product-bento-heading h2,
  body[data-public-route="introduction"] .home-showcase-copy h2,
  body[data-public-route="introduction"] .home-more-heading h2,
  body[data-public-route="introduction"] .home-foundation-heading h2,
  body[data-public-route="introduction"] .home-cta-content h2 { font-size: clamp(31px, 8.2vw, 38px); }

  body[data-public-route="introduction"] .product-bento-heading {
    display: block;
    margin-bottom: 30px;
    text-align: left;
  }

  body[data-public-route="introduction"] .product-bento-heading h2 { margin: 17px 0 12px; }
  body[data-public-route="introduction"] .product-bento-heading p { font-size: 14px; }
  body[data-public-route="introduction"] .product-bento-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  body[data-public-route="introduction"] .product-bento-grid .bento-card,
  body[data-public-route="introduction"] .product-bento-grid .bento-card-radar,
  body[data-public-route="introduction"] .product-bento-grid .bento-card-logs,
  body[data-public-route="introduction"] .product-bento-grid .bento-card-access,
  body[data-public-route="introduction"] .product-bento-grid .bento-card-assistant,
  body[data-public-route="introduction"] .product-bento-grid .bento-card-community { grid-column: 1; grid-row: auto; min-height: 360px; }
  body[data-public-route="introduction"] .bento-visual { min-height: 225px; }

  body[data-public-route="introduction"] .home-showcase,
  body[data-public-route="introduction"] .home-showcase--reverse { gap: 28px; padding: 23px 19px; }
  body[data-public-route="introduction"] .home-showcase:is(.home-scene--moderation,.home-scene--audit) { border-radius: 25px; }
  body[data-public-route="introduction"] .home-showcase:not(.home-scene--moderation):not(.home-scene--audit) { padding-block: 42px; }
  body[data-public-route="introduction"] .home-voice-visual,
  body[data-public-route="introduction"] .home-case-visual,
  body[data-public-route="introduction"] .home-role-visual,
  body[data-public-route="introduction"] .home-audit-visual,
  body[data-public-route="introduction"] .home-music-visual,
  body[data-public-route="introduction"] .home-operations-visual { min-height: 370px; border-radius: 18px; }
  body[data-public-route="introduction"] .home-voice-layout { grid-template-columns: 1fr; }
  body[data-public-route="introduction"] .home-voice-channel-list { padding: 18px 15px; border-right: 0; border-bottom: 1px solid rgba(230, 230, 230, .07); }
  body[data-public-route="introduction"] .home-voice-channel-list > div { min-height: 44px; }
  body[data-public-route="introduction"] .home-voice-room { margin: 15px; padding: 17px; }
  body[data-public-route="introduction"] .home-case-summary { margin: 22px 18px 20px; padding-bottom: 18px; }
  body[data-public-route="introduction"] .home-case-timeline { padding-inline: 18px; gap: 8px; }
  body[data-public-route="introduction"] .home-case-timeline > div { min-height: 60px; padding: 8px; }
  body[data-public-route="introduction"] .home-case-timeline small { font-size: 8px; }
  body[data-public-route="introduction"] .home-case-foot,
  body[data-public-route="introduction"] .home-role-foot,
  body[data-public-route="introduction"] .home-audit-foot,
  body[data-public-route="introduction"] .home-operations-foot { margin: 20px 18px 0; flex-wrap: wrap; }

  body[data-public-route="introduction"] .home-integrations { margin-block: 120px; padding-block: 74px; }
  body[data-public-route="introduction"] .home-integrations-heading { width: calc(100% - 40px); margin-bottom: 34px; }
  body[data-public-route="introduction"] .home-integrations-heading h2 { font-size: clamp(28px, 7.8vw, 36px); }
  body[data-public-route="introduction"] .home-integrations-heading p { font-size: 14px; }
  body[data-public-route="introduction"] .home-integrations-set { gap: 14px; padding-right: 14px; }
  body[data-public-route="introduction"] .home-integration-card { width: 280px; min-height: 162px; padding: 22px; border-radius: 20px; }

  body[data-public-route="introduction"] .home-foundation-heading,
  body[data-public-route="introduction"] .home-more-heading { margin-bottom: 32px; }
  body[data-public-route="introduction"] .home-foundation-grid > .doc-detail-grid,
  body[data-public-route="introduction"] .home-more-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-public-route="introduction"] .home-foundation-grid .doc-detail-card { min-height: 0; padding: 22px; }
  body[data-public-route="introduction"] .home-more-card { min-height: 96px; padding: 18px; }
  body[data-public-route="introduction"] .home-final-cta { padding: 26px 22px; border-radius: 24px; }
  body[data-public-route="introduction"] .home-cta-actions { flex-wrap: wrap; }
  body[data-public-route="introduction"] .site-footer { width: calc(100% - 40px); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-public-route="introduction"] .hero-module-track { animation: none !important; transform: none !important; }
  body[data-public-route="introduction"] .hero-module-pill { opacity: 1 !important; }
  body[data-public-route="introduction"] .home-scene-content.revealable,
  body[data-public-route="introduction"] .home-scene[data-home-fog]::after { transition: none !important; animation: none !important; }
}

/* Let the background breathe through Home's panels without touching other routes. */
body[data-public-route="introduction"] #introduction > .security-feature,
body[data-public-route="introduction"] #introduction .security-policy,
body[data-public-route="introduction"] #introduction .product-bento-grid .bento-card,
body[data-public-route="introduction"] #introduction .home-scene--moderation,
body[data-public-route="introduction"] #introduction .home-scene--audit,
body[data-public-route="introduction"] #introduction .home-voice-visual,
body[data-public-route="introduction"] #introduction .home-case-visual,
body[data-public-route="introduction"] #introduction .home-role-visual,
body[data-public-route="introduction"] #introduction .home-audit-visual,
body[data-public-route="introduction"] #introduction .home-music-visual,
body[data-public-route="introduction"] #introduction .home-operations-visual,
body[data-public-route="introduction"] #introduction .home-integration-card,
body[data-public-route="introduction"] #introduction .home-foundation-grid .doc-detail-card,
body[data-public-route="introduction"] #introduction .home-more-card,
body[data-public-route="introduction"] #introduction .home-final-cta,
body[data-public-route="introduction"] #introduction .network-community-card {
  border-color: transparent;
}

body[data-public-route="introduction"] #introduction > .security-feature,
body[data-public-route="introduction"] #introduction .security-policy,
body[data-public-route="introduction"] #introduction .product-bento-grid .bento-card,
body[data-public-route="introduction"] #introduction .home-scene--moderation,
body[data-public-route="introduction"] #introduction .home-scene--audit,
body[data-public-route="introduction"] #introduction .home-voice-visual,
body[data-public-route="introduction"] #introduction .home-case-visual,
body[data-public-route="introduction"] #introduction .home-role-visual,
body[data-public-route="introduction"] #introduction .home-audit-visual,
body[data-public-route="introduction"] #introduction .home-music-visual,
body[data-public-route="introduction"] #introduction .home-operations-visual,
body[data-public-route="introduction"] #introduction .home-integration-card,
body[data-public-route="introduction"] #introduction .home-foundation-grid .doc-detail-card,
body[data-public-route="introduction"] #introduction .home-more-card,
body[data-public-route="introduction"] #introduction .home-final-cta,
body[data-public-route="introduction"] #introduction .network-community-card {
  box-shadow: 0 24px 64px rgba(0, 0, 0, .16);
}

/* Give the dotted curves a longer, quiet passage between Home feature scenes. */
@media (min-width: 1101px) {
  body[data-public-route="introduction"] .headless-network-showcase {
    margin-block: clamp(360px, 38vh, 480px) clamp(400px, 42vh, 520px);
  }

  body[data-public-route="introduction"] .security-feature,
  body[data-public-route="introduction"] .product-bento,
  body[data-public-route="introduction"] .home-showcase,
  body[data-public-route="introduction"] .home-integrations,
  body[data-public-route="introduction"] .home-foundation,
  body[data-public-route="introduction"] .home-more,
  body[data-public-route="introduction"] .home-final-cta {
    margin-block: clamp(520px, 50vh, 680px);
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  body[data-public-route="introduction"] #introduction > .home-scene:not(.home-integrations),
  body[data-public-route="introduction"] #introduction > .home-integrations {
    margin-block: 370px;
  }

  body[data-public-route="introduction"] #introduction > .headless-network-showcase.home-scene {
    margin-block: 320px 360px;
  }
}

@media (max-width: 760px) {
  /* The interactive community network is desktop-only; remove its entire
     scene on phones, including margins and keyboard targets. */
  body[data-public-route="introduction"] #introduction > .headless-network-showcase.home-scene {
    display: none !important;
  }

  body[data-public-route="introduction"] #introduction > .home-scene:not(.home-integrations),
  body[data-public-route="introduction"] #introduction > .home-integrations {
    margin-block: 270px;
  }

  body[data-public-route="introduction"] #introduction > .headless-network-showcase.home-scene {
    margin-block: 250px 280px;
  }
}

/* Let each Home module breathe on entry and exit in either scroll direction. */
body[data-public-route="introduction"] #introduction .home-scene-content.revealable {
  opacity: 0;
  transform: translate3d(0, 44px, 0) scale(.984);
  filter: blur(10px);
  transition: opacity .92s cubic-bezier(.2,.7,.2,1),
    transform 1s cubic-bezier(.2,.7,.2,1),
    filter .82s cubic-bezier(.2,.7,.2,1);
}

body[data-public-route="introduction"] #introduction .home-scene-content.revealable.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

body[data-public-route="introduction"] #introduction .home-scene .revealable:not(.home-scene-content):not(.home-scene) {
  transition-duration: .78s, .82s, .68s;
  transition-timing-function: cubic-bezier(.2,.7,.2,1);
}

@media (max-width: 760px) {
  body[data-public-route="introduction"] #introduction .home-scene-content.revealable {
    transform: translate3d(0, 20px, 0) scale(.992);
    filter: blur(3px);
    transition-duration: .58s, .62s, .5s;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-public-route="introduction"] #introduction .home-scene-content.revealable,
  body[data-public-route="introduction"] #introduction .home-scene-content.revealable.is-visible {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none !important;
    animation: none !important;
  }
}

/* Hero-only feature stream: clearer glass, sharper icons and a calmer cadence. */
body[data-public-route="introduction"] .hero-module-stream {
  width: min(100%, 350px);
  height: 374px;
}

body[data-public-route="introduction"] .hero-module-mask {
  width: calc(100% + 64px);
  height: 374px;
  margin-left: -32px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%);
}

body[data-public-route="introduction"] .hero-module-track {
  padding-left: 32px;
  animation-duration: 66s;
}

body[data-public-route="introduction"] .hero-module-set {
  gap: 54px;
  padding-bottom: 54px;
}

body[data-public-route="introduction"] .hero-module-pill {
  box-sizing: border-box;
  min-width: 160px;
  max-width: 214px;
  min-height: 52px;
  padding: 9px 14px;
  gap: 11px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(193, 193, 193, .2);
  border-top-color: rgba(222, 222, 222, .32);
  border-radius: 17px;
  background:
    linear-gradient(112deg, rgba(183, 183, 183, .075), transparent 48%),
    linear-gradient(155deg, rgba(23, 23, 23, .94), rgba(11, 11, 11, .91) 72%);
  box-shadow:
    inset 0 1px 0 rgba(249, 249, 249, .07),
    inset 0 0 0 1px rgba(242, 242, 242, .018),
    0 10px 28px rgba(0, 0, 0, .26),
    0 0 22px rgba(183, 183, 183, .035);
  backdrop-filter: blur(8px) saturate(125%);
  -webkit-backdrop-filter: blur(8px) saturate(125%);
  color: #e2e2e2;
  transition:
    opacity 220ms ease-out,
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    scale 180ms ease;
}

body[data-public-route="introduction"] .hero-module-pill::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(246, 246, 246, .045), transparent 44%, rgba(183, 183, 183, .025));
  content: "";
  pointer-events: none;
}

body[data-public-route="introduction"] .hero-module-pill::after {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 17px;
  width: 34px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(207, 207, 207, .72), transparent);
  box-shadow: 0 0 8px rgba(183, 183, 183, .25);
  content: "";
  pointer-events: none;
}

body[data-public-route="introduction"] .hero-module-icon,
body[data-public-route="introduction"] .hero-module-label {
  position: relative;
  z-index: 1;
}

body[data-public-route="introduction"] .hero-module-icon {
  flex-basis: 28px;
  width: 28px;
  height: 28px;
  border-color: rgba(198, 198, 198, .28);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(183, 183, 183, .17), rgba(84, 84, 84, .09));
  box-shadow: inset 0 1px 0 rgba(249, 249, 249, .09), 0 0 15px rgba(183, 183, 183, .08);
  color: #e4e4e4;
}

body[data-public-route="introduction"] .hero-module-icon svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.8;
}

body[data-public-route="introduction"] .hero-module-label {
  color: inherit;
  font: 650 12px/1.15 "Manrope", "Segoe UI", sans-serif;
  letter-spacing: -.018em;
  text-shadow: 0 1px 8px rgba(236, 236, 236, .08);
}

body[data-public-route="introduction"] .hero-module-pill:hover,
body[data-public-route="introduction"] .hero-module-pill:focus-visible {
  border-color: rgba(202, 202, 202, .48);
  border-top-color: rgba(228, 228, 228, .62);
  background:
    linear-gradient(112deg, rgba(183, 183, 183, .12), transparent 52%),
    linear-gradient(155deg, rgba(31, 31, 31, .97), rgba(13, 13, 13, .96) 72%);
  box-shadow:
    inset 0 1px 0 rgba(249, 249, 249, .1),
    0 12px 30px rgba(0, 0, 0, .3),
    0 0 26px rgba(183, 183, 183, .11);
  color: #f9f9f9;
  scale: 1.025;
}

body[data-public-route="introduction"] .hero-module-pill:focus-visible {
  outline: 2px solid rgba(202, 202, 202, .65);
  outline-offset: 4px;
}

@media (max-width: 820px) {
  body[data-public-route="introduction"] .hero-module-stream,
  body[data-public-route="introduction"] .hero-module-mask {
    height: 300px;
  }
  body[data-public-route="introduction"] .hero-module-set {
    gap: 48px;
    padding-bottom: 48px;
  }
  body[data-public-route="introduction"] .hero-module-track { animation-duration: 60s; }
}

@media (max-width: 600px) {
  body[data-public-route="introduction"] .hero-module-stream,
  body[data-public-route="introduction"] .hero-module-mask {
    height: 260px;
  }
  body[data-public-route="introduction"] .hero-module-pill {
    min-width: 154px;
    max-width: 204px;
    min-height: 50px;
    padding: 8px 11px;
    gap: 9px;
  }
  body[data-public-route="introduction"] .hero-module-icon {
    flex-basis: 26px;
    width: 26px;
    height: 26px;
  }
  body[data-public-route="introduction"] .hero-module-set {
    gap: 44px;
    padding-bottom: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-public-route="introduction"] .hero-module-pill {
    transition: none !important;
  }
}

/* Keep Home modules open on the page: remove the glass plates, not their content. */
body[data-public-route="introduction"] #introduction .security-feature,
body[data-public-route="introduction"] #introduction .security-policy,
body[data-public-route="introduction"] #introduction .product-bento-grid .bento-card,
body[data-public-route="introduction"] #introduction .home-scene--moderation,
body[data-public-route="introduction"] #introduction .home-scene--audit,
body[data-public-route="introduction"] #introduction .home-voice-visual,
body[data-public-route="introduction"] #introduction .home-case-visual,
body[data-public-route="introduction"] #introduction .home-role-visual,
body[data-public-route="introduction"] #introduction .home-audit-visual,
body[data-public-route="introduction"] #introduction .home-music-visual,
body[data-public-route="introduction"] #introduction .home-operations-visual,
body[data-public-route="introduction"] #introduction .home-integration-card,
body[data-public-route="introduction"] #introduction .home-foundation-grid .doc-detail-card,
body[data-public-route="introduction"] #introduction .home-more-card {
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-public-route="introduction"] #introduction .hero-module-pill {
  box-sizing: border-box;
  min-width: 142px;
  max-width: 214px;
  min-height: 46px;
  padding: 7px 12px;
  gap: 10px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(193, 193, 193, .24);
  border-top-color: rgba(222, 222, 222, .34);
  border-radius: 15px;
  background: linear-gradient(150deg, #181818, #0d0d0d 78%) !important;
  box-shadow: inset 0 1px 0 rgba(249, 249, 249, .07), 0 8px 22px rgba(0, 0, 0, .3), 0 0 16px rgba(183, 183, 183, .035);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #d9d9d9;
  transition: opacity 220ms ease-out, color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, scale 180ms ease;
}

body[data-public-route="introduction"] #introduction .hero-module-pill::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(183, 183, 183, .085), transparent 58%);
  content: "";
  pointer-events: none;
}

body[data-public-route="introduction"] #introduction .hero-module-pill::after {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 18px;
  width: 30px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(207, 207, 207, .62), transparent);
  content: "";
  pointer-events: none;
}

body[data-public-route="introduction"] #introduction .hero-module-icon,
body[data-public-route="introduction"] #introduction .hero-module-label {
  position: relative;
  z-index: 1;
}

body[data-public-route="introduction"] #introduction .hero-module-pill:hover,
body[data-public-route="introduction"] #introduction .hero-module-pill:focus-visible {
  border-color: rgba(202, 202, 202, .5);
  border-top-color: rgba(228, 228, 228, .64);
  background: linear-gradient(145deg, #242424, #0d0d0d 78%) !important;
  box-shadow: inset 0 1px 0 rgba(249, 249, 249, .11), 0 10px 26px rgba(0, 0, 0, .34), 0 0 22px rgba(183, 183, 183, .1);
  color: #f4f4f4;
  scale: 1.02;
}

body[data-public-route="introduction"] #introduction .hero-module-pill:focus-visible {
  outline: 2px solid rgba(202, 202, 202, .65);
  outline-offset: 4px;
}

body[data-public-route="introduction"] #introduction .hero-module-icon {
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  border: 1px solid rgba(198, 198, 198, .3);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(183, 183, 183, .16), rgba(84, 84, 84, .08));
  box-shadow: inset 0 1px 0 rgba(249, 249, 249, .08);
  color: #e4e4e4;
}

/* Headless interface marks are neutral; integration logos keep platform colors. */
body[data-public-route="introduction"] #introduction .hero-module-icon svg,
body[data-public-route="introduction"] #introduction .home-feature-points svg,
body[data-public-route="introduction"] #introduction .home-more-card-icon svg,
body[data-public-route="introduction"] #introduction .home-section-emblem svg,
body[data-public-route="introduction"] #introduction .home-visual-chrome svg,
body[data-public-route="introduction"] #introduction .home-scene-cta:not(.hero-cta--invite) svg {
  filter: grayscale(1) brightness(1.2);
}

body[data-public-route="introduction"] .public-wordmark img,
body[data-public-route="introduction"] .brand-mark img {
  filter: grayscale(1) brightness(1.45);
}

/* Neutralize legacy cyan accents inherited from shared Home components. */
body[data-public-route="introduction"] #introduction .network-ambient i {
  background: #cfcfcf !important;
  box-shadow: 0 0 9px rgba(255, 255, 255, .62) !important;
}
body[data-public-route="introduction"] #introduction .network-core span {
  border-color: rgba(220, 220, 220, .22) !important;
}
body[data-public-route="introduction"] #introduction .eyebrow {
  color: #c4c4c4 !important;
  text-shadow: 0 0 10px rgba(235, 235, 235, .25) !important;
}
body[data-public-route="introduction"] #introduction .btn.primary {
  border-color: #f0f0f0 !important;
  background: linear-gradient(135deg, #ffffff, #d7d7d7) !important;
  box-shadow: 0 0 18px rgba(255, 255, 255, .1) !important;
  color: #080808 !important;
}
body[data-public-route="introduction"] #introduction .hero-cta--invite .hero-cta-icon,
body[data-public-route="introduction"] #introduction .hero-cta--invite .hero-cta-icon svg {
  color: #5865f2 !important;
  fill: #5865f2 !important;
  filter: none !important;
}
body[data-public-route="introduction"] #introduction .policy-row b {
  color: #f0f0f0 !important;
  text-shadow: 0 0 5px rgba(255, 255, 255, .22), 0 0 22px rgba(220, 220, 220, .1) !important;
}
body[data-public-route="introduction"] #introduction .home-role-option i {
  background: #777777 !important;
}
body[data-public-route="introduction"] #introduction .home-music-disc-core {
  background: #131313 !important;
}
body[data-public-route="introduction"] #introduction .home-labs-ai-node i {
  box-shadow: 0 0 12px rgba(255, 255, 255, .32) !important;
}
body[data-public-route="introduction"] #introduction .home-scene > .home-scene-index,
body[data-public-route="introduction"] #introduction .home-operations-nav .is-active {
  background-color: rgba(255, 255, 255, .08) !important;
}
body[data-public-route="introduction"] #introduction .home-operations-side i,
body[data-public-route="introduction"] #introduction .labs-chat-flow i,
body[data-public-route="introduction"] #introduction .bento-queue-row i {
  background-color: rgba(255, 255, 255, .08) !important;
}
body[data-public-route="introduction"] #introduction .doc-detail-card h3 {
  text-shadow: 0 0 16px rgba(235, 235, 235, .14) !important;
}
body[data-public-route="introduction"] #introduction .bento-radar-blip,
body[data-public-route="introduction"] #introduction .bento-radar-origin {
  fill: #e5e5e5 !important;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, .55)) !important;
}

body[data-public-route="introduction"] #introduction .hero-module-label {
  color: inherit;
  font: 650 12px/1.15 "Manrope", "Segoe UI", sans-serif;
  letter-spacing: -.018em;
  text-shadow: 0 1px 8px rgba(236, 236, 236, .08);
}

@media (max-width: 600px) {
  body[data-public-route="introduction"] #introduction .hero-module-pill {
    min-width: 132px;
    min-height: 44px;
    padding: 6px 10px;
    gap: 8px;
  }
}

body[data-public-route="introduction"] #introduction .home-visual-chrome,
body[data-public-route="introduction"] #introduction .home-feature-points span {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body[data-public-route="introduction"] #introduction .home-section-emblem,
body[data-public-route="introduction"] #introduction .home-integration-icon,
body[data-public-route="introduction"] #introduction .home-more-card-icon {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-public-route="introduction"] #introduction .product-bento-grid .bento-card::after {
  display: none !important;
}

body[data-public-route="introduction"] #introduction .bento-visual,
body[data-public-route="introduction"] #introduction .access-node,
body[data-public-route="introduction"] #introduction .access-avatar,
body[data-public-route="introduction"] #introduction .assistant-window,
body[data-public-route="introduction"] #introduction .assistant-message,
body[data-public-route="introduction"] #introduction .assistant-prompt,
body[data-public-route="introduction"] #introduction .assistant-mark,
body[data-public-route="introduction"] #introduction .community-core,
body[data-public-route="introduction"] #introduction .community-chip,
body[data-public-route="introduction"] #introduction .network-core,
body[data-public-route="introduction"] #introduction .network-community-card,
body[data-public-route="introduction"] #introduction .home-voice-channel-list,
body[data-public-route="introduction"] #introduction .home-voice-channel-list > div,
body[data-public-route="introduction"] #introduction .home-voice-room,
body[data-public-route="introduction"] #introduction .home-voice-avatar,
body[data-public-route="introduction"] #introduction .home-case-timeline > div,
body[data-public-route="introduction"] #introduction .home-case-mark,
body[data-public-route="introduction"] #introduction .home-case-icon,
body[data-public-route="introduction"] #introduction .home-case-state,
body[data-public-route="introduction"] #introduction .home-role-editor,
body[data-public-route="introduction"] #introduction .home-role-preview,
body[data-public-route="introduction"] #introduction .home-role-pill,
body[data-public-route="introduction"] #introduction .home-role-server-mark,
body[data-public-route="introduction"] #introduction .home-audit-row,
body[data-public-route="introduction"] #introduction .home-audit-symbol,
body[data-public-route="introduction"] #introduction .home-labs-ai-visual,
body[data-public-route="introduction"] #introduction .home-labs-ai-node,
body[data-public-route="introduction"] #introduction .home-labs-ai-core,
body[data-public-route="introduction"] #introduction .home-labs-chat-preview,
body[data-public-route="introduction"] #introduction .labs-chat-user,
body[data-public-route="introduction"] #introduction .labs-chat-assistant,
body[data-public-route="introduction"] #introduction .labs-chat-sigil,
body[data-public-route="introduction"] #introduction .labs-chat-flow,
body[data-public-route="introduction"] #introduction .home-labs-chat-composer,
body[data-public-route="introduction"] #introduction .home-operations-welcome {
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (min-width: 1180px) {
  body[data-public-route="introduction"] #introduction .product-bento-heading {
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .72fr);
    grid-template-rows: auto auto;
    column-gap: clamp(34px, 4vw, 58px);
    row-gap: 0;
    align-items: end;
    max-width: 1120px;
    text-align: left;
  }

  body[data-public-route="introduction"] #introduction .product-bento-heading .home-section-emblem {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    margin-bottom: 12px;
  }

  body[data-public-route="introduction"] #introduction .product-bento-heading > .eyebrow {
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-start;
    margin-bottom: 12px;
  }

  body[data-public-route="introduction"] #introduction .product-bento-heading h2 {
    grid-column: 1;
    grid-row: 2;
    max-width: 760px;
    margin: 0 0 16px;
    text-align: left;
    font-size: clamp(38px, 3vw, 42px);
  }

  body[data-public-route="introduction"] #introduction .product-bento-heading > p {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    margin: 0 0 16px;
    text-align: left;
  }
}

@media (max-width: 1179px) {
  body[data-public-route="introduction"] #introduction .product-bento-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "mark" "eyebrow" "heading" "copy";
    row-gap: 0;
    text-align: left;
  }

  body[data-public-route="introduction"] #introduction .product-bento-heading .home-section-emblem {
    grid-area: mark;
    justify-self: start;
    margin-bottom: 16px;
  }

  body[data-public-route="introduction"] #introduction .product-bento-heading > .eyebrow {
    grid-area: eyebrow;
    justify-content: flex-start;
    margin-bottom: 0;
  }

  body[data-public-route="introduction"] #introduction .product-bento-heading h2 {
    grid-area: heading;
    margin: 16px 0 12px;
    text-align: left;
    font-size: clamp(31px, 5vw, 42px);
  }

  body[data-public-route="introduction"] #introduction .product-bento-heading > p {
    grid-area: copy;
    margin: 0;
    text-align: left;
  }
}

/* Bento card rebuild — scoped to the Home feature showcase only. */
body[data-public-route="introduction"] #introduction .product-bento-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(408px, auto));
  grid-auto-rows: auto;
  align-items: stretch;
  gap: 18px;
}

body[data-public-route="introduction"] #introduction .product-bento-grid > .bento-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  gap: 17px;
  min-width: 0;
  min-height: 408px;
  overflow: hidden;
  padding: clamp(22px, 2.3vw, 30px);
  border: 1px solid rgba(185, 185, 185, .15) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(ellipse at 88% 0%, rgba(153, 153, 153, .075), transparent 45%),
    linear-gradient(145deg, rgba(18, 18, 18, .97), rgba(11, 11, 11, .97)) !important;
  box-shadow: inset 0 1px rgba(243, 243, 243, .035), 0 20px 54px rgba(0, 0, 0, .2) !important;
  color: var(--home-text);
  text-decoration: none;
  transition: transform 260ms cubic-bezier(.2, .7, .2, 1), border-color 260ms ease, box-shadow 260ms ease;
}

body[data-public-route="introduction"] #introduction .product-bento-grid > .bento-card > .bento-copy,
body[data-public-route="introduction"] #introduction .product-bento-grid > .bento-card > .bento-visual,
body[data-public-route="introduction"] #introduction .product-bento-grid > .bento-card > .bento-link {
  grid-area: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

body[data-public-route="introduction"] #introduction .bento-card-security { grid-column: 1 / span 7; grid-row: 1; }
body[data-public-route="introduction"] #introduction .bento-card-voicemaster { grid-column: 8 / -1; grid-row: 1; }
body[data-public-route="introduction"] #introduction .bento-card-voice-channels { grid-column: 1 / span 5; grid-row: 2; }
body[data-public-route="introduction"] #introduction .bento-card-music { grid-column: 6 / -1; grid-row: 2; }

body[data-public-route="introduction"] #introduction .product-bento-grid > .bento-card::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(112deg, rgba(194, 194, 194, .035), transparent 35% 72%, rgba(194, 194, 194, .018));
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

body[data-public-route="introduction"] #introduction .product-bento-grid > .bento-card:hover {
  transform: translateY(-3px);
  border-color: rgba(196, 196, 196, .32) !important;
  box-shadow: inset 0 1px rgba(243, 243, 243, .05), 0 26px 62px rgba(0, 0, 0, .27), 0 0 28px rgba(154, 154, 154, .045) !important;
}

body[data-public-route="introduction"] #introduction .product-bento-grid > .bento-card:hover::after { opacity: 1; }

body[data-public-route="introduction"] #introduction .product-bento-grid > .bento-card:focus-visible {
  outline: 2px solid rgba(195, 195, 195, .78);
  outline-offset: 4px;
}

body[data-public-route="introduction"] #introduction .bento-copy {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
  padding: 0;
}

body[data-public-route="introduction"] #introduction .bento-index {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #bebebe;
  font: 650 9px/1.3 "JetBrains Mono", "Consolas", monospace;
  letter-spacing: .12em;
}

body[data-public-route="introduction"] #introduction .bento-index::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--home-accent);
  box-shadow: 0 0 10px rgba(195, 195, 195, .36);
  content: "";
}

body[data-public-route="introduction"] #introduction .bento-copy h3 {
  max-width: 34ch;
  margin: 12px 0 7px;
  color: #f2f2f2;
  font: 650 clamp(20px, 2.05vw, 27px)/1.15 "Manrope", "Segoe UI", sans-serif;
  letter-spacing: -.045em;
  text-wrap: balance;
}

body[data-public-route="introduction"] #introduction .bento-copy p {
  max-width: 58ch;
  margin: 0;
  color: #a6a6a6;
  font: 400 12.5px/1.65 "Manrope", "Segoe UI", sans-serif;
}

body[data-public-route="introduction"] #introduction .bento-link {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 19px;
  color: #cdcdcd;
  font: 600 11px/1.4 "Manrope", "Segoe UI", sans-serif;
  letter-spacing: -.01em;
}

body[data-public-route="introduction"] #introduction .bento-link b {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border: 1px solid rgba(190, 190, 190, .16);
  border-radius: 50%;
  color: #dbdbdb;
  font-size: 11px;
  font-weight: 500;
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

body[data-public-route="introduction"] #introduction .bento-card:hover .bento-link b {
  transform: translate(1px, -1px);
  border-color: rgba(190, 190, 190, .42);
  background: rgba(154, 154, 154, .1);
}

body[data-public-route="introduction"] #introduction .bento-visual {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body[data-public-route="introduction"] #introduction .bento-visual-label {
  position: static;
  display: block;
  margin-top: 10px;
  color: rgba(158, 158, 158, .72);
  font: 550 8px/1.4 "JetBrains Mono", "Consolas", monospace;
  letter-spacing: .08em;
}

body[data-public-route="introduction"] #introduction .bento-visual-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  color: #b1b1b1;
  font: 650 8px/1.4 "JetBrains Mono", "Consolas", monospace;
  letter-spacing: .1em;
}

body[data-public-route="introduction"] #introduction .bento-visual-head > span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

body[data-public-route="introduction"] #introduction .bento-visual-head svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  fill: none;
  stroke: #c1c1c1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

body[data-public-route="introduction"] #introduction .bento-visual-head small {
  flex: 0 0 auto;
  color: rgba(155, 155, 155, .62);
  font: inherit;
  font-size: 7px;
  letter-spacing: .08em;
}

/* Security diagram: documented Anti-Nuke policy concepts, not Fake Permissions. */
body[data-public-route="introduction"] #introduction .bento-security-map {
  position: relative;
  display: grid;
  min-height: 202px;
  grid-template-columns: minmax(94px, .48fr) minmax(0, 1.52fr);
  align-items: center;
  gap: clamp(13px, 2vw, 25px);
}

body[data-public-route="introduction"] #introduction .bento-security-connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

body[data-public-route="introduction"] #introduction .bento-security-connections path {
  fill: none;
  stroke: rgba(174, 174, 174, .38);
  stroke-dasharray: 3 6;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.25;
}

body[data-public-route="introduction"] #introduction .bento-security-connections circle {
  fill: #bcbcbc;
  filter: drop-shadow(0 0 4px rgba(195, 195, 195, .3));
}

body[data-public-route="introduction"] #introduction .bento-card-security.has-entered .bento-security-connections path {
  animation: bento-security-trace 1.7s cubic-bezier(.2, .7, .2, 1) both;
}

body[data-public-route="introduction"] #introduction .bento-security-core {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 6px;
  color: #b4b4b4;
  font: 600 8px/1.2 "JetBrains Mono", "Consolas", monospace;
  letter-spacing: .14em;
  text-align: center;
}

body[data-public-route="introduction"] #introduction .security-core-icon {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border: 1px solid rgba(179, 179, 179, .25);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(32, 32, 32, .82), rgba(16, 16, 16, .94));
  box-shadow: inset 0 1px rgba(242, 242, 242, .055), 0 0 26px rgba(168, 168, 168, .06);
}

body[data-public-route="introduction"] #introduction .security-core-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: #c5c5c5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}

body[data-public-route="introduction"] #introduction .bento-security-core > b {
  color: #ebebeb;
  font-size: 10px;
  letter-spacing: .18em;
}

body[data-public-route="introduction"] #introduction .bento-security-nodes {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
}

body[data-public-route="introduction"] #introduction .bento-security-nodes > div {
  display: grid;
  min-width: 0;
  grid-template-columns: 6px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid rgba(158, 158, 158, .12);
  border-radius: 9px;
  background: rgba(16, 16, 16, .86);
}

body[data-public-route="introduction"] #introduction .bento-security-nodes > div > i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #959595;
  box-shadow: 0 0 8px rgba(195, 195, 195, .36);
}

body[data-public-route="introduction"] #introduction .bento-security-nodes > div > span {
  overflow: hidden;
  color: #d8d8d8;
  font: 550 9px/1.3 "Manrope", "Segoe UI", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-public-route="introduction"] #introduction .bento-security-nodes > div > b {
  color: #aeaeae;
  font: 550 7px/1.3 "JetBrains Mono", "Consolas", monospace;
  letter-spacing: .03em;
  text-align: right;
}

/* Headless VC setup timeline. */
body[data-public-route="introduction"] #introduction .bento-setup-timeline {
  position: relative;
  display: grid;
  gap: 13px;
  padding: 0 0 0 2px;
}

body[data-public-route="introduction"] #introduction .bento-setup-progress {
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 18px;
  width: 1px;
  background: rgba(170, 170, 170, .2);
  transform: scaleY(0);
  transform-origin: top;
}

body[data-public-route="introduction"] #introduction .bento-setup-progress::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #c9c9c9, rgba(164, 164, 164, .52));
  content: "";
  box-shadow: 0 0 9px rgba(195, 195, 195, .24);
}

body[data-public-route="introduction"] #introduction .bento-card-voicemaster.has-entered .bento-setup-progress {
  animation: bento-setup-progress 1.55s .2s cubic-bezier(.24, .7, .2, 1) forwards;
}

body[data-public-route="introduction"] #introduction .bento-setup-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 37px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-height: 38px;
  opacity: 1;
}

body[data-public-route="introduction"] #introduction .bento-card-voicemaster.has-entered .bento-setup-step {
  animation: bento-setup-step-in 380ms cubic-bezier(.2, .7, .2, 1) both;
}

body[data-public-route="introduction"] #introduction .bento-card-voicemaster.has-entered .bento-setup-step:nth-child(2) { animation-delay: 520ms; }
body[data-public-route="introduction"] #introduction .bento-card-voicemaster.has-entered .bento-setup-step:nth-child(3) { animation-delay: 920ms; }
body[data-public-route="introduction"] #introduction .bento-card-voicemaster.has-entered .bento-setup-step:nth-child(4) { animation-delay: 1320ms; }

body[data-public-route="introduction"] #introduction .bento-setup-step > i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(182, 182, 182, .2);
  border-radius: 11px;
  background: #171717;
  color: #8c8c8c;
  font-style: normal;
}

body[data-public-route="introduction"] #introduction .bento-setup-step > i svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}

body[data-public-route="introduction"] #introduction .bento-setup-step:last-of-type > i {
  border-color: rgba(190, 190, 190, .38);
  background: rgba(41, 41, 41, .72);
  color: #b7b7b7;
}

body[data-public-route="introduction"] #introduction .bento-setup-step > span {
  display: grid;
  gap: 3px;
}

body[data-public-route="introduction"] #introduction .bento-setup-step b {
  color: #dfdfdf;
  font: 600 10px/1.35 "Manrope", "Segoe UI", sans-serif;
}

body[data-public-route="introduction"] #introduction .bento-setup-step small {
  color: #8e8e8e;
  font: 400 8px/1.35 "Manrope", "Segoe UI", sans-serif;
}

/* Discord-like fictional channel list, with no borrowed avatars or live data. */
body[data-public-route="introduction"] #introduction .bento-voice-list {
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 4px 0;
}

body[data-public-route="introduction"] #introduction .bento-voice-channel {
  display: grid;
  min-height: 38px;
  grid-template-columns: 17px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-radius: 8px;
  color: #b1b1b1;
  font: 550 10px/1.3 "Manrope", "Segoe UI", sans-serif;
}

body[data-public-route="introduction"] #introduction .bento-voice-channel > svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #808080;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

body[data-public-route="introduction"] #introduction .bento-voice-channel > b {
  color: #838383;
  font-size: 12px;
  font-weight: 500;
}

body[data-public-route="introduction"] #introduction .bento-voice-room {
  border-left: 2px solid rgba(189, 189, 189, .48);
  background: linear-gradient(90deg, rgba(128, 128, 128, .12), rgba(21, 21, 21, .3));
  color: #e7e7e7;
}

body[data-public-route="introduction"] #introduction .bento-voice-room > svg { stroke: #818181; }

body[data-public-route="introduction"] #introduction .bento-voice-lock,
body[data-public-route="introduction"] #introduction .bento-voice-lock svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #a1a1a1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

body[data-public-route="introduction"] #introduction .bento-voice-members {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0 0 39px;
}

body[data-public-route="introduction"] #introduction .bento-demo-avatar {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid rgba(207, 207, 207, .3);
  border-radius: 50%;
  background: linear-gradient(145deg, #606060, #2c2c2c);
  color: #eeeeee;
  font: 700 8px/1 "Manrope", "Segoe UI", sans-serif;
}

body[data-public-route="introduction"] #introduction .bento-demo-avatar--alt {
  margin-left: -11px;
  background: linear-gradient(145deg, #5b5b5b, #303030);
}

body[data-public-route="introduction"] #introduction .bento-voice-members small {
  margin-left: 2px;
  color: #939393;
  font: 450 8px/1.3 "Manrope", "Segoe UI", sans-serif;
}

body[data-public-route="introduction"] #introduction .bento-card-voice-channels.has-entered .bento-voice-room {
  animation: bento-channel-arrive 1.15s .3s cubic-bezier(.2, .7, .2, 1) both;
}

body[data-public-route="introduction"] #introduction .bento-card-voice-channels.has-entered .bento-voice-members {
  animation: bento-channel-members 900ms 950ms cubic-bezier(.2, .7, .2, 1) both;
}

/* Original music-player illustration. This is an inert preview, not playback. */
body[data-public-route="introduction"] #introduction .bento-player-stack {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 7px 0 0;
}

body[data-public-route="introduction"] #introduction .bento-player-back {
  position: absolute;
  right: 10px;
  left: 10px;
  height: 57px;
  border: 1px solid rgba(147, 147, 147, .1);
  border-radius: 12px;
  background: #121212;
}

body[data-public-route="introduction"] #introduction .bento-player-back--one { top: 0; opacity: .75; transform: translateY(4px) scale(.985); }
body[data-public-route="introduction"] #introduction .bento-player-back--two { top: -4px; opacity: .35; transform: translateY(7px) scale(.97); }

body[data-public-route="introduction"] #introduction .bento-player-main {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(162, 162, 162, .18);
  border-radius: 13px;
  background: linear-gradient(132deg, #1b1b1b, #121212 74%);
  box-shadow: 0 11px 26px rgba(0, 0, 0, .22), inset 0 1px rgba(247, 247, 247, .035);
}

body[data-public-route="introduction"] #introduction .bento-album-art {
  position: relative;
  display: grid;
  width: 68px;
  aspect-ratio: 1;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(195, 195, 195, .24);
  border-radius: 10px;
  background: radial-gradient(circle at 69% 25%, rgba(193, 193, 193, .72), transparent 24%), radial-gradient(ellipse at 22% 82%, rgba(102, 102, 102, .94), transparent 45%), linear-gradient(145deg, #353535, #181818 70%);
  box-shadow: 0 0 22px rgba(158, 158, 158, .1);
}

body[data-public-route="introduction"] #introduction .bento-album-art::before,
body[data-public-route="introduction"] #introduction .bento-album-art::after,
body[data-public-route="introduction"] #introduction .bento-album-art > span {
  position: absolute;
  width: 90px;
  height: 90px;
  border: 1px solid rgba(209, 209, 209, .27);
  border-radius: 50%;
  content: "";
}

body[data-public-route="introduction"] #introduction .bento-album-art::before { top: -42px; right: -40px; background: linear-gradient(145deg, rgba(196, 196, 196, .22), transparent 65%); }
body[data-public-route="introduction"] #introduction .bento-album-art::after { bottom: -52px; left: -33px; border-color: rgba(173, 173, 173, .18); }
body[data-public-route="introduction"] #introduction .bento-album-art > span { top: 19px; left: 19px; width: 28px; height: 28px; border-color: rgba(218, 218, 218, .35); }

body[data-public-route="introduction"] #introduction .bento-album-art > i {
  position: absolute;
  inset: 0;
  background: linear-gradient(132deg, transparent 38%, rgba(183, 183, 183, .14), transparent 64%);
}

body[data-public-route="introduction"] #introduction .bento-album-art > b {
  position: relative;
  z-index: 1;
  color: rgba(242, 242, 242, .85);
  font: 700 14px/1 "Manrope", "Segoe UI", sans-serif;
  letter-spacing: -.08em;
}

body[data-public-route="introduction"] #introduction .bento-track-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

body[data-public-route="introduction"] #introduction .bento-track-copy > small:first-child {
  color: #b2b2b2;
  font: 550 7px/1.3 "JetBrains Mono", "Consolas", monospace;
  letter-spacing: .1em;
}

body[data-public-route="introduction"] #introduction .bento-track-copy > strong {
  overflow: hidden;
  color: #eaeaea;
  font: 650 12px/1.3 "Manrope", "Segoe UI", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-public-route="introduction"] #introduction .bento-track-copy > span {
  color: #9e9e9e;
  font: 450 9px/1.3 "Manrope", "Segoe UI", sans-serif;
}

body[data-public-route="introduction"] #introduction .bento-track-progress {
  position: relative;
  display: block;
  height: 3px;
  overflow: hidden;
  margin-top: 5px;
  border-radius: 4px;
  background: rgba(167, 167, 167, .2);
}

body[data-public-route="introduction"] #introduction .bento-track-progress > i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 39%;
  border-radius: inherit;
  background: linear-gradient(90deg, #676767, #aaaaaa);
  box-shadow: 0 0 8px rgba(195, 195, 195, .24);
}

body[data-public-route="introduction"] #introduction .bento-queue-count {
  align-self: start;
  color: #c8c8c8;
  font: 550 9px/1.3 "JetBrains Mono", "Consolas", monospace;
  white-space: nowrap;
}

body[data-public-route="introduction"] #introduction .bento-queue-count i {
  color: #838383;
  font-style: normal;
}

body[data-public-route="introduction"] #introduction .bento-track-time {
  display: flex;
  justify-content: space-between;
  color: #7e7e7e;
  font: 450 7px/1.3 "JetBrains Mono", "Consolas", monospace;
}

body[data-public-route="introduction"] #introduction .bento-queue-row {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  grid-template-columns: 24px minmax(0, 1fr) minmax(75px, auto) 35px;
  align-items: center;
  gap: 8px;
  padding: 5px 13px;
  border-bottom: 1px solid rgba(164, 164, 164, .09);
  color: #b5b5b5;
  font: 500 8px/1.35 "Manrope", "Segoe UI", sans-serif;
}

body[data-public-route="introduction"] #introduction .bento-queue-row > i,
body[data-public-route="introduction"] #introduction .bento-queue-row > time {
  color: #838383;
  font: 500 7px/1.3 "JetBrains Mono", "Consolas", monospace;
  font-style: normal;
}

body[data-public-route="introduction"] #introduction .bento-queue-row > small {
  overflow: hidden;
  color: #7f7f7f;
  font: 450 7px/1.3 "Manrope", "Segoe UI", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes bento-security-trace {
  from { opacity: .28; stroke-dashoffset: 28; }
  to { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes bento-setup-progress { to { transform: scaleY(1); } }

@keyframes bento-setup-step-in {
  from { opacity: .48; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bento-channel-arrive {
  from { opacity: .35; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bento-channel-members {
  from { opacity: .45; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 1101px) {
  body[data-public-route="introduction"] #introduction .bento-card-voicemaster,
  body[data-public-route="introduction"] #introduction .bento-card-voice-channels {
    min-height: 408px;
  }

  body[data-public-route="introduction"] #introduction .bento-card-security,
  body[data-public-route="introduction"] #introduction .bento-card-music {
    min-height: 432px;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  body[data-public-route="introduction"] #introduction .product-bento-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  body[data-public-route="introduction"] #introduction .bento-card-security,
  body[data-public-route="introduction"] #introduction .bento-card-music { grid-column: 1 / -1; min-height: 390px; }
  body[data-public-route="introduction"] #introduction .bento-card-security { grid-row: auto; }
  body[data-public-route="introduction"] #introduction .bento-card-voicemaster { grid-column: 1 / span 3; grid-row: auto; min-height: 390px; }
  body[data-public-route="introduction"] #introduction .bento-card-voice-channels { grid-column: 4 / span 3; grid-row: auto; min-height: 390px; }
  body[data-public-route="introduction"] #introduction .bento-card-music { grid-row: auto; }
}

@media (max-width: 760px) {
  body[data-public-route="introduction"] #introduction .product-bento-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 14px;
  }

  body[data-public-route="introduction"] #introduction .product-bento-grid > .bento-card {
    grid-column: 1;
    grid-row: auto;
    min-height: 362px;
    padding: 22px;
    gap: 14px;
    border-radius: 18px !important;
  }

  body[data-public-route="introduction"] #introduction .bento-card-security,
  body[data-public-route="introduction"] #introduction .bento-card-music { min-height: 398px; }

  body[data-public-route="introduction"] #introduction .bento-copy h3 { max-width: 28ch; font-size: clamp(20px, 5vw, 24px); }
  body[data-public-route="introduction"] #introduction .bento-copy p { max-width: 54ch; font-size: 12px; }
  body[data-public-route="introduction"] #introduction .bento-security-map { min-height: 198px; grid-template-columns: minmax(76px, .38fr) minmax(0, 1.62fr); gap: 10px; }
  body[data-public-route="introduction"] #introduction .security-core-icon { width: 50px; height: 50px; border-radius: 15px; }
  body[data-public-route="introduction"] #introduction .bento-security-nodes > div { grid-template-columns: 5px minmax(0, 1fr); gap: 7px; padding-inline: 8px; }
  body[data-public-route="introduction"] #introduction .bento-security-nodes > div > b { grid-column: 2; text-align: left; }
}

@media (max-width: 390px) {
  body[data-public-route="introduction"] #introduction .product-bento-grid > .bento-card { padding: 19px; }
  body[data-public-route="introduction"] #introduction .bento-visual-head { gap: 8px; font-size: 7px; }
  body[data-public-route="introduction"] #introduction .bento-visual-head small { font-size: 6px; }
  body[data-public-route="introduction"] #introduction .bento-security-nodes > div > span { font-size: 9px; }
  body[data-public-route="introduction"] #introduction .bento-security-nodes > div > b { font-size: 7px; }
  body[data-public-route="introduction"] #introduction .bento-player-main { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 9px; padding: 10px; }
  body[data-public-route="introduction"] #introduction .bento-album-art { width: 54px; }
  body[data-public-route="introduction"] #introduction .bento-queue-row { grid-template-columns: 20px minmax(0, 1fr) 30px; gap: 6px; padding-inline: 9px; }
  body[data-public-route="introduction"] #introduction .bento-queue-row > small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-public-route="introduction"] #introduction .product-bento-grid > .bento-card,
  body[data-public-route="introduction"] #introduction .product-bento-grid > .bento-card::after,
  body[data-public-route="introduction"] #introduction .bento-link b {
    transition: none !important;
  }

  body[data-public-route="introduction"] #introduction .bento-security-connections path,
  body[data-public-route="introduction"] #introduction .bento-setup-progress,
  body[data-public-route="introduction"] #introduction .bento-setup-step,
  body[data-public-route="introduction"] #introduction .bento-voice-room,
  body[data-public-route="introduction"] #introduction .bento-voice-members {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  body[data-public-route="introduction"] #introduction .bento-setup-progress { transform: scaleY(1); }
}

/* Restore the animated Anti-Nuke radar and extend the Home-only bento showcase. */
body[data-public-route="introduction"] #introduction .product-bento-grid {
  grid-template-rows: repeat(3, minmax(220px, auto));
}

body[data-public-route="introduction"] #introduction .product-bento-grid > .bento-card-radar {
  grid-column: 1 / span 7 !important;
  grid-row: 1 !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-items: center;
  min-height: 420px !important;
}

body[data-public-route="introduction"] #introduction .product-bento-grid > .bento-card-radar > .bento-visual {
  grid-area: 1 / 1 !important;
  overflow: visible;
}

body[data-public-route="introduction"] #introduction .product-bento-grid > .bento-card-radar > .bento-copy {
  grid-area: 1 / 2 !important;
  align-self: center;
  padding: 0 4px 0 0;
}

body[data-public-route="introduction"] #introduction .product-bento-grid > .bento-card-radar > .bento-link {
  grid-area: 2 / 1 / auto / -1 !important;
}

body[data-public-route="introduction"] #introduction .bento-card-filters {
  grid-column: 8 / -1 !important;
  grid-row: 1 !important;
  min-height: 250px !important;
  padding: 22px;
  gap: 10px;
}

body[data-public-route="introduction"] #introduction .bento-card-logs {
  grid-column: 1 / span 4 !important;
  grid-row: 2 !important;
  min-height: 350px !important;
  padding: 22px;
  gap: 10px;
}

body[data-public-route="introduction"] #introduction .bento-card-voicemaster {
  grid-column: 5 / span 4 !important;
  grid-row: 2 !important;
  min-height: 350px !important;
}

body[data-public-route="introduction"] #introduction .bento-card-voice-channels {
  grid-column: 9 / -1 !important;
  grid-row: 2 !important;
  min-height: 350px !important;
}

body[data-public-route="introduction"] #introduction .bento-card-music {
  grid-column: 1 / span 7 !important;
  grid-row: 3 !important;
  min-height: 350px !important;
}

body[data-public-route="introduction"] #introduction .bento-card-queue {
  grid-column: 8 / -1 !important;
  grid-row: 3 !important;
  min-height: 350px !important;
}

body[data-public-route="introduction"] #introduction .bento-radar-visual {
  align-items: center;
  justify-content: center;
  padding: 2px 10px 18px;
}

body[data-public-route="introduction"] #introduction .bento-radar-scope {
  display: block;
  width: min(100%, 330px);
  max-height: 100%;
  overflow: visible;
}

body[data-public-route="introduction"] #introduction .bento-radar-field { opacity: .72; }

body[data-public-route="introduction"] #introduction .bento-radar-grid circle,
body[data-public-route="introduction"] #introduction .bento-radar-grid path {
  fill: none;
  stroke: rgba(172, 172, 172, .17);
  stroke-width: 1;
}

body[data-public-route="introduction"] #introduction .bento-radar-grid path {
  stroke-dasharray: 2 7;
  stroke: rgba(172, 172, 172, .12);
}

body[data-public-route="introduction"] #introduction .bento-radar-sweep {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

body[data-public-route="introduction"] #introduction .bento-card-radar.has-entered .bento-radar-sweep {
  animation: bento-radar-rotate 7.2s linear infinite;
}

body[data-public-route="introduction"] #introduction .bento-radar-sweep > path:last-child {
  fill: none;
  stroke: rgba(198, 198, 198, .75);
  stroke-width: 1.4;
}

body[data-public-route="introduction"] #introduction .bento-radar-blip {
  fill: #d3d3d3;
  filter: drop-shadow(0 0 4px rgba(193, 193, 193, .68));
}

body[data-public-route="introduction"] #introduction .bento-card-radar.has-entered .bento-radar-blip {
  animation: bento-radar-ping 3.4s ease-in-out infinite;
}

body[data-public-route="introduction"] #introduction .bento-radar-blip--soft { opacity: .68; animation-delay: 1.2s !important; }
body[data-public-route="introduction"] #introduction .bento-radar-blip--alert { fill: #ec7185; filter: drop-shadow(0 0 5px rgba(236, 113, 133, .55)); animation-delay: .55s !important; }
body[data-public-route="introduction"] #introduction .bento-radar-origin { fill: #e7e7e7; filter: drop-shadow(0 0 5px rgba(193, 193, 193, .7)); }

body[data-public-route="introduction"] #introduction .bento-radar-visual .bento-visual-label {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
}

body[data-public-route="introduction"] #introduction .bento-filter-visual {
  display: flex;
  min-height: 0;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: visible;
}

body[data-public-route="introduction"] #introduction .bento-reference-art {
  display: block;
  max-width: 100%;
  max-height: 210px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
  object-fit: contain;
  object-position: center;
}

body[data-public-route="introduction"] #introduction .bento-filter-visual .bento-reference-art--shield {
  width: min(45%, 190px);
}

body[data-public-route="introduction"] #introduction .bento-filter-visual .bento-reference-art--diagram {
  width: min(55%, 240px);
  height: auto;
  filter: invert(1) hue-rotate(180deg);
  mix-blend-mode: screen;
}

body[data-public-route="introduction"] #introduction .bento-reference-art--dark-matte {
  filter: invert(1) hue-rotate(180deg);
  mix-blend-mode: screen;
}

body[data-public-route="introduction"] #introduction .bento-filter-visual .bento-visual-label {
  position: absolute;
  inset: auto 0 0;
  margin: 0;
  text-align: center;
}

body[data-public-route="introduction"] #introduction .bento-logs-visual {
  justify-content: center;
  gap: 5px;
  overflow: visible;
}

body[data-public-route="introduction"] #introduction .bento-log-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 5px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 27px;
  border-bottom: 1px solid rgba(182, 182, 182, .09);
}

body[data-public-route="introduction"] #introduction .bento-log-row > i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #979797;
  box-shadow: 0 0 7px rgba(187, 187, 187, .5);
}

body[data-public-route="introduction"] #introduction .bento-log-row > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

body[data-public-route="introduction"] #introduction .bento-log-row b {
  overflow: hidden;
  color: #d0d0d0;
  font: 600 9px/1.25 "Manrope", "Segoe UI", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-public-route="introduction"] #introduction .bento-log-row small,
body[data-public-route="introduction"] #introduction .bento-log-row time {
  color: #838383;
  font: 500 7px/1.3 "JetBrains Mono", "Consolas", monospace;
  letter-spacing: .04em;
}

body[data-public-route="introduction"] #introduction .bento-logs-visual .bento-visual-label {
  margin-top: 5px;
}

body[data-public-route="introduction"] #introduction .bento-reference-visual {
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: visible;
}

body[data-public-route="introduction"] #introduction .bento-reference-visual > .bento-reference-art {
  width: min(100%, 300px);
}

body[data-public-route="introduction"] #introduction .bento-queue-visual > .bento-reference-art {
  width: min(100%, 430px);
  max-height: 185px;
}

body[data-public-route="introduction"] #introduction .bento-reference-visual .bento-visual-label {
  margin-top: 0;
  text-align: center;
}

@keyframes bento-radar-rotate { to { transform: rotate(360deg); } }
@keyframes bento-radar-ping { 0%, 100% { opacity: .48; } 45% { opacity: 1; } }

@media (min-width: 761px) and (max-width: 1100px) {
  body[data-public-route="introduction"] #introduction .product-bento-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  body[data-public-route="introduction"] #introduction .bento-card-radar,
  body[data-public-route="introduction"] #introduction .bento-card-music,
  body[data-public-route="introduction"] #introduction .bento-card-queue {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: 360px !important;
  }

  body[data-public-route="introduction"] #introduction .product-bento-grid > .bento-card-radar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    min-height: 360px !important;
  }

  body[data-public-route="introduction"] #introduction .bento-card-filters,
  body[data-public-route="introduction"] #introduction .bento-card-logs {
    grid-column: span 3 !important;
    grid-row: auto !important;
    min-height: 265px !important;
  }

  body[data-public-route="introduction"] #introduction .bento-card-voicemaster,
  body[data-public-route="introduction"] #introduction .bento-card-voice-channels {
    grid-column: span 3 !important;
    grid-row: auto !important;
    min-height: 330px !important;
  }
}

@media (max-width: 760px) {
  body[data-public-route="introduction"] #introduction .product-bento-grid { grid-template-rows: auto; }

  body[data-public-route="introduction"] #introduction .product-bento-grid > .bento-card {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  body[data-public-route="introduction"] #introduction .product-bento-grid > .bento-card-radar {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(210px, 1fr) auto !important;
    min-height: 430px !important;
  }

  body[data-public-route="introduction"] #introduction .product-bento-grid > .bento-card-radar > .bento-copy { grid-area: 1 / 1 !important; }
  body[data-public-route="introduction"] #introduction .product-bento-grid > .bento-card-radar > .bento-visual { grid-area: 2 / 1 !important; }
  body[data-public-route="introduction"] #introduction .product-bento-grid > .bento-card-radar > .bento-link { grid-area: 3 / 1 !important; }

  body[data-public-route="introduction"] #introduction .bento-card-filters,
  body[data-public-route="introduction"] #introduction .bento-card-logs { min-height: 300px !important; }

  body[data-public-route="introduction"] #introduction .bento-card-voicemaster,
  body[data-public-route="introduction"] #introduction .bento-card-voice-channels { min-height: 330px !important; }

  body[data-public-route="introduction"] #introduction .bento-card-queue { min-height: 310px !important; }
  body[data-public-route="introduction"] #introduction .bento-radar-scope { width: min(100%, 280px); }
  body[data-public-route="introduction"] #introduction .bento-filter-visual .bento-reference-art--shield { width: min(39%, 132px); }
  body[data-public-route="introduction"] #introduction .bento-filter-visual .bento-reference-art--diagram { width: min(61%, 198px); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-public-route="introduction"] #introduction .bento-radar-sweep,
  body[data-public-route="introduction"] #introduction .bento-radar-blip {
    animation: none !important;
  }
}

/* Keep Home previews in the real Headless feature module they represent. */
body[data-public-route="introduction"] #introduction .product-bento-modules {
  display: grid;
  gap: clamp(36px, 5vw, 64px);
}

body[data-public-route="introduction"] #introduction .product-bento-module {
  display: grid;
  min-width: 0;
  gap: 18px;
  scroll-margin-top: 104px;
}

body[data-public-route="introduction"] #introduction .product-bento-module-heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--home-line);
}

body[data-public-route="introduction"] #introduction .product-bento-module-heading > span {
  flex: 0 0 auto;
  color: #bababa;
  font: 650 8px/1.3 "JetBrains Mono", "Consolas", monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body[data-public-route="introduction"] #introduction .product-bento-module-heading > h3 {
  margin: 0;
  color: #e4e4e4;
  font: 600 clamp(16px, 1.5vw, 19px)/1.25 "Manrope", "Segoe UI", sans-serif;
  letter-spacing: -.025em;
}

body[data-public-route="introduction"] #introduction .product-bento-module .product-bento-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto;
  align-items: stretch;
  gap: 18px;
  margin: 0;
}

body[data-public-route="introduction"] #introduction .product-bento-module .product-bento-grid > .bento-card {
  grid-column: auto !important;
  grid-row: auto !important;
  min-height: 370px;
}

body[data-public-route="introduction"] #introduction .product-bento-module--security .product-bento-grid > .bento-card-radar {
  grid-column: 1 / span 7 !important;
  min-height: 435px !important;
}

body[data-public-route="introduction"] #introduction .product-bento-module--security .product-bento-grid > .bento-card-filters {
  grid-column: 8 / -1 !important;
  min-height: 435px !important;
}

body[data-public-route="introduction"] #introduction .product-bento-module--logs .product-bento-grid > .bento-card-logs {
  display: grid;
  grid-column: 1 / -1 !important;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-items: center;
  min-height: 285px !important;
}

body[data-public-route="introduction"] #introduction .product-bento-module--logs .product-bento-grid > .bento-card-logs > .bento-copy {
  grid-area: 1 / 1 !important;
  align-self: center;
}

body[data-public-route="introduction"] #introduction .product-bento-module--logs .product-bento-grid > .bento-card-logs > .bento-visual {
  grid-area: 1 / 2 !important;
  width: 100%;
}

body[data-public-route="introduction"] #introduction .product-bento-module--logs .product-bento-grid > .bento-card-logs > .bento-link {
  grid-area: 2 / 1 / auto / -1 !important;
}

body[data-public-route="introduction"] #introduction .product-bento-module--voice .product-bento-grid > .bento-card-voicemaster {
  grid-column: 1 / span 5 !important;
  min-height: 390px !important;
}

body[data-public-route="introduction"] #introduction .product-bento-module--voice .product-bento-grid > .bento-card-voice-channels {
  grid-column: 6 / -1 !important;
  min-height: 390px !important;
}

body[data-public-route="introduction"] #introduction .product-bento-module--music .product-bento-grid > .bento-card-music {
  grid-column: 1 / span 7 !important;
  min-height: 410px !important;
}

body[data-public-route="introduction"] #introduction .product-bento-module--music .product-bento-grid > .bento-card-queue {
  grid-column: 8 / -1 !important;
  min-height: 410px !important;
}

body[data-public-route="introduction"] #introduction .bento-reference-art--voice-setup,
body[data-public-route="introduction"] #introduction .bento-reference-art--temp-voice {
  filter: none;
  mix-blend-mode: normal;
}

body[data-public-route="introduction"] #introduction .bento-setup-visual > .bento-reference-art--voice-setup,
body[data-public-route="introduction"] #introduction .bento-voice-visual > .bento-reference-art--temp-voice {
  width: auto;
  max-width: min(100%, 260px);
  max-height: 210px;
  object-fit: contain;
}

@media (min-width: 761px) and (max-width: 1100px) {
  body[data-public-route="introduction"] #introduction .product-bento-module .product-bento-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  body[data-public-route="introduction"] #introduction .product-bento-module--security .product-bento-grid > .bento-card-radar {
    grid-column: 1 / span 3 !important;
    min-height: 410px !important;
  }

  body[data-public-route="introduction"] #introduction .product-bento-module--security .product-bento-grid > .bento-card-filters {
    grid-column: 4 / -1 !important;
    min-height: 410px !important;
  }

  body[data-public-route="introduction"] #introduction .product-bento-module--voice .product-bento-grid > .bento-card-voicemaster,
  body[data-public-route="introduction"] #introduction .product-bento-module--music .product-bento-grid > .bento-card-music {
    grid-column: 1 / span 3 !important;
  }

  body[data-public-route="introduction"] #introduction .product-bento-module--voice .product-bento-grid > .bento-card-voice-channels,
  body[data-public-route="introduction"] #introduction .product-bento-module--music .product-bento-grid > .bento-card-queue {
    grid-column: 4 / -1 !important;
  }
}

@media (max-width: 760px) {
  body[data-public-route="introduction"] #introduction .product-bento-modules { gap: 38px; }
  body[data-public-route="introduction"] #introduction .product-bento-module { gap: 14px; }
  body[data-public-route="introduction"] #introduction .product-bento-module .product-bento-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  body[data-public-route="introduction"] #introduction .product-bento-module .product-bento-grid > .bento-card,
  body[data-public-route="introduction"] #introduction .product-bento-module--security .product-bento-grid > .bento-card-radar,
  body[data-public-route="introduction"] #introduction .product-bento-module--security .product-bento-grid > .bento-card-filters,
  body[data-public-route="introduction"] #introduction .product-bento-module--logs .product-bento-grid > .bento-card-logs,
  body[data-public-route="introduction"] #introduction .product-bento-module--voice .product-bento-grid > .bento-card-voicemaster,
  body[data-public-route="introduction"] #introduction .product-bento-module--voice .product-bento-grid > .bento-card-voice-channels,
  body[data-public-route="introduction"] #introduction .product-bento-module--music .product-bento-grid > .bento-card-music,
  body[data-public-route="introduction"] #introduction .product-bento-module--music .product-bento-grid > .bento-card-queue {
    grid-column: 1 / -1 !important;
    min-height: 350px !important;
  }

  body[data-public-route="introduction"] #introduction .product-bento-module--logs .product-bento-grid > .bento-card-logs {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(130px, 1fr) auto !important;
  }

  body[data-public-route="introduction"] #introduction .product-bento-module--logs .product-bento-grid > .bento-card-logs > .bento-copy { grid-area: 1 / 1 !important; }
  body[data-public-route="introduction"] #introduction .product-bento-module--logs .product-bento-grid > .bento-card-logs > .bento-visual { grid-area: 2 / 1 !important; }
  body[data-public-route="introduction"] #introduction .product-bento-module--logs .product-bento-grid > .bento-card-logs > .bento-link { grid-area: 3 / 1 !important; }
  body[data-public-route="introduction"] #introduction .bento-setup-visual > .bento-reference-art--voice-setup,
  body[data-public-route="introduction"] #introduction .bento-voice-visual > .bento-reference-art--temp-voice {
    max-height: 195px;
  }
}

/* Keep each feature preview inside the Headless module it describes. */
body[data-public-route="introduction"] #introduction .product-bento {
  margin-block: clamp(150px, 18vh, 240px);
}

body[data-public-route="introduction"] #introduction .product-bento--security .product-bento-modules {
  gap: 0;
}

body[data-public-route="introduction"] #introduction .product-bento--security .product-bento-grid--security {
  grid-template-rows: auto;
}

body[data-public-route="introduction"] #introduction .product-bento--security .product-bento-module--security .product-bento-grid--security > .bento-card-antiraid {
  grid-column: 8 / -1 !important;
  min-height: 435px !important;
}

body[data-public-route="introduction"] #introduction .bento-antiraid-visual > .bento-reference-art {
  width: min(100%, 360px);
  max-height: 190px;
  object-fit: contain;
}

body[data-public-route="introduction"] #introduction .home-vc-card-stage,
body[data-public-route="introduction"] #introduction .home-music-card-stage {
  display: grid;
  align-items: center;
}

body[data-public-route="introduction"] #introduction .home-scene--voice,
body[data-public-route="introduction"] #introduction .home-scene--music {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

body[data-public-route="introduction"] #introduction .home-scene--voice .home-showcase-copy,
body[data-public-route="introduction"] #introduction .home-scene--music .home-showcase-copy,
body[data-public-route="introduction"] #introduction .home-scene--voice .home-showcase-visual,
body[data-public-route="introduction"] #introduction .home-scene--music .home-showcase-visual {
  grid-column: 1 / -1;
}

body[data-public-route="introduction"] #introduction .home-scene--voice .home-showcase-copy,
body[data-public-route="introduction"] #introduction .home-scene--music .home-showcase-copy {
  max-width: 720px;
}

body[data-public-route="introduction"] #introduction .home-vc-card-stage .product-bento-module,
body[data-public-route="introduction"] #introduction .home-music-card-stage .product-bento-module {
  width: 100%;
}

body[data-public-route="introduction"] #introduction .home-vc-card-stage .product-bento-grid,
body[data-public-route="introduction"] #introduction .home-music-card-stage .product-bento-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

body[data-public-route="introduction"] #introduction .home-vc-card-stage .product-bento-module--voice .product-bento-grid > .bento-card-voicemaster,
body[data-public-route="introduction"] #introduction .home-vc-card-stage .product-bento-module--voice .product-bento-grid > .bento-card-voice-channels {
  grid-column: span 6 !important;
  min-height: 402px !important;
}

body[data-public-route="introduction"] #introduction .home-vc-card-stage .bento-setup-visual > .bento-reference-art--voice-setup,
body[data-public-route="introduction"] #introduction .home-vc-card-stage .bento-voice-visual > .bento-reference-art--temp-voice {
  width: min(100%, 360px);
  max-height: 240px;
  object-fit: contain;
}

body[data-public-route="introduction"] #introduction .home-music-card-stage .product-bento-module--music .product-bento-grid > .bento-card-music {
  grid-column: 1 / span 7 !important;
  min-height: 410px !important;
}

body[data-public-route="introduction"] #introduction .home-music-card-stage .product-bento-module--music .product-bento-grid > .bento-card-audio-filters {
  grid-column: 8 / -1 !important;
  min-height: 410px !important;
}

body[data-public-route="introduction"] #introduction .bento-audio-filters-visual > .bento-reference-art {
  width: min(100%, 380px);
  max-height: 270px;
  object-fit: contain;
}

body[data-public-route="introduction"] #introduction .home-scene--moderation .product-bento-module--moderation {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 8px;
}

body[data-public-route="introduction"] #introduction .home-scene--moderation .product-bento-grid--moderation > .bento-card-moderation-filters {
  display: grid;
  grid-column: 1 / -1 !important;
  grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-items: center;
  min-height: 310px !important;
}

body[data-public-route="introduction"] #introduction .home-scene--moderation .bento-card-moderation-filters > .bento-copy {
  grid-area: 1 / 1 !important;
}

body[data-public-route="introduction"] #introduction .home-scene--moderation .bento-card-moderation-filters > .bento-visual {
  grid-area: 1 / 2 !important;
  width: 100%;
}

body[data-public-route="introduction"] #introduction .home-scene--moderation .bento-card-moderation-filters > .bento-link {
  grid-area: 2 / 1 / auto / -1 !important;
}

body[data-public-route="introduction"] #introduction .bento-moderation-filters-visual > .bento-reference-art {
  width: min(100%, 600px);
  max-height: 235px;
  object-fit: contain;
}

body[data-public-route="introduction"] #introduction .bento-reference-art {
  background: transparent;
}

@media (min-width: 761px) and (max-width: 1100px) {
  body[data-public-route="introduction"] #introduction .product-bento--security .product-bento-module--security .product-bento-grid--security > .bento-card-antiraid {
    grid-column: 4 / -1 !important;
    min-height: 410px !important;
  }

  body[data-public-route="introduction"] #introduction .home-scene--moderation .bento-card-moderation-filters {
    grid-template-columns: minmax(180px, .78fr) minmax(0, 1.22fr) !important;
  }

  body[data-public-route="introduction"] #introduction .home-vc-card-stage .product-bento-module--voice .product-bento-grid > .bento-card-voicemaster,
  body[data-public-route="introduction"] #introduction .home-vc-card-stage .product-bento-module--voice .product-bento-grid > .bento-card-voice-channels {
    grid-column: 1 / -1 !important;
    min-height: 365px !important;
  }

  body[data-public-route="introduction"] #introduction .home-music-card-stage .product-bento-module--music .product-bento-grid > .bento-card-music,
  body[data-public-route="introduction"] #introduction .home-music-card-stage .product-bento-module--music .product-bento-grid > .bento-card-audio-filters {
    grid-column: 1 / -1 !important;
    min-height: 360px !important;
  }
}

@media (max-width: 760px) {
  body[data-public-route="introduction"] #introduction .product-bento--security .product-bento-module--security .product-bento-grid--security > .bento-card-antiraid {
    grid-column: 1 / -1 !important;
  }

  body[data-public-route="introduction"] #introduction .home-scene--moderation .bento-card-moderation-filters {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(150px, 1fr) auto !important;
    min-height: 355px !important;
  }

  body[data-public-route="introduction"] #introduction .home-scene--moderation .bento-card-moderation-filters > .bento-copy { grid-area: 1 / 1 !important; }
  body[data-public-route="introduction"] #introduction .home-scene--moderation .bento-card-moderation-filters > .bento-visual { grid-area: 2 / 1 !important; }
  body[data-public-route="introduction"] #introduction .home-scene--moderation .bento-card-moderation-filters > .bento-link { grid-area: 3 / 1 !important; }

  body[data-public-route="introduction"] #introduction .home-vc-card-stage .product-bento-module--voice .product-bento-grid > .bento-card-voicemaster,
  body[data-public-route="introduction"] #introduction .home-vc-card-stage .product-bento-module--voice .product-bento-grid > .bento-card-voice-channels,
  body[data-public-route="introduction"] #introduction .home-music-card-stage .product-bento-module--music .product-bento-grid > .bento-card-music,
  body[data-public-route="introduction"] #introduction .home-music-card-stage .product-bento-module--music .product-bento-grid > .bento-card-audio-filters {
    grid-column: 1 / -1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-public-route="introduction"] #introduction .bento-reference-art {
    animation: none !important;
    transition: none !important;
  }
}


/* Agent-brand finish: hanging Dashboard spider and white-fade Home surfaces. */
body[data-public-route="introduction"] .topbar-actions .topbar-dashboard {
  position: relative;
  isolation: isolate;
  overflow: visible !important;
}

body[data-public-route="introduction"] .topbar-actions .topbar-dashboard .dashboard-spider-icon {
  position: absolute;
  z-index: 3;
  top: calc(100% - 14px);
  left: 14px;
  width: 38px;
  height: 46px;
  margin: 0;
  object-fit: contain;
  transform-origin: 50% 0;
  filter: drop-shadow(0 7px 8px rgba(0, 0, 0, .42));
  animation: home-dashboard-spider-sway 4.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes home-dashboard-spider-sway {
  0%, 100% { transform: rotate(-1.4deg); }
  50% { transform: rotate(1.4deg); }
}

body[data-public-route="introduction"] .hero-copy h1.hero-headline .hero-headline-lead,
body[data-public-route="introduction"] .hero-copy h1.hero-headline .hero-editorial,
body[data-public-route="introduction"] .hero-copy h1.hero-headline .hero-accent,
body[data-public-route="introduction"] #introduction .security-feature h2,
body[data-public-route="introduction"] #introduction .product-bento-heading h2,
body[data-public-route="introduction"] #introduction .home-showcase-copy h2,
body[data-public-route="introduction"] #introduction .home-integrations-heading h2,
body[data-public-route="introduction"] #introduction .home-integrations-heading h2 span,
body[data-public-route="introduction"] #introduction .home-foundation-heading h2,
body[data-public-route="introduction"] #introduction .home-more-heading h2,
body[data-public-route="introduction"] #introduction .home-cta-content h2,
body[data-public-route="introduction"] #introduction .bento-copy h3,
body[data-public-route="introduction"] #introduction .home-integration-copy strong,
body[data-public-route="introduction"] #introduction .home-more-card-copy strong {
  color: #ffffff;
  background: linear-gradient(104deg, #ffffff 0%, rgba(255, 255, 255, .94) 48%, rgba(255, 255, 255, .58) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 28px rgba(255, 255, 255, .045);
}

body[data-public-route="introduction"] #introduction .security-policy,
body[data-public-route="introduction"] #introduction .product-bento-grid > .bento-card,
body[data-public-route="introduction"] #introduction .home-integration-card,
body[data-public-route="introduction"] #introduction .home-foundation-grid .doc-detail-card,
body[data-public-route="introduction"] #introduction .home-more-card,
body[data-public-route="introduction"] #introduction .network-community-card {
  border: 1px solid var(--public-card-border, #ffffff12) !important;
  border-radius: 16px !important;
  background: var(--public-card-surface, #111111) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: transform 180ms ease-out, border-color 180ms ease-out, background-color 180ms ease-out;
}

body[data-public-route="introduction"] #introduction .hero-module-pill {
  border-color: rgba(255, 255, 255, .16);
  border-top-color: rgba(255, 255, 255, .28);
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .09), transparent 46%),
    linear-gradient(145deg, rgba(255, 255, 255, .04), rgba(9, 9, 9, .82) 72%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .065),
    0 10px 28px rgba(0, 0, 0, .3),
    0 0 24px rgba(255, 255, 255, .025);
}

@media (hover: hover) and (pointer: fine) {
  body[data-public-route="introduction"] #introduction .product-bento-grid > .bento-card:hover,
  body[data-public-route="introduction"] #introduction .home-integration-card:hover,
  body[data-public-route="introduction"] #introduction .home-foundation-grid .doc-detail-card:hover,
  body[data-public-route="introduction"] #introduction .home-more-card:hover,
  body[data-public-route="introduction"] #introduction .network-community-card:hover {
    transform: translateY(-2px);
    border-color: #ffffff24 !important;
    background-color: #151515 !important;
    box-shadow: none !important;
  }
}

@media (max-width: 600px) {
  body[data-public-route="introduction"] .topbar-actions .topbar-dashboard .dashboard-spider-icon {
    top: calc(100% - 13px);
    left: 12px;
    width: 35px;
    height: 43px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-public-route="introduction"] .topbar-actions .topbar-dashboard .dashboard-spider-icon {
    animation: none !important;
    transform: none !important;
  }
}

/* The spider hangs below the Dashboard pill; mobile action scrolling must not crop it. */
body[data-public-route="introduction"] .topbar-actions {
  overflow: visible !important;
}

/* Monochrome chrome finish: animated silver light stays inside the Home route. */
body[data-public-route="introduction"] .hero-copy h1.hero-headline .hero-headline-lead,
body[data-public-route="introduction"] .hero-copy h1.hero-headline .hero-editorial,
body[data-public-route="introduction"] .hero-copy h1.hero-headline .hero-accent,
body[data-public-route="introduction"] #introduction .security-feature h2,
body[data-public-route="introduction"] #introduction .product-bento-heading h2,
body[data-public-route="introduction"] #introduction .home-showcase-copy h2,
body[data-public-route="introduction"] #introduction .home-integrations-heading h2,
body[data-public-route="introduction"] #introduction .home-foundation-heading h2,
body[data-public-route="introduction"] #introduction .home-more-heading h2,
body[data-public-route="introduction"] #introduction .home-cta-content h2 {
  color: #ffffff !important;
  background-image: linear-gradient(108deg, #ffffff 0%, #e5e5e5 28%, #a3a3a3 43%, #ffffff 53%, #e5e5e5 68%, #ffffff 100%) !important;
  background-size: 240% 100% !important;
  background-position: 100% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent !important;
  animation: home-silver-shimmer 13s ease-in-out infinite alternate;
}

@keyframes home-silver-shimmer {
  from { background-position: 100% 50%; }
  to { background-position: 0% 50%; }
}

/* Sweep light across the two primary actions without changing their labels or targets. */
body[data-public-route="introduction"] .hero-actions--paired .hero-cta,
body[data-public-route="introduction"] .topbar-actions .topbar-dashboard {
  position: relative;
  isolation: isolate;
}

body[data-public-route="introduction"] .hero-actions--paired .hero-cta::after,
body[data-public-route="introduction"] .topbar-actions .topbar-dashboard::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -35%;
  bottom: -35%;
  left: -42%;
  width: 34%;
  border-radius: inherit;
  clip-path: inset(0 round 999px);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
  transform: translate3d(-150%, 0, 0) skewX(-22deg);
  animation: home-white-sweep 8.5s cubic-bezier(.22, .7, .24, 1) infinite;
  pointer-events: none;
}

body[data-public-route="introduction"] .hero-actions--paired .hero-cta > *,
body[data-public-route="introduction"] .topbar-actions .topbar-dashboard > *:not(.dashboard-spider-icon) {
  position: relative;
  z-index: 2;
}

@keyframes home-white-sweep {
  0%, 62% { transform: translate3d(-150%, 0, 0) skewX(-22deg); opacity: 0; }
  68% { opacity: .7; }
  84%, 100% { transform: translate3d(530%, 0, 0) skewX(-22deg); opacity: 0; }
}

/* One restrained breathing halo marks the dashboard entry point. */
body[data-public-route="introduction"] .topbar-actions .topbar-dashboard::before,
body[data-public-route="introduction"] .hero-actions--paired .hero-cta--docs::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -7px;
  border-radius: inherit;
  background: radial-gradient(ellipse, rgba(255, 255, 255, .28), transparent 72%);
  filter: blur(9px);
  opacity: .22;
  animation: home-white-glow 6.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes home-white-glow {
  0%, 100% { opacity: .12; transform: scale(.96); }
  50% { opacity: .34; transform: scale(1.035); }
}

/* Silver hover response; external platform marks remain their original assets. */
@media (hover: hover) and (pointer: fine) {
  body[data-public-route="introduction"] #introduction .hero-cta:hover,
  body[data-public-route="introduction"] #introduction .hero-module-pill:hover,
  body[data-public-route="introduction"] #introduction .home-integration-card:hover,
  body[data-public-route="introduction"] #introduction .home-more-card:hover,
  body[data-public-route="introduction"] #introduction .doc-detail-card:hover,
  body[data-public-route="introduction"] #introduction .network-community-card:hover {
    border-color: rgba(255, 255, 255, .28) !important;
    box-shadow: none !important;
    transition: border-color 220ms ease-out, box-shadow 220ms ease-out, transform 220ms ease-out;
  }
}

body[data-public-route="introduction"] .topbar-actions .topbar-dashboard .dashboard-spider-icon {
  top: calc(100% - 6px);
  filter: grayscale(1) brightness(1.28) drop-shadow(0 6px 9px rgba(255, 255, 255, .23));
}

@media (max-width: 600px) {
  body[data-public-route="introduction"] .topbar-actions .topbar-dashboard .dashboard-spider-icon {
    top: calc(100% - 5px);
  }
}

/* Keep Discord's own mark in its official brand color. */
body[data-public-route="introduction"] .hero-cta--invite .hero-cta-icon,
body[data-public-route="introduction"] .hero-cta--invite .hero-cta-icon svg {
  color: #5865f2;
}

@media (prefers-reduced-motion: reduce) {
  body[data-public-route="introduction"] .hero-copy h1.hero-headline .hero-headline-lead,
  body[data-public-route="introduction"] .hero-copy h1.hero-headline .hero-editorial,
  body[data-public-route="introduction"] .hero-copy h1.hero-headline .hero-accent,
  body[data-public-route="introduction"] #introduction .security-feature h2,
  body[data-public-route="introduction"] #introduction .product-bento-heading h2,
  body[data-public-route="introduction"] #introduction .home-showcase-copy h2,
  body[data-public-route="introduction"] #introduction .home-integrations-heading h2,
  body[data-public-route="introduction"] #introduction .home-foundation-heading h2,
  body[data-public-route="introduction"] #introduction .home-more-heading h2,
  body[data-public-route="introduction"] #introduction .home-cta-content h2,
  body[data-public-route="introduction"] #introduction .hero-cta::after,
  body[data-public-route="introduction"] .topbar-actions .topbar-dashboard::after,
  body[data-public-route="introduction"] .topbar-actions .topbar-dashboard::before,
  body[data-public-route="introduction"] .hero-actions--paired .hero-cta--docs::before {
    animation: none !important;
  }
}

/* Shared fixed controls also follow Home's monochrome treatment. */
body[data-public-route="introduction"] .public-scroll-progress > span {
  background: linear-gradient(90deg, #a3a3a3, #ffffff) !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, .38), 0 0 22px rgba(229, 229, 229, .2) !important;
}
body[data-public-route="introduction"] .public-scroll-top {
  border-color: rgba(220, 220, 220, .42) !important;
  background: rgba(18, 18, 18, .92) !important;
  color: #ededed !important;
}
body[data-public-route="introduction"] .public-scroll-top:hover,
body[data-public-route="introduction"] .public-scroll-top:focus-visible {
  border-color: #ffffff !important;
  box-shadow: 0 0 20px rgba(255, 255, 255, .13) !important;
}
body[data-public-route="introduction"] .skip-link {
  background: linear-gradient(135deg, #ffffff, #dedede) !important;
  color: #111111 !important;
}
body[data-public-route="introduction"] .toast {
  border-color: rgba(220, 220, 220, .18) !important;
  background: #161616 !important;
}

/* Keep the navbar light sweep inside the Dashboard pill; its spider may hang outside. */
body[data-public-route="introduction"] .topbar-actions .topbar-dashboard::after {
  inset: 0;
  bottom: 0;
  left: 0;
  width: auto;
  border-radius: inherit;
  clip-path: inset(0 round 999px);
  background: linear-gradient(100deg, transparent 39%, rgba(255,255,255,.32) 50%, transparent 61%);
  background-size: 240% 100%;
  background-position: 110% 50%;
  transform: none;
  animation: home-dashboard-contained-sweep 8.5s cubic-bezier(.22,.7,.24,1) infinite;
}

@keyframes home-dashboard-contained-sweep {
  0%, 62% { background-position: 110% 50%; opacity: 0; }
  68% { opacity: .7; }
  86%, 100% { background-position: -10% 50%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-public-route="introduction"] .topbar-actions .topbar-dashboard::after {
    animation: none !important;
    background-position: 50% 50%;
    opacity: 0;
  }
}