/* HostingBul v215 — final unified shell, stable first paint, compact category heroes. */
:root{--hb215-shell:1820px;--hb215-gutter:32px;--hb215-gap:18px}

/* Shared desktop axis: hero, featured provider strip and SEO discovery hub. */
@media (min-width:1200px){
  html body .ref-home-hero,
  html body .hb36-home-hero,
  html body .ref-hosting-hero.hb36-hosting-hero,
  html body .page-ref-hero.domain-reference-hero,
  html body .hb-topic-hub>.wrap,
  html body .ref-featured>.wrap.hb64-featured-shell{
    width:min(var(--hb215-shell),calc(100% - (var(--hb215-gutter) * 2)))!important;
    max-width:var(--hb215-shell)!important;
    margin-left:auto!important;margin-right:auto!important;
    box-sizing:border-box!important;
  }
  html body .ref-home-hero>.wrap.ref-home-hero-grid,
  html body .ref-hosting-hero.hb36-hosting-hero>.wrap.ref-hosting-hero-grid{
    width:100%!important;max-width:none!important;margin-inline:0!important;
  }

  /* Home hero: balanced 3-column layout; no dead bottom band. */
  html body .ref-home-hero{padding-top:14px!important}
  html body .ref-home-hero>.wrap.ref-home-hero-grid{
    min-height:0!important;height:auto!important;max-height:none!important;
    grid-template-columns:minmax(0,1.05fr) minmax(270px,.64fr) minmax(470px,.94fr)!important;
    gap:16px!important;align-items:center!important;padding:8px!important;
    border-radius:24px!important;overflow:hidden!important;
  }
  html body .ref-home-hero .ref-hero-copy{padding:30px 10px 30px 34px!important;min-width:0!important}
  html body .ref-home-hero .ref-hero-copy h1{font-size:clamp(44px,2.75vw,55px)!important;line-height:1.02!important;letter-spacing:-.045em!important;max-width:690px!important;margin:13px 0 15px!important}
  html body .ref-home-hero .ref-hero-copy>p{font-size:16px!important;line-height:1.55!important;max-width:650px!important;margin:0!important}
  html body .ref-home-hero .ref-hero-art{height:300px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;padding:0!important}
  html body .ref-home-hero .ref-hero-art img{width:min(100%,455px)!important;height:auto!important;max-height:288px!important;object-fit:contain!important;filter:none!important}
  html body .ref-home-hero .ref-home-finder{align-self:center!important;margin:12px 14px 12px 0!important;padding:18px!important;border-radius:20px!important;min-width:0!important}
  html body .ref-home-hero .hb204-trust-row{display:flex!important;flex-wrap:nowrap!important;gap:13px!important;margin-top:21px!important;max-width:720px!important}
  html body .ref-home-hero .hb204-trust-row>span{display:flex!important;align-items:center!important;gap:7px!important;min-width:0!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
  html body .ref-home-hero .hb204-trust-row>span i{flex:0 0 34px!important;width:34px!important;height:34px!important;display:grid!important;place-items:center!important;border:1px solid #d7e4fa!important;border-radius:10px!important;background:#f3f7ff!important}
  html body .ref-home-hero .hb204-trust-row>span b{font-size:12px!important;line-height:1.18!important;white-space:nowrap!important}

  /* Make the provider strip visibly separate from the hero. */
  html body .ref-featured{margin-top:var(--hb215-gap)!important;padding-top:0!important}
  html body .ref-featured>.wrap.hb64-featured-shell{padding-left:42px!important;padding-right:42px!important}

  /* Hosting / Server / SSL: same outer width, content-height only. */
  html body .ref-hosting-hero.hb36-hosting-hero{border-radius:24px!important;overflow:hidden!important}
  html body .ref-hosting-hero.hb36-hosting-hero>.wrap.ref-hosting-hero-grid{
    min-height:0!important;height:auto!important;max-height:none!important;
    grid-template-columns:minmax(0,1.03fr) minmax(250px,.62fr) minmax(455px,.93fr)!important;
    gap:16px!important;align-items:center!important;padding:10px!important;
  }
  html body .ref-hosting-hero .ref-hosting-copy{padding:18px 8px 18px 28px!important}
  html body .ref-hosting-hero .ref-hosting-art{height:270px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important}
  html body .ref-hosting-hero .ref-hosting-art img{width:min(100%,355px)!important;max-height:245px!important;height:auto!important;object-fit:contain!important;filter:none!important}
  html body .ref-hosting-hero .ref-hosting-finder.hosting-hero-finder{align-self:center!important;margin:8px 12px 8px 0!important;padding:16px!important;max-height:none!important}

  /* Domain uses the same category footprint instead of full-bleed width. */
  html body .page-ref-hero.domain-reference-hero.wrap{
    min-height:0!important;height:auto!important;padding:30px 38px!important;border-radius:24px!important;display:flex!important;align-items:center!important;overflow:hidden!important;
  }
  html body .page-ref-hero.domain-reference-hero.wrap>.ref-hero-grid{width:100%!important;max-width:none!important;margin:0!important;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;gap:40px!important;align-items:center!important}
  html body .domain-reference-hero h1{font-size:clamp(40px,2.65vw,50px)!important;line-height:1.06!important;margin:9px 0 14px!important}
  html body .domain-reference-hero p{font-size:15px!important;line-height:1.55!important;max-width:720px!important}

  /* Discovery/SEO hub = exact same left/right axis as hero. */
  html body .hb-topic-hub{padding-top:20px!important}
  html body .hb-topic-hub>.wrap{padding-left:0!important;padding-right:0!important}
}

/* Medium screens */
@media (min-width:901px) and (max-width:1199px){
  html body .ref-home-hero,
  html body .ref-hosting-hero.hb36-hosting-hero,
  html body .page-ref-hero.domain-reference-hero,
  html body .hb-topic-hub>.wrap,
  html body .ref-featured>.wrap.hb64-featured-shell{width:calc(100% - 24px)!important;max-width:none!important;margin-inline:auto!important}
  html body .ref-home-hero>.wrap.ref-home-hero-grid{width:100%!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(360px,.92fr)!important;grid-template-areas:"copy finder" "art finder"!important;gap:0 12px!important;height:auto!important;min-height:0!important}
  html body .ref-home-hero .ref-hero-copy{grid-area:copy!important;padding:22px 14px 7px 22px!important}
  html body .ref-home-hero .ref-hero-copy h1{font-size:clamp(35px,4.2vw,43px)!important}
  html body .ref-home-hero .ref-hero-art{grid-area:art!important;height:145px!important}.ref-home-hero .ref-hero-art img{max-height:145px!important;width:auto!important}
  html body .ref-home-hero .ref-home-finder{grid-area:finder!important;margin:10px!important;align-self:stretch!important}
  html body .ref-home-hero .hb204-trust-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px 10px!important}
  html body .ref-featured{margin-top:14px!important}
  html body .ref-hosting-hero.hb36-hosting-hero>.wrap.ref-hosting-hero-grid{width:100%!important;height:auto!important;min-height:0!important;max-height:none!important}
  html body .page-ref-hero.domain-reference-hero.wrap{height:auto!important;min-height:0!important}
}

/* Mobile: natural flow and stable geometry. */
@media (max-width:900px){
  html body .ref-home-hero,
  html body .ref-hosting-hero.hb36-hosting-hero,
  html body .page-ref-hero.domain-reference-hero,
  html body .hb-topic-hub>.wrap,
  html body .ref-featured>.wrap.hb64-featured-shell{width:calc(100% - 16px)!important;max-width:none!important;margin-inline:auto!important}
  html body .ref-home-hero{padding-top:8px!important}
  html body .ref-home-hero>.wrap.ref-home-hero-grid{width:100%!important;display:grid!important;grid-template-columns:1fr!important;grid-template-areas:"copy" "art" "finder"!important;gap:0!important;height:auto!important;min-height:0!important;max-height:none!important;padding:0!important}
  html body .ref-home-hero .ref-hero-copy{grid-area:copy!important;padding:20px 16px 10px!important}
  html body .ref-home-hero .ref-hero-copy h1{font-size:clamp(31px,9vw,41px)!important;line-height:1.04!important;margin:9px 0 11px!important}
  html body .ref-home-hero .ref-hero-copy>p{font-size:14.5px!important;line-height:1.5!important}
  html body .ref-home-hero .ref-hero-art{grid-area:art!important;height:auto!important;padding:0 16px 8px!important}
  html body .ref-home-hero .ref-hero-art img{width:min(80vw,330px)!important;max-height:185px!important}
  html body .ref-home-hero .ref-home-finder{grid-area:finder!important;margin:0 8px 8px!important;padding:14px!important}
  html body .ref-home-hero .hb204-trust-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px 10px!important;margin-top:15px!important}
  html body .ref-home-hero .hb204-trust-row>span b{font-size:11px!important;white-space:normal!important}
  html body .ref-featured{margin-top:12px!important}
  html body .ref-featured>.wrap.hb64-featured-shell{padding-inline:8px!important}

  html body .ref-hosting-hero.hb36-hosting-hero>.wrap.ref-hosting-hero-grid{width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;padding:8px!important}
  html body .ref-hosting-hero .ref-hosting-art{height:auto!important;min-height:0!important;padding:4px 10px!important}
  html body .ref-hosting-hero .ref-hosting-art img{width:min(76vw,320px)!important;max-height:190px!important}
  html body .ref-hosting-hero .ref-hosting-finder.hosting-hero-finder{margin:6px!important;padding:14px!important}
  html body .page-ref-hero.domain-reference-hero.wrap{height:auto!important;min-height:0!important;padding:24px 18px!important}
  html body .hb-topic-hub{padding-top:14px!important}
}

