/* ============================================================
   PAGE · Domain & Hosting  (/domain-hosting/)
   The hero (.svc-hero*), basics/tips grid (.page-cards/.page-card), the
   dotted backdrop utility (.sp-dotted) and the pricing badge (.sp-badge) are
   all shared components living in service-detail.css (global chain) — see
   them there, not here. Only the provider-card grid (.dh-*) is unique to
   this page. Reuses sitewide tokens/typography/buttons — no new palette.
   Scoped with body.page-domain-hosting.
   ============================================================ */

/* ===================== Basics ===================== */
.dh-basics{padding:clamp(4rem,8vw,6.5rem) 0;background:#fff;}

/* ===================== Provider cards ===================== */
.dh-providers{padding:clamp(4rem,8vw,6.5rem) 0;}
.dh-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.6rem;max-width:1170px;margin:0 auto;align-items:stretch;}
.dh-card{position:relative;display:flex;flex-direction:column;text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;padding:2rem 1.6rem;height:100%;}
.dh-card--featured{border-width:2px;border-color:var(--sb-blue);}
.dh-card__ic{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--sb-lightblue);color:var(--sb-navy);margin-bottom:1rem;}
.dh-card__ic svg{width:22px;height:22px;}
.dh-card h3{margin:0 0 .2rem;font-size:1.1rem;}
.dh-card__tag{margin:0 0 .7rem;color:var(--sb-blue);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;}
.dh-card p{margin:0 0 1rem;color:var(--text);font-size:1.02rem;line-height:1.65;}
.dh-card ul{flex:1;margin:0 0 1.1rem;display:flex;flex-direction:column;gap:.5rem;}
.dh-card li{display:flex;align-items:flex-start;gap:.5rem;font-size:.96rem;color:var(--text-2);}
.dh-card li .svc-tick{color:#2e7d4f;flex:none;margin-top:.15rem;}
.dh-card__price{margin:0 0 1.2rem;color:var(--sb-blue);font-weight:800;font-size:1.3rem;}
.dh-card__price span{font-size:.8rem;font-weight:700;color:var(--text-2);}
.dh-card .button{width:100%;text-align:center;margin-top:auto;}

/* ===================== Mobile trim ===================== */
@media (max-width:600px){
	.dh-basics{padding:56px 0;}
	.dh-providers{padding:56px 0;}
	.dh-cards{grid-template-columns:1fr;}
}