/* Product introductions; plan cards and controls use the existing pricing styles. */
.hosting-page { --hosting-accent: #006dff; }
.hosting-page.hosting-discord-bot, .hosting-page.hosting-vps, .hosting-page.hosting-rdp { --hosting-accent: #00c1ff; }
.hosting-page.hosting-hytale .hosting-copy .pricing-kicker { color: #70a0ff; }
.hosting-page.hosting-discord-bot .hosting-configure, .hosting-page.hosting-vps .hosting-configure, .hosting-page.hosting-rdp .hosting-configure { color: #04121c; }
.hosting-page.hosting-hytale .hosting-configure:hover { filter: none; background: #005cd9; }
.hosting-page .hosting-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 48px; margin-bottom: 96px; }
.hosting-page .hosting-copy { min-width: 0; }
.hosting-page .hosting-copy .pricing-kicker { margin-bottom: 4px; border-color: color-mix(in srgb, var(--hosting-accent) 15%, transparent); background: color-mix(in srgb, var(--hosting-accent) 5%, transparent); color: var(--hosting-accent); }
.hosting-page .hosting-copy h1 { margin: 0; font-size: 48px; font-style: italic; font-weight: 800; font-synthesis: style; letter-spacing: -.025em; line-height: 1; text-transform: none; }
.hosting-page .hosting-copy h1 span { color: var(--hosting-accent); }
.hosting-page .hosting-copy > p:not(.pricing-kicker) { margin: 24px 0; color: var(--muted); font-size: 14px; font-weight: 300; line-height: 1.65; }
.hosting-page .hosting-configure { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 16px 24px; border: 1px solid transparent; border-radius: 4px; background: var(--hosting-accent); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; line-height: 16px; text-align: center; text-transform: uppercase; }
.hosting-page .hosting-configure:hover { filter: brightness(1.1); }
.hosting-page .hosting-panel { min-width: 0; padding: 32px; border: 1px solid rgba(255,255,255,.1); border-radius: 4px; background: #0e0e0e; }
.hosting-page .hosting-panel > h2 { margin: 0 0 24px; font-size: 14px; font-weight: 700; line-height: 20px; text-transform: uppercase; }
.hosting-page .hosting-feature-list { display: grid; gap: 16px; }
.hosting-page .hosting-feature-row { display: flex; align-items: flex-start; gap: 16px; }
.hosting-page .hosting-feature-row svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2; color: var(--hosting-accent); }
.hosting-page .hosting-feature-row:nth-child(2) svg { color: var(--cyan); }
.hosting-page.hosting-discord-bot .hosting-feature-row:nth-child(2) svg, .hosting-page.hosting-vps .hosting-feature-row:nth-child(2) svg, .hosting-page.hosting-rdp .hosting-feature-row:nth-child(2) svg { color: var(--blue); }
.hosting-page .hosting-feature-row h3 { margin: 0; font-size: 14px; font-weight: 700; line-height: 20px; text-transform: uppercase; }
.hosting-page .hosting-feature-row p { margin: 2px 0 0; color: #8e929a; font-size: 12px; font-weight: 300; line-height: 1.5; }
.hosting-page .hosting-plans { scroll-margin-top: 24px; }

@media (max-width: 1023px) {
  .hosting-page .hosting-hero { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .hosting-page .hosting-panel { padding: 24px; }
}
@media (max-width: 639px) {
  .hosting-page .hosting-copy h1 { font-size: 36px; }
}