/* EvolvedWOTLK Features — v4.9.17 */
.features-body {
  --features-blue: #69b8ff;
  --features-blue-bright: #92ceff;
  --features-text: #eff7ff;
  --features-muted: #92a8c4;
  --features-line: rgba(104, 176, 237, 0.18);
  --features-panel: rgba(5, 15, 28, 0.92);
}

.features-page {
  position: relative;
  min-height: calc(100vh - 180px);
  padding: 28px 24px 74px;
  color: var(--features-text);
}

.features-shell {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(1480px, 100%);
  margin: 0 auto;
  gap: 15px;
}

.features-hero,
.features-directory,
.features-panel {
  border: 1px solid var(--features-line);
  background:
    radial-gradient(ellipse at 12% 0, rgba(61, 155, 236, 0.1), transparent 42%),
    linear-gradient(180deg, rgba(10, 25, 43, 0.91), var(--features-panel));
  box-shadow:
    0 20px 52px rgba(0, 0, 0, 0.27),
    inset 0 1px rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(16px) saturate(125%);
}

.features-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 48px;
  align-items: center;
  min-height: 350px;
  padding: 48px 52px;
  overflow: hidden;
  border-radius: 24px 24px 11px 11px;
}

.features-hero::before,
.features-hero::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.features-hero::before {
  top: -210px;
  left: 21%;
  width: 720px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(76, 174, 255, 0.18),
    transparent 68%
  );
}

.features-hero::after {
  right: -100px;
  bottom: -230px;
  width: 590px;
  height: 500px;
  background: radial-gradient(
    circle,
    rgba(64, 219, 206, 0.075),
    transparent 66%
  );
}

.features-hero-copy,
.features-realm-card {
  position: relative;
  z-index: 1;
}

.features-kicker,
.features-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--features-blue-bright);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.features-hero h1 {
  max-width: none;
  margin: 13px 0 12px;
  color: #f5f9ff;
  font-size: clamp(1.65rem, 4.4vw, 4.5rem);
  font-weight: 950;
  letter-spacing: -0.06em;
  line-height: 0.94;
  white-space: nowrap;
}

.features-hero h1 span {
  display: inline;
  color: #72baff;
  text-shadow: 0 0 30px rgba(76, 166, 248, 0.2);
}

.features-hero-copy > p {
  max-width: 730px;
  margin: 0;
  color: #b1c3d9;
  font-size: 1rem;
  line-height: 1.72;
}

.features-hero-actions {
  display: flex;
  gap: 10px;
  margin-top: 25px;
}

.features-hero-actions a,
.features-roadmap a {
  display: inline-flex;
  min-height: 44px;
  padding: 0 17px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(113, 186, 249, 0.24);
  border-radius: 10px;
  color: #d9ebfb;
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.82rem;
  font-weight: 850;
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    background 0.2s ease;
}

