/* Demo Account: route-only visual layer over the shared account-detail system. */
.rg-account-detail--demo {
  --demo-cyan: #54d9ff;
  --demo-mint: #4fe0bd;
  --demo-blue: #4f7dff;
  --demo-violet: #8d7cff;
  --demo-ink: #071733;
  --demo-muted: #61738f;
  --demo-line: #d5e1ef;
  --rg-theme-accent: var(--demo-cyan);
  --rg-account-title-gradient: linear-gradient(105deg, #8cf4dc 0%, #54d9ff 52%, #9a8cff 100%);
}

.rg-account-detail--demo .rg-account-container {
  width: min(var(--rg-content-max, 1440px), calc(100% - (var(--rg-page-gutter, 40px) * 2)));
}

.rg-account-detail--demo .rg-account-section {
  padding-block: var(--rg-section-space, 120px);
}

.rg-account-detail--demo :is(h1, h2, h3) {
  overflow-wrap: normal;
  text-wrap: balance;
  word-break: normal;
}

.rg-account-detail--demo .rg-account-heading h2 {
  font-size: var(--rg-type-display-h2, 72px);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.03;
}

.rg-account-detail--demo h3 {
  font-size: var(--rg-type-h3, 32px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.12;
}

.rg-account-detail--demo :is(.rg-account-eyebrow, .rg-account-kicker) {
  color: var(--rg-theme-accent);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.25;
  text-transform: uppercase;
}

.rg-account-detail--demo :is(.rg-account-section--light, .rg-account-section--soft) .rg-account-eyebrow {
  color: #3156b8;
}

.rg-account-detail--demo .rg-account-button {
  min-height: 52px;
  padding-inline: 22px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}

.rg-account-detail--demo .rg-account-button:is(:hover, :focus-visible) {
  border-color: #70e6ff;
  color: #fff;
  background: #164c70;
  box-shadow: 0 12px 28px rgba(5, 19, 45, .24);
  transform: translateY(-2px);
}

.rg-account-detail--demo .rg-account-button--primary {
  color: #041327;
  background: linear-gradient(110deg, #4fe0bd, #54d9ff 58%, #8f82ff);
  box-shadow: 0 14px 34px rgba(84, 217, 255, .2);
}

.rg-account-detail--demo .rg-account-button--primary:is(:hover, :focus-visible) {
  color: #041327;
  background: linear-gradient(110deg, #8cf4dc, #7ce6ff 58%, #a99dff);
}

.rg-account-detail--demo .rg-account-button:active {
  transform: translateY(0);
  box-shadow: none;
}

.rg-account-detail--demo .rg-account-button[aria-disabled="true"],
.rg-account-detail--demo .rg-account-button:disabled {
  opacity: .5;
  pointer-events: none;
}

/* Hero */
.rg-ad-hero--demo {
  background:
    radial-gradient(circle at 84% 20%, rgba(79, 224, 189, .24), transparent 28%),
    radial-gradient(circle at 62% 4%, rgba(84, 217, 255, .16), transparent 24%),
    radial-gradient(circle at 98% 82%, rgba(120, 103, 255, .2), transparent 29%),
    linear-gradient(122deg, #020d20 0%, #071a35 54%, #121847 100%);
}

.rg-ad-hero--demo .rg-ad-hero__copy {
  align-self: center;
}

.rg-demo-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(112, 230, 255, .45);
  border-radius: 8px;
  color: #8cf4dc;
  background: rgba(84, 217, 255, .08);
}

.rg-demo-icon svg {
  width: 16px;
  height: 16px;
}

.rg-demo-hero-deck {
  border-color: rgba(84, 217, 255, .36);
  background:
    radial-gradient(circle at 92% 3%, rgba(79, 224, 189, .16), transparent 34%),
    linear-gradient(145deg, rgba(8, 47, 72, .97), rgba(16, 23, 65, .98));
}

.rg-demo-hero-deck::before {
  border-color: rgba(84, 217, 255, .24);
  box-shadow: inset 0 0 70px rgba(79, 224, 189, .11);
}

.rg-demo-hero-deck > header i {
  background: var(--demo-mint);
  box-shadow: 0 0 0 6px rgba(79, 224, 189, .1), 0 0 22px rgba(79, 224, 189, .65);
}

.rg-demo-deck__identity {
  position: relative;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 15px 2px 13px;
}

.rg-demo-deck__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border: 1px solid rgba(84, 217, 255, .52);
  border-radius: 20px;
  color: #8cf4dc;
  background: linear-gradient(145deg, rgba(84, 217, 255, .12), rgba(141, 124, 255, .13));
  box-shadow: inset 0 0 22px rgba(84, 217, 255, .1);
}

.rg-demo-deck__mark svg {
  width: 32px;
  height: 32px;
}

.rg-demo-deck__mark i {
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 9px;
  height: 9px;
  border: 2px solid #0c2b4e;
  border-radius: 999px;
  background: var(--demo-mint);
}

.rg-demo-deck__identity div > * {
  display: block;
}

.rg-demo-deck__identity small {
  color: #88a0bb;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .1em;
}

.rg-demo-deck__identity strong {
  margin: 3px 0;
  color: #fff;
  font-size: 28px;
  letter-spacing: -.04em;
}

.rg-demo-deck__identity div > span {
  color: #a9bbd1;
  font-size: 14px;
}

.rg-demo-deck__identity > em {
  padding: 7px 10px;
  border: 1px solid rgba(79, 224, 189, .4);
  border-radius: 999px;
  color: #9bf4df;
  background: rgba(79, 224, 189, .08);
  font-size: 14px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: .1em;
}

.rg-demo-hero-deck .rg-ad-hero__metrics > span:nth-child(-n+2) {
  border-color: rgba(84, 217, 255, .28);
  background: linear-gradient(135deg, rgba(79, 224, 189, .08), rgba(84, 217, 255, .08));
}

.rg-demo-hero-deck .rg-ad-hero__metrics strong {
  font-size: 21px;
}

.rg-demo-deck__signal {
  margin-top: 8px;
  padding: 10px 13px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: rgba(0, 0, 0, .13);
}

.rg-demo-deck__signal header {
  display: flex;
  justify-content: space-between;
  color: #bcd0e3;
  font-size: 14px;
  font-weight: 750;
}

.rg-demo-deck__signal header small {
  color: #7892ae;
  font-size: 14px;
  letter-spacing: .08em;
}

.rg-demo-deck__signal > div {
  position: relative;
  display: flex;
  align-items: end;
  gap: 8px;
  height: 32px;
  margin-top: 5px;
}

.rg-demo-deck__signal i {
  width: 10px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(to top, #4f7dff, #4fe0bd);
}

.rg-demo-deck__signal i:nth-child(1) { height: 35%; }
.rg-demo-deck__signal i:nth-child(2) { height: 62%; }
.rg-demo-deck__signal i:nth-child(3) { height: 48%; }
.rg-demo-deck__signal i:nth-child(4) { height: 78%; }
.rg-demo-deck__signal i:nth-child(5) { height: 56%; }
.rg-demo-deck__signal i:nth-child(6) { height: 90%; }

.rg-demo-deck__signal b {
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(112, 230, 255, .55), transparent);
  transform: translateY(-50%);
}

@media (min-width: 1181px) {
  .rg-account-detail--demo .rg-ad-hero__dashboard {
    width: min(94%, 500px);
  }
}

/* Environment bento */
.rg-demo-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  margin-top: 52px;
}

.rg-demo-bento > article {
  grid-column: span 4;
  min-height: 238px;
  padding: 26px;
  border: 1px solid var(--demo-line);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(241, 247, 253, .96));
  box-shadow: 0 22px 54px rgba(12, 38, 72, .07);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.rg-demo-bento > article:is(:hover, :focus-within) {
  border-color: rgba(21, 162, 192, .45);
  box-shadow: 0 28px 60px rgba(12, 38, 72, .11);
  transform: translateY(-4px);
}

.rg-demo-bento > article > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: #087f9d;
  background: #e9f9fc;
}

.rg-demo-bento > article > span svg {
  width: 23px;
  height: 23px;
}

.rg-demo-bento > article > small,
.rg-demo-bento__context div > small {
  display: block;
  margin-top: 22px;
  color: #087f9d;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .1em;
}

.rg-demo-bento h3 {
  margin: 9px 0 10px;
  color: var(--demo-ink);
}

.rg-demo-bento p {
  margin: 0;
  color: var(--demo-muted);
}

.rg-demo-bento > .rg-demo-bento__lead {
  grid-column: span 7;
  grid-row: span 2;
  min-height: 492px;
  color: #fff;
  background:
    radial-gradient(circle at 80% 14%, rgba(79, 224, 189, .18), transparent 28%),
    linear-gradient(140deg, #061831, #0a2b4c 58%, #17194a);
}

.rg-demo-bento__lead > header {
  display: flex;
  justify-content: space-between;
  color: #91abc4;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .1em;
}

.rg-demo-bento__lead > header span {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rg-demo-bento__lead > header i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--demo-mint);
  box-shadow: 0 0 0 6px rgba(79, 224, 189, .1);
}

.rg-demo-bento__terminal {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(220px, 1fr);
  gap: 24px;
  align-items: end;
  min-height: 170px;
  margin: 34px 0 30px;
  padding: 24px;
  border: 1px solid rgba(112, 230, 255, .2);
  border-radius: 20px;
  background: rgba(2, 12, 31, .36);
}

.rg-demo-bento__terminal span > * {
  display: block;
}

.rg-demo-bento__terminal small {
  color: #7e9bb5;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .1em;
}

.rg-demo-bento__terminal strong {
  margin-top: 8px;
  color: #fff;
  font-size: 38px;
  letter-spacing: -.04em;
}

.rg-demo-bento__terminal > div {
  display: flex;
  align-items: end;
  gap: 12px;
  height: 92px;
}

.rg-demo-bento__terminal i {
  flex: 1;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(to top, #4f7dff, #4fe0bd);
}

.rg-demo-bento__terminal i:nth-child(1) { height: 28%; }
.rg-demo-bento__terminal i:nth-child(2) { height: 56%; }
.rg-demo-bento__terminal i:nth-child(3) { height: 42%; }
.rg-demo-bento__terminal i:nth-child(4) { height: 76%; }
.rg-demo-bento__terminal i:nth-child(5) { height: 92%; }

.rg-demo-bento .rg-demo-bento__lead h3,
.rg-demo-bento .rg-demo-bento__lead p {
  color: #fff;
}

.rg-demo-bento .rg-demo-bento__lead p {
  max-width: 760px;
  color: #b4c5d7;
}

.rg-demo-bento > .rg-demo-bento__context {
  grid-column: span 5;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  color: #fff;
  background: linear-gradient(140deg, #0d2443, #191c4c);
}

.rg-demo-bento__context > span {
  color: #ffd77c;
  background: rgba(255, 215, 124, .1);
}

.rg-demo-bento__context div > small {
  margin-top: 0;
  color: #ffd77c;
}

.rg-demo-bento .rg-demo-bento__context h3 {
  color: #fff;
}

.rg-demo-bento .rg-demo-bento__context p {
  color: #b7c6d8;
}

/* Demo versus live */
.rg-demo-compare {
  color: #fff;
  background:
    radial-gradient(circle at 82% 10%, rgba(84, 217, 255, .15), transparent 28%),
    radial-gradient(circle at 16% 84%, rgba(141, 124, 255, .14), transparent 26%),
    linear-gradient(135deg, #031128, #0a2344 60%, #151849);
}

.rg-demo-compare-grid {
  overflow: hidden;
  margin-top: 52px;
  border: 1px solid rgba(112, 230, 255, .2);
  border-radius: 24px;
  background: rgba(7, 26, 54, .7);
  box-shadow: 0 32px 80px rgba(0, 8, 25, .28);
}

.rg-demo-compare-grid__head,
.rg-demo-compare-grid__row {
  display: grid;
  grid-template-columns: minmax(170px, .62fr) repeat(2, minmax(0, 1fr));
}

.rg-demo-compare-grid__head {
  background: rgba(84, 217, 255, .08);
}

.rg-demo-compare-grid__head > * {
  padding: 20px 24px;
  color: #a9bfd5;
  font-size: 14px;
  letter-spacing: .1em;
}

.rg-demo-compare-grid__head strong:nth-child(2) {
  color: #8cf4dc;
}

.rg-demo-compare-grid__head strong:last-child {
  color: #8fdfff;
}

.rg-demo-compare-grid__row {
  border-top: 1px solid rgba(255, 255, 255, .09);
}

.rg-demo-compare-grid__row > * {
  min-width: 0;
  margin: 0;
  padding: 20px 24px;
}

.rg-demo-compare-grid__row > span {
  color: #8ca5bf;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .06em;
}

.rg-demo-compare-grid__row p {
  display: flex;
  align-items: center;
  gap: 11px;
  border-left: 1px solid rgba(255, 255, 255, .09);
  color: #e9f2fb;
  font-size: 15px;
}

.rg-demo-compare-grid__row svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--demo-mint);
}

.rg-demo-compare-grid__row p:last-child svg {
  color: var(--demo-cyan);
}

.rg-demo-disclosure,
.rg-demo-platform-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 24px 0 0;
  color: #aebfd1;
}

.rg-demo-disclosure svg,
.rg-demo-platform-note svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--demo-cyan);
}

