/* Scoped Cloud operation and payment entries; existing pages stay independent. */
.tg-cloud-page .hero {
  grid-template-columns: 1.18fr 1fr;
  gap: 54px;
  padding-block: 60px 70px;
}

.tg-cloud-page .hero h1 {
  font-size: clamp(38px, 3.8vw, 53px);
  letter-spacing: -2.1px;
  margin-block: 20px 18px;
}

.tg-cloud-page .hero-copy > p {
  font-size: 14px;
  line-height: 1.85;
  margin-bottom: 0;
}

.tg-cloud-portal {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 25px;
  border: 1px solid #9ddce9;
  border-radius: 22px;
  padding: 24px;
  background: radial-gradient(ellipse at 100% 0, #c8f6ff8f, transparent 70%), linear-gradient(135deg, #fff, #effbff);
  box-shadow: 0 18px 44px #1389a315, inset 0 1px 0 #fff;
}

.tg-cloud-portal::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 24px;
  right: 24px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, #07accd, #27c4bd, #93e9fa);
}

.tg-cloud-portal-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tg-cloud-portal-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .65px;
  color: #087f95;
}

.tg-cloud-portal-kicker svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tg-cloud-domain {
  display: inline-flex;
  align-items: center;
  padding: 6px 9px;
  border: 1px solid #c2e8ef;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 600;
  color: #317587;
  background: #ffffffc9;
}

.tg-cloud-portal h2 {
  margin: 18px 0 10px;
  font-size: 25px;
  line-height: 1.4;
  letter-spacing: -.7px;
  color: #153e53;
}

.tg-cloud-portal > p {
  margin: 0 0 18px;
  font-size: 11px;
  line-height: 1.8;
  color: #527788;
}

.tg-cloud-launch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  border: 1px solid #079fb7;
  border-radius: 12px;
  padding: 16px 18px;
  color: #fff;
  background: linear-gradient(110deg, #059dbf, #05a99e);
  box-shadow: 0 7px 20px #069ca92e;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  transition: transform .2s ease, box-shadow .2s ease;
}

.tg-cloud-launch > span {
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
}

.tg-cloud-launch:hover {
  transform: translateY(-2px);
  box-shadow: 0 11px 25px #069ca93d;
}

.tg-cloud-purchase {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #cde9f0;
}

.tg-cloud-purchase-price > span {
  display: block;
  margin-bottom: 6px;
  font-size: 8px;
  letter-spacing: .7px;
  color: #5a7d8c;
  font-weight: 600;
}

.tg-cloud-purchase-price > strong {
  display: block;
  color: #173f52;
  font-size: 22px;
  letter-spacing: -.8px;
  line-height: 1.2;
  white-space: nowrap;
}

.tg-cloud-purchase-price small {
  margin-left: 4px;
  color: #648391;
  font-size: 10px;
  letter-spacing: 0;
  font-weight: 500;
}

.tg-cloud-pay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 13px;
  min-height: 44px;
  border: 1px solid #99d2df;
  border-radius: 9px;
  background: #fff;
  color: #087e97;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  transition: border-color .2s ease, background .2s ease;
}

.tg-cloud-pay:hover {
  border-color: #159fb5;
  background: #eafafe;
}

.tg-cloud-pay > span {
  font-size: 16px;
  font-weight: 500;
}

.tg-cloud-portal > .tg-cloud-fees {
  margin: 14px 0 0;
  color: #5d7a89;
  font-size: 10px;
}

.tg-cloud-fees b {
  font-weight: 600;
}

.tg-cloud-fees a {
  display: inline-block;
  margin-left: 4px;
  color: #087d94;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #7ac5d4;
  text-underline-offset: 3px;
}

.tg-cloud-page .hero-note {
  margin-top: 14px;
  font-size: 9px;
}

.tg-cloud-page .tg-cloud-header-link {
  border-color: #9bd5e2;
  background: #ecfaff;
  color: #087e97;
  white-space: nowrap;
}

.tg-cloud-card-actions {
  margin-top: auto;
  padding-top: 15px;
}

.tg-cloud-card-pay {
  width: 100%;
  border-color: #079cae;
  background: linear-gradient(110deg, #059dbf, #05a99e);
  color: #fff;
  font-size: 11px;
}

.tg-cloud-card-pay:hover {
  border-color: #087e96;
  background: #088f9d;
}

.tg-cloud-card-actions > small {
  display: block;
  margin-top: 10px;
  color: #6a8593;
  font-size: 9px;
  line-height: 1.7;
  text-align: center;
}

.tg-cloud-bottom-kicker {
  color: #91d8e4;
  font-size: 9px;
  line-height: 1.8;
  font-weight: 600;
  letter-spacing: 1px;
}

.tg-cloud-bottom-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.tg-cloud-page .tg-cloud-bottom-actions .btn {
  margin: 0;
  min-height: 48px;
  gap: 10px;
  line-height: 1.6;
}

.tg-cloud-page .tg-cloud-bottom-pay {
  color: #17546b;
}

.tg-cloud-compare {
  display: inline-block;
  margin-top: 23px;
  color: #b9e3ec;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.tg-cloud-page .tg-cloud-portal a:focus-visible,
.tg-cloud-page .tg-cloud-bottom a:focus-visible,
.tg-cloud-page .tg-cloud-card-pay:focus-visible {
  outline: 3px solid #268db4;
  outline-offset: 4px;
}

@media (max-width: 1100px) {
  .tg-cloud-page .hero { gap: 32px; }
  .tg-cloud-portal { padding: 21px; }
  .tg-cloud-pay { font-size: 10px; }
  .tg-cloud-purchase { gap: 15px; }
  .tg-cloud-purchase > .tg-cloud-pay { flex: 1 1 200px; }
}

@media (max-width: 700px) {
  .tg-cloud-page .hero { grid-template-columns: 1fr; padding-block: 34px 45px; gap: 32px; }
  .tg-cloud-page .hero h1 { font-size: clamp(34px, 8.8vw, 45px); letter-spacing: -1.8px; }
  .tg-cloud-page .hero-copy > p { font-size: 13px; }
  .tg-cloud-portal { border-radius: 18px; padding: 20px; margin-top: 23px; }
  .tg-cloud-portal h2 { font-size: 23px; }
  .tg-cloud-launch { font-size: 13px; min-height: 58px; padding-inline: 15px; }
  .tg-cloud-purchase { align-items: flex-start; gap: 14px; }
  .tg-cloud-purchase-price > strong { font-size: 24px; }
  .tg-cloud-purchase > .tg-cloud-pay { flex-basis: 100%; font-size: 11px; }
  .tg-cloud-page .hero-note { font-size: 9px; line-height: 1.8; }
  .tg-cloud-bottom-actions { flex-direction: column; align-items: stretch; }
  .tg-cloud-page .tg-cloud-bottom-actions .btn { width: 100%; }
  .tg-cloud-bottom-kicker { letter-spacing: .5px; }
}

@media (prefers-reduced-motion: reduce) {
  .tg-cloud-page .tg-cloud-launch,
  .tg-cloud-page .tg-cloud-pay { transition: none; }
  .tg-cloud-page .tg-cloud-launch:hover { transform: none; }
}