/* BestHostings.eu · Responsive interface · No external dependencies. */
:root {
  --ink:#14203b;
  --muted:#6d7891;
  --blue:#365efa;
  --blue-dark:#2848d7;
  --purple:#6952ee;
  --line:#e9edf5;
  --canvas:#f7f9fc;
  --soft-blue:#edf2ff;
  --green:#159974;
  --radius:20px;
  --shadow:0 18px 55px rgba(36,56,110,.055);
  --font:Inter,"Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:105px
}
body {
  margin:0;
  color:var(--ink);
  font-family:var(--font);
  font-size:15px;
  line-height:1.6;
  background:#fff;
  -webkit-font-smoothing:antialiased
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button {
  color:inherit
}
button:disabled {
  cursor:not-allowed;
  opacity:.48
}
button,a {
  touch-action:manipulation
}
button,select {
  -webkit-user-select:none;
  user-select:none
}
a {
  color:inherit;
  text-decoration:none
}
button {
  border:0;
  background:none
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:3px solid #7491ff;
  outline-offset:4px
}
input,select {
  min-width:0
}
select {
  cursor:pointer
}
h1,h2,h3,h4,p {
  margin:0
}
h1,h2,h3,h4 {
  line-height:1.2
}
p {
  color:var(--muted)
}
[hidden] {
  display:none!important
}
.svg-sprite {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.icon {
  display:inline-block;
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
  vertical-align:middle
}
.reverse {
  transform:rotate(180deg)
}
.container {
  width:min(1280px,calc(100% - 96px));
  margin-inline:auto
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.skip-link {
  position:fixed;
  z-index:100;
  top:-100px;
  left:20px;
  background:var(--ink);
  color:#fff;
  border-radius:8px;
  padding:12px 20px
}
.skip-link:focus {
  top:12px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:44px;
  padding:11px 18px;
  border-radius:11px;
  font-size:13px;
  font-weight:650;
  line-height:1.35;
  border:1px solid transparent;
  white-space:nowrap;
  transition:background .2s,transform .2s,box-shadow .2s
}
.button:not(:disabled):hover {
  transform:translateY(-2px)
}
.button-primary {
  color:white;
  background:linear-gradient(115deg,#367aff,#4253f5);
  box-shadow:0 5px 12px #3d62ff20
}
.button-primary:not(:disabled):hover {
  box-shadow:0 8px 20px #3d62ff36;
  background:linear-gradient(115deg,#286cff,#3749e4)
}
.button-dark {
  background:var(--ink);
  color:#fff;
  box-shadow:0 5px 12px #111a2c12
}
.button-dark:not(:disabled):hover {
  background:#263453
}
.button-outline {
  background:#fff;
  border:1px solid #e0e6f2;
  color:#34435d
}
.button-outline:not(:disabled):hover {
  border-color:#a2b5ff;
  background:#f5f8ff
}
.button-white {
  background:white;
  color:var(--ink)
}
.icon-button {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  flex-shrink:0;
  border-radius:10px;
  transition:background .2s,color .2s
}
.icon-button:hover {
  background:var(--soft-blue);
  color:var(--blue)
}
.text-button {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:650;
  color:var(--blue);
  padding:6px 0;
  line-height:1.5;
  text-align:left
}
.text-button:hover {
  text-decoration:underline;
  text-underline-offset:4px
}
.text-button .icon {
  width:16px;
  height:16px
}
.eyebrow {
  color:#7682a1;
  font-size:10px;
  font-weight:750;
  letter-spacing:2.2px;
  line-height:1.6
}
.eyebrow-line {
  display:inline-block;
  width:25px;
  height:2px;
  background:var(--blue);
  vertical-align:middle;
  margin-right:9px
}
.gradient-text {
  background:linear-gradient(100deg,#347eff 0%,#3d5df7 47%,#7750eb 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}
/* Header */
.header {
  height:91px;
  background:#fffffff0;
  border-bottom:1px solid #f0f3f9;
  position:sticky;
  top:0;
  z-index:30;
  backdrop-filter:blur(20px)
}
.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:100%;
  gap:24px
}
.logo {
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:23px;
  font-weight:800;
  letter-spacing:-1px;
  white-space:nowrap
}
.logo-symbol {
  width:36px;
  height:39px;
  flex-shrink:0
}
.logo-domain {
  color:#8792a9;
  font-size:16px;
  letter-spacing:-.5px;
  font-weight:500
}
.main-nav {
  display:flex;
  align-items:center;
  gap:27px
}
.main-nav a,.main-nav button {
  font-size:12px;
  font-weight:550;
  padding:8px 0;
  color:#58627a;
  white-space:nowrap
}
.main-nav a:hover,.main-nav button:hover {
  color:var(--blue)
}
.main-nav .active {
  color:var(--blue);
  position:relative
}
.main-nav .active:after {
  content:"";
  position:absolute;
  width:4px;
  height:4px;
  background:var(--blue);
  border-radius:50%;
  bottom:-6px;
  left:50%;
  transform:translateX(-50%)
}
.header-actions {
  display:flex;
  gap:14px;
  align-items:center
}
.bh-language-switcher {
  position:relative;
  font-size:12px;
  color:#263657
}
.bh-language-switcher summary {
  display:flex;
  align-items:center;
  min-height:40px;
  padding:0 10px;
  border:1px solid #d8e0ef;
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
  list-style:none
}
.bh-language-switcher summary::-webkit-details-marker {display:none}
.bh-language-switcher summary::after {content:'⌄';margin-left:6px}
.bh-language-switcher .translation-navigation {
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  z-index:50;
  width:min(400px,90vw);
  max-height:70vh;
  overflow:auto;
  padding:16px;
  border:1px solid #d8e0ef;
  border-radius:12px;
  background:#fff;
  box-shadow:0 18px 46px #172c5c24
}
.bh-language-switcher .translation-navigation__label {display:block;margin-bottom:10px}
.bh-language-switcher .translation-navigation__links {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.bh-language-switcher .translation-navigation__link {padding:7px 9px;border-radius:6px;color:#334360}
.bh-language-switcher .translation-navigation__link:hover,.bh-language-switcher .translation-navigation__link.is-active {background:#eef3ff;color:var(--blue)}
.header-compare {
  font-size:12px;
  padding:11px 14px
}
.header-compare .icon {
  width:16px;
  height:16px
}
.compare-count {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  background:#ffffff20;
  width:20px;
  height:20px;
  border-radius:6px;
  font-size:10px;
  line-height:1
}
.favorite-count {
  position:absolute;
  right:1px;
  top:1px;
  background:var(--blue);
  color:#fff;
  border:2px solid #fff;
  border-radius:50%;
  min-width:17px;
  height:17px;
  font-size:9px;
  line-height:13px
}
.mobile-menu {
  display:none
}
/* Hero */
.hero {
  position:relative;
  overflow:hidden;
  padding:61px 0 0;
  background:linear-gradient(165deg,#fff 30%,#f6f9ff 100%)
}
.hero-glow {
  position:absolute;
  width:760px;
  height:760px;
  border-radius:50%;
  right:-60px;
  top:-100px;
  background:radial-gradient(circle,rgba(207,216,255,.45),rgba(229,237,255,.23) 45%,transparent 70%);
  pointer-events:none
}
.hero-grid {
  position:relative;
  display:grid;
  grid-template-columns:1.02fr 1fr;
  gap:32px;
  min-height:515px;
  align-items:start
}
.hero-copy {
  position:relative;
  z-index:2;
  padding-top:10px
}
.hero h1 {
  font-size:clamp(40px,4.05vw,60px);
  letter-spacing:-2.5px;
  font-weight:800;
  line-height:1.14;
  margin:22px 0 22px;
  white-space:nowrap
}
.hero-description {
  font-size:15px;
  line-height:1.85;
  max-width:480px;
  color:#748099
}
.hero-description strong {
  font-weight:500;
  color:#3d4963
}
.search-panel {
  max-width:558px;
  margin-top:28px;
  background:#fff;
  border:1px solid #e8edf8;
  border-radius:16px;
  box-shadow:0 10px 36px rgba(76,96,148,.055);
  padding:12px
}
.category-tabs {
  display:flex;
  align-items:center;
  gap:5px
}
.category-tab {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:9px 15px;
  border-radius:8px;
  min-height:37px;
  font-size:12px;
  font-weight:550;
  line-height:1.35;
  white-space:nowrap;
  color:#6f7a90;
  transition:background .2s,color .2s
}
.category-tab .icon {
  width:15px;
  height:15px
}
.category-tab.active {
  background:var(--soft-blue);
  color:var(--blue);
  font-weight:700
}
.category-tab:hover {
  background:#f2f5fc;
  color:var(--blue)
}
.hero-tabs {
  justify-content:space-between;
  margin-bottom:12px;
  padding-inline:2px
}
.hero-tabs .category-tab {
  flex:1;
  padding-inline:8px
}
.hero-tabs .active {
  background:var(--blue);
  color:white;
  box-shadow:0 3px 8px #365efa2b
}
.search-field {
  display:flex;
  align-items:center;
  gap:9px;
  padding:5px 5px 5px 13px;
  border-radius:10px;
  border:1px solid #e5eaf3;
  background:#fcfdff;
  transition:border .2s
}
.search-field:focus-within {
  border-color:#6d8dff
}
.search-field>.icon {
  width:17px;
  height:17px;
  color:#8692ab
}
.search-field input {
  flex:1;
  width:100%;
  border:0;
  background:transparent;
  outline:0;
  font-size:12px;
  color:var(--ink);
  min-height:40px
}
.search-field input::placeholder {
  color:#919bb0
}
.search-field .button {
  min-height:42px;
  padding:11px 13px;
  font-size:12px;
  border-radius:8px
}
.search-field .button .icon {
  width:15px;
  height:15px
}
.hero-filters {
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:11px;
  padding-inline:3px
}
.compact-select {
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0
}
.compact-select>.icon {
  width:13px;
  height:13px;
  color:#78859f
}
.compact-select select {
  border:0;
  background:transparent;
  font-size:10px;
  max-width:145px;
  color:#65718a;
  padding:5px 0
}
.hero-filters .text-button {
  margin-left:auto;
  font-size:10px;
  white-space:nowrap
}
.hero-filters .text-button .icon {
  width:13px;
  height:13px
}
.hero-microcopy {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  color:#8c97ac;
  margin-top:18px
}
.hero-microcopy .icon {
  width:14px;
  height:14px;
  color:#a2abc0
}
.hero-visual {
  min-width:0;
  position:relative;
  padding-top:0;
  margin-top:0
}
.visual-label {
  text-align:center;
  font-size:9px;
  letter-spacing:1.6px;
  font-weight:700;
  color:#7b87a2;
  margin-top:11px
}
.live-dot {
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#6675fa;
  margin-right:5px;
  vertical-align:middle
}
.carousel {
  position:relative;
  isolation:isolate;
  height:461px;
  touch-action:pan-y
}
.carousel-cards {
  position:absolute;
  inset:0;
  perspective:1100px;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none
}
.carousel-platform {
  position:absolute;
  z-index:-1;
  width:92%;
  height:124px;
  left:4%;
  bottom:69px;
  border-radius:50%;
  background:linear-gradient(165deg,#f9faff 15%,#dae4fc 80%);
  box-shadow:0 15px 0 #e9eefe,0 22px 40px #c3d1ee3f;
  transform:rotate(-4deg)
}
.orbit {
  position:absolute;
  border:1px solid #dce4f59c;
  border-radius:50%;
  z-index:-2;
  transform:rotate(-25deg)
}
.orbit-one {
  width:98%;
  height:258px;
  left:0;
  top:68px
}
.orbit-two {
  width:100%;
  height:335px;
  left:4%;
  top:32px;
  border-style:dashed;
  opacity:.65
}
.host-card {
  position:absolute;
  left:calc(50% - 119px);
  top:36px;
  width:238px;
  min-height:319px;
  background:#fff;
  border-radius:17px;
  border:1px solid #e5eafb;
  padding:22px 21px 20px;
  box-shadow:0 18px 44px rgba(53,76,136,.11);
  transition:transform .75s cubic-bezier(.22,.75,.17,1),opacity .6s,filter .6s,border-color .6s;
  transform-origin:center 85%;
  backface-visibility:hidden;
  will-change:transform
}
.carousel[data-dragging="true"] .carousel-cards,
.carousel[data-dragging="true"] .host-card {
  transition:none;
  cursor:grabbing
}
.host-card[data-position="center"] {
  transform:translateX(0) translateY(2px) rotateY(0) rotateZ(0) scale(1);
  z-index:5;
  opacity:1;
  border-color:#d8e1ff;
  filter:none
}
.host-card[data-position="left"] {
  transform:translateX(-150px) translateY(24px) rotateY(17deg) rotateZ(-7deg) scale(.88);
  z-index:3;
  opacity:.73;
  filter:saturate(.72)
}
.host-card[data-position="right"] {
  transform:translateX(150px) translateY(24px) rotateY(-17deg) rotateZ(7deg) scale(.88);
  z-index:3;
  opacity:.73;
  filter:saturate(.72)
}
.host-card[data-position="hidden-left"] {
  transform:translateX(-220px) translateY(45px) rotateY(30deg) rotateZ(-12deg) scale(.76);
  z-index:1;
  opacity:0;
  pointer-events:none
}
.host-card[data-position="hidden-right"] {
  transform:translateX(220px) translateY(45px) rotateY(-30deg) rotateZ(12deg) scale(.76);
  z-index:1;
  opacity:0;
  pointer-events:none
}
.host-card:not([data-position="center"]) {
  pointer-events:none
}
.card-category {
  font-size:8px;
  font-weight:650;
  letter-spacing:1.1px;
  color:#8995ad;
  text-transform:uppercase;
  margin-bottom:19px
}
.wordmark {
  display:flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
  font-size:20px;
  font-weight:750;
  line-height:1.4;
  letter-spacing:-.6px;
  color:var(--ink)
}
.brand-mark {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  font-weight:900;
  line-height:1;
  width:22px;
  letter-spacing:-2px;
  color:var(--brand-color,currentColor)
}
.brand-websupport .brand-mark {
  color:#e54b56;
  transform:skew(-12deg)
}
.brand-siteground {
  letter-spacing:-1px
}
.brand-siteground .brand-mark {
  color:#7ca446;
  border:2px solid currentColor;
  font-size:19px;
  width:23px;
  height:23px;
  border-radius:50%;
  font-style:italic;
  letter-spacing:0
}
.brand-ionos {
  font-weight:700;
  letter-spacing:2px;
  color:#173874
}
.brand-hetzner {
  font-weight:800;
  letter-spacing:-.7px
}
.brand-wedos {
  font-weight:850;
  letter-spacing:-.6px
}
.brand-ovh {
  font-weight:750;
  letter-spacing:-.5px
}
.card-name {
  margin-top:7px;
  color:#8793a9;
  font-size:10px
}
.card-price {
  display:flex;
  align-items:baseline;
  gap:4px;
  margin-top:17px
}
.card-price strong {
  font-size:32px;
  letter-spacing:-1.5px;
  line-height:1.15;
  font-weight:800
}
.card-price span {
  font-size:13px;
  font-weight:650
}
.card-price small {
  color:#8a95a8;
  font-size:10px;
  margin-left:3px
}
.card-renewal {
  font-size:9px;
  color:#94a0b3;
  margin-top:5px
}
.card-features {
  list-style:none;
  padding:0;
  margin:18px 0
}
.card-features li {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  color:#65718b;
  margin:8px 0;
  line-height:1.4
}
.card-features .icon {
  width:12px;
  height:12px;
  stroke-width:2.4;
  color:#26a984
}
.card-action {
  display:flex;
  justify-content:center;
  width:100%;
  min-height:36px;
  padding:10px;
  font-size:10px;
  border-radius:7px;
  background:#f0f4ff;
  color:var(--blue);
  font-weight:700
}
.host-card[data-position="center"] .card-action {
  background:var(--blue);
  color:white;
  box-shadow:0 5px 10px #365efa22
}
.card-action:hover {
  background:var(--blue-dark)!important;
  color:white
}
.floating-compare {
  position:absolute;
  z-index:9;
  bottom:53px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:11px;
  width:315px;
  padding:12px 15px;
  background:#ffffffef;
  border:1px solid #e8ecfb;
  border-radius:13px;
  box-shadow:0 10px 27px #425b9820;
  text-align:left;
  backdrop-filter:blur(10px);
  transition:box-shadow .2s
}
.floating-compare:hover {
  box-shadow:0 13px 32px #425b9830
}
.floating-icon {
  background:#eef2ff;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#526be3;
  border-radius:9px
}
.floating-icon .icon {
  width:18px;
  height:18px
}
.floating-compare strong {
  display:block;
  font-size:11px;
  font-weight:650
}
.floating-compare small {
  display:block;
  color:#8a95ab;
  font-size:9px;
  margin-top:2px
}
.floating-compare>.icon {
  margin-left:auto;
  width:16px;
  height:16px;
  color:var(--blue)
}
.carousel-navigation {
  position:absolute;
  bottom:2px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:5px
}
.carousel-navigation .icon-button {
  width:30px;
  height:30px;
  border-radius:50%;
  color:#8593ad
}
.carousel-navigation .icon-button .icon {
  width:15px;
  height:15px
}
.carousel-dots {
  display:flex;
  align-items:center;
  gap:1px
}
.carousel-dot {
  width:22px;
  height:30px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:5px
}
.carousel-dot:before {
  content:"";
  width:5px;
  height:5px;
  border-radius:5px;
  background:#cbd4e7;
  transition:width .3s,background .3s
}
.carousel-dot[aria-current="true"]:before {
  width:19px;
  background:var(--blue)
}
.carousel-dot:hover:before {
  background:#738cff
}
.carousel-divider {
  height:11px;
  width:1px;
  background:#d8e0f0;
  margin:0 6px
}
.visual-note {
  text-align:center;
  color:#9ba5b8;
  font-size:9px;
  margin-top:3px
}
.providers-strip {
  display:flex;
  align-items:center;
  gap:35px;
  position:relative;
  border-top:1px solid #e7ecf5;
  margin-top:19px;
  padding:29px 0 34px
}
.providers-strip>p {
  font-size:8px;
  letter-spacing:1px;
  line-height:1.9;
  min-width:158px;
  color:#9da7b9
}
.providers-strip>p strong {
  font-weight:600;
  color:#737f97
}
.provider-logos {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex:1;
  gap:25px;
  opacity:.58
}
.provider-logos .wordmark {
  font-size:16px;
  color:#3f4e6a;
  line-height:1.3
}
.provider-logos .brand-mark {
  font-size:21px;
  color:inherit
}
.provider-logos .brand-siteground .brand-mark {
  font-size:16px;
  width:20px;
  height:20px
}
/* Results */
.comparison-section {
  padding:62px 0 65px;
  background:var(--canvas);
  border-top:1px solid #eef1f7
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  margin-bottom:27px
}
.section-heading .eyebrow {
  margin-bottom:10px;
  color:#8390a9
}
.section-heading h2,h2 {
  font-size:32px;
  font-weight:750;
  letter-spacing:-1.05px;
  line-height:1.25
}
.section-heading p {
  margin-top:10px;
  font-size:13px
}
.section-heading .method-link {
  padding-bottom:5px;
  font-size:11px
}
.comparison-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 256px;
  gap:22px;
  align-items:start
}
.results-panel {
  min-width:0;
  background:#fff;
  border:1px solid #e7ebf4;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 6px 25px #24385c03
}
.results-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:18px 20px 12px
}
.table-tabs .category-tab {
  font-size:11px;
  padding:8px 14px;
  min-height:33px
}
.filter-toggle {
  font-size:11px;
  min-height:33px;
  padding:7px 12px;
  border-radius:8px
}
.filter-toggle .icon {
  width:14px;
  height:14px
}
#filter-count {
  font-size:9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--blue);
  color:white;
  border-radius:50%;
  min-width:15px;
  height:15px
}
.results-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 22px 16px;
  gap:10px;
  font-size:10px;
  color:#8995a8
}
.results-meta strong {
  color:#59677f;
  font-weight:650
}
.sort-label {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:10px;
  color:#939db1
}
.sort-label select {
  border:0;
  background:none;
  color:#66728a;
  font-size:10px;
  max-width:160px
}
.advanced-filters {
  padding:17px 21px;
  background:#f9fbff;
  margin:2px 20px 17px;
  border:1px solid #edf0f7;
  border-radius:12px;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:12px
}
.advanced-filters>label {
  font-size:10px;
  font-weight:600;
  color:#69778e;
  display:flex;
  flex-direction:column;
  gap:5px
}
.advanced-filters input:not([type=checkbox]),.advanced-filters select {
  padding:8px 9px;
  font-size:11px;
  background:#fff;
  border:1px solid #e1e8f4;
  border-radius:6px;
  min-height:34px;
  color:#3d4c65;
  width:100%
}
.advanced-filters .check-filter {
  flex-direction:row;
  align-items:center;
  font-weight:500
}
.check-filter input {
  margin:0;
  width:14px;
  height:14px;
  accent-color:var(--blue)
}
.advanced-filters .reset-filters {
  justify-self:end;
  font-size:10px
}
.table-scroll {
  overflow-x:auto;
  scrollbar-width:thin;
  scrollbar-color:#d5dded transparent
}
.hosting-table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  white-space:nowrap;
  font-size:11px
}
.hosting-table th {
  font-size:9px;
  font-weight:600;
  color:#8390a5;
  letter-spacing:.05px;
  padding:11px 10px;
  background:#f8fafe;
  border-top:1px solid #edf1f8;
  border-bottom:1px solid #edf1f8
}
.hosting-table th:first-child {
  width:32px;
  padding-left:20px
}
.hosting-table th:last-child {
  padding-right:20px
}
.hosting-table td {
  padding:16px 10px;
  border-bottom:1px solid #eff2f8;
  font-size:11px;
  color:#68768d;
  height:79px;
  vertical-align:middle
}
.hosting-table td:first-child {
  padding-left:20px;
  padding-right:3px;
  width:33px
}
.hosting-table td:last-child {
  padding-right:20px;
  text-align:right
}
.hosting-table tr:last-child td {
  border-bottom:0
}
.hosting-table tbody tr {
  transition:background .2s
}
.hosting-table tbody tr:hover {
  background:#fafbff
}
.hosting-table tbody tr.is-selected {
  background:#f3f6ff
}
.hosting-table input[type=checkbox] {
  appearance:none;
  display:block;
  width:15px;
  height:15px;
  border:1px solid #d7e0ee;
  border-radius:4px;
  cursor:pointer;
  margin:0;
  background:#fff;
  transition:background .2s,box-shadow .2s
}
.hosting-table input[type=checkbox]:checked {
  background:var(--blue);
  border-color:var(--blue);
  box-shadow:inset 0 0 0 3px #fff
}
.table-provider {
  display:flex;
  align-items:center;
  gap:7px
}
.table-provider .wordmark {
  font-size:14px
}
.table-provider .brand-mark {
  width:17px;
  font-size:20px
}
.table-provider .brand-siteground .brand-mark {
  width:18px;
  height:18px;
  font-size:14px
}
.table-provider .brand-ionos {
  letter-spacing:1.7px
}
.plan-label {
  font-size:9px;
  color:#95a0b4;
  margin-top:3px
}
.table-price {
  font-weight:750!important;
  font-size:12px!important;
  color:#1f2b46!important
}
.table-price small {
  display:block;
  font-size:8px;
  color:#94a0b3;
  font-weight:400;
  margin-top:4px
}
.spec-small {
  font-size:10px;
  color:#65748f
}
.spec-small small {
  display:block;
  font-size:9px;
  color:#9aa6b7;
  margin-top:3px
}
.location-value {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:10px
}
.location-dot {
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#a6b6cd
}
.table-actions {
  display:flex;
  justify-content:flex-end;
  gap:3px;
  align-items:center
}
.detail-button {
  padding:8px 10px;
  min-height:30px;
  border-radius:7px;
  font-size:10px;
  border:1px solid #dce5ff;
  color:var(--blue);
  background:#fff;
  transition:background .2s
}
.detail-button:hover {
  background:var(--blue);
  color:#fff;
  border-color:var(--blue)
}
.table-actions .icon-button {
  width:28px;
  height:30px
}
.table-actions .icon-button .icon {
  width:14px;
  height:14px
}
.is-favorite {
  color:#df5c87!important
}
.is-favorite .icon {
  fill:#fcedf3;
  stroke:#df5c87
}
.table-note {
  display:flex;
  gap:7px;
  align-items:flex-start;
  padding:14px 20px;
  border-top:1px solid #edf1f6;
  background:#fdfdff;
  font-size:9px;
  line-height:1.7;
  color:#98a2b5
}
.table-note .icon {
  width:13px;
  height:13px;
  margin-top:1px;
  color:#a4aec1
}
.empty-state {
  text-align:center;
  padding:48px 20px
}
.empty-icon {
  display:inline-flex;
  padding:15px;
  border-radius:50%;
  background:#edf3ff;
  color:#879bf0;
  margin-bottom:18px
}
.empty-state h3 {
  font-size:20px;
  margin-bottom:8px
}
.empty-state p {
  font-size:12px;
  margin-bottom:20px
}
.empty-state .button {
  font-size:12px
}
.comparison-aside {
  padding:22px 19px 18px;
  background:white;
  border:1px solid #e7ebf4;
  border-radius:16px
}
.aside-heading {
  margin-bottom:28px
}
.mini-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:27px;
  height:27px;
  background:#eff3ff;
  border-radius:8px;
  color:#667be8;
  margin-bottom:14px
}
.mini-icon .icon {
  width:15px;
  height:15px
}
.aside-heading h3 {
  font-size:16px;
  letter-spacing:-.3px;
  line-height:1.45
}
.benefit {
  display:flex;
  gap:12px;
  align-items:start;
  margin-top:23px
}
.benefit-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:38px;
  flex-shrink:0;
  border-radius:10px
}
.benefit-icon .icon {
  width:19px;
  height:19px
}
.blue {
  color:#5075f1;
  background:#eef3ff
}
.green {
  color:#22a28a;
  background:#ecfaf5
}
.violet {
  color:#9370e7;
  background:#f4efff
}
.benefit h4 {
  font-size:11px;
  margin:1px 0 6px;
  line-height:1.3
}
.benefit p {
  font-size:10px;
  line-height:1.85;
  color:#8996ab
}
.aside-tip {
  border-top:1px solid #eef1f6;
  margin-top:24px;
  padding-top:22px
}
.tip-label {
  font-size:8px;
  font-weight:750;
  letter-spacing:1px;
  color:#8c99b0
}
.aside-tip p {
  font-size:10px;
  color:#7f8ca4;
  margin:10px 0 7px;
  line-height:1.85
}
.aside-tip .text-button {
  font-size:10px
}
.aside-tip .icon {
  width:13px;
  height:13px
}
/* Editorial sections */
.how-section {
  padding:67px 0;
  border-bottom:1px solid #eff2f7
}
.how-grid {
  display:grid;
  grid-template-columns:.86fr 1.6fr;
  gap:65px;
  align-items:center
}
.how-grid .eyebrow {
  margin-bottom:15px
}
.how-grid h2 {
  font-size:28px;
  line-height:1.35
}
.how-grid>div>p {
  font-size:12px;
  margin-top:15px;
  line-height:1.85
}
.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:27px
}
.step {
  position:relative
}
.step:not(:last-child):after {
  content:"";
  position:absolute;
  top:22px;
  left:62px;
  right:-12px;
  height:1px;
  background:linear-gradient(90deg,#dce5f7,#edf1f9)
}
.step-number {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:43px;
  height:43px;
  background:#f0f4ff;
  border:1px solid #e6edfd;
  border-radius:13px;
  font-size:13px;
  letter-spacing:-.3px;
  font-weight:750;
  color:var(--blue);
  margin-bottom:19px
}
.step h3 {
  font-size:12px;
  font-weight:700;
  margin-bottom:9px;
  line-height:1.4;
  letter-spacing:-.1px
}
.step p {
  font-size:11px;
  line-height:1.85;
  color:#909bb0
}
.guides-section {
  padding:66px 0 68px
}
.guide-heading-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:18px
}
.section-side-note {
  display:flex;
  align-items:center;
  gap:8px;
  color:#98a3b6;
  font-size:10px
}
.section-side-note .icon {
  width:15px;
  height:15px
}
.guide-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px
}
.guide-card {
  display:flex;
  flex-direction:column;
  border:1px solid #e8edf6;
  border-radius:15px;
  background:white;
  overflow:hidden;
  text-align:left;
  padding:0 0 22px;
  transition:transform .3s,box-shadow .3s,border-color .3s;
  min-width:0
}
.guide-card--article .guide-art-photo {
  background:#eef2fa
}
.guide-card--article .guide-art-photo img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}
.guide-card--article .guide-link {
  margin-top:auto;
  padding-top:20px
}
.guide-card:hover {
  transform:translateY(-5px);
  box-shadow:0 14px 35px #273d7d0c;
  border-color:#d5dff3
}
.guide-art {
  height:165px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin-bottom:21px;
  gap:26px
}
.guide-art-one {
  background:linear-gradient(140deg,#f5f8ff,#e9effc)
}
.guide-art-two {
  background:linear-gradient(140deg,#f8f5ff,#eeeffc)
}
.guide-art-three {
  background:linear-gradient(140deg,#effbf9,#e9f5f3)
}
.guide-kicker {
  display:block;
  padding:0 23px;
  font-size:8px;
  letter-spacing:1px;
  font-weight:650;
  color:#8d9bb3
}
.guide-card h3 {
  padding:0 23px;
  font-size:16px;
  letter-spacing:-.35px;
  margin-top:11px;
  line-height:1.4
}
.guide-card p {
  padding:0 23px;
  font-size:11px;
  line-height:1.9;
  margin-top:9px;
  color:#8693aa
}
.guide-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:10px;
  font-weight:600;
  color:var(--blue);
  margin:20px 23px 0
}
.guide-link .icon {
  width:17px;
  height:17px
}
.home-checklist {
  margin-top:38px;
  --accent:var(--blue);
  --surface:#fff
}
.home-checklist__intro {
  max-width:760px;
  margin:0 0 16px;
  color:#70809b;
  font-size:13px;
  line-height:1.7
}
.home-checklist .public-article-checklist {
  margin:0;
  border-color:#e4eaf6;
  border-radius:20px;
  background:linear-gradient(145deg,#f9fbff,#f4f7ff);
  box-shadow:0 14px 40px #273d7d08
}
.home-checklist .public-article-checklist__eyebrow {
  color:var(--purple)
}
.home-checklist .public-article-checklist__title {
  color:var(--ink);
  font-size:27px;
  letter-spacing:-.7px
}
.home-checklist .public-article-checklist__items {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px
}
.home-checklist .public-article-checklist__choice {
  min-height:155px;
  padding:18px;
  border-color:#e5eaf4;
  border-radius:13px;
  background:#fff;
  color:var(--ink);
  font-size:13px
}
.home-checklist .public-article-checklist__copy {
  background:#e9efff
}
.home-checklist__article-link {
  display:inline-flex;
  gap:8px;
  align-items:center;
  margin-top:16px;
  color:var(--blue);
  font-size:12px;
  font-weight:700
}
@media(max-width:1020px) {
  .home-checklist .public-article-checklist__items {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px) {
  .home-checklist {margin-top:26px}
  .home-checklist .public-article-checklist {padding:22px 17px}
  .home-checklist .public-article-checklist__title {font-size:23px}
  .home-checklist .public-article-checklist__items {grid-template-columns:1fr}
  .home-checklist .public-article-checklist__choice {min-height:0}
}
.mini-server {
  display:flex;
  flex-direction:column;
  gap:5px;
  transform:rotate(-10deg);
  filter:drop-shadow(0 12px 10px #394f9720)
}
.mini-server i {
  display:block;
  width:70px;
  height:19px;
  background:linear-gradient(110deg,#6e91e9,#3859aa);
  border:1px solid #abc2ff;
  border-radius:4px;
  box-shadow:2px 3px 0 #28457f;
  position:relative
}
.mini-server i:before {
  content:"";
  width:4px;
  height:4px;
  border-radius:50%;
  background:#9ef3df;
  position:absolute;
  left:9px;
  top:7px;
  box-shadow:8px 0 0 #b8cff7
}
.mini-server i:after {
  content:"";
  height:2px;
  width:22px;
  background:#bfd0f3;
  position:absolute;
  right:8px;
  top:8px
}
.mini-cube {
  width:76px;
  height:76px;
  border:1px solid white;
  border-radius:16px;
  transform:rotate(10deg);
  background:linear-gradient(120deg,#fbfdffaa,#cad8ff);
  box-shadow:7px 12px 0 #b8c9f752,0 15px 25px #496bc825;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#6184da
}
.mini-cube .icon {
  width:37px;
  height:37px;
  stroke-width:1.5
}
.art-vs {
  font-size:16px;
  color:#a8b4d0;
  font-weight:600
}
.price-slip {
  background:#fff;
  border:1px solid #e5e7fa;
  width:92px;
  padding:14px 12px;
  border-radius:10px;
  box-shadow:0 10px 18px #5b58a415;
  transform:rotate(-8deg)
}
.price-slip small {
  font-size:6px;
  letter-spacing:.7px;
  color:#a0a5bd;
  display:block;
  font-weight:600;
  white-space:nowrap
}
.price-slip strong {
  display:block;
  font-size:24px;
  margin-top:4px;
  letter-spacing:-1px;
  font-weight:750;
  color:#727cbd
}
.price-slip strong span {
  font-size:11px;
  font-weight:500;
  letter-spacing:0
}
.price-slip.second {
  transform:rotate(8deg)
}
.price-slip.second strong {
  color:#6a56c9
}
.price-arrow {
  width:20px;
  height:20px;
  color:#b1acce
}
.guide-art-two {
  gap:15px
}
.backup-shield {
  width:77px;
  height:87px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(120deg,#eafff7,#b9e4d9);
  border:2px solid #fff;
  border-radius:23px;
  box-shadow:0 12px 24px #70a99824;
  transform:rotate(-10deg)
}
.backup-shield .icon {
  width:48px;
  height:48px;
  color:#46a38e;
  stroke-width:1.3
}
.backup-orbit {
  position:absolute;
  width:170px;
  height:108px;
  border:1px solid #c1ded6;
  border-radius:50%;
  transform:rotate(-25deg)
}
.backup-check {
  position:absolute;
  background:#fff;
  color:#4eac96;
  box-shadow:0 5px 15px #64ab941c;
  border-radius:50%;
  width:29px;
  height:29px;
  display:flex;
  align-items:center;
  justify-content:center;
  left:calc(50% + 25px);
  top:106px
}
.backup-check .icon {
  width:15px;
  height:15px;
  stroke-width:2.5
}
.faq-section {
  padding:0 0 72px
}
.faq-grid {
  display:grid;
  grid-template-columns:.8fr 1.5fr;
  gap:70px;
  border-top:1px solid #edf0f6;
  padding-top:54px
}
.faq-grid .eyebrow {
  margin-bottom:13px
}
.faq-grid h2 {
  font-size:29px
}
.faq-grid>div>p {
  font-size:12px;
  margin-top:15px
}
.faq-list details {
  border-bottom:1px solid #e9edf5
}
.faq-list details:first-child {
  border-top:1px solid #e9edf5
}
.faq-list summary {
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  font-weight:600;
  padding:19px 0;
  gap:20px;
  cursor:pointer
}
.faq-list summary::-webkit-details-marker {
  display:none
}
.faq-list summary .icon {
  width:15px;
  height:15px;
  color:#a0abc0;
  transition:transform .2s
}
.faq-list details[open] summary .icon {
  transform:rotate(180deg)
}
.faq-list details>p {
  font-size:11px;
  line-height:1.95;
  margin:0 32px 20px 0
}
.closing-section {
  padding-bottom:51px
}
.closing-card {
  position:relative;
  background:linear-gradient(120deg,#14213d,#1b2b50 65%,#273563);
  color:white;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:35px;
  border-radius:20px;
  padding:43px 50px;
  overflow:hidden;
  isolation:isolate
}
.closing-card .eyebrow {
  font-size:8px;
  letter-spacing:1.8px;
  color:#9dacf0;
  margin-bottom:14px
}
.closing-card h2 {
  font-size:29px;
  font-weight:650;
  line-height:1.4;
  letter-spacing:-.6px
}
.closing-card p {
  font-size:11px;
  margin-top:13px;
  color:#a2aec6
}
.closing-card .button {
  font-size:12px;
  z-index:1;
  padding:14px 19px
}
.closing-card .button .icon {
  width:17px;
  height:17px
}
.closing-orbit {
  position:absolute;
  width:620px;
  height:620px;
  right:-240px;
  top:-160px;
  border:1px solid #8b9cdf14;
  border-radius:50%;
  z-index:-1;
  box-shadow:0 0 0 38px #8b9cdf06,0 0 0 76px #8b9cdf05,0 0 0 114px #8b9cdf03
}
.footer {
  padding:0 0 24px;
  background:white
}
.footer-main {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #edf0f6;
  padding-bottom:24px;
  gap:20px
}
.footer-main .logo {
  font-size:18px
}
.footer-main .logo-symbol {
  width:29px;
  height:31px
}
.footer-main .logo-domain {
  font-size:12px
}
.footer-links {
  display:flex;
  align-items:center;
  gap:24px
}
.footer-links button {
  padding:5px 0;
  color:#8b96aa;
  font-size:10px
}
.footer-links button:hover {
  color:var(--blue)
}
.footer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:20px;
  gap:20px
}
.footer-bottom>p {
  font-size:9px;
  color:#a1aabc
}
.demo-label {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:8px;
  color:#99a3b8
}
.demo-label>span {
  width:5px;
  height:5px;
  background:#e3b46d;
  border-radius:50%
}
/* Comparison tray & notifications */
.comparison-tray {
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  z-index:35;
  width:min(730px,calc(100% - 32px));
  background:#14203bf5;
  color:#fff;
  border:1px solid #3b486b;
  border-radius:16px;
  box-shadow:0 12px 50px #15204130;
  backdrop-filter:blur(20px);
  animation:tray-in .25s ease
}
.tray-inner {
  display:flex;
  align-items:center;
  gap:15px;
  padding:14px 18px
}
.tray-symbol {
  display:flex;
  align-items:center;
  justify-content:center;
  width:37px;
  height:39px;
  border-radius:10px;
  background:#ffffff12;
  color:#91a7ff
}
.tray-copy {
  flex:1;
  min-width:0
}
.tray-copy strong {
  display:block;
  font-size:12px;
  font-weight:600
}
.tray-copy span {
  display:block;
  font-size:9px;
  color:#a4b1cc;
  margin-top:3px;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  max-width:310px
}
.tray-actions {
  display:flex;
  gap:20px;
  align-items:center
}
.tray-actions .text-button {
  color:#aebbe3;
  font-size:10px
}
.tray-actions .button {
  font-size:11px;
  min-height:38px;
  padding:10px 13px
}
.tray-actions .icon {
  width:15px;
  height:15px
}
.toast-region {
  position:fixed;
  right:24px;
  bottom:120px;
  z-index:80;
  max-width:min(380px,calc(100vw - 32px));
  pointer-events:none
}
.toast {
  color:#fff;
  background:#273a5f;
  padding:14px 20px;
  border:1px solid #526384;
  border-radius:12px;
  font-size:12px;
  box-shadow:0 8px 30px #253b6326;
  animation:toast-in .2s ease;
  line-height:1.6
}
.noscript {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  padding:20px;
  background:#1c2944;
  color:white;
  z-index:70;
  text-align:center;
  font-size:14px
}
.has-tray .footer {
  padding-bottom:125px
}
/* Accessible native modal */
body.modal-open {
  overflow:hidden
}
#content-modal {
  padding:0;
  border:1px solid #e1e7f4;
  border-radius:21px;
  width:min(800px,calc(100vw - 42px));
  max-width:none;
  max-height:calc(100dvh - 60px);
  color:var(--ink);
  background:#fff;
  box-shadow:0 30px 110px #15233d4a;
  overscroll-behavior:contain;
  scrollbar-width:thin
}
#content-modal::backdrop {
  background:#101c3870;
  backdrop-filter:blur(6px)
}
#content-modal[open] {
  animation:modal-in .22s ease
}
#content-modal.comparison-modal {
  width:min(1120px,calc(100vw - 42px))
}
.modal-header {
  position:sticky;
  top:0;
  z-index:5;
  background:#fffffffa;
  backdrop-filter:blur(20px);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  padding:26px 32px 22px;
  border-bottom:1px solid var(--line)
}
.modal-header h2 {
  font-size:25px;
  letter-spacing:-.7px;
  line-height:1.35;
  margin-top:6px
}
.modal-header .eyebrow {
  font-size:8px;
  letter-spacing:1.7px
}
.modal-close {
  background:#f4f6fb;
  width:34px;
  height:34px;
  border-radius:50%;
  margin-top:3px
}
.modal-close .icon {
  width:17px;
  height:17px
}
.modal-body {
  padding:28px 32px 32px
}
.demo-notice {
  display:flex;
  align-items:start;
  gap:10px;
  padding:13px 16px;
  background:#fffbf0;
  border:1px solid #f3e9cd;
  border-radius:9px;
  font-size:11px;
  color:#93815c;
  line-height:1.8;
  margin-bottom:23px
}
.demo-notice .icon {
  width:16px;
  height:16px;
  margin-top:2px;
  flex-shrink:0
}
.modal-plan-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:4px 0 23px;
  gap:25px
}
.modal-plan-top .wordmark {
  font-size:27px
}
.modal-plan-top .brand-mark {
  font-size:31px;
  width:29px
}
.modal-plan-top .brand-siteground .brand-mark {
  font-size:22px;
  width:27px;
  height:27px
}
.modal-plan-top .plan-category {
  color:#8c97ad;
  font-size:11px;
  margin-top:7px
}
.modal-price {
  text-align:right;
  font-size:26px;
  font-weight:750;
  letter-spacing:-.7px
}
.modal-price small {
  font-size:12px;
  color:#8e99ae;
  font-weight:400;
  letter-spacing:0
}
.modal-price p {
  font-size:10px;
  font-weight:400;
  letter-spacing:0;
  margin-top:4px
}
.modal-actions {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding-bottom:24px;
  border-bottom:1px solid var(--line);
  margin-bottom:25px
}
.modal-actions .button {
  font-size:11px;
  min-height:38px
}
.modal-actions .icon {
  width:15px;
  height:15px
}
.spec-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid #e5ebf5;
  border-radius:12px;
  overflow:hidden;
  margin:20px 0 27px
}
.spec-item {
  padding:15px 17px;
  border-bottom:1px solid #edf1f7;
  border-right:1px solid #edf1f7;
  font-size:12px
}
.spec-item:nth-child(3n) {
  border-right:0
}
.spec-item span {
  display:block;
  color:#8a96ac;
  font-size:9px;
  margin-bottom:5px
}
.spec-item strong {
  font-size:12px;
  font-weight:600
}
.reading-content {
  font-size:13px;
  line-height:1.95;
  color:#61708a
}
.reading-content .lead {
  font-size:15px;
  color:#53627c;
  line-height:1.85;
  margin-bottom:24px
}
.reading-content p {
  color:inherit;
  margin:10px 0 17px
}
.reading-content h3 {
  font-size:18px;
  color:var(--ink);
  font-weight:700;
  letter-spacing:-.35px;
  margin:29px 0 12px
}
.reading-content h4 {
  font-size:14px;
  color:var(--ink);
  margin:21px 0 9px
}
.reading-content ul,.reading-content ol {
  padding-left:20px;
  margin:10px 0 21px
}
.reading-content li {
  margin:8px 0;
  padding-left:3px
}
.reading-content strong {
  color:#3c4f6e;
  font-weight:650
}
.reading-content blockquote {
  border-left:3px solid #92a9fb;
  background:#f4f7ff;
  margin:24px 0;
  padding:15px 20px;
  color:#5e6c85
}
.reading-content .reading-footnote {
  font-size:10px;
  color:#97a2b6;
  padding-top:20px;
  border-top:1px solid #eaf0f7;
  margin-top:30px
}
.reading-callout {
  background:#f3f6ff;
  border:1px solid #e3eaff;
  border-radius:10px;
  padding:19px 22px;
  margin-top:25px
}
.reading-callout h4 {
  margin:0 0 9px
}
.reading-callout p {
  margin:0
}
.modal-end-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:27px;
  border-top:1px solid #edf1f7;
  padding-top:21px
}
.modal-end-actions .button {
  font-size:12px
}
.compare-table-wrap {
  max-width:100%;
  overflow:auto;
  scrollbar-width:thin;
  overscroll-behavior-x:contain;
  border:1px solid #e7edf7;
  border-radius:12px
}
.compare-table {
  border-collapse:collapse;
  width:100%;
  font-size:11px;
  min-width:560px;
  text-align:left
}
.compare-table th,.compare-table td {
  border-bottom:1px solid #eaf0f7;
  border-right:1px solid #eaf0f7;
  padding:14px 16px;
  min-width:155px;
  vertical-align:top
}
.compare-table th:first-child,.compare-table td:first-child {
  font-weight:500;
  background:#f9fbff;
  color:#7e8ba3;
  min-width:150px;
  width:150px;
  position:sticky;
  left:0;
  z-index:1;
  box-shadow:1px 0 #eaf0f7
}
.compare-table td:last-child,.compare-table th:last-child {
  border-right:0
}
.compare-table tr:last-child>* {
  border-bottom:0
}
.compare-table th {
  font-weight:600
}
.compare-table .wordmark {
  font-size:14px;
  white-space:normal
}
.compare-table .brand-mark {
  font-size:20px;
  flex-shrink:0;
  width:19px
}
.compare-table .brand-siteground .brand-mark {
  width:19px;
  height:19px;
  font-size:14px
}
.compare-table .compare-plan-name {
  color:#98a5b9;
  font-weight:400;
  font-size:9px;
  margin:6px 0 14px
}
.compare-table .compare-price {
  font-size:16px;
  letter-spacing:-.4px;
  font-weight:750;
  color:#273552
}
.compare-table .compare-price small {
  color:#9ba7bb;
  font-size:9px;
  font-weight:400;
  letter-spacing:0
}
.compare-table .best-value {
  background:#f0f9f6;
  color:#228a70;
  font-weight:650
}
.compare-table .detail-button {
  font-size:10px
}
.compare-hint {
  font-size:10px;
  color:#8e9ab0;
  margin:15px 0
}
.favorites-list {
  display:flex;
  flex-direction:column;
  gap:10px
}
.favorite-item {
  display:flex;
  align-items:center;
  gap:14px;
  padding:17px 19px;
  border:1px solid #e6edf7;
  border-radius:12px
}
.favorite-item-main {
  flex:1;
  min-width:0
}
.favorite-item .wordmark {
  font-size:16px
}
.favorite-item .brand-mark {
  font-size:22px
}
.favorite-item .brand-siteground .brand-mark {
  width:20px;
  height:20px;
  font-size:15px
}
.favorite-item p {
  font-size:10px;
  margin-top:5px
}
.favorite-item .detail-button {
  font-size:11px
}
.saved-empty {
  padding:24px 10px 35px;
  text-align:center
}
.saved-empty>.icon {
  color:#adbad7;
  width:40px;
  height:40px;
  margin-bottom:18px
}
.saved-empty h3 {
  font-size:21px;
  margin-bottom:11px
}
.saved-empty p {
  font-size:13px;
  max-width:380px;
  margin:auto
}
.saved-empty .button {
  margin-top:22px
}
.badge-good {
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--green)
}
.badge-good .icon {
  width:13px;
  height:13px
}
.muted {
  color:#a0aabf
}
.modal-back {
  margin-bottom:15px
}
.modal-back .icon {
  transform:rotate(180deg)
}
@keyframes modal-in {
  from {
    opacity:0;
    transform:translateY(12px) scale(.985)
  }
  to {
    opacity:1;
    transform:translateY(0) scale(1)
  }
}
@keyframes toast-in {
  from {
    opacity:0;
    transform:translateY(10px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@keyframes tray-in {
  from {
    opacity:0;
    bottom:5px
  }
  to {
    opacity:1;
    bottom:20px
  }
}
/* Breakpoints */
@media(min-width:1550px) {
  .hero {
    padding-top:74px
  }
  .hero-grid {
    gap:48px;
    min-height:534px
  }
  .hero h1 {
    font-size:61px
  }
  .hero-description {
    font-size:16px
  }
  .hero-visual {
    padding-top:3px
  }
  .carousel {
    height:475px
  }
  .host-card {
    top:44px
  }
  .providers-strip {
    margin-top:13px
  }
  .comparison-section {
    padding-top:70px
  }
}
@media(max-width:1200px) {
  .container {
    width:calc(100% - 64px)
  }
  .main-nav {
    gap:18px
  }
  .main-nav a,.main-nav button {
    font-size:11px
  }
  .logo {
    font-size:20px
  }
  .logo-symbol {
    width:32px;
    height:35px
  }
  .logo-domain {
    font-size:14px
  }
  .header-actions {
    gap:7px
  }
  .hero h1 {
    font-size:46px;
    letter-spacing:-2px
  }
  .hero-grid {
    gap:18px
  }
  .hero-description {
    font-size:13px
  }
  .hero-tabs .category-tab {
    font-size:11px;
    gap:5px
  }
  .search-field .button {
    font-size:11px;
    padding:10px
  }
  .search-field .button .icon {
    display:none
  }
  .hero-filters {
    gap:7px
  }
  .compact-select select {
    font-size:9px;
    max-width:120px
  }
  .hero-filters .text-button {
    font-size:9px
  }
  .host-card {
    width:213px;
    left:calc(50% - 106.5px);
    padding:19px 18px;
    min-height:306px
  }
  .host-card[data-position="left"] {
    transform:translateX(-125px) translateY(26px) rotateY(17deg) rotateZ(-7deg) scale(.86)
  }
  .host-card[data-position="right"] {
    transform:translateX(125px) translateY(26px) rotateY(-17deg) rotateZ(7deg) scale(.86)
  }
  .card-price strong {
    font-size:29px
  }
  .carousel {
    height:432px
  }
  .floating-compare {
    bottom:49px;
    width:290px;
    padding:10px 12px
  }
  .carousel-platform {
    bottom:67px
  }
  .providers-strip {
    gap:18px
  }
  .providers-strip>p {
    min-width:142px;
    font-size:7px
  }
  .provider-logos {
    gap:18px
  }
  .provider-logos .wordmark {
    font-size:14px
  }
  .provider-logos .brand-mark {
    font-size:19px
  }
  .provider-logos .brand-siteground .brand-mark {
    font-size:14px;
    width:17px;
    height:17px
  }
  .hero-grid {
    min-height:493px
  }
  .comparison-layout {
    grid-template-columns:minmax(0,1fr) 228px;
    gap:18px
  }
  .comparison-aside {
    padding:20px 16px
  }
  .aside-heading h3 {
    font-size:16px
  }
  .hosting-table th,.hosting-table td {
    padding-inline:7px
  }
  .hosting-table td:first-child,.hosting-table th:first-child {
    padding-left:14px
  }
  .hosting-table td:last-child,.hosting-table th:last-child {
    padding-right:12px
  }
  .hosting-table td {
    font-size:10px
  }
  .table-provider .wordmark {
    font-size:12px
  }
  .table-provider .brand-mark {
    font-size:18px
  }
  .table-provider .brand-siteground .brand-mark {
    font-size:13px;
    width:17px;
    height:17px
  }
  .table-price {
    font-size:11px!important
  }
  .detail-button {
    font-size:9px;
    padding:7px 9px
  }
  .table-actions .icon-button {
    width:23px
  }
  .location-value {
    font-size:9px
  }
  .spec-small {
    font-size:9px
  }
  .how-grid {
    gap:35px;
    grid-template-columns:.9fr 1.65fr
  }
  .how-grid h2 {
    font-size:25px
  }
  .steps {
    gap:19px
  }
  .step h3 {
    font-size:11px
  }
  .guide-card h3 {
    font-size:15px
  }
  .footer-links {
    gap:17px
  }
}
@media(max-width:1020px) {
  .main-nav a:nth-of-type(2),.main-nav button {
    display:none
  }
  .hero {
    padding-top:43px
  }
  .hero-grid {
    grid-template-columns:1.1fr 1fr;
    gap:12px;
    min-height:481px
  }
  .hero h1 {
    font-size:40px;
    letter-spacing:-1.7px
  }
  .hero .eyebrow {
    font-size:8px;
    letter-spacing:1.5px
  }
  .hero-description {
    font-size:12px
  }
  .search-panel {
    margin-top:23px;
    padding:9px
  }
  .search-field {
    padding-left:9px;
    gap:6px
  }
  .search-field input {
    font-size:10px
  }
  .search-field>.icon {
    width:14px;
    height:14px
  }
  .hero-filters {
    gap:4px
  }
  .hero-filters .compact-select>.icon {
    display:none
  }
  .hero-tabs .category-tab {
    font-size:10px;
    padding-inline:5px
  }
  .hero-tabs .category-tab .icon {
    width:13px;
    height:13px
  }
  .hero-microcopy {
    font-size:9px
  }
  .visual-label {
    font-size:7px;
    letter-spacing:1.2px
  }
  .host-card {
    width:193px;
    left:calc(50% - 96.5px);
    min-height:294px;
    padding:17px 15px
  }
  .host-card[data-position="left"] {
    transform:translateX(-105px) translateY(26px) rotateY(17deg) rotateZ(-7deg) scale(.83)
  }
  .host-card[data-position="right"] {
    transform:translateX(105px) translateY(26px) rotateY(-17deg) rotateZ(7deg) scale(.83)
  }
  .host-card .wordmark {
    font-size:16px
  }
  .card-price strong {
    font-size:28px
  }
  .card-features li {
    font-size:9px
  }
  .card-category {
    font-size:7px
  }
  .card-name {
    font-size:9px
  }
  .floating-compare {
    width:263px
  }
  .floating-compare strong {
    font-size:10px
  }
  .floating-compare small {
    font-size:8px
  }
  .floating-icon {
    width:30px;
    height:30px
  }
  .visual-note {
    font-size:8px
  }
  .carousel {
    height:417px
  }
  .hero-grid {
    min-height:455px
  }
  .providers-strip>p {
    display:none
  }
  .providers-strip {
    padding:25px 0;
    margin-top:18px
  }
  .provider-logos {
    justify-content:space-between
  }
  .comparison-layout {
    grid-template-columns:minmax(0,1fr)
  }
  .comparison-aside {
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:24px;
    padding:24px
  }
  .comparison-aside .aside-heading,.comparison-aside .aside-tip {
    display:none
  }
  .comparison-aside .benefit {
    margin:0
  }
  .benefit p {
    font-size:11px
  }
  .benefit h4 {
    font-size:12px
  }
  .hosting-table td {
    height:77px;
    padding:16px 12px;
    font-size:12px
  }
  .hosting-table th {
    padding:12px;
    font-size:10px
  }
  .table-provider .wordmark {
    font-size:15px
  }
  .table-price {
    font-size:12px!important
  }
  .spec-small {
    font-size:11px
  }
  .location-value {
    font-size:11px
  }
  .detail-button {
    font-size:10px;
    padding:8px 11px
  }
  .table-actions .icon-button {
    width:30px
  }
  .how-grid {
    grid-template-columns:1fr;
    gap:34px
  }
  .how-grid>div:first-child {
    text-align:center
  }
  .how-grid>div:first-child h2 br,.how-grid>div:first-child p br {
    display:none
  }
  .steps {
    gap:40px
  }
  .step h3 {
    font-size:13px
  }
  .step p {
    font-size:12px
  }
  .how-section {
    padding:50px 0
  }
  .guides-section {
    padding:50px 0
  }
  .guide-card h3 {
    font-size:15px
  }
  .guide-card h3,.guide-card p,.guide-kicker {
    padding-inline:17px
  }
  .guide-link {
    margin-inline:17px
  }
  .guide-art {
    height:145px;
    gap:15px
  }
  .mini-cube {
    width:62px;
    height:62px
  }
  .mini-server i {
    width:61px;
    height:17px
  }
  .mini-server i:before {
    top:6px
  }
  .mini-server i:after {
    top:7px;
    width:18px
  }
  .guide-art-two {
    gap:9px
  }
  .price-slip {
    width:78px;
    padding:12px 10px
  }
  .price-slip strong {
    font-size:22px
  }
  .price-slip small {
    font-size:5px
  }
  .guide-grid {
    gap:17px
  }
  .section-side-note {
    font-size:9px
  }
  .closing-card {
    padding:34px 37px
  }
  .closing-card h2 {
    font-size:25px
  }
  .footer-main .logo {
    font-size:16px
  }
  .footer-links {
    gap:14px
  }
  .footer-links button {
    font-size:9px
  }
}
@media(max-width:760px) {
  .bh-language-switcher .translation-navigation {
    position:fixed;
    top:74px;
    left:16px;
    right:16px;
    width:auto;
    max-height:calc(100vh - 90px)
  }
  html {
    scroll-padding-top:91px
  }
  .container {
    width:calc(100% - 40px)
  }
  .header {
    height:74px
  }
  .header-inner {
    gap:12px
  }
  .logo {
    font-size:19px;
    gap:7px;
    letter-spacing:-.8px
  }
  .logo-symbol {
    width:29px;
    height:32px
  }
  .logo-domain {
    font-size:12px
  }
  .main-nav {
    display:none;
    position:absolute;
    top:74px;
    left:0;
    right:0;
    background:#fff;
    box-shadow:0 10px 25px #22366a12;
    padding:15px 24px 20px;
    z-index:31;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    border-bottom:1px solid #e6edfa
  }
  .main-nav.is-open {
    display:flex
  }
  .main-nav a,.main-nav button,.main-nav a:nth-of-type(2),.main-nav button {
    display:block;
    text-align:left;
    padding:13px 5px;
    font-size:13px
  }
  .main-nav .active:after {
    display:none
  }
  .mobile-menu {
    display:inline-flex;
    width:40px;
    height:40px;
    flex:0 0 40px
  }
  .header-actions {
    gap:6px
  }
  .header-actions>.favorites-open {
    width:40px;
    height:40px
  }
  .header-actions>.favorites-open .icon {
    width:18px;
    height:18px
  }
  .header-compare {
    padding:8px 10px;
    min-height:40px;
    font-size:10px;
    gap:6px;
    border-radius:8px
  }
  .header-compare>.icon {
    display:block
  }
  .header-compare span:not(.compare-count) {
    display:none
  }
  .besthostings-articles .header-compare {
    display:none
  }
  .compare-count {
    width:17px;
    height:17px;
    font-size:9px
  }
  .hero {
    padding-top:37px
  }
  .hero-grid {
    grid-template-columns:1fr;
    gap:22px;
    min-height:0
  }
  .hero-copy {
    padding-top:0
  }
  .hero h1 {
    font-size:clamp(33px,7.1vw,53px);
    letter-spacing:-1.5px;
    margin:17px 0 18px;
    white-space:normal
  }
  .hero .eyebrow {
    font-size:8px;
    letter-spacing:1.6px
  }
  .hero-description {
    font-size:13px;
    max-width:510px;
    line-height:1.85
  }
  .search-panel {
    max-width:none;
    margin-top:24px;
    padding:10px;
    border-radius:14px
  }
  .hero-tabs {
    margin-bottom:11px
  }
  .hero-tabs .category-tab {
    min-height:36px;
    font-size:11px;
    gap:6px
  }
  .hero-tabs .category-tab .icon {
    width:14px;
    height:14px
  }
  .search-field {
    padding-left:10px;
    gap:7px
  }
  .search-field input {
    font-size:11px;
    min-height:40px
  }
  .search-field .button {
    font-size:11px;
    padding:11px;
    min-height:40px
  }
  .hero-filters {
    gap:12px
  }
  .compact-select select {
    font-size:10px;
    max-width:130px
  }
  .hero-filters .text-button {
    font-size:10px
  }
  .hero-microcopy {
    font-size:10px;
    margin-top:14px
  }
  .hero-visual {
    max-width:570px;
    width:100%;
    margin:5px auto 0
  }
  .visual-label {
    font-size:8px;
    letter-spacing:1.7px;
    margin-top:0
  }
  .carousel {
    height:426px;
    max-width:540px;
    margin:auto
  }
  .host-card {
    width:223px;
    left:calc(50% - 111.5px);
    padding:20px;
    min-height:306px;
    top:27px
  }
  .host-card[data-position="left"] {
    transform:translateX(-130px) translateY(30px) rotateY(17deg) rotateZ(-7deg) scale(.82)
  }
  .host-card[data-position="right"] {
    transform:translateX(130px) translateY(30px) rotateY(-17deg) rotateZ(7deg) scale(.82)
  }
  .host-card .wordmark {
    font-size:19px
  }
  .card-category {
    font-size:8px;
    margin-bottom:16px
  }
  .card-name {
    font-size:9px
  }
  .card-price strong {
    font-size:29px
  }
  .card-features li {
    font-size:10px
  }
  .card-features {
    margin:18px 0
  }
  .carousel-platform {
    bottom:65px
  }
  .floating-compare {
    width:289px;
    bottom:47px
  }
  .floating-compare strong {
    font-size:11px
  }
  .floating-compare small {
    font-size:9px
  }
  .visual-note {
    font-size:9px;
    margin-top:4px
  }
  .providers-strip {
    margin-top:28px;
    padding:23px 0
  }
  .provider-logos {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px 15px;
    text-align:center;
    justify-content:center
  }
  .provider-logos .wordmark {
    font-size:15px;
    justify-content:center
  }
  .provider-logos .brand-mark {
    font-size:19px
  }
  .comparison-section {
    padding:41px 0
  }
  .section-heading {
    align-items:start;
    margin-bottom:22px
  }
  .section-heading .eyebrow {
    font-size:8px;
    letter-spacing:1.6px;
    margin-bottom:10px
  }
  .section-heading h2,h2 {
    font-size:25px;
    letter-spacing:-.7px
  }
  .section-heading p {
    font-size:11px;
    line-height:1.8;
    margin-top:10px
  }
  .section-heading .method-link {
    display:none
  }
  .comparison-layout {
    gap:17px
  }
  .results-toolbar {
    padding:14px 13px 10px;
    gap:8px
  }
  .table-tabs {
    gap:3px
  }
  .table-tabs .category-tab {
    font-size:10px;
    padding:8px 10px
  }
  .filter-toggle {
    font-size:10px;
    padding:6px 9px;
    min-height:31px;
    gap:5px
  }
  .filter-toggle .icon {
    width:13px;
    height:13px
  }
  .results-meta {
    padding:5px 14px 13px;
    font-size:9px;
    gap:5px
  }
  .sort-label {
    font-size:0;
    gap:0
  }
  .sort-label select {
    font-size:9px;
    max-width:125px
  }
  .hosting-table {
    min-width:600px
  }
  .hosting-table th {
    font-size:9px
  }
  .hosting-table td {
    padding:14px 10px;
    font-size:11px;
    height:74px
  }
  .table-provider .wordmark {
    font-size:13px
  }
  .hosting-table td:first-child,.hosting-table th:first-child {
    padding-left:16px
  }
  .hosting-table td:last-child,.hosting-table th:last-child {
    padding-right:16px
  }
  .table-price {
    font-size:11px!important
  }
  .spec-small {
    font-size:10px
  }
  .location-value {
    font-size:10px
  }
  .hosting-table td:nth-child(2),.hosting-table th:nth-child(2) {
    position:sticky;
    left:0;
    background:#fff;
    box-shadow:2px 0 3px #d5deef40;
    z-index:2
  }
  .hosting-table th:nth-child(2) {
    background:#f8fafe
  }
  .hosting-table tr.is-selected td:nth-child(2) {
    background:#f3f6ff
  }
  .table-note {
    padding:12px 14px;
    font-size:8px;
    line-height:1.8
  }
  .table-note .icon {
    width:12px;
    height:12px
  }
  .table-note:after {
    content:""
  }
  .advanced-filters {
    margin:0 12px 13px;
    padding:13px;
    gap:11px
  }
  .advanced-filters>label {
    font-size:9px
  }
  .advanced-filters .reset-filters {
    font-size:9px
  }
  .comparison-aside {
    display:flex;
    gap:16px;
    padding:21px 19px;
    flex-wrap:wrap
  }
  .comparison-aside .benefit {
    flex:1 1 200px;
    align-items:center
  }
  .benefit p {
    font-size:10px
  }
  .benefit h4 {
    font-size:11px;
    margin-bottom:4px
  }
  .benefit-icon {
    width:33px;
    height:35px
  }
  .benefit-icon .icon {
    width:18px;
    height:18px
  }
  .how-section {
    padding:39px 0
  }
  .how-grid {
    gap:28px
  }
  .how-grid>div:first-child {
    text-align:left
  }
  .how-grid .eyebrow {
    font-size:8px;
    letter-spacing:1.6px;
    margin-bottom:11px
  }
  .how-grid h2 {
    font-size:25px
  }
  .how-grid>div>p {
    font-size:11px;
    margin-top:11px
  }
  .how-grid>div:first-child h2 br {
    display:block
  }
  .steps {
    gap:15px
  }
  .step-number {
    width:36px;
    height:36px;
    font-size:11px;
    border-radius:10px;
    margin-bottom:14px
  }
  .step:not(:last-child):after {
    top:18px;
    left:49px;
    right:-4px
  }
  .step h3 {
    font-size:11px;
    line-height:1.55
  }
  .step p {
    font-size:10px;
    line-height:1.8
  }
  .guides-section {
    padding:40px 0
  }
  .section-side-note {
    display:inline-flex;
    align-self:flex-start;
    font-size:11px;
    color:var(--blue)
  }
  .guides-section .section-heading {
    flex-direction:column;
    gap:12px
  }
  .guide-grid {
    grid-template-columns:1fr;
    gap:17px
  }
  .guide-card {
    padding-bottom:21px
  }
  .guide-art {
    height:174px;
    margin-bottom:18px;
    gap:35px
  }
  .guide-art-two {
    gap:24px
  }
  .guide-kicker {
    font-size:8px;
    padding-inline:21px
  }
  .guide-card h3 {
    font-size:18px;
    margin-top:10px;
    padding-inline:21px
  }
  .guide-card p {
    font-size:12px;
    padding-inline:21px
  }
  .guide-link {
    font-size:11px;
    margin-inline:21px;
    margin-top:15px
  }
  .mini-server i {
    width:77px;
    height:21px
  }
  .mini-server i:before {
    top:8px
  }
  .mini-server i:after {
    top:9px;
    width:24px
  }
  .mini-cube {
    width:81px;
    height:81px
  }
  .price-slip {
    width:95px;
    padding:15px 13px
  }
  .price-slip strong {
    font-size:27px
  }
  .price-slip small {
    font-size:6px
  }
  .backup-shield {
    width:87px;
    height:97px
  }
  .backup-shield .icon {
    width:52px;
    height:52px
  }
  .backup-check {
    top:121px;
    left:calc(50% + 26px)
  }
  .faq-section {
    padding:0 0 40px
  }
  .faq-grid {
    grid-template-columns:1fr;
    gap:25px;
    padding-top:34px
  }
  .faq-grid .eyebrow {
    font-size:8px;
    letter-spacing:1.6px
  }
  .faq-grid h2 {
    font-size:25px
  }
  .faq-grid h2 br {
    display:none
  }
  .faq-grid>div>p {
    font-size:11px;
    margin-top:10px
  }
  .faq-list summary {
    font-size:11px;
    padding:18px 0
  }
  .faq-list details>p {
    font-size:11px;
    margin-right:15px
  }
  .closing-section {
    padding-bottom:35px
  }
  .closing-card {
    flex-direction:column;
    align-items:flex-start;
    padding:28px 24px;
    border-radius:16px;
    gap:22px
  }
  .closing-card h2 {
    font-size:23px;
    line-height:1.45;
    letter-spacing:-.7px
  }
  .closing-card .eyebrow {
    font-size:7px;
    letter-spacing:1.5px;
    margin-bottom:11px
  }
  .closing-card p {
    font-size:11px;
    margin-top:11px
  }
  .closing-card .button {
    font-size:11px;
    padding:12px 15px;
    min-height:41px
  }
  .footer-main {
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
    padding-bottom:21px
  }
  .footer-main .logo {
    font-size:18px
  }
  .footer-links {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px 27px
  }
  .footer-links button {
    font-size:10px;
    text-align:left
  }
  .footer-bottom {
    flex-direction:column;
    align-items:flex-start;
    gap:11px;
    padding-top:16px
  }
  .footer-bottom>p {
    font-size:8px
  }
  .demo-label {
    font-size:8px
  }
  .footer {
    padding-bottom:22px
  }
  .comparison-tray {
    bottom:12px;
    width:calc(100% - 24px);
    border-radius:13px
  }
  .tray-inner {
    padding:12px 13px;
    gap:10px;
    flex-wrap:wrap
  }
  .tray-symbol {
    display:none
  }
  .tray-copy strong {
    font-size:11px
  }
  .tray-copy span {
    max-width:185px;
    font-size:8px
  }
  .tray-actions {
    gap:11px
  }
  .tray-actions .text-button {
    font-size:9px
  }
  .tray-actions .button {
    font-size:10px;
    padding:10px;
    min-height:35px
  }
  .tray-actions .button .icon {
    display:none
  }
  .toast-region {
    bottom:110px;
    right:16px
  }
  .toast {
    font-size:11px
  }
  #content-modal {
    width:calc(100vw - 24px);
    max-height:calc(100dvh - 32px);
    border-radius:16px
  }
  #content-modal.comparison-modal {
    width:calc(100vw - 24px)
  }
  .modal-header {
    padding:20px 20px 17px;
    gap:12px
  }
  .modal-header h2 {
    font-size:20px;
    margin-top:6px
  }
  .modal-header .eyebrow {
    font-size:7px;
    letter-spacing:1.3px
  }
  .modal-close {
    width:31px;
    height:31px
  }
  .modal-body {
    padding:20px
  }
  .demo-notice {
    padding:11px 12px;
    font-size:10px;
    margin-bottom:20px
  }
  .demo-notice .icon {
    width:14px;
    height:14px
  }
  .modal-plan-top {
    gap:15px;
    margin-bottom:20px;
    align-items:start
  }
  .modal-plan-top .wordmark {
    font-size:20px
  }
  .modal-plan-top .brand-mark {
    font-size:25px;
    width:23px
  }
  .modal-plan-top .brand-siteground .brand-mark {
    width:22px;
    height:22px;
    font-size:18px
  }
  .modal-price {
    font-size:21px;
    white-space:nowrap
  }
  .modal-price small {
    font-size:10px
  }
  .modal-price p {
    font-size:8px
  }
  .modal-plan-top .plan-category {
    font-size:9px
  }
  .modal-actions {
    gap:8px
  }
  .modal-actions .button {
    font-size:10px;
    padding:10px 12px
  }
  .spec-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .spec-item {
    padding:13px;
    font-size:11px
  }
  .spec-item:nth-child(3n) {
    border-right:1px solid #edf1f7
  }
  .spec-item:nth-child(2n) {
    border-right:0
  }
  .spec-item strong {
    font-size:11px
  }
  .spec-item span {
    font-size:8px
  }
  .reading-content {
    font-size:12px;
    line-height:1.95
  }
  .reading-content .lead {
    font-size:13px
  }
  .reading-content h3 {
    font-size:16px;
    margin-top:25px
  }
  .reading-content h4 {
    font-size:13px
  }
  .reading-callout {
    padding:15px 16px
  }
  .reading-content blockquote {
    padding:12px 15px
  }
  .reading-content .reading-footnote {
    font-size:9px
  }
  .modal-end-actions .button {
    font-size:11px
  }
  .compare-table {
    font-size:10px
  }
  .compare-table th,.compare-table td {
    padding:12px;
    min-width:153px
  }
  .compare-table th:first-child,.compare-table td:first-child {
    min-width:125px;
    width:125px
  }
  .compare-table .wordmark {
    font-size:13px
  }
  .compare-table .compare-price {
    font-size:15px
  }
  .favorite-item {
    padding:14px 12px;
    gap:7px;
    flex-wrap:wrap
  }
  .favorite-item .wordmark {
    font-size:14px
  }
  .favorite-item p {
    font-size:9px
  }
  .favorite-item .detail-button {
    font-size:10px
  }
  .favorite-item .icon-button {
    width:28px;
    height:31px
  }
  .saved-empty p {
    font-size:12px
  }
  .saved-empty h3 {
    font-size:20px
  }
}

/* Editorial pages share the comparison site's navigation and visual language. */
.bh-articles{min-height:65vh;background:#f8faff}
.bh-articles-hero{padding:92px 0 82px;background:radial-gradient(circle at 83% 15%,#e9edff 0,transparent 34%),linear-gradient(145deg,#fff,#f4f7ff)}
.bh-articles-hero h1,.bh-article-detail h1{font-size:clamp(38px,5vw,64px);letter-spacing:-.055em;line-height:1.1;font-weight:760}
.bh-articles-hero h1{max-width:750px;margin:20px 0}
.bh-articles-hero p{max-width:640px;font-size:16px;line-height:1.8}
.bh-articles-section{padding:68px 0 100px}
.bh-articles-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:26px}
.bh-articles-heading h2{font-size:clamp(25px,3vw,34px);letter-spacing:-.04em}
.bh-articles-heading span{font-size:13px;color:var(--muted)}
.bh-articles-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.bh-article-card{min-width:0;background:#fff;border:1px solid #e5eaf7;border-radius:19px;box-shadow:0 10px 32px #293d7608;overflow:hidden;transition:transform .25s,box-shadow .25s}
.bh-article-card:hover{transform:translateY(-4px);box-shadow:0 20px 46px #293d7614}
.bh-article-card__link{display:flex;flex-direction:column;height:100%}
.bh-article-card img{display:block;width:100%;aspect-ratio:1200/630;object-fit:cover}
.bh-article-card__body{display:flex;flex-direction:column;flex:1;padding:26px}
.bh-article-card__kicker{color:var(--blue);font-size:10px;font-weight:750;letter-spacing:.13em}
.bh-article-card h3{margin:11px 0;font-size:21px;line-height:1.28;letter-spacing:-.03em}
.bh-article-card p{font-size:14px;line-height:1.65}
.bh-article-card__more{display:inline-flex;align-items:center;gap:10px;margin-top:auto;padding-top:24px;color:var(--blue);font-size:13px;font-weight:700}
.bh-article-card__more .icon{width:16px;height:16px}
.bh-articles-empty{max-width:630px;margin:20px auto 0;padding:60px 25px;text-align:center;background:#fff;border:1px solid #e5eaf7;border-radius:19px}
.bh-articles-empty>.icon{width:40px;height:40px;color:var(--blue)}
.bh-articles-empty h2{margin:14px 0 8px;font-size:28px;letter-spacing:-.04em}
.bh-articles-empty .button{margin-top:25px}
.bh-article-detail{padding:56px 0 100px}
.bh-article-detail__intro,.bh-article-detail__body,.bh-article-detail__footer{width:min(780px,100%);margin-inline:auto}
.bh-article-detail__back{display:inline-block;margin-bottom:50px;color:var(--blue);font-size:13px;font-weight:700}
.bh-article-detail__back:hover{text-decoration:underline}
.bh-article-detail h1{margin:17px 0 20px}
.bh-article-detail__lead{font-size:18px;line-height:1.75;color:#5d6b88}
.bh-article-detail__image{max-width:1050px;margin:44px auto 58px;border-radius:20px;overflow:hidden;box-shadow:0 24px 55px #293d7614}
.bh-article-detail__image img{display:block;width:100%;height:auto}
.bh-article-detail__body{color:#26334e;font-size:16px;line-height:1.85}
.bh-article-detail__body p{color:#4c5a73}
.bh-article-detail__body .public-article-content__block+ .public-article-content__block{margin-top:26px}
.bh-article-detail__body h2{margin:44px 0 14px;font-size:clamp(25px,3vw,33px);line-height:1.25;letter-spacing:-.04em}
.bh-article-detail__body h3{margin:32px 0 12px;font-size:24px;letter-spacing:-.03em}
.bh-article-detail__body a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.bh-article-detail__body ul,.bh-article-detail__body ol{padding-left:25px}
.bh-article-detail__body li+li{margin-top:9px}
.bh-article-detail__body img{max-width:100%;height:auto}
.bh-article-detail__footer{margin-top:55px;padding-top:28px;border-top:1px solid #e0e6f3}
.besthostings-articles .header-compare{white-space:nowrap}
@media(max-width:1000px){.bh-articles-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.bh-articles-hero{padding:60px 0}.bh-articles-section{padding:42px 0 70px}.bh-articles-grid{grid-template-columns:1fr}.bh-article-detail{padding:35px 0 75px}.bh-article-detail__back{margin-bottom:33px}.bh-article-detail__image{margin:32px -16px 40px;border-radius:0}.bh-article-detail__body{font-size:16px}.besthostings-articles .header-compare{display:none}}
@media(max-width:420px) {
  .container {
    width:calc(100% - 32px)
  }
  .header-inner {
    gap:6px
  }
  .logo {
    font-size:16px
  }
  .logo-symbol {
    width:27px;
    height:30px
  }
  .logo-domain {
    font-size:11px
  }
  .header-actions {
    gap:3px
  }
  .header-compare {
    font-size:9px;
    padding:8px;
    gap:5px;
    min-height:40px
  }
  .header-actions>.favorites-open {
    width:40px
  }
  .mobile-menu {
    width:40px
  }
  .hero h1 {
    font-size:35px;
    letter-spacing:-1.55px;
    line-height:1.18
  }
  .hero .eyebrow {
    font-size:7px;
    letter-spacing:1.35px
  }
  .hero-description {
    font-size:12px
  }
  .hero-tabs .category-tab {
    font-size:10px;
    gap:5px;
    padding-inline:4px
  }
  .hero-tabs .category-tab .icon {
    width:13px;
    height:13px
  }
  .search-field input {
    font-size:10px
  }
  .search-field .button {
    font-size:10px;
    padding:10px
  }
  .hero-filters {
    gap:4px
  }
  .compact-select select {
    font-size:9px;
    max-width:119px
  }
  .hero-filters .text-button {
    font-size:9px;
    gap:4px
  }
  .hero-filters .text-button .icon {
    width:12px;
    height:12px
  }
  .hero-microcopy {
    font-size:8px
  }
  .visual-label {
    font-size:7px;
    letter-spacing:1.3px
  }
  .host-card {
    width:212px;
    left:calc(50% - 106px);
    padding:19px 18px;
    min-height:304px
  }
  .host-card[data-position="left"] {
    transform:translateX(-94px) translateY(25px) rotateY(17deg) rotateZ(-7deg) scale(.78)
  }
  .host-card[data-position="right"] {
    transform:translateX(94px) translateY(25px) rotateY(-17deg) rotateZ(7deg) scale(.78)
  }
  .host-card .wordmark {
    font-size:18px
  }
  .carousel {
    height:425px
  }
  .floating-compare {
    width:279px
  }
  .providers-strip {
    margin-top:24px
  }
  .provider-logos {
    gap:20px 12px
  }
  .provider-logos .wordmark {
    font-size:13px
  }
  .provider-logos .brand-mark {
    font-size:16px
  }
  .provider-logos .brand-siteground .brand-mark {
    width:16px;
    height:16px;
    font-size:13px
  }
  .section-heading h2,h2 {
    font-size:23px
  }
  .section-heading .eyebrow {
    font-size:7px
  }
  .results-toolbar {
    padding:12px 10px 9px;
    gap:5px
  }
  .table-tabs .category-tab {
    font-size:9px;
    padding:7px 8px
  }
  .filter-toggle {
    font-size:9px;
    padding:6px 8px
  }
  .table-tabs {
    gap:2px
  }
  .results-meta {
    font-size:8px;
    padding-inline:12px
  }
  .sort-label select {
    font-size:8px;
    max-width:117px
  }
  .steps {
    gap:13px
  }
  .step h3 {
    font-size:10px
  }
  .step p {
    font-size:9px
  }
  .step-number {
    margin-bottom:12px
  }
  .closing-card {
    padding:27px 20px
  }
  .closing-card h2 {
    font-size:21px
  }
  .tray-inner {
    gap:7px;
    padding:11px
  }
  .tray-copy span {
    max-width:150px
  }
  .tray-copy strong {
    font-size:10px
  }
  .tray-actions {
    gap:8px
  }
  .tray-actions .text-button {
    font-size:8px
  }
  .tray-actions .button {
    font-size:9px
  }
  .modal-body {
    padding:17px
  }
  .modal-header {
    padding:18px 17px 16px
  }
  .modal-header h2 {
    font-size:19px
  }
  .modal-price {
    font-size:20px
  }
  .modal-plan-top .wordmark {
    font-size:18px
  }
  .modal-plan-top .plan-category {
    font-size:8px
  }
  .favorite-item .detail-button {
    font-size:9px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important
  }
  .host-card {
    will-change:auto
  }
}
@media print {
  .header,.hero,.providers-strip,.comparison-aside,.how-section,.guides-section,.faq-section,.closing-section,.footer,.comparison-tray,.toast-region,.results-toolbar,.advanced-filters,.modal-close,.modal-actions,.modal-end-actions,.table-actions,.main-nav {
    display:none!important
  }
  body {
    background:white
  }
  .comparison-section {
    padding:0
  }
  .container {
    width:100%
  }
  .comparison-layout {
    display:block
  }
  .results-panel {
    border:0
  }
  .hosting-table {
    font-size:10px
  }
  .hosting-table th,.hosting-table td {
    padding:8px
  }
  .hosting-table th:first-child,.hosting-table td:first-child {
    display:none
  }
  body.modal-open main {
    display:none
  }
  #content-modal[open] {
    position:static;
    max-height:none;
    width:100%;
    overflow:visible;
    box-shadow:none;
    border:0
  }
  .modal-header {
    position:static
  }
  .compare-table-wrap {
    overflow:visible
  }
  .compare-table th,.compare-table td {
    min-width:0
  }
  .compare-table th:first-child,.compare-table td:first-child {
    position:static
  }
}
/* Fine UI details */
.detail-button .icon {
  width:10px;
  height:10px;
  margin-left:3px;
  vertical-align:-1px;
  stroke-width:1.9
}
.reading-content code {
  background:#f0f3fa;
  border-radius:4px;
  padding:2px 4px;
  font-size:.87em;
  overflow-wrap:anywhere
}
.guide-card:focus-visible {
  outline-offset:5px
}
.table-scroll:focus-visible {
  outline-offset:-3px
}
.carousel-cards {
  user-select:none
}
.hosting-table input[type=checkbox] {
  outline-offset:4px
}
/* Anchor off-screen labels inside their scroll regions, not the page viewport. */
.table-scroll,.compare-table-wrap {
  position:relative
}
.table-scroll-hint {
  display:none
}
.modal-notification {
  position:sticky;
  bottom:14px;
  margin:0 24px 14px;
  z-index:10;
  pointer-events:none
}
.modal-notification:empty {
  display:none
}
.modal-notification .toast {
  box-shadow:0 6px 20px #21385818
}
@media(max-width:360px) {
  .header .logo > span {
    display:none
  }
  .header .logo::after {
    content:'BH.eu';
    font-size:14px;
    letter-spacing:-.04em
  }
  .header-compare {
    min-width:40px
  }
  .header-compare span:not(.compare-count) {
    display:none
  }
}
@media(max-width:760px) {
  .table-scroll-hint {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:8px;
    color:#8e9bb1;
    padding:0 14px 11px
  }
  .table-scroll-hint .icon {
    width:11px;
    height:11px
  }
  .modal-notification {
    margin:0 17px 14px
  }
}