.features-hero-actions .features-primary-action {
  border-color: rgba(101, 188, 255, 0.46);
  color: #fff;
  background: linear-gradient(135deg, #2784dd, #1764bf);
  box-shadow: 0 10px 28px rgba(26, 105, 193, 0.24);
}

.features-hero-actions a:hover,
.features-roadmap a:hover {
  border-color: rgba(123, 199, 255, 0.56);
  transform: translateY(-1px);
}

.features-realm-card {
  display: grid;
  grid-template-columns: 55px minmax(0, 1fr);
  gap: 16px;
  padding: 22px;
  border: 1px solid rgba(109, 185, 247, 0.2);
  border-radius: 18px;
  background: rgba(3, 13, 25, 0.56);
}

.features-realm-icon,
.features-heading-icon {
  display: grid;
  place-items: center;
  border: 1px solid rgba(91, 178, 250, 0.24);
  color: #75c0ff;
  background: rgba(48, 142, 224, 0.11);
}

.features-realm-icon {
  width: 55px;
  height: 55px;
  border-radius: 15px;
  font-size: 1.45rem;
}
.features-realm-card small,
.features-system-count small,
.features-roadmap small {
  color: #748ca8;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.features-realm-card strong {
  display: block;
  margin-top: 3px;
  color: #eff7ff;
  font-size: 1.08rem;
}
.features-realm-card p {
  margin: 6px 0 0;
  color: #879db8;
  font-size: 0.78rem;
  line-height: 1.55;
}
.features-realm-card dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column: 1 / -1;
  gap: 8px;
  margin: 3px 0 0;
}
.features-realm-card dl div {
  padding: 11px;
  border: 1px solid rgba(102, 171, 229, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}
.features-realm-card dt {
  color: #728aa6;
  font-size: 0.62rem;
  font-weight: 850;
  text-transform: uppercase;
}
.features-realm-card dd {
  margin: 3px 0 0;
  color: #cee4f8;
  font-size: 0.83rem;
  font-weight: 900;
}

.features-directory {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
}

.features-directory-heading {
  padding: 0 8px;
}
.features-directory-heading span {
  display: block;
  color: #62809f;
  font-size: 0.61rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.features-directory-heading strong {
  display: block;
  margin-top: 3px;
  color: #e5f2ff;
  font-size: 0.84rem;
  font-weight: 900;
}
.features-directory-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.features-directory-links a {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid rgba(98, 180, 247, 0.18);
  border-radius: 8px;
  color: #9fb2c9;
  background: rgba(37, 116, 184, 0.055);
  font-size: 0.78rem;
  font-weight: 850;
  text-decoration: none;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}
.features-directory-links a span {
  color: #526b88;
  font-size: 0.63rem;
}
.features-directory-links a i {
  color: #65b6f8;
}
.features-directory-links a i:last-child {
  color: #496986;
  font-size: 0.7rem;
}
.features-directory-links a:hover {
  border-color: rgba(98, 180, 247, 0.42);
  color: #edf7ff;
  background: rgba(54, 145, 220, 0.13);
  transform: translateY(-1px);
}

.features-panel {
  padding: 28px;
  overflow: hidden;
  border-radius: 12px;
  scroll-margin-top: 95px;
}

.features-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 22px;
}
.features-section-heading > div:first-child {
  max-width: 820px;
}
.features-section-heading h2 {
  margin: 6px 0 5px;
  color: #f0f7ff;
  font-size: 1.65rem;
  font-weight: 900;
  letter-spacing: -0.025em;
}
.features-section-heading p {
  margin: 0;
  color: #8fa5c0;
  font-size: 0.84rem;
  line-height: 1.6;
}
.features-heading-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  font-size: 1.2rem;
}

.rates-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 9px;
}
.rate-card {
  display: grid;
  min-height: 118px;
  align-content: center;
  padding: 16px;
  border: 1px solid rgba(109, 174, 229, 0.13);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.027);
}
.rate-card small {
  color: #758da8;
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}
.rate-card strong {
  display: block;
  margin: 6px 0 3px;
  color: #eef7ff;
  font-size: 1.5rem;
  font-weight: 950;
}
.rate-card > span {
  color: #617b99;
  font-size: 0.64rem;
  font-weight: 750;
}
.rate-card.highlight {
  border-color: rgba(87, 180, 253, 0.34);
  background: rgba(44, 137, 218, 0.1);
}
.rate-card.highlight strong {
  color: #7bc4ff;
}
.rate-note {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(83, 176, 248, 0.15);
  border-radius: 10px;
  color: #8da5c0;
  background: rgba(43, 134, 211, 0.055);
  font-size: 0.76rem;
}
.rate-note i,
.rate-note strong {
  color: #71bbf8;
}

.feature-showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
}
.feature-showcase-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(109, 177, 234, 0.15);
  border-radius: 13px;
  color: inherit;
  background: rgba(255, 255, 255, 0.025);
  text-decoration: none;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.feature-showcase-card:hover {
  color: inherit;
  border-color: rgba(98, 190, 255, 0.38);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.25);
  transform: translateY(-3px);
}
.feature-showcase-media {
  position: relative;
  overflow: hidden;
}
.feature-showcase-media::after {
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, rgba(5, 15, 28, 0.96));
  content: "";
}
.feature-showcase-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.feature-showcase-card:hover img {
  transform: scale(1.035);
}
.feature-showcase-media > span {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  padding: 5px 7px;
  border: 1px solid rgba(130, 197, 250, 0.24);
  border-radius: 7px;
  color: #b8ddfa;
  background: rgba(4, 15, 27, 0.7);
  font-size: 0.62rem;
  font-weight: 900;
}
.feature-showcase-content {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px;
}
.feature-showcase-icon {
  display: grid;
  width: 36px;
  height: 36px;
  margin-top: -34px;
  margin-bottom: 12px;
  place-items: center;
  border: 2px solid #081827;
  border-radius: 10px;
  color: #72bdfb;
  background: #102a43;
}
.feature-showcase-content h3 {
  margin: 0 0 7px;
  color: #ecf6ff;
  font-size: 0.96rem;
  font-weight: 900;
}
.feature-showcase-content p {
  flex: 1;
  min-height: 76px;
  margin: 0 0 16px;
  color: #8299b4;
  font-size: 0.76rem;
  line-height: 1.58;
}
.feature-showcase-content strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #75bfff;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.features-system-count {
  display: grid;
  justify-items: end;
  flex: 0 0 auto;
}
.features-system-count strong {
  color: #72bfff;
  font-size: 1.7rem;
  line-height: 1;
}
.custom-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.custom-feature {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 112px;
  padding: 15px;
  border: 1px solid rgba(108, 174, 229, 0.11);
  border-radius: 11px;
  color: inherit;
  background: rgba(255, 255, 255, 0.023);
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}
.custom-feature:hover {
  color: inherit;
  border-color: rgba(93, 185, 253, 0.29);
  background: rgba(48, 143, 222, 0.065);
  transform: translateY(-1px);
}
.custom-feature-leading {
  position: relative;
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 1px solid rgba(94, 179, 247, 0.2);
  border-radius: 13px;
  color: #70bcfb;
  background: rgba(46, 139, 217, 0.09);
  font-size: 1.1rem;
}
.custom-feature-leading > span {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  place-items: center;
  border: 2px solid #091827;
  border-radius: 7px;
  color: #6d8cac;
  background: #10283f;
  font-size: 0.54rem;
  font-weight: 900;
}
.custom-feature-copy {
  min-width: 0;
}
.custom-feature h3 {
  margin: 0;
  color: #e5f2ff;
  font-size: 0.88rem;
  font-weight: 900;
}
.custom-feature p {
  margin: 5px 0 0;
  color: #7f97b2;
  font-size: 0.74rem;
  line-height: 1.5;
}
.custom-feature-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 12px;
  color: #6fb9f7;
  font-size: 0.65rem;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}
.feature-command-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.feature-command-list code {
  padding: 4px 7px;
  border: 1px solid rgba(93, 178, 247, 0.23);
  border-radius: 6px;
  color: #acd6fa;
  background: rgba(39, 123, 194, 0.1);
  font-size: 0.68rem;
}

.features-roadmap {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-top: 14px;
  padding: 17px;
  border: 1px solid rgba(99, 179, 243, 0.14);
  border-radius: 11px;
  background: rgba(44, 134, 207, 0.045);
}
.features-roadmap > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 12px;
  color: #78c2ff;
  background: rgba(48, 143, 220, 0.1);
}
.features-roadmap strong {
  display: block;
  margin-top: 2px;
  color: #e6f2fc;
  font-size: 0.86rem;
}
.features-roadmap p {
  margin: 3px 0 0;
  color: #7890aa;
  font-size: 0.72rem;
}

.features-page a:focus-visible {
  outline: 2px solid #74c1ff;
  outline-offset: 2px;
}

@media (max-width: 1180px) {
  .rates-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .feature-showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .features-directory {
    grid-template-columns: 160px minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .features-page {
    padding-inline: 15px;
  }
  .features-hero {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px;
  }
  .features-realm-card {
    max-width: 560px;
  }
  .features-directory {
    grid-template-columns: 1fr;
  }
  .features-directory-heading {
    padding: 2px 4px;
  }
  .custom-feature-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .features-page {
    padding: 14px 9px 50px;
  }
  .features-hero {
    min-height: 0;
    padding: 28px 21px;
    border-radius: 16px 16px 9px 9px;
  }
  .features-hero h1 {
    font-size: clamp(1.65rem, 7vw, 2.7rem);
  }
  .features-hero-actions {
    flex-direction: column;
  }
  .features-realm-card {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 16px;
  }
  .features-realm-icon {
    width: 44px;
    height: 44px;
  }
  .features-directory-links,
  .rates-grid,
  .feature-showcase-grid {
    grid-template-columns: 1fr;
  }
  .features-panel {
    padding: 21px 16px;
  }
  .features-section-heading {
    align-items: flex-start;
  }
  .features-heading-icon,
  .features-system-count {
    display: none;
  }
  .custom-feature {
    grid-template-columns: 45px minmax(0, 1fr);
  }
  .custom-feature-action {
    grid-column: 2;
    padding-left: 0;
  }
  .features-roadmap {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .features-roadmap a {
    grid-column: 1 / -1;
  }
  .feature-showcase-content p {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .features-page *,
  .features-page *::before,
  .features-page *::after {
    transition-duration: 0.01ms !important;
  }
}