/* Platform choice */
.rg-demo-platform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 52px;
}

.rg-demo-platform-grid > a {
  overflow: hidden;
  border: 1px solid var(--demo-line);
  border-radius: 24px;
  color: var(--demo-ink);
  background: #fff;
  box-shadow: 0 24px 64px rgba(14, 42, 79, .08);
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.rg-demo-platform-grid > a:is(:hover, :focus-visible) {
  border-color: #39cde8;
  box-shadow: 0 30px 74px rgba(14, 42, 79, .14);
  transform: translateY(-5px);
}

.rg-demo-platform-grid figure {
  position: relative;
  overflow: hidden;
  height: 310px;
  margin: 0;
  background: #071933;
}

.rg-demo-platform-grid figure::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3, 17, 40, .7), transparent 58%);
  content: "";
}

.rg-demo-platform-grid figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .2s ease;
}

.rg-demo-platform-grid > a:is(:hover, :focus-visible) figure img {
  transform: scale(1.025);
}

.rg-demo-platform-grid figure span {
  position: absolute;
  z-index: 2;
  top: 22px;
  left: 22px;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(112, 230, 255, .38);
  border-radius: 16px;
  color: #fff;
  background: rgba(5, 29, 58, .78);
  font-size: 30px;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.rg-demo-platform-grid figure em {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: 20px;
  padding: 7px 10px;
  border: 1px solid rgba(112, 230, 255, .3);
  border-radius: 999px;
  color: #bdf5ff;
  background: rgba(5, 29, 58, .76);
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .08em;
}

.rg-demo-platform-grid > a > div {
  padding: 28px;
}

.rg-demo-platform-grid > a > div > small {
  color: #087f9d;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .1em;
}

.rg-demo-platform-grid h3 {
  margin: 8px 0 12px;
}

.rg-demo-platform-grid p {
  margin: 0;
  color: var(--demo-muted);
}

.rg-demo-platform-grid ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0;
  padding: 0;
  list-style: none;
}

.rg-demo-platform-grid li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 999px;
  color: #36536f;
  background: #eef5fb;
  font-size: 14px;
  font-weight: 700;
}

.rg-demo-platform-grid li svg {
  width: 16px;
  height: 16px;
  color: #087f9d;
}

.rg-demo-platform-grid > a > div > strong,
.rg-demo-route-gateway > a,
.rg-demo-stepper__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #087f9d;
  font-size: 15px;
  text-decoration: none;
}

.rg-demo-platform-grid > a > div > strong svg,
.rg-demo-route-gateway > a svg,
.rg-demo-stepper__cta svg {
  width: 17px;
  height: 17px;
  transition: transform .2s ease;
}

.rg-demo-platform-grid > a:is(:hover, :focus-visible) > div > strong svg,
.rg-demo-route-gateway > a:is(:hover, :focus-visible) svg,
.rg-demo-stepper__cta:is(:hover, :focus-visible) svg {
  transform: translate(2px, -2px);
}

.rg-demo-platform-note {
  color: var(--demo-muted);
}

/* Roadmap and strategy studio */
.rg-demo-roadmap {
  color: #fff;
  background:
    radial-gradient(circle at 80% 14%, rgba(79, 224, 189, .16), transparent 28%),
    linear-gradient(135deg, #031128, #0a2344 60%, #151849);
}

.rg-demo-stepper .rg-ad-stepper__rail {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rg-demo-stepper .rg-ad-stepper__rail button > span,
.rg-demo-stepper .rg-ad-stepper__panel > div:first-child span {
  color: var(--demo-cyan);
}

.rg-demo-stepper .rg-ad-stepper__rail button:is(:hover, :focus-visible) {
  border-color: rgba(112, 230, 255, .56);
  background: rgba(22, 76, 112, .7);
}

.rg-demo-stepper .rg-ad-stepper__rail button.is-active {
  border-color: var(--demo-mint);
  background: linear-gradient(135deg, rgba(79, 224, 189, .13), rgba(84, 217, 255, .08));
}

.rg-demo-stepper .rg-ad-stepper__progress i {
  width: 33.333%;
  background: linear-gradient(90deg, var(--demo-mint), var(--demo-cyan), var(--demo-violet));
}

.rg-demo-stepper__cta {
  margin-top: 24px;
  color: #8feaff;
  font-weight: 750;
}

.rg-demo-studio__dashboard {
  margin-top: 52px;
  border-color: #d4e1ee;
  color: #fff;
  background:
    radial-gradient(circle at 86% 12%, rgba(79, 224, 189, .15), transparent 27%),
    linear-gradient(137deg, #06172f, #0b2b4c 60%, #191a4a);
}

.rg-demo-studio__dashboard .rg-ad-cost-dashboard__tabs button.is-active {
  color: #06172f;
  background: linear-gradient(110deg, #4fe0bd, #54d9ff);
}

.rg-demo-studio__dashboard .rg-ad-cost-dashboard__tabs button:is(:hover, :focus-visible):not(.is-active) {
  border-color: #70e6ff;
  color: #fff;
  background: #164c70;
}

.rg-demo-studio__dashboard .rg-ad-cost-dashboard__body aside {
  border-color: rgba(79, 224, 189, .28);
  background: rgba(79, 224, 189, .07);
}

.rg-demo-studio__dashboard .rg-ad-cost-dashboard__body aside strong {
  color: #8cf4dc;
}

.rg-demo-studio__signal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 30px;
}

.rg-demo-studio__signal > span {
  display: flex;
  align-items: end;
  gap: 5px;
  height: 48px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
}

.rg-demo-studio__signal i {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(to top, #4f7dff, #4fe0bd);
}

.rg-demo-studio__signal i:nth-child(1) { height: 35%; }
.rg-demo-studio__signal i:nth-child(2) { height: 75%; }
.rg-demo-studio__signal i:nth-child(3) { height: 52%; }

.rg-demo-studio__dashboard > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 24px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.rg-demo-studio__dashboard > footer > span {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #aebed1;
  font-size: 14px;
}

.rg-demo-studio__dashboard > footer > span svg {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  color: var(--demo-cyan);
}

.rg-demo-studio__dashboard > footer > span b {
  color: #fff;
}

.rg-demo-studio__dashboard > footer > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #8feaff;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
}

.rg-demo-studio__dashboard > footer > a:is(:hover, :focus-visible) {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.rg-demo-studio__dashboard > footer > a svg {
  width: 16px;
  height: 16px;
}

/* Demo-to-live bridge */
.rg-demo-live-bridge__grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(460px, 1.18fr);
  gap: 20px;
  margin-top: 52px;
}

.rg-demo-live-routes {
  display: grid;
  gap: 10px;
}

.rg-demo-live-routes > span {
  margin-bottom: 5px;
  color: #758aa4;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .1em;
}

.rg-demo-live-routes > button {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 20px;
  gap: 14px;
  align-items: center;
  min-height: 86px;
  padding: 15px 18px;
  border: 1px solid var(--demo-line);
  border-radius: 16px;
  color: var(--demo-ink);
  background: rgba(255, 255, 255, .82);
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.rg-demo-live-routes > button:is(:hover, :focus-visible) {
  border-color: #39cde8;
  background: #fff;
  box-shadow: 0 15px 32px rgba(14, 42, 79, .1);
  transform: translateX(4px);
}

.rg-demo-live-routes > button.is-active {
  border-color: rgba(37, 207, 167, .52);
  color: var(--demo-ink);
  background: linear-gradient(110deg, rgba(79, 224, 189, .12), rgba(84, 217, 255, .09));
  box-shadow: inset 4px 0 0 #28cfa8, 0 15px 32px rgba(14, 42, 79, .08);
}

.rg-demo-live-routes img {
  width: 46px;
  height: 46px;
}

.rg-demo-live-routes button span > * {
  display: block;
}

.rg-demo-live-routes strong {
  font-size: 17px;
}

.rg-demo-live-routes small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--demo-muted);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rg-demo-live-routes button > svg {
  width: 18px;
  height: 18px;
  color: #087f9d;
}

.rg-demo-route-gateway {
  --route-accent: #4fe0bd;
  position: relative;
  overflow: hidden;
  padding: 34px;
  border: 1px solid color-mix(in srgb, var(--route-accent) 38%, transparent);
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(circle at 86% 12%, rgba(79, 224, 189, .2), transparent 28%),
    linear-gradient(138deg, #061730, #0a2b4d 58%, #171a4b);
  box-shadow: 0 30px 78px rgba(14, 42, 79, .2);
}

.rg-demo-route-gateway[data-route-key="standard"] { --route-accent: #66bfff; }
.rg-demo-route-gateway[data-route-key="ecn"] { --route-accent: #44d7ff; }
.rg-demo-route-gateway[data-route-key="pro"] { --route-accent: #f0c568; }
.rg-demo-route-gateway[data-route-key="cent"] { --route-accent: #4fe0bd; }

.rg-demo-route-gateway::after {
  position: absolute;
  right: -90px;
  bottom: -90px;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(112, 230, 255, .15);
  border-radius: 50%;
  content: "";
}

.rg-demo-route-gateway > * {
  position: relative;
  z-index: 1;
}

.rg-demo-route-gateway header {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.rg-demo-route-gateway header img {
  width: 72px;
  height: 72px;
}

.rg-demo-route-gateway header span > * {
  display: block;
}

.rg-demo-route-gateway header small {
  color: #8aa6c0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .1em;
}

.rg-demo-route-gateway header strong {
  margin-top: 5px;
  font-size: 28px;
}

.rg-demo-route-gateway header em {
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--route-accent) 45%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--route-accent) 78%, white);
  background: color-mix(in srgb, var(--route-accent) 10%, transparent);
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .08em;
}

.rg-demo-route-gateway h3 {
  max-width: 650px;
  margin: 38px 0 14px;
  color: #fff;
}

.rg-demo-route-gateway > p {
  max-width: 700px;
  margin: 0;
  color: #b7c7d8;
}

.rg-demo-route-gateway > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 28px 0;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: rgba(0, 0, 0, .12);
}

.rg-demo-route-gateway > div span {
  padding: 16px;
}

.rg-demo-route-gateway > div span + span {
  border-left: 1px solid rgba(255, 255, 255, .1);
}

.rg-demo-route-gateway > div small,
.rg-demo-route-gateway > div strong {
  display: block;
}

.rg-demo-route-gateway > div small {
  color: #829ab3;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
}

.rg-demo-route-gateway > div strong {
  margin-top: 5px;
  font-size: 18px;
}

.rg-demo-route-gateway > a {
  color: color-mix(in srgb, var(--route-accent) 78%, white);
  font-weight: 750;
}

/* Final conversion */
.rg-ad-final--demo {
  position: relative;
  background:
    radial-gradient(circle at 15% 50%, rgba(79, 224, 189, .18), transparent 25%),
    radial-gradient(circle at 79% 40%, rgba(120, 103, 255, .24), transparent 30%),
    linear-gradient(125deg, #020d20, #0b2042 58%, #1b1242);
}

.rg-demo-final-mark > span {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin-bottom: 8px;
  border: 1px solid rgba(112, 230, 255, .36);
  border-radius: 22px;
  color: #8cf4dc;
  background: rgba(84, 217, 255, .08);
}

.rg-demo-final-mark > span svg {
  width: 35px;
  height: 35px;
}

.rg-ad-final--demo .rg-demo-final-note {
  width: auto;
  max-width: none;
  margin: 26px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: #91a6bd;
  font-size: 14px;
}

/* Responsive composition */
@media (max-width: 1180px) {
  .rg-account-detail--demo .rg-account-section {
    padding-block: var(--rg-section-space-tablet, 88px);
  }

  .rg-account-detail--demo .rg-account-heading h2 {
    font-size: clamp(48px, 6vw, 64px);
  }

  .rg-demo-bento > .rg-demo-bento__lead,
  .rg-demo-bento > article,
  .rg-demo-bento > .rg-demo-bento__context {
    grid-column: span 6;
  }

  .rg-demo-bento > .rg-demo-bento__lead {
    grid-row: span 2;
  }

  .rg-demo-live-bridge__grid {
    grid-template-columns: minmax(0, .9fr) minmax(410px, 1.1fr);
  }
}

@media (max-width: 900px) {
  .rg-account-detail--demo .rg-account-heading,
  .rg-demo-platform-grid,
  .rg-demo-live-bridge__grid {
    grid-template-columns: 1fr;
  }

  .rg-account-detail--demo .rg-account-heading {
    align-items: start;
  }

  .rg-demo-bento > .rg-demo-bento__lead {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 0;
  }

  .rg-demo-bento > article,
  .rg-demo-bento > .rg-demo-bento__context {
    grid-column: span 6;
  }

  .rg-demo-compare-grid__head,
  .rg-demo-compare-grid__row {
    grid-template-columns: minmax(140px, .56fr) repeat(2, minmax(0, 1fr));
  }

  .rg-demo-compare-grid__head > *,
  .rg-demo-compare-grid__row > * {
    padding: 17px;
  }

  .rg-demo-stepper .rg-ad-stepper__rail {
    grid-template-columns: 1fr;
  }

  .rg-demo-studio__dashboard > footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  body.rg-account-detail-demo .s6-language,
  body.rg-account-detail-demo .s6-anniversary {
    display: none;
  }

  .rg-account-detail--demo .rg-account-container {
    width: min(var(--rg-content-max, 1440px), calc(100% - (var(--rg-page-gutter, 18px) * 2)));
  }

  .rg-account-detail--demo .rg-account-section {
    padding-block: var(--rg-section-space-mobile, 64px);
  }

  .rg-account-detail--demo .rg-ad-hero h1 {
    font-size: var(--rg-responsive-display-h1, clamp(42px, 13vw, 52px));
  }

  .rg-account-detail--demo .rg-account-heading h2 {
    font-size: clamp(36px, 11vw, 44px);
  }

  .rg-account-detail--demo h3 {
    font-size: 27px;
  }

  .rg-demo-deck__identity {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .rg-demo-deck__mark {
    width: 58px;
    height: 58px;
    border-radius: 17px;
  }

  .rg-demo-deck__identity > em {
    display: none;
  }

  .rg-demo-hero-deck .rg-ad-hero__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rg-demo-hero-deck .rg-ad-hero__metrics > span {
    min-height: 100px;
    padding: 11px;
  }

  .rg-demo-hero-deck .rg-ad-hero__metrics strong {
    font-size: 17px;
  }

  .rg-demo-bento {
    grid-template-columns: 1fr;
    margin-top: 36px;
  }

  .rg-demo-bento > .rg-demo-bento__lead,
  .rg-demo-bento > article,
  .rg-demo-bento > .rg-demo-bento__context {
    grid-column: auto;
  }

  .rg-demo-bento__terminal {
    grid-template-columns: 1fr;
  }

  .rg-demo-bento__context {
    grid-template-columns: 1fr;
  }

  .rg-demo-compare-grid {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .rg-demo-compare-grid__head {
    display: none;
  }

  .rg-demo-compare-grid__row {
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    margin-top: 12px;
    border: 1px solid rgba(112, 230, 255, .18);
    border-radius: 16px;
    background: rgba(7, 26, 54, .72);
  }

  .rg-demo-compare-grid__row > span {
    color: #fff;
    background: rgba(84, 217, 255, .08);
  }

  .rg-demo-compare-grid__row p {
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-left: 0;
  }

  .rg-demo-compare-grid__row p::before {
    width: 58px;
    flex: 0 0 58px;
    color: #7893ae;
    font-size: 14px;
    font-weight: 800;
    content: "DEMO";
  }

  .rg-demo-compare-grid__row p:last-child::before {
    content: "LIVE";
  }

  .s6-shell[lang="zh-Hans"] .rg-demo-compare-grid__row p::before {
    content: "模拟";
  }

  .s6-shell[lang="zh-Hans"] .rg-demo-compare-grid__row p:last-child::before {
    content: "真实";
  }

  .rg-demo-platform-grid {
    margin-top: 36px;
  }

  .rg-demo-platform-grid figure {
    height: 225px;
  }

  .rg-demo-platform-grid > a > div {
    padding: 22px;
  }

  .rg-demo-studio__dashboard {
    margin-top: 36px;
  }

  .rg-demo-live-routes small {
    white-space: normal;
  }

  .rg-demo-route-gateway {
    padding: 24px;
  }

  .rg-demo-route-gateway header {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .rg-demo-route-gateway header img {
    width: 62px;
    height: 62px;
  }

  .rg-demo-route-gateway header em {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .rg-demo-route-gateway > div {
    grid-template-columns: 1fr;
  }

  .rg-demo-route-gateway > div span + span {
    border-top: 1px solid rgba(255, 255, 255, .1);
    border-left: 0;
  }

  .rg-ad-final--demo .rg-ad-final__inner {
    grid-template-columns: 1fr;
  }

  .rg-ad-final--demo .rg-ad-final__inner > .rg-account-actions {
    grid-column: auto;
  }
}

@media (forced-colors: active) {
  .rg-demo-deck__signal,
  .rg-demo-bento__terminal,
  .rg-demo-studio__signal {
    forced-color-adjust: auto;
  }
}