/* Components used across readyserver.ai. Colours, spacing and type come from tokens.css. */

/* Header ------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--header-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand:hover {
  color: var(--color-heading);
}

.brand__logo {
  width: 2rem;
  height: 2rem;
}

.brand__tld {
  color: var(--color-link);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-left: auto;
}

.site-nav__list {
  display: flex;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__list a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.site-nav__list a:hover,
.site-nav__list a.is-active {
  background: var(--color-bg-muted);
  color: var(--color-heading);
}

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.icon-button:hover {
  border-color: var(--color-border-strong);
  color: var(--color-heading);
}

.icon-button svg {
  width: 1.125rem;
  height: 1.125rem;
}

.nav-toggle {
  margin-left: auto;
}

@media (min-width: 48rem) {
  .nav-toggle {
    display: none;
  }
}

@media (max-width: 47.99rem) {
  /* Without JavaScript the navigation stays visible and wraps under the brand. */
  .site-header__inner {
    flex-wrap: wrap;
    padding-block: var(--space-3);
  }

  .site-nav {
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin-left: 0;
  }

  .site-nav__list {
    flex-wrap: wrap;
  }

  .js .site-header__inner {
    flex-wrap: nowrap;
    padding-block: 0;
  }

  .js .site-nav {
    display: none;
  }

  .js .site-nav.is-open {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    box-shadow: var(--shadow-md);
  }

  .js .site-nav.is-open .site-nav__list {
    flex-direction: column;
  }

  .js .site-nav.is-open .site-nav__list a {
    padding: var(--space-3);
    font-size: var(--text-base);
  }

  .js .site-nav.is-open .site-nav__actions {
    justify-content: space-between;
  }
}

/* Buttons ----------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.7rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.button--small {
  padding: 0.5rem 0.85rem;
}

.button--large {
  padding: 0.85rem 1.4rem;
  font-size: var(--text-base);
}

.button--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-sm);
}

.button--primary:hover {
  background: var(--color-primary-hover);
  color: var(--color-on-primary);
}

.button--secondary {
  border-color: var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-heading);
}

.button--secondary:hover {
  border-color: var(--color-text-muted);
  color: var(--color-heading);
}

.button--inverse {
  background: var(--color-cta-text);
  color: var(--rs-blue-900);
}

.button--inverse:hover {
  background: var(--rs-blue-50);
  color: var(--rs-blue-900);
}

.button--outline-inverse {
  border-color: var(--color-cta-outline);
  background: transparent;
  color: var(--color-cta-text);
}

.button--outline-inverse:hover {
  background: var(--color-cta-hover);
  color: var(--color-cta-text);
}

/* Hero -------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-16) var(--space-20);
  border-bottom: 1px solid var(--color-border);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(var(--color-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
  background-size: 3rem 3rem;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 20%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 70% 20%, #000 20%, transparent 75%);
}

.hero::after {
  content: "";
  position: absolute;
  top: -12rem;
  right: -10rem;
  z-index: -1;
  width: 50rem;
  height: 36rem;
  background: radial-gradient(closest-side, var(--hero-glow), transparent);
  pointer-events: none;
}

.hero__inner {
  display: grid;
  align-items: center;
  gap: var(--space-12);
}

@media (min-width: 64rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--space-16);
  }
}

.hero h1 {
  margin-bottom: var(--space-5);
}

.hero__lead {
  max-width: 36rem;
  margin-bottom: var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero__note {
  margin: var(--space-5) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.status-dot {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-online);
  box-shadow: 0 0 0 3px var(--color-online-ring);
}

.highlight {
  background: linear-gradient(90deg, var(--color-highlight-start), var(--color-highlight-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Terminal ---------------------------------------------------------------- */

.terminal {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-code-border);
  border-radius: var(--radius-lg);
  background: var(--color-code-bg);
  box-shadow: var(--shadow-lg);
}

.terminal__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-code-border);
}

.terminal__dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--rs-slate-700);
}

.terminal__title {
  margin-left: var(--space-2);
  color: var(--color-code-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.terminal pre {
  margin: 0;
  padding: var(--space-5);
  border: 0;
  border-radius: 0;
  background: transparent;
}

.t-prompt {
  color: var(--color-code-prompt);
  user-select: none;
}

.t-output {
  color: var(--color-code-muted);
}

/* Sections and grids ------------------------------------------------------ */

.section {
  padding-block: var(--space-20);
}

.section--subtle {
  border-block: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

.section__header {
  max-width: 42rem;
  margin-bottom: var(--space-12);
}

.section__kicker {
  margin-bottom: var(--space-3);
  color: var(--color-accent-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section__lead {
  margin-bottom: 0;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

.section__more {
  margin: var(--space-8) 0 0;
  font-weight: var(--weight-semibold);
}

.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--cards {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* Fits five short cards in one row on desktop. */
.grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.grid--docs {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-4);
  margin-block: var(--space-8);
}

.plain-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.split {
  display: grid;
  align-items: center;
  gap: var(--space-10);
}

@media (min-width: 56rem) {
  .split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-16);
  }
}

/* Cards ------------------------------------------------------------------- */

.card {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.card h3,
.card .card__title {
  margin: 0 0 var(--space-2);
  padding: 0;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}

.card p {
  margin: 0;
  color: var(--color-text-muted);
}

a.card {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

a.card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card--dashed {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
}

.card__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}

.card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.card .card__link {
  display: inline-block;
  margin-top: auto;
  padding-top: var(--space-4);
  color: var(--color-link);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0.15rem 0.65rem;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.card .badge--online,
.badge--online {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

/* Steps and checklists ---------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps > li {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  counter-increment: step;
}

.steps > li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.steps h3 {
  margin-bottom: var(--space-2);
  font-size: var(--text-lg);
}

.steps p {
  margin: 0;
  color: var(--color-text-muted);
}

.checklist {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  position: relative;
  padding: var(--space-4) var(--space-5) var(--space-4) 3.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.checklist li::before {
  content: "✓";
  position: absolute;
  top: calc(var(--space-4) + 0.2rem);
  left: var(--space-5);
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-size: 0.7rem;
  font-weight: var(--weight-bold);
}

/* Call to action ---------------------------------------------------------- */

.cta {
  padding: var(--space-16) var(--space-6);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-cta-start), var(--color-cta-end));
  color: var(--color-cta-text);
  text-align: center;
}

.cta h2 {
  color: var(--color-cta-text);
}

.cta p {
  max-width: 38rem;
  margin: 0 auto var(--space-8);
  color: var(--color-cta-muted);
  font-size: var(--text-lg);
}

.cta .hero__actions {
  justify-content: center;
}

/* Page headers and prose -------------------------------------------------- */

.page-header {
  padding-block: var(--space-16) var(--space-12);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

.page-header h1,
.prose h1 {
  margin-bottom: var(--space-3);
  font-size: clamp(2rem, 1.6rem + 1.8vw, 2.75rem);
}

.page-header__lead {
  max-width: 44rem;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

.page-body {
  padding-block: var(--space-12) var(--space-20);
}

.page-body > * + * {
  margin-top: var(--space-12);
}

.prose {
  min-width: 0;
  max-width: var(--prose-width);
}

.prose > :first-child {
  margin-top: 0;
}

.prose h2 {
  margin-top: var(--space-12);
  font-size: var(--text-2xl);
}

.prose h3 {
  margin-top: var(--space-8);
  font-size: var(--text-lg);
}

.prose ul,
.prose ol {
  padding-left: var(--space-6);
}

.prose li + li {
  margin-top: var(--space-2);
}

.lead {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

.meta-line {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.callout {
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-note-border);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-note-bg);
}

.callout--warn {
  border-left-color: var(--color-warn-border);
  background: var(--color-warn-bg);
}

.callout p {
  margin-bottom: var(--space-2);
}

.callout > :last-child {
  margin-bottom: 0;
}

.callout__title {
  color: var(--color-heading);
  font-weight: var(--weight-semibold);
}

.table-wrap {
  margin-bottom: var(--space-6);
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.table-wrap table {
  margin: 0;
}

.table-wrap tr:last-child td {
  border-bottom: 0;
}

/* Keep identifiers such as parameter names whole in the first column. */
.table-wrap td:first-child code {
  white-space: nowrap;
  overflow-wrap: normal;
}

/* Docs layout ------------------------------------------------------------- */

.docs-layout {
  display: grid;
  gap: var(--space-8);
  padding-block: var(--space-10) var(--space-20);
}

@media (min-width: 60rem) {
  .docs-layout {
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: var(--space-12);
  }
}

.docs-nav {
  font-size: var(--text-sm);
}

.docs-nav__heading {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.docs-nav ul {
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}

.docs-nav a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
}

.docs-nav a:hover {
  background: var(--color-bg-muted);
  color: var(--color-heading);
}

.docs-nav a[aria-current="page"] {
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-weight: var(--weight-semibold);
}

@media (min-width: 60rem) {
  .docs-nav {
    position: sticky;
    top: calc(var(--header-height) + var(--space-8));
  }
}

@media (max-width: 59.99rem) {
  .docs-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0 var(--space-4);
    padding: var(--space-4) var(--space-4) 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .docs-nav ul {
    margin-bottom: var(--space-4);
  }
}

/* Code blocks and tabs (enhanced by main.js) ------------------------------ */

.code-block {
  position: relative;
  margin-bottom: var(--space-6);
}

.code-block pre {
  margin: 0;
  padding-right: 4.5rem;
}

.copy-button {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--color-code-border);
  border-radius: var(--radius-sm);
  background: var(--color-code-bg);
  color: var(--color-code-muted);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.copy-button:hover,
.copy-button.is-copied {
  color: var(--color-code-text);
}

.code-tabs {
  margin-bottom: var(--space-6);
}

.code-panel + .code-panel {
  margin-top: var(--space-4);
}

.code-panel .code-block,
.code-panel pre {
  margin-bottom: 0;
}

.code-panel__label {
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tab-list {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  padding: var(--space-2) var(--space-2) 0;
  border: 1px solid var(--color-code-border);
  border-bottom: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--color-code-bg);
}

.tab {
  padding: 0.45rem 0.8rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--color-code-muted);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.tab:hover {
  color: var(--color-code-text);
}

.tab[aria-selected="true"] {
  border-bottom-color: var(--color-code-accent);
  color: var(--color-code-text);
}

.code-tabs.is-enhanced .code-panel + .code-panel {
  margin-top: 0;
}

.code-tabs.is-enhanced pre {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Models ------------------------------------------------------------------ */

.model {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-8);
}

.model__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.model__header h2 {
  margin-bottom: var(--space-2);
  font-size: var(--text-2xl);
}

.model .model__summary {
  margin: 0;
}

.model .badge {
  margin: 0;
}

.spec-list {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
  gap: var(--space-3) var(--space-8);
  margin: 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.spec-list dt {
  color: var(--color-text-muted);
}

.spec-list dd {
  margin: 0;
  color: var(--color-heading);
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}

/* FAQ --------------------------------------------------------------------- */

.faq {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.faq details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  color: var(--color-heading);
  font-weight: var(--weight-semibold);
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  color: var(--color-text-muted);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  line-height: 1.2;
}

.faq details[open] summary::after {
  content: "−";
}

.faq__answer {
  padding: 0 var(--space-5) var(--space-4);
}

.faq__answer > :last-child {
  margin-bottom: 0;
}

/* Footer ------------------------------------------------------------------ */

.site-footer {
  padding-block: var(--space-12) var(--space-8);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  font-size: var(--text-sm);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-10);
}

@media (min-width: 48rem) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
}

.site-footer__brand p {
  max-width: 22rem;
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-8);
}

.site-footer__heading {
  margin-bottom: var(--space-3);
  color: var(--color-heading);
  font-weight: var(--weight-semibold);
}

.site-footer ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__nav a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.site-footer__nav a:hover {
  color: var(--color-heading);
  text-decoration: underline;
}

.site-footer__legal {
  margin: var(--space-10) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

/* 404 --------------------------------------------------------------------- */

.not-found {
  padding-block: var(--space-24);
  text-align: center;
}

.not-found__code {
  margin-bottom: var(--space-3);
  color: var(--color-accent-text);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.not-found .hero__actions {
  justify-content: center;
}

/* Plans (/getavps): the VPS first-top-up cards.
   The middle card is dark in both themes by design — it is the emphasis of the
   layout, not a surface that follows the theme. */
/* These cards carry far denser content than the rest of the site — two badges
   side by side, a five-pill points row — so the page takes a wider measure than
   the shared container. Scoped to this page on purpose: --container-width is a
   design token shared with the forum, and moving it would move every page. */
.plans > .container {
  max-width: 86rem;
}

.plans__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  /* Deliberately no align-items: the cards stretch to a common height so the
     three "Start VPS Deployment" buttons sit on one line. The plans hold
     different numbers of features, so with start-aligned cards each button
     landed at the bottom of its own card, at three different heights. The
     featured card still rises above the row: its negative block margins take
     it past the row box in both directions. */
}

@media (min-width: 60rem) {
  .plans__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.plan {
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

/* The featured card sits proud of the other two on wide screens, the way it
   does in the design; on narrow screens everything stacks flush. */
@media (min-width: 60rem) {
  .plan--featured {
    margin-block: calc(var(--space-6) * -1);
    padding-block: calc(var(--space-8) + var(--space-6));
  }
}

.plan--featured {
  border-color: transparent;
  background: var(--rs-slate-900);
  box-shadow: var(--shadow-lg);
}

.plan__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
}

.plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-full);
  color: var(--rs-white);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* A badge is a single label: it may sit beside another or drop below it, but
     it must never break across lines mid-phrase. */
  white-space: nowrap;
}

.plan-badge--bonus {
  background: var(--rs-green-500);
}

.plan-badge--popular {
  background: var(--rs-blue-600);
}

.plan__name {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

/* Still the focal point of the card, but a fixed 1.5rem rather than a heading
   token: --text-4xl (h1) and --text-3xl (h2) both made the price louder than
   anything else on the site. */
.plan__price {
  margin: 0 0 var(--space-2);
  color: var(--color-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.plan__gst {
  margin: 0 0 var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.plan__points {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
}

.point {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-full);
  background: var(--color-bg-muted);
  color: var(--color-text);
  font-size: var(--text-sm);
}

.point--total {
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-weight: var(--weight-bold);
}

.point__op {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* The card body sits one step below the site's base size. These cards carry far
   more copy than a normal card, and at 1rem throughout they read as oversized
   against the rest of the page. */
.plan__summary {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.plan__bonus-note {
  margin: 0 0 var(--space-6);
  color: var(--rs-green-700);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.plan__runtime {
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

.plan__runtime-title {
  margin: 0;
  color: var(--color-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.plan__runtime-alt {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.plan__features {
  margin: 0 0 var(--space-8);
  padding: var(--space-6) 0 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
  display: grid;
  gap: var(--space-4);
}

.plan__features li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--color-text);
  font-size: var(--text-sm);
}

.plan__features li::before {
  content: "✓";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--color-text-muted);
  font-weight: var(--weight-bold);
}

/* The call to action sits on the bottom edge whatever the card's height, so the
   three buttons line up across a row of unequal cards. */
.plan__cta {
  margin-top: auto;
  width: 100%;
  border-color: var(--color-primary);
  background: transparent;
  color: var(--color-primary);
}

.plan__cta:hover {
  background: var(--color-accent-soft);
  color: var(--color-primary-hover);
}

/* Featured card: dark surface, so everything inside it is restated. */
.plan--featured .plan__name,
.plan--featured .plan__price,
.plan--featured .plan__runtime-title {
  color: var(--rs-white);
}

.plan--featured .plan__gst,
.plan--featured .plan__summary,
.plan--featured .plan__runtime-alt,
.plan--featured .point__op {
  color: var(--rs-slate-400);
}

.plan--featured .plan__features li {
  color: var(--rs-slate-200);
}

.plan--featured .plan__features li::before {
  color: var(--rs-slate-400);
}

.plan--featured .plan__features {
  border-top-color: var(--rs-slate-700);
}

.plan--featured .plan__bonus-note {
  color: var(--rs-green-400);
}

.plan--featured .point {
  background: var(--rs-slate-800);
  color: var(--rs-slate-200);
}

.plan--featured .point--total {
  background: rgb(59 130 246 / 0.18);
  color: var(--rs-blue-300);
}

.plan--featured .plan__runtime {
  border-color: var(--rs-slate-700);
  background: var(--rs-slate-800);
}

.plan--featured .plan__cta {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--rs-white);
}

.plan--featured .plan__cta:hover {
  border-color: var(--rs-blue-700);
  background: var(--rs-blue-700);
  color: var(--rs-white);
}

/* In dark theme the "one dark card among light ones" device stops working: the
   featured card lands within a few points of the surfaces either side of it and
   recedes instead of leading. An accent border restores the emphasis without
   touching the light design, where the card already carries it by contrast. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .plan--featured {
    border-color: var(--rs-blue-600);
  }
}

:root[data-theme="dark"] .plan--featured {
  border-color: var(--rs-blue-600);
}

/* The promotion's small print, centred under the plan cards (/getavps). */
.plan-notes {
  max-width: 46rem;
  margin: var(--space-12) auto 0;
  text-align: center;
}

.plan-notes p {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-style: italic;
  line-height: var(--leading-snug);
}

.plan-notes p:last-child {
  margin-bottom: 0;
}

/* Centres a prose column inside a wider container. Text keeps its readable
   measure instead of hugging the left edge of a full-width section. */
.prose--center {
  margin-inline: auto;
}

/* Centres a section's kicker and heading. The default is left-aligned, which
   suits the docs and the home page; a landing page reads better with its
   headings centred over the content below them. */
.section__header--center {
  margin-inline: auto;
  text-align: center;
}