/* service-hub.css — Family A: homepage, service hub pages, domain-names hub, legal/[slug] */
/* Extracted from th- prefix FONT_STYLE blocks common across these pages */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800;900&family=DM+Sans:wght@400;500;600&display=swap');

/* Pricing tabs (homepage only) */
.th-tab-strip { display:flex; align-items:center; gap:.5rem; }
.th-tab-btn {
  padding: .5rem 1.1rem;
  border-radius: 8px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: .82rem;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  background: transparent;
  color: #6b7280;
  transition: all .15s ease;
}
.th-tab-btn:hover  { color: #0d1a35; background: #F0F0EB; }
.th-tab-btn.active {
  background: #fff;
  color: #0d1a35;
  border-color: #e5e7eb;
  box-shadow: 0 1px 6px rgba(0,0,0,.08);
}
.th-tab-panel { display: none; }
.th-tab-panel.active { display: block; }

/* Hero bullets grid */
.th-hero-bullets { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
@media (max-width: 640px) { .th-hero-bullets { grid-template-columns: repeat(2, 1fr); } }

/* Trust grid */
.th-trust-grid { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; }

/* Plan card grid */
.th-plans-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .th-plans-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .th-plans-grid { grid-template-columns: 1fr; } }

/* Compare table */
.th-compare-table { width: 100%; border-collapse: collapse; }
.th-compare-table th,
.th-compare-table td { padding: .65rem .75rem; border: 1px solid #e5e7eb; font-size: .875rem; }
.th-compare-table thead th { background: #F0F0EB; font-weight: 700; }

/* Fade-up animations */
@keyframes th-fadeup  { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@keyframes th-fadein  { from{opacity:0} to{opacity:1} }
@keyframes th-float   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes th-tslide  { from{opacity:0;transform:translateX(18px)} to{opacity:1;transform:translateX(0)} }
@keyframes th-blink   { 0%,100%{opacity:1} 50%{opacity:.3} }

.th-fu1 { opacity:0; animation: th-fadeup .55s cubic-bezier(.22,1,.36,1) .05s both; }
.th-fu2 { opacity:0; animation: th-fadeup .55s cubic-bezier(.22,1,.36,1) .15s both; }
.th-fu3 { opacity:0; animation: th-fadeup .55s cubic-bezier(.22,1,.36,1) .25s both; }
.th-fu4 { opacity:0; animation: th-fadeup .55s cubic-bezier(.22,1,.36,1) .35s both; }
.th-fu5 { opacity:0; animation: th-fadeup .55s cubic-bezier(.22,1,.36,1) .45s both; }

@media (prefers-reduced-motion: reduce) {
  .th-fu1, .th-fu2, .th-fu3, .th-fu4, .th-fu5 {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Domain search */
.th-domain-form { display:flex; max-width:600px; margin:0 auto; gap:0; }
.th-domain-input {
  flex: 1;
  padding: .875rem 1rem;
  border: 2px solid #e5e7eb;
  border-right: none;
  border-radius: 10px 0 0 10px;
  font-size: 1rem;
  font-family: 'DM Sans', sans-serif;
  outline: none;
  transition: border-color .2s;
}
.th-domain-input:focus { border-color: #4285F4; }
.th-domain-btn {
  padding: .875rem 1.5rem;
  background: #FF6E00;
  color: #fff;
  border: none;
  border-radius: 0 10px 10px 0;
  font-weight: 700;
  font-size: 1rem;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s;
}
.th-domain-btn:hover { background: #e55e00; }
.th-tld-strip { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .75rem; }
.th-tld-pill {
  padding: .3rem .75rem;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  color: #1f2937;
  transition: border-color .15s, color .15s;
}
.th-tld-pill:hover, .th-tld-pill.selected { border-color: #4285F4; color: #4285F4; }

/* Responsive tab strip */
@media (max-width: 640px) {
  .th-tab-strip { gap: .2rem !important; }
  .th-tab-btn   { padding: .4rem .65rem !important; font-size: .75rem !important; }
}