/* HostSoch — cloud-server.php only (loaded after site.css).
   Dark theme, sections, stat strip, cards, feature cards and FAQ come from site.css. */

.page-cloud { --hero-mobile-ratio: 800 / 566; }

/* Banner — the photo is a bright sky, so the shade on the left is stronger
   than on the other pages to keep the white headline readable */
.hero--cloud .hero__media img { object-position: 80% center; }
.hero--cloud::before {
  background:
    radial-gradient(circle at 15% 45%, rgba(250, 175, 50, .10) 0%, transparent 40%),
    linear-gradient(90deg, rgba(12, 16, 22, .96) 0%, rgba(14, 19, 26, .9) 28%, rgba(16, 22, 30, .62) 40%, rgba(16, 22, 30, .18) 50%, rgba(16, 22, 30, 0) 56%);
}
.hero--cloud .hero__copy { max-width: 480px; }
.hero--cloud h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.08; letter-spacing: -.02em; }
.hero--cloud .hero__lead { font-size: clamp(17px, 1.5vw, 19px); }
.hero--cloud .hero__cta { margin-top: 30px; }
@media (max-width: 1100px) {
  .hero--cloud::before { background: linear-gradient(90deg, rgba(12, 16, 22, .96) 0%, rgba(14, 19, 26, .92) 45%, rgba(16, 22, 30, .6) 60%, rgba(16, 22, 30, 0) 74%); }
  .hero--cloud .hero__copy { max-width: 440px; }
}
@media (max-width: 760px) { .hero--cloud .hero__media img { object-position: center; } }

/* Plan cards: 3 across */
.cards--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .cards--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards--3 { grid-template-columns: 1fr; } }
.page-cloud .card__price .price { color: #fff; }

/* "Fully managed" cards: badge sits top-right next to the icon */
.page-cloud .why__badge { top: 34px; }

/* Sizing guide — numbered steps */
.sizing { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: none; }
.sizing__item { position: relative; background: var(--d-card); border: 1px solid var(--d-line); border-radius: var(--radius); padding: 26px 22px 24px; transition: background .2s, transform .2s; }
.sizing__item:hover { background: var(--d-card-hover); transform: translateY(-3px); }
.sizing__step { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px; border-radius: 50%; font-weight: 900; font-size: 17px; color: #12161a; background: var(--orange); box-shadow: 0 0 22px rgba(250, 175, 50, .45); }
.sizing__item:nth-child(even) .sizing__step { background: var(--green); box-shadow: 0 0 22px rgba(150, 200, 49, .45); }
.sizing__item h3 { font-size: 18px; margin-bottom: 8px; }
.sizing__item p { margin: 0; color: var(--d-muted); font-weight: 600; font-size: 15px; }
@media (max-width: 960px) { .sizing { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sizing { grid-template-columns: 1fr; } }

/* Add-on price cards */
.addons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: start; }
.addons__card { background: var(--d-card); border: 1px solid var(--d-line); border-top: 3px solid var(--orange); border-radius: var(--radius); padding: 22px 20px 12px; }
.addons__card:nth-child(even) { border-top-color: var(--green); }
.addons__card h3 { font-size: 17px; margin-bottom: 12px; }
.addons__card table { width: 100%; border-collapse: collapse; font-size: 15px; }
.addons__card th, .addons__card td { padding: 9px 0; border-bottom: 1px solid var(--d-line); }
.addons__card tr:last-child th, .addons__card tr:last-child td { border-bottom: 0; }
.addons__card th { text-align: left; font-weight: 600; color: var(--d-muted); }
.addons__card td { text-align: right; font-weight: 800; color: #fff; white-space: nowrap; }
.addons__free { color: var(--green-light); }
@media (max-width: 1000px) { .addons { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .addons { grid-template-columns: 1fr; } }