.rg-account-cards {
  --account-cyan: #55d8ff;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  margin-top: 40px;
}

.rg-account-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.rg-account-card {
  --route-accent: #5570ff;
  --route-accent-2: #55d8ff;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 616px;
  overflow: hidden;
  padding: 24px;
  border: 1px solid #cfdaea;
  border-radius: 24px;
  color: #071733;
  background: linear-gradient(158deg, #fff 0%, #f7faff 100%);
  box-shadow: 0 22px 54px rgba(15, 37, 73, .09);
}

.rg-account-card::before { position: absolute; z-index: -1; top: 0; right: 0; left: 0; height: 4px; background: linear-gradient(90deg, var(--route-accent), var(--route-accent-2)); content: ""; }
.rg-account-card::after { position: absolute; z-index: -1; top: -125px; right: -125px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--route-accent-2) 15%, transparent), transparent 68%); content: ""; pointer-events: none; }
.rg-account-card--feature { border-color: #159fc9; color: #fff; background: linear-gradient(155deg, #071733, #12345a 68%, #211a50); box-shadow: 0 30px 68px rgba(17, 55, 101, .25); }
.rg-account-card--ecn { --route-accent: #00b8df; --route-accent-2: #8a6cff; }
.rg-account-card--pro { --route-accent: #bf7c00; --route-accent-2: #9574ff; }
.rg-account-card--cent { --route-accent: #08a794; --route-accent-2: #52d9ff; }
.rg-account-card > * { position: relative; z-index: 1; }
.rg-account-card__top { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.rg-account-card__top > span:first-child { color: var(--route-accent); font-size: 22px; font-weight: 850; letter-spacing: -.03em; }
.rg-account-card--feature .rg-account-card__top > span:first-child { color: var(--account-cyan); }
.rg-account-card__top em { padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--route-accent) 35%, #cad6e7); border-radius: 999px; color: #0a7898; background: color-mix(in srgb, var(--route-accent-2) 10%, #fff); font-size: 11px; font-style: normal; font-weight: 850; letter-spacing: .075em; line-height: 1.1; text-align: center; white-space: nowrap; }
.rg-account-card--feature .rg-account-card__top em { border-color: rgba(84,217,255,.32); color: #79e6ff; background: rgba(84,217,255,.08); }
.rg-account-card--pro .rg-account-card__top em { color: #875900; }
.rg-account-card--cent .rg-account-card__top em { color: #087b70; }
.rg-account-card__identity { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 13px; align-items: center; margin: 19px 0 13px; }
.rg-account-card__mark { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid color-mix(in srgb, var(--route-accent) 30%, #d7e0ec); border-radius: 17px; background: color-mix(in srgb, var(--route-accent-2) 8%, #fff); }
.rg-account-card__mark img { display: block; width: 50px; height: 50px; }
.rg-account-card__identity small { display: block; margin-bottom: 2px; color: #71839d; font-size: 11px; font-weight: 850; letter-spacing: .085em; }
.rg-account-card--feature .rg-account-card__identity small { color: #91a6c2; }
.rg-account-card h3 { margin: 0; color: inherit; font-size: 34px; letter-spacing: -.05em; }
.rg-account-card__positioning { min-height: 46px; margin: 0 0 12px; color: #087a9c; font-size: 14px; font-weight: 800; line-height: 1.65; }
.rg-account-card--feature .rg-account-card__positioning { color: var(--account-cyan); }
.rg-account-card__pricing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.rg-account-card__pricing > span { display: flex; flex-direction: column; min-width: 0; min-height: 90px; padding: 13px; border: 1px solid #d3deec; border-radius: 15px; background: rgba(232,239,248,.64); }
.rg-account-card--feature .rg-account-card__pricing > span { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.045); }
.rg-account-card__pricing small,
.rg-account-card__metrics small { display: block; overflow: hidden; color: #71839d; font-size: 11px; font-weight: 850; letter-spacing: .065em; line-height: 1.25; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.rg-account-card__metrics small { font-size: 10px; letter-spacing: .04em; }
.rg-account-card--feature .rg-account-card__pricing small,
.rg-account-card--feature .rg-account-card__metrics small { color: #91a6c2; }
.rg-account-card--ecn .rg-account-card__pricing small { font-size: 10px; letter-spacing: .04em; }
.rg-account-card__pricing strong { display: block; overflow: hidden; margin: 8px 0 4px; color: inherit; font-size: 21px; letter-spacing: -.035em; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.rg-account-card--cent .rg-account-card__pricing strong { font-size: 17px; line-height: 1.15; }
.rg-account-card__pricing em { display: block; overflow: hidden; margin-top: auto; color: #687b98; font-size: 11.5px; font-style: normal; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.rg-account-card--feature .rg-account-card__pricing em { color: #aebdd2; }
.rg-account-card__metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 14px; overflow: hidden; border: 1px solid #d3deec; border-radius: 15px; }
.rg-account-card--feature .rg-account-card__metrics { border-color: rgba(255,255,255,.14); }
.rg-account-card__metrics > :is(div, span) { display: block; min-width: 0; min-height: 67px; padding: 11px; border-right: 1px solid #d3deec; border-bottom: 1px solid #d3deec; }
.rg-account-card__metrics > :is(div, span):nth-child(2n) { border-right: 0; }
.rg-account-card__metrics > :is(div, span):nth-last-child(-n+2) { border-bottom: 0; }
.rg-account-card--feature .rg-account-card__metrics > :is(div, span) { border-color: rgba(255,255,255,.12); }
.rg-account-card__metrics strong { display: block; overflow: hidden; margin-top: 5px; color: inherit; font-size: 16px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.rg-account-card__signals { margin: 0 0 17px; padding: 0; list-style: none; }
.rg-account-card__signals li { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; color: #40516d; font-size: clamp(11px, .82vw, 13px); line-height: 1.4; white-space: nowrap; }
.rg-account-card--feature .rg-account-card__signals li { color: #d4dced; }
.rg-account-card__signals li svg { display: block; width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; color: var(--route-accent); }
.rg-account-card--feature .rg-account-card__signals li svg { color: var(--account-cyan); }
.rg-account-card__action { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; margin-top: auto; padding: 9px 14px; border: 1px solid #b9c8dd; border-radius: 14px; color: #0b2448; background: rgba(255,255,255,.68); text-decoration: none; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.rg-account-card__action > span { min-width: 0; }
.rg-account-card__action small,
.rg-account-card__action strong { display: block; }
.rg-account-card__action small { margin-bottom: 2px; color: #73849c; font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.rg-account-card__action strong { overflow: hidden; color: inherit; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.rg-account-card--feature .rg-account-card__action { border-color: rgba(84,217,255,.4); color: #fff; background: rgba(84,217,255,.08); }
.rg-account-card--feature .rg-account-card__action small { color: #8fa6c3; }
.rg-account-card__action:hover,
.rg-account-card__action:focus-visible { border-color: var(--route-accent); color: #071733; background: #e4f8ff; transform: translateY(-2px); }
.rg-account-card__action:focus-visible { outline: 3px solid rgba(84,217,255,.5); outline-offset: 3px; }
.rg-account-card__action svg { display: block; width: 18px; height: 18px; flex: 0 0 18px; }
.rg-account-card--unavailable { background: linear-gradient(158deg, #fff 0%, #f1f4f8 100%); }
.rg-account-card--unavailable .rg-account-card__pricing > span { border-style: dashed; }

@media (min-width: 1181px) and (max-width: 1340px) {
  .rg-account-card { min-height: 596px; padding: 18px; }
  .rg-account-card__identity { grid-template-columns: 54px minmax(0, 1fr); gap: 10px; }
  .rg-account-card__mark { width: 54px; height: 54px; }
  .rg-account-card__mark img { width: 47px; height: 47px; }
  .rg-account-card h3 { font-size: 31px; }
  .rg-account-card__positioning { font-size: 13px; }
  .rg-account-card__pricing > span { padding: 10px; }
  .rg-account-card__metrics > :is(div, span) { padding: 9px; }
  .rg-account-card__pricing small,
  .rg-account-card__metrics small { font-size: 9px; letter-spacing: .035em; }
  .rg-account-card--ecn .rg-account-card__pricing > span:first-child small { font-size: 8px; letter-spacing: .02em; }
  .rg-account-card__pricing strong { font-size: 19px; }
  .rg-account-card__pricing em { font-size: 9px; }
  .rg-account-card__metrics strong { font-size: 15px; }
  .rg-account-card__signals li { gap: 6px; font-size: 10.5px; }
  .rg-account-card__action { padding-inline: 12px; }
}

@media (max-width: 1180px) {
  .rg-account-cards,
  .rg-account-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-account-card { min-height: 0; }
}

@media (max-width: 760px) {
  .rg-account-card { min-height: 0; padding: 24px; }
  .rg-account-card__positioning { min-height: 0; }
  .rg-account-card__metrics > :is(div, span) { min-height: 88px; padding: 15px; }
}

@media (max-width: 520px) {
  .rg-account-cards,
  .rg-account-cards--3 { grid-template-columns: 1fr; }
  .rg-account-card__pricing small,
  .rg-account-card__metrics small { font-size: 10px; }
  .rg-account-card__signals li { gap: 6px; font-size: 11px; }
}