/* No delayed below-fold paint or surprise intrinsic-size jump. */
html body .hb-topic-hub,html body .ref-featured{content-visibility:visible!important;contain:none!important}

/* Motion only when the user allows it; keep it paint-cheap. */
@media(prefers-reduced-motion:reduce){.hb-topic-item,.hb-topic-item-icon,.hb-topic-arrow{transition:none!important;animation:none!important}}

/* v216 final polish: identical category hero geometry + collision-proof home trust row */
@media (min-width:1200px){
  /* SSL must use exactly the same footprint/typography rhythm as Hosting and Server. */
  html body .ref-hosting-hero.hb36-hosting-hero.ssl-hosting-hero>.wrap.ref-hosting-hero-grid{grid-template-columns:minmax(0,1.03fr) minmax(250px,.62fr) minmax(455px,.93fr)!important;padding:10px!important;gap:16px!important;align-items:center!important}
  html body .ssl-hosting-hero .hosting-hero-copy{padding:18px 8px 18px 28px!important}
  html body .ssl-hosting-hero .hosting-hero-copy h1{font-size:clamp(42px,3.05vw,54px)!important;line-height:1.04!important;letter-spacing:-.04em!important;margin:12px 0 14px!important;max-width:650px!important}
  html body .ssl-hosting-hero .hosting-hero-copy>p{font-size:15px!important;line-height:1.55!important;max-width:650px!important;margin-bottom:14px!important}
  html body .ssl-hosting-hero .hosting-hero-stats{margin-top:14px!important}
  html body .ssl-hosting-hero .ref-hosting-art{height:270px!important}
  html body .ssl-hosting-hero .ref-hosting-finder.hosting-hero-finder{margin:8px 12px 8px 0!important;padding:16px!important}

  /* Four trust items always occupy one clean row. No text/icon overlap at 1200+ widths. */
  html body .ref-home-hero .hb204-trust-row{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;width:100%!important;max-width:720px!important}
  html body .ref-home-hero .hb204-trust-row>span{display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;align-items:center!important;gap:7px!important;min-width:0!important}
  html body .ref-home-hero .hb204-trust-row>span b{display:block!important;min-width:0!important;font-size:11.5px!important;line-height:1.15!important;white-space:nowrap!important;overflow:visible!important}
}
@media (min-width:901px) and (max-width:1199px){
  html body .ref-home-hero .hb204-trust-row>span{display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;align-items:center!important;gap:7px!important;min-width:0!important}
  html body .ref-home-hero .hb204-trust-row>span b{white-space:normal!important;font-size:11px!important;line-height:1.15!important}
}
.ref-home-hero .hb204-trust-row>span>svg{flex:0 0 34px!important;width:34px!important;height:34px!important;padding:8px!important;border:1px solid #d7e4fa!important;border-radius:10px!important;background:#f3f7ff!important;color:#2468f2!important;box-sizing:border-box!important}

/* v217: keep the inline hero badge icon constrained to the badge, never let the SVG size the hero. */
html body .ref-home-hero .ref-hero-tag{display:inline-flex!important;align-items:center!important;gap:7px!important;width:max-content!important;max-width:100%!important}
html body .ref-home-hero .ref-hero-tag>svg{display:block!important;flex:0 0 15px!important;width:15px!important;height:15px!important;min-width:15px!important;max-width:15px!important;padding:0!important;margin:0!important;overflow:visible!important}


/* v218 — equal home trust items + stable mobile first paint. */
@media (min-width:1200px){
  html body .ref-home-hero .hb204-trust-row{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    max-width:720px!important;
    align-items:stretch!important;
  }
  html body .ref-home-hero .hb204-trust-row>span{
    width:100%!important;
    min-width:0!important;
    min-height:38px!important;
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr)!important;
    align-items:center!important;
    gap:7px!important;
    margin:0!important;
    padding:0!important;
  }
  html body .ref-home-hero .hb204-trust-row>span>b{
    display:flex!important;
    align-items:center!important;
    min-height:34px!important;
    margin:0!important;
    white-space:nowrap!important;
    font-size:11.5px!important;
    line-height:1.1!important;
  }
}
html body .ref-home-hero .hb204-trust-row>span>svg,
html body .ref-home-hero .hb204-trust-row>span>i{
  width:34px!important;height:34px!important;min-width:34px!important;max-width:34px!important;
  margin:0!important;box-sizing:border-box!important;
}
@media (max-width:1199px){
  html body .ref-home-hero .hb204-trust-row>span{min-height:38px!important;align-items:center!important}
}