/* LumoHosting VPS — mobile refinements based on current V22 vps-hosting.css.
   Load after vps-hosting.css inside <head>. Only affects screens <=760px.
   No layout/markup/desktop/JS/pricing changes. */
@media (max-width: 760px) {
  /* HERO: cleaner copy, keep woman's illustration and reserved price area. */
  .vps-page .vps-hybrid-hero .vps-hero-copy { padding-top: 10px; }
  .vps-page .vps-hybrid-hero .vps-hero-copy h1 {
    font-size: clamp(37px, 10vw, 52px);
    line-height: 1.07;
    margin: 17px 0 13px;
    text-wrap: balance;
  }
  .vps-page .vps-hybrid-hero .vps-hero-copy > p:not(.vps-hero-assist) {
    font-size: 14px;
    line-height: 1.6;
    max-width: 43ch;
  }
  .vps-page .vps-hybrid-hero .vps-hero-pills { margin: 15px 0 17px; gap: 7px 11px; }
  .vps-page .vps-hybrid-hero .vps-hero-assist { margin-top: 11px; }
  .vps-page .vps-hybrid-hero .vps-hybrid-art { margin-top: 4px; }
  /* Leave positioning from V21/V22 intact so the card never covers the woman. */
  .vps-page .vps-hybrid-hero .vps-hybrid-art .vps-hero-price-float {
    min-height: 77px;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 15px;
    box-shadow: 0 12px 28px rgba(19,44,38,.15);
  }
  .vps-page .vps-hybrid-hero .vps-hero-price-line strong {
    font-size: clamp(28px, 7.9vw, 34px);
    font-variant-numeric: tabular-nums;
  }
  .vps-page .vps-hybrid-hero .vps-hero-price-label { font-size: 9px; }
  .vps-page .vps-hybrid-hero .vps-hero-price-sub { font-size: 10px; line-height: 1.35; }
  .vps-page .vps-hybrid-hero .vps-hero-strip a { min-height: 42px; }

  /* PRICING: visually prioritize the price, preserve every plan/feature. */
  .vps-page .vps-pricing { padding-top: 54px; }
  .vps-page .vps-pricing .vps-pricing-head { margin-bottom: 17px; }
  .vps-page .vps-pricing .vps-pricing-head h2 { text-wrap: balance; margin-bottom: 11px; }
  .vps-page .vps-pricing .vps-pricing-head p { line-height: 1.65; }
  .vps-page .vps-pricing .vps-pricing-aside { display: none; }
  .vps-page .vps-pricing .vps-billing-row { gap: 8px; margin-bottom: 27px; }
  .vps-page .vps-pricing .vps-billing { width: 100%; max-width: 420px; }
  .vps-page .vps-pricing .vps-billing-button { min-height: 44px; padding: 10px 6px; }
  .vps-page .vps-pricing .vps-billing-row > p { line-height: 1.5; }
  .vps-page .vps-pricing .vps-plan-grid { gap: 23px; }
  .vps-page .vps-pricing .vps-plan {
    padding: 29px 19px 19px;
    border-radius: 21px;
  }
  .vps-page .vps-pricing .vps-plan-top h3 { margin: 6px 0; font-size: 27px; }
  .vps-page .vps-pricing .vps-plan-top p { min-height: 0; line-height: 1.6; }
  .vps-page .vps-pricing .vps-plan-price {
    margin: 13px 0 10px;
    padding: 14px 0 13px;
  }
  .vps-page .vps-pricing .vps-money-line strong {
    font-size: clamp(38px, 10.5vw, 46px);
    line-height: 1.12;
    font-variant-numeric: tabular-nums;
  }
  .vps-page .vps-pricing .vps-plan-price small { line-height: 1.45; }
  .vps-page .vps-pricing .vps-plan-specs { margin-bottom: 13px; }
  .vps-page .vps-pricing .vps-plan-specs > div { padding: 9px 0; }
  .vps-page .vps-pricing .vps-plan-cta { min-height: 46px; }
  .vps-page .vps-pricing .vps-plan-included { margin-top: 14px; padding-top: 14px; }
  .vps-page .vps-pricing .vps-plan-included ul { margin-top: 11px; gap: 10px; }
  .vps-page .vps-pricing .vps-price-foot { margin-top: 20px; }
}
@media (max-width: 360px) {
  .vps-page .vps-hybrid-hero .vps-hero-price-icon {
    width: 34px; height: 34px; flex-basis: 34px;
  }
  .vps-page .vps-pricing .vps-billing-button { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .vps-page .vps-hero-price-float { animation: none !important; }
}

/* Final mobile pass, 2026-10-19. Keep the desktop layout untouched. */
@media (max-width: 760px) {
  /* Recover a little room without placing the price card over the portrait. */
  .vps-page .vps-hybrid-hero { padding-top: 18px; }
  .vps-page .vps-hybrid-hero .vps-hero-copy { padding-top: 5px; }
  .vps-page .vps-hybrid-hero .vps-hero-copy h1 { margin-top: 14px; }
  .vps-page .vps-hybrid-hero .vps-hero-pills { margin-block: 12px 14px; }
  .vps-page .vps-hybrid-hero .vps-hybrid-art {
    height: calc(clamp(245px, 72vw, 345px) + 78px);
    min-height: 0;
    margin-top: 0;
  }
  .vps-page .vps-hybrid-hero .vps-hybrid-person { bottom: 75px; }
  .vps-page .vps-hybrid-hero .vps-stamp-two { bottom: 76px; }
  .vps-page .vps-hybrid-hero .vps-hybrid-art .vps-hero-price-float { bottom: 3px; }

  /* A compact comparison view: keep the price readable and all benefits visible. */
  .vps-page .vps-pricing .vps-plan-grid { gap: 21px; }
  .vps-page .vps-pricing .vps-plan { padding: 27px 19px 18px; }
  .vps-page .vps-pricing .vps-plan-price { margin: 11px 0 9px; padding: 12px 0; }
  .vps-page .vps-pricing .vps-plan-specs > div { padding-block: 8px; }
  .vps-page .vps-pricing .vps-plan-included { margin-top: 12px; padding-top: 12px; }
  .vps-page .vps-pricing .vps-plan-included ul { gap: 9px; }
  .vps-page .vps-pricing .vps-price-foot { margin-top: 16px; }
  .vps-page .vps-pricing { padding-bottom: 46px; }
}
@media (max-width: 390px) {
  .vps-page .vps-hybrid-hero .vps-hybrid-art {
    height: calc(248px + 78px);
  }
}


/* VPS accessibility polish: targeted contrast and readable focus indicators.
   Applies at all widths; preserves all visual layout and page interactions. */
.vps-page {
  --vp-muted: #485d6f;
  --vp-green-dark: #41660f;
}
/* Small green copy on white, cream and pale-lime backgrounds. */
.vps-page .vps-kicker,
.vps-page .vps-eyebrow,
.vps-page .vps-price-label,
.vps-page .vps-plan-step,
.vps-page .vps-text-link,
.vps-page .vps-hero-assist a,
.vps-page .vps-price-foot a,
.vps-page .vps-photo-chip > span,
.vps-page .vps-resource-footer,
.vps-page .vps-hero-strip span {
  color: #466b13;
}
.vps-page .vps-section h2 em,
.vps-page .vps-hero h1 em {
  color: #486e13;
}
/* Keep decorative green headings legible inside dark sections. */
.vps-page :is(.vps-lab,.vps-explain-immersive,.vps-plan-featured,.vps-support-panel) :is(.vps-kicker,.vps-price-label,.vps-plan-step,.vps-text-link,h2 em,h3 em) {
  color: #c7f36c;
}
/* Secondary copy: readable while retaining hierarchy. */
.vps-page :is(.vps-hero-copy,.vps-pricing,.vps-faq,.vps-comparison) :is(.vps-section-head p,.vps-plan-top p,.vps-plan-specs span,.vps-plan-price small,.vps-hero-assist,.vps-price-foot p,.vps-compare-note,.vps-confirm,.vps-faq-intro p) {
  color: #4a5e6c;
}
.vps-page .vps-plan-featured :is(.vps-plan-top p,.vps-plan-specs span,.vps-plan-price small,.vps-plan-included li) {
  color: #d4e1ea;
}
/* Make keyboard focus distinct, including links on dark sections. */
.vps-page :is(a,button,summary,select,[tabindex]):focus-visible {
  outline: 3px solid #357000;
  outline-offset: 3px;
}
.vps-page :is(.vps-lab,.vps-explain-immersive,.vps-plan-featured,.vps-support-panel) :is(a,button,summary,select,[tabindex]):focus-visible {
  outline-color: #d5ff85;
}

/* Lighthouse contrast audit — 2026-10-19.
   Exact affected elements shown in the mobile audit. All viewports.
   Keep component backgrounds, positions, dimensions and animations unchanged. */

/* White hero feature stickers: their former grey secondary labels were too faint. */
.vps-page .vps-hybrid-hero .vps-hybrid-stamp small {
  color: #405363;
}

/* OS selection tiles: category labels on white / pale-green backgrounds.
   Applies to Debian, AlmaLinux, Rocky, Fedora, Windows and all other OS tiles. */
.vps-page .vps-v12-os-tile small {
  color: #3c6414;
}

/* Self-managed comparison card on its pale background. */
.vps-page .vps-management .vps-management-cards article:first-child > span {
  color: #406816;
}
.vps-page .vps-management .vps-management-cards article:first-child > p,
.vps-page .vps-management .vps-management-cards article:first-child p {
  color: #405465;
}

/* Leave the dark managed-service card with deliberately light text. */
.vps-page .vps-management .vps-management-cards article:last-child > span {
  color: #d0f67c;
}
.vps-page .vps-management .vps-management-cards article:last-child p {
  color: #d9e5eb;
}