/*
 * HostStack — 2026 design system (dark shell + restrained sky/indigo accents).
 * Covers: header, promo bar, nav, dropdowns, mobile drawer, footer, cookies, mobile CTA.
 */
:root {
  --hs-brand: #38bdf8;
  --hs-brand-dark: #0284c7;
  --hs-brand-soft: rgba(56, 189, 248, 0.12);
  --hs-brand-border: rgba(56, 189, 248, 0.35);
  --hs-ink: #e8f4ff;
  --hs-page-bg: #020913;
  --hs-radius-btn: .625rem;
  --hs-shadow-nav: 0 1px 0 rgba(56, 189, 248, 0.08), 0 8px 28px -10px rgba(0, 0, 0, 0.45);
  --hs-promo-grad: linear-gradient(90deg, #031a2c 0%, #062a44 45%, #031a2c 100%);
}

html {
  font-family: "DM Sans", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Accessibility --- */
.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;
}

/* --- SVG sizing --- */
#hs-site-header.site-header svg.hs-nav-chevron   { display: inline-block; vertical-align: middle; flex-shrink: 0; width: .875rem;  height: .875rem;  }
#hs-site-header.site-header svg.hs-nav-top-icon  { display: inline-block; vertical-align: middle; flex-shrink: 0; width: 1.125rem; height: 1.125rem; }
#hs-site-header.site-header svg.hs-nav-dd-icon   { display: inline-block; vertical-align: middle; flex-shrink: 0; width: 1.125rem; height: 1.125rem; }

/* --- Site header shell --- */
#hs-site-header.site-header,
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #0f172a;
  border-bottom: 1px solid rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 2px 24px rgba(0,0,0,.35);
}

/* --- Light header variant --- */
#hs-site-header.hs-header-light,
.hs-header-light {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: var(--hs-shadow-nav);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* --- Promo bar --- */
.site-promo-dismiss {
  position: absolute; top: 50%; right: 0.35rem; transform: translateY(-50%);
  width: 2rem; height: 2rem; border: none; border-radius: 999px; cursor: pointer; flex-shrink: 0;
  background: rgba(255,255,255,.08); color: #e2e8f0; font-size: 1.25rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.site-promo-dismiss:hover { background: rgba(255,255,255,.16); color: #fff; }
@media (min-width: 640px) { .site-promo-dismiss { right: 0.75rem; } }
.site-promo {
  background: var(--hs-promo-grad);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 6px 28px -18px rgba(24,12,54,.55), 0 1px 0 rgba(255,255,255,.04) inset;
}
.hs-header-light .site-promo {
  background: var(--hs-promo-grad);
}
.site-promo-inner {
  position: relative;
  max-width: 72rem; margin: 0 auto; padding: .42rem 2.75rem .42rem 1rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  box-sizing: border-box;
}
@media (min-width:640px) { .site-promo-inner { flex-direction: row; flex-wrap: wrap; padding-left: 1.5rem; padding-right: 3rem; gap: .45rem .7rem; } }
.site-promo-text { max-width: 48rem; margin: 0; text-align: center; font-size: .8rem; font-weight: 500; line-height: 1.4; color: #e9e7f4; letter-spacing: .01em; }
@media (min-width:640px) { .site-promo-text { text-align: left; font-size: .8625rem; } }
.site-promo-text strong { color: #e9d8fd; font-weight: 600; }
.site-promo-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .85em; font-weight: 600; letter-spacing: .04em;
  padding: .1rem .4rem; border-radius: .3rem;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); color: #faf5ff;
  user-select: all;
}
.site-promo-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; flex-shrink: 0; }
.site-btn-promo-ghost {
  color: #e0e7ff; border: 1px solid rgba(224,231,255,.35); background: rgba(255,255,255,.1);
  border-radius: .5rem; padding: .35rem .75rem; font-size: .8rem; font-weight: 600; cursor: pointer;
  min-height: 2rem; transition: background .15s, border-color .15s;
}
@media (min-width:640px) { .site-btn-promo-ghost { font-size: .875rem; } }
.site-btn-promo-ghost:hover { background: rgba(255,255,255,.18); border-color: rgba(224,231,255,.5); }
.site-btn-promo-solid {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2rem; padding: .35rem .875rem; border-radius: var(--hs-radius-btn);
  background: #ffffff; color: var(--hs-brand);
  font-size: .8rem; font-weight: 600; text-decoration: none;
  box-shadow: 0 3px 16px rgba(15,23,42,.12);
  transition: background .15s, box-shadow .15s;
}
@media (min-width:640px) { .site-btn-promo-solid { font-size: .875rem; } }
.site-btn-promo-solid:hover { background: rgba(56,189,248,.12); box-shadow: 0 2px 14px rgba(0,0,0,.14); transform: none; }
.site-btn-promo-ghost:focus-visible, .site-btn-promo-solid:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 2px; }

/* --- Main nav row --- */
.site-nav-row {
  max-width: 72rem; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; min-height: 4rem; padding: 0 1rem; box-sizing: border-box;
}
@media (min-width:640px)  { .site-nav-row { gap: 1rem; padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width:768px)  { .site-nav-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 1rem 1.5rem; overflow: visible; } }
@media (min-width:1024px) { .site-nav-row { gap: 1.25rem 1.5rem; } }

/* --- Logo --- */
.site-logo { display: flex; align-items: center; min-height: 2.75rem; flex-shrink: 1; text-decoration: none; border-radius: .5rem; }
.site-logo img { display: block; height: 2.25rem; width: auto; max-width: 100%; object-fit: contain; object-position: left; }
@media (min-width:640px) { .site-logo img { height: 2.5rem; } }

/* Two-logo swap: show dark-text logo on light header, white-text logo on dark header.
   Use .site-logo img.class selector to beat the generic .site-logo img { display:block } rule above. */
.site-logo img.hs-logo-dark-mode  { display: none; }
.site-logo img.hs-logo-light-mode { display: block; }

/* --- Logo swap (dark header) --- */
#hs-site-header.site-header:not(.hs-header-light) .site-logo img.hs-logo-light-mode { display: none; }
#hs-site-header.site-header:not(.hs-header-light) .site-logo img.hs-logo-dark-mode  { display: block; filter: brightness(0) invert(1); }

/* --- Desktop nav --- */
.site-nav-main {
  display: none; align-items: center; justify-content: center;
  min-width: 0; max-width: 100%; gap: .125rem; overflow: visible;
}
@media (min-width:768px) { .site-nav-main { display: flex; flex-wrap: nowrap; white-space: nowrap; width: 100%; grid-column: 2; justify-self: center; } }

.site-nav-link {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2.5rem; padding: .5rem .6rem; border-radius: .625rem;
  font-size: .875rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: color .15s, background .15s;
}
/* Dark header nav */
#hs-site-header.site-header:not(.hs-header-light) .site-nav-link { color: #94a3b8; }
#hs-site-header.site-header:not(.hs-header-light) .site-nav-link:hover { color: #f1f5f9; background: rgba(255,255,255,.07); }
/* Light header nav */
.hs-header-light .site-nav-link { color: #374151; }
.hs-header-light .site-nav-link:hover,
.hs-header-light .site-nav-link:focus-visible { color: var(--hs-brand); background: var(--hs-brand-soft); }
.hs-header-light .hs-nav-top-icon { color: #6b7280; }
.hs-header-light .site-nav-link:hover .hs-nav-top-icon,
.hs-header-light .site-nav-link:focus-visible .hs-nav-top-icon { color: var(--hs-brand); }

@media (min-width:768px) and (max-width:1199px) {
  .site-nav-link, .site-dropdown-trigger { padding-left: .45rem; padding-right: .45rem; font-size: .8125rem; }
}

/* --- Dropdown --- */
.site-dropdown { position: relative; }
.site-dropdown-trigger {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2.5rem; padding: .5rem .6rem; border-radius: .625rem;
  font-size: .875rem; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color .15s, background .15s;
}
#hs-site-header.site-header:not(.hs-header-light) .site-dropdown-trigger { color: #94a3b8; }
#hs-site-header.site-header:not(.hs-header-light) .site-dropdown-trigger:hover { color: #f1f5f9; background: rgba(255,255,255,.07); }
.hs-header-light .site-dropdown-trigger { color: #374151; }
.hs-header-light .site-dropdown-trigger:hover { color: var(--hs-brand); background: var(--hs-brand-soft); }

.site-dropdown-chevron { display: inline-flex; align-items: center; transition: transform .2s ease; }
.site-dropdown:hover .site-dropdown-chevron,
.site-dropdown:focus-within .site-dropdown-chevron { transform: rotate(180deg); }

/* --- Dropdown panel ---
   Panel starts at top:100% (no gap) so the hover area is continuous.
   Visual spacing is created by padding-top on the panel itself.
   Styles (bg, border, shadow) live on .site-dropdown-box so the transparent
   padding area doesn't break the hover chain.
*/

/* --- Section --- */
.site-dropdown-panel {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-6px);
  z-index: 100; min-width: 14rem;
  padding-top: .5rem;            /* bridges the visual gap without hover dead-zone */
  background: transparent;
  border: none; box-shadow: none;
  /* hidden by default with visibility so transition works */
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.site-dropdown:hover .site-dropdown-panel,
.site-dropdown:focus-within .site-dropdown-panel {
  visibility: visible; opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear 0s;
}
/* The inner box carries all visual styles */
.site-dropdown-box {
  display: flex; flex-direction: column; gap: .125rem;
  background: #ffffff; border: 1px solid #e5e7eb;
  border-radius: .875rem; padding: .5rem;
  box-shadow: 0 12px 40px rgba(15,23,42,.08), 0 2px 12px rgba(15,23,42,.06);
}
.site-dropdown-link {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .75rem; border-radius: .625rem;
  font-size: .875rem; font-weight: 500; color: #374151; text-decoration: none;
  transition: background .15s, color .15s;
}
.site-dropdown-link:hover,
.site-dropdown-link:focus-visible { background: var(--hs-brand-soft); color: var(--hs-brand); }
.hs-nav-dd-icon { color: var(--hs-brand); }
.site-dropdown-link--soon { opacity: .5; cursor: not-allowed; pointer-events: none; }
.hs-badge-coming-soon {
  font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: #f3f4f6; color: #9ca3af; border-radius: 4px; padding: .1em .5em; margin-left: auto;
}

/* --- Nav CTA --- */
.site-nav-cta { display: flex; align-items: center; gap: .75rem; }
.site-link-client { font-size: .875rem; font-weight: 600; text-decoration: none; padding: .5rem .75rem; border-radius: .625rem; transition: color .15s, background .15s; display: none; }
@media (min-width:768px) { .site-link-client { display: inline-flex; align-items: center; } }
#hs-site-header.site-header:not(.hs-header-light) .site-link-client { color: #94a3b8; }
#hs-site-header.site-header:not(.hs-header-light) .site-link-client:hover { color: #f1f5f9; background: rgba(255,255,255,.07); }
.hs-header-light .site-link-client { color: #374151; }
.hs-header-light .site-link-client:hover { color: var(--hs-brand); background: var(--hs-brand-soft); }

.site-btn-getstarted {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.375rem; padding: 0 1.125rem; border-radius: var(--hs-radius-btn);
  background: var(--hs-brand);
  color: #ffffff; font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 2px 12px rgba(56,189,248,.28);
  transition: opacity .15s, box-shadow .15s, background .15s;
}
.site-btn-getstarted:hover { opacity: .98; transform: none; box-shadow: 0 2px 16px rgba(56,189,248,.38); background: var(--hs-brand-dark); }

.site-menu-btn {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: .625rem; border: 0; background: transparent; cursor: pointer;
  transition: background .15s;
}
@media (min-width:768px) { .site-menu-btn { display: none; } }
#hs-site-header.site-header:not(.hs-header-light) .site-menu-btn { color: #94a3b8; }
#hs-site-header.site-header:not(.hs-header-light) .site-menu-btn:hover { background: rgba(255,255,255,.07); color: #f1f5f9; }
.hs-header-light .site-menu-btn { color: #374151; border: 1.5px solid #e5e7eb; }
.hs-header-light .site-menu-btn:hover { background: #f3f4f6; }
.site-menu-btn .hs-icon-close.hidden { display: none; }
.site-menu-btn[aria-expanded="true"] .hs-icon-open { display: none; }
.site-menu-btn[aria-expanded="true"] .hs-icon-close { display: block; }

.site-header-accent {
  height: 2px;
  background: linear-gradient(90deg, #0284c7 0%, #38bdf8 50%, #7dd3fc 100%);
  background-size: 100% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .site-header-accent {
    background-size: 200% 100%;
    animation: hs-accent-slide 24s linear infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header-accent { animation: none !important; }
}
@keyframes hs-accent-slide { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

/* --- Mobile drawer --- */
.hs-nav-drawer-overlay {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(15,23,42,.45); backdrop-filter: blur(4px);
  top: calc(7.5rem + env(safe-area-inset-top,0px));
}
.hs-nav-drawer-overlay.hidden { display: none; }

.hs-nav-drawer-panel {
  position: fixed; top: calc(7.5rem + env(safe-area-inset-top,0px)); right: 0; z-index: 45;
  width: min(24rem, 100vw);
  max-height: calc(100dvh - 7.5rem - env(safe-area-inset-top,0px));
  background: #ffffff; overflow-y: auto; overflow-x: hidden;
  box-shadow: -4px 0 28px rgba(15,23,42,.08);
  border-left: 1px solid #f1f5f9;
  border-radius: 0 0 0 1.25rem;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  scrollbar-width: thin; scrollbar-color: #e2e8f0 transparent;
}
.hs-nav-drawer-panel[hidden] { display: none; }

#hs-site-header.hs-header-light .hs-nav-drawer-overlay,
#hs-site-header.hs-header-light .hs-nav-drawer-panel { top: calc(4.5rem + env(safe-area-inset-top,0px)); }
#hs-site-header.hs-header-light .hs-nav-drawer-panel { max-height: calc(100dvh - 4.5rem - env(safe-area-inset-top,0px)); }

.site-drawer-nav { padding: 1rem 1rem 1.5rem; display: flex; flex-direction: column; gap: .375rem; }

.site-drawer-link {
  display: flex; align-items: center; gap: .875rem; padding: .875rem 1rem; border-radius: .875rem;
  font-size: .9375rem; font-weight: 600; color: #1e293b; text-decoration: none;
  transition: background .15s, color .15s;
  min-height: 3rem;
}
.site-drawer-link:hover,
.site-drawer-link:focus-visible { background: var(--hs-brand-soft); color: var(--hs-brand); }
.site-drawer-link svg { color: #64748b; flex-shrink: 0; width: 1.25rem; height: 1.25rem; }
.site-drawer-link:hover svg,
.site-drawer-link:focus-visible svg { color: var(--hs-brand); }

.site-drawer-details { border-radius: .875rem; }
.site-drawer-details > summary {
  display: flex; align-items: center; gap: .875rem; padding: .875rem 1rem; border-radius: .875rem;
  font-size: .9375rem; font-weight: 600; color: #1e293b; cursor: pointer; list-style: none;
  transition: background .15s, color .15s; min-height: 3rem;
}
.site-drawer-details > summary::-webkit-details-marker { display: none; }
.site-drawer-details > summary:hover,
.site-drawer-details > summary:focus-visible { background: var(--hs-brand-soft); color: var(--hs-brand); }
.site-drawer-details[open] > summary { background: var(--hs-brand-soft); color: var(--hs-brand); }
.site-drawer-details[open] > summary svg { color: var(--hs-brand); }
.site-drawer-details > summary svg { color: #64748b; flex-shrink: 0; width: 1.25rem; height: 1.25rem; }

.site-drawer-sub {
  padding: .25rem .5rem .75rem 3rem; display: flex; flex-direction: column; gap: .25rem;
  border-left: 2px solid var(--hs-brand-border); margin-left: 1.625rem; margin-right: .5rem; margin-bottom: .25rem;
  padding-left: 1rem;
}
.site-drawer-sublink {
  display: flex; align-items: center; padding: .625rem .75rem; border-radius: .625rem; min-height: 2.75rem;
  font-size: .875rem; font-weight: 600; color: #475569; text-decoration: none;
  transition: background .15s, color .15s;
}
.site-drawer-sublink:hover,
.site-drawer-sublink:focus-visible { background: var(--hs-brand-soft); color: var(--hs-brand); }
.site-drawer-sublink--soon { opacity: .45; pointer-events: none; font-style: italic; }

/* Divider before CTA section */
.site-drawer-nav::before { content: none; }
.site-drawer-cta-group {
  margin-top: .5rem; padding-top: .75rem; border-top: 1px solid #f1f5f9;
  display: flex; flex-direction: column; gap: .375rem;
}

.site-drawer-cta {
  display: flex; align-items: center; justify-content: center;
  padding: .9375rem 1rem; border-radius: var(--hs-radius-btn);
  background: var(--hs-brand); color: #ffffff;
  font-size: .9375rem; font-weight: 700; text-decoration: none;
  box-shadow: 0 2px 12px rgba(56,189,248,.3); letter-spacing: -.01em;
  transition: opacity .15s, background .15s; min-height: 3rem;
}
.site-drawer-cta:hover { background: var(--hs-brand-dark); }

.site-drawer-muted {
  display: flex; align-items: center; padding: .625rem 1rem; border-radius: .75rem; min-height: 2.75rem;
  font-size: .9375rem; font-weight: 500; color: #64748b; text-decoration: none;
  transition: color .15s, background .15s;
}
.site-drawer-muted:hover,
.site-drawer-muted:focus-visible { color: #374151; background: #f8fafc; }

.site-drawer-client {
  display: flex; align-items: center; justify-content: center;
  padding: .875rem 1rem; border-radius: .875rem; min-height: 3rem;
  border: 2px solid #e2e8f0; font-size: .9375rem; font-weight: 700; color: #334155;
  text-decoration: none; transition: background .15s, border-color .15s;
}
.site-drawer-client:hover,
.site-drawer-client:focus-visible { background: #f8fafc; border-color: #cbd5e1; }

/* --- Footer --- */
.site-footer {
  background-color: #0f172a;
  color: #94a3b8;
}
.site-footer-inner { max-width: 72rem; margin: 0 auto; padding: 3rem 1.5rem 0; }
.site-footer-grid {
  display: grid; gap: 2rem 2rem;
  grid-template-columns: minmax(0, 1fr);
}
.site-footer-grid > * { min-width: 0; }
@media (min-width:640px)  { .site-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width:1024px) { .site-footer-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); } }

.site-footer-wordmark { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .75rem; }
.site-footer-wordmark .w { color: #f1f5f9; }
.site-footer-wordmark .o { color: #a78bfa; }
.site-footer-note { font-size: .8125rem; line-height: 1.65; color: #94a3b8; margin: 0; max-width: 20rem; }

.site-footer-col-title {
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: #f1f5f9; margin: 0 0 .875rem;
}
.site-footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.site-footer-list a { font-size: .875rem; color: #94a3b8; text-decoration: none; transition: color .15s; }
.site-footer-list a:hover { color: #f1f5f9; }

.site-footer-contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .875rem; }
.site-footer-contact-row { display: flex; gap: .625rem; align-items: flex-start; font-size: .875rem; color: #94a3b8; }
.site-footer-contact-row svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: .125rem; color: #60a5fa; }
.site-footer-contact-row a { color: #60a5fa; text-decoration: none; transition: color .15s; }
.site-footer-contact-row a:hover { color: #93c5fd; text-decoration: none; }

.site-footer-meta {
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 2.25rem; padding: 1.5rem 0 1.75rem; text-align: center;
}
.site-footer-social { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.125rem; font-size: .875rem; }
.site-footer-social a,
.site-footer-social-link { color: #94a3b8; text-decoration: none; transition: color .15s; }
.site-footer-social a:hover,
.site-footer-social-link:hover { color: #f1f5f9; }
.site-footer-social-sep { color: rgba(255,255,255,.2); }
.site-footer-bottom { margin: .875rem 0 0; font-size: .8125rem; color: #64748b; }
.site-footer-note-muted { font-size: .75rem; color: #64748b; margin: 0; line-height: 1.6; }

/* --- Section --- */
   COOKIE BANNER
/* --- Section --- */
#hs-cookie { 
  background: rgba(15,23,42,.97) !important;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 -4px 40px rgba(0,0,0,.3);
}

/* --- Section --- */
   MOBILE BOTTOM CTA
/* --- Section --- */
[data-mobile-cta] { background: rgba(15,23,42,.97) !important; border-top: 1px solid rgba(255,255,255,.08); }
[data-mobile-cta] .text-violet-300 { color: #c4b5fd !important; }

/* --- Light conversion header --- */
#hs-site-header.hs-header-light .hs-nav-top-icon { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
#hs-site-header.hs-header-light .hs-nav-chevron { width: .875rem; height: .875rem; }
#hs-site-header.hs-header-light .hs-nav-dd-icon { width: 1.125rem; height: 1.125rem; flex-shrink: 0; color: var(--hs-brand); }
#hs-site-header.hs-header-light .site-header-accent { display: block; }

/* --- Promo overrides (conversion) --- */
.hs-in-promo-bar { background: var(--hs-promo-grad) !important; border-color: transparent !important; }
.hs-in-promo-bar .site-promo-text { color: #e9e7f4 !important; }
.hs-in-promo-bar .site-promo-text strong { color: #e9d8fd !important; }

/* --- Section --- */
   WHY-TRUST & SHARED COMPONENTS
/* --- Section --- */
.hs-mob-sublink { display: flex; }
.hs-pb-mobile-ui { padding-bottom: calc(5.25rem + env(safe-area-inset-bottom,0px)); }
@media (min-width:640px) { .hs-pb-mobile-ui { padding-bottom: 0; } }

/* --- Plan cards --- */
.hs-plan-card {
  background: #ffffff; border: 1.5px solid #e5e7eb; border-radius: 1rem;
  padding: 1.75rem; display: flex; flex-direction: column;
  box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 4px 14px rgba(15,23,42,.06);
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.hs-plan-card:hover { box-shadow: 0 4px 22px rgba(15,23,42,.09), 0 1px 3px rgba(56,189,248,.08); border-color: var(--hs-brand-border); transform: translateY(-1px); }
.hs-plan-card--popular {
  border-color: var(--hs-brand); border-width: 2px;
  box-shadow: 0 4px 20px rgba(56,189,248,.14);
  position: relative;
}
.hs-plan-card--popular::before {
  content: "Most Popular"; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(90deg, #0284c7, #38bdf8); color: #020913;
  font-size: .6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  padding: .25rem 1rem; border-radius: 0 0 .5rem .5rem;
  white-space: nowrap;
}

/* --- Section --- */
   COMPARISON TABLE
/* --- Section --- */
.sales-compare { width: 100%; border-collapse: collapse; text-align: left; font-size: .875rem; }
.sales-compare thead th { background: #f8fafc; padding: .875rem 1rem; font-weight: 700; border-bottom: 2px solid #e5e7eb; }
.sales-compare thead th:first-child { border-radius: .75rem 0 0 0; }
.sales-compare thead th:last-child { border-radius: 0 .75rem 0 0; }
.sales-compare thead th:nth-child(2) { color: var(--hs-brand); background: var(--hs-brand-soft); }
.sales-compare tbody td { padding: .875rem 1rem; border-bottom: 1px solid #f1f5f9; color: #374151; }
.sales-compare tbody tr:last-child td { border-bottom: 0; }
.sales-compare tbody tr:hover td { background: #f8fafc; }
.sales-compare tbody td:nth-child(2) { background: var(--hs-brand-soft); font-weight: 600; color: #433089; }

/* --- Section --- */
   FEATURED LINK (why-choose list)
/* --- Section --- */
.site-why-item {
  display: flex; gap: 1rem; align-items: flex-start;
  background: #fff; border: 1px solid #e5e7eb; border-radius: .875rem;
  padding: 1.25rem 1.5rem; transition: box-shadow .2s, border-color .2s;
}
.site-why-item:hover { box-shadow: 0 4px 20px rgba(56,189,248,.12); border-color: var(--hs-brand-border); }
.site-why-icon {
  flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: .75rem;
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
}

/* --- Section --- */
   STORE / BILLING PANEL BUTTONS
/* --- Section --- */
.hs-store-btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .75rem 1.75rem; border-radius: var(--hs-radius-btn); background: linear-gradient(135deg,#38bdf8,#0284c7);
  color: #fff; font-weight: 600; font-size: .9375rem; text-decoration: none;
  box-shadow: 0 2px 12px rgba(56,189,248,.3); border: 0;
  transition: opacity .15s, box-shadow .15s;
}
.hs-store-btn-primary:hover { opacity: .96; box-shadow: 0 3px 16px rgba(56,189,248,.38); transform: none; }
.hs-store-btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .75rem 1.75rem; border-radius: var(--hs-radius-btn); background: #fff;
  color: var(--hs-brand); font-weight: 700; font-size: .9375rem; text-decoration: none;
  border: 2px solid var(--hs-brand); transition: background .15s, color .15s;
}
.hs-store-btn-outline:hover { background: var(--hs-brand-soft); }

/* --- Section --- */
   TRUST STRIP
/* --- Section --- */
.hs-trust-strip {
  background: #f8fafc; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb;
  padding: .875rem 0;
}
.hs-trust-strip-inner {
  max-width: 72rem; margin: 0 auto; padding: 0 1.5rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1.75rem;
}
.hs-trust-item { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; color: #374151; }
.hs-trust-item svg, .hs-trust-item span:first-child { color: #059669; flex-shrink: 0; }

/* --- Section --- */
   STAT NUMBERS
/* --- Section --- */
.hs-stat-number { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* --- Section --- */
   RESPONSIVE MEDIA
/* --- Section --- */
img, video, iframe, embed, object { max-width: 100%; }
.hs-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

/* --- Section --- */
   SAFE AREA / NOTCH
/* --- Section --- */
#hs-site-header { padding-top: env(safe-area-inset-top,0px); }
#hs-site-header .hs-header-logo { max-width: min(220px,52vw); }
@media (min-width:40rem) { #hs-site-header .hs-header-logo { max-width: none; } }

/* ═══════════════════════════════════════════════════════
   WINDOWS / PLESK PLAN CARD SYSTEM (hs-in-kh-*)
══════════════════════════════════════════════════════════ */
.hs-in-kh-card {
  position: relative;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: 0 2px 12px rgba(15,23,42,.06);
  transition: box-shadow .2s, transform .2s;
}
.hs-in-kh-card:hover { box-shadow: 0 8px 28px rgba(15,23,42,.1); transform: translateY(-2px); }
.hs-in-kh-card--popular {
  border-color: #4338ca !important;
  box-shadow: 0 8px 32px rgba(67,56,202,.18) !important;
  transform: translateY(-4px);
}
.hs-in-kh-card--popular::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #4338ca, #7c3aed);
  border-radius: 1.25rem 1.25rem 0 0;
}
.hs-in-kh-pop {
  display: inline-block;
  font-size: .6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; padding: .25rem .75rem; border-radius: 99px;
  margin-bottom: .75rem;
}
.hs-in-kh-priceblock__main {
  font-size: 2rem; font-weight: 900; color: #0f172a; line-height: 1;
}
.hs-in-kh-priceblock__sub {
  font-size: .75rem; color: #64748b; margin-top: .25rem;
}
.hs-in-kh-spec-h {
  font-size: .6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: #94a3b8;
}
.hs-in-kh-cta {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: .75rem 1rem; border-radius: .75rem;
  background: #f1f5f9; color: #1e293b;
  font-size: .875rem; font-weight: 700;
  text-decoration: none; transition: background .15s, color .15s;
}
.hs-in-kh-cta:hover { background: #e2e8f0; color: #0f172a; }
.hs-in-kh-card--popular .hs-in-kh-cta {
  background: linear-gradient(135deg, #4338ca, #7c3aed);
  color: #ffffff; box-shadow: 0 4px 14px rgba(67,56,202,.35);
}
.hs-in-kh-card--popular .hs-in-kh-cta:hover { opacity: .92; }

/* ═══════════════════════════════════════════════════════
   MISSING TAILWIND UTILITIES (not in compiled app.css)
══════════════════════════════════════════════════════════ */
.w-8  { width: 2rem !important; }
.w-9  { width: 2.25rem !important; }
.w-10 { width: 2.5rem !important; }
.w-11 { width: 2.75rem !important; }
.w-12 { width: 3rem !important; }
.w-14 { width: 3.5rem !important; }
.w-16 { width: 4rem !important; }
.w-20 { width: 5rem !important; }
.w-24 { width: 6rem !important; }
.w-28 { width: 7rem !important; }
.w-32 { width: 8rem !important; }
.h-8  { height: 2rem !important; }
.h-9  { height: 2.25rem !important; }
.h-10 { height: 2.5rem !important; }
.h-11 { height: 2.75rem !important; }
.h-14 { height: 3.5rem !important; }
.h-16 { height: 4rem !important; }
.h-20 { height: 5rem !important; }
.h-24 { height: 6rem !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.shrink-0 { flex-shrink: 0 !important; }
/* ═══════════════════════════════════════════════════════
   SITE PREFOOTER — used sitewide as a CTA before footer
   Classes: .site-prefooter, .site-prefooter-kicker,
            .site-prefooter-actions, .site-prefooter-foot,
            .site-pf-primary, .site-pf-outline, .site-pf-muted
══════════════════════════════════════════════════════════ */
.site-prefooter {
  background: linear-gradient(135deg, #020913 0%, #062a44 45%, #0284c7 100%);
  padding: 3rem 1.5rem 2.25rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.site-prefooter::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(56,189,248,.22), transparent);
  pointer-events: none;
}
.site-prefooter > * { position: relative; z-index: 1; }

.site-prefooter-kicker {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #93c5fd;
  margin: 0 0 .75rem;
  padding: .3rem 1rem;
  border-radius: 99px;
  background: rgba(147,197,253,.1);
  border: 1px solid rgba(147,197,253,.25);
}

.site-prefooter h3 {
  margin: 0 auto .25rem;
  max-width: 32rem;
  font-size: 1.625rem;
  font-weight: 800;
  color: #f1f5f9;
  line-height: 1.25;
  letter-spacing: -.02em;
}
@media (min-width: 640px) {
  .site-prefooter h3 { font-size: 2rem; }
}

.site-prefooter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin: 1.5rem 0 0;
}

.site-pf-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  padding: .75rem 1.75rem;
  border-radius: var(--hs-radius-btn);
  background: #ffffff;
  color: #38bdf8;
  font-size: .9375rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  transition: background .15s, box-shadow .15s;
}
.site-pf-primary:hover {
  background: #f5f3ff;
  box-shadow: 0 6px 24px rgba(0,0,0,.3);
}

.site-pf-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  padding: .75rem 1.5rem;
  border-radius: var(--hs-radius-btn);
  background: transparent;
  border: 2px solid rgba(255,255,255,.35);
  color: #f1f5f9;
  font-size: .9375rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.site-pf-outline:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.6);
}

.site-pf-muted {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  padding: .75rem 1rem;
  color: #93c5fd;
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  transition: color .15s;
}
.site-pf-muted:hover { color: #f1f5f9; }

.site-prefooter-foot {
  margin: 1.5rem auto 0;
  max-width: 44rem;
  font-size: .8rem;
  color: rgba(148,163,184,.7);
  line-height: 1.8;
}
.site-prefooter-foot a {
  color: rgba(148,163,184,.85);
  text-decoration: none;
  font-weight: 500;
  transition: color .15s;
}
.site-prefooter-foot a:hover { color: #f1f5f9; }

/* ═══════════════════════════════════════════════════════
   MISSING COMPONENT CLASSES — semantic hooks with base styles
   Defined here to eliminate "undefined class" console noise
   and ensure correct base behaviour across pages.
══════════════════════════════════════════════════════════ */

/* Billing term toggle — show/hide blocks (JS-controlled via .hidden) */
.hs-term-price,
.hs-term-cta { display: block; }
.hs-term-price.hidden,
.hs-term-cta.hidden { display: none; }

/* Pricing CTA button — semantic wrapper; visuals via hs-in-btn-* classes */
.hs-pricing-cta { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* Page container for city/pillar pages */
.hs-in-home { position: relative; }

/* Cloud/Windows hosting plan grid section */
.hs-in-cl-plans { position: relative; }

/* Windows hosting — price block container */
.hs-in-kh-priceblock { margin-top: .75rem; }

/* Windows hosting — plan features list wrapper */
.hs-in-plan-html { }
.hs-in-plan-html ul { margin: 0; padding-left: 1rem; }
.hs-in-plan-html li { font-size: .875rem; color: #475569; margin-bottom: .375rem; }

/* Header mobile drawer — alias; visual work done by .hs-nav-drawer-panel */
.hs-header-drawer { }

/* Navigation dropdown trigger — alias; visual work done by .site-dropdown-trigger */
.hs-top-dd-parent { }

/* Homepage section semantic hooks — layout via hs-in-band / hs-in-hero */
.sales-hero, .sales-features, .sales-perf,
.sales-faq, .sales-final-cta { position: relative; }

/* Cloud hosting guide section */
.hs-in-cl-guide { position: relative; }
.hs-in-cl-guide-card { position: relative; }
.hs-in-cl-guide-intro { position: relative; }
.hs-in-cl-sec { position: relative; }

/* Trust strip — visual work done by Tailwind classes on element */
.hs-in-trust-strip { position: relative; }

/* Offer / promo page hero band */
.hs-offer-hero-band { position: relative; }

/* Compare page pre-footer CTA aside — visual work done by Tailwind classes */
.hs-prefooter-cta { position: relative; }

/* Button helpers used on city/pillar pages */
.hs-in-btn-blue,
.hs-in-btn-wa { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* Feature card used in marketing tail section */
.hs-in-card-feature { position: relative; }
.hs-in-features { position: relative; }

/* Pillar page section helpers */
.hs-in-kat-hero { position: relative; }
.hs-in-kat-launch { position: relative; }
.hs-in-kat-why { position: relative; }

/* Homepage additional section hooks — layout via hs-in-band */
.sales-pricing, .sales-seo-bridge, .sales-services,
.sales-testimonials, .sales-why { position: relative; }
.sales-perf-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  min-width: 0;
}
.sales-perf-grid > * { min-width: 0; }

/* Offer page light canvas — layout via hs-in-conversion-wrap + Tailwind */
.hs-offer-light-canvas { position: relative; }

/* ── Stats band — homepage key numbers ──────────────────────────────────── */
.hs-stats-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.hs-stat-item {
  flex: 1 1 140px;
  max-width: 200px;
  text-align: center;
  padding: 1rem 1.25rem;
}

.hs-stat-sep {
  width: 1px;
  height: 3rem;
  background: #e5e7eb;
  flex-shrink: 0;
  align-self: center;
}

/* Hide separators when wrapping (they'd appear mid-row) */
@media (max-width: 639px) {
  .hs-stat-sep { display: none; }
  .hs-stat-item {
    flex: 1 1 45%;
    max-width: 50%;
    padding: .875rem .75rem;
    border-bottom: 1px solid #f1f5f9;
  }
  .hs-stat-item:last-child { border-bottom: none; }
}

.hs-stat-num {
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.hs-stat-label {
  font-size: .875rem;
  font-weight: 700;
  color: #1e293b;
  margin: .375rem 0 0;
}

.hs-stat-sub {
  font-size: .75rem;
  color: #94a3b8;
  margin: .1rem 0 0;
}

/* ═══════════════════════════════════════════════════════
   MOBILE TOUCH TARGETS & UX IMPROVEMENTS
   Ensures interactive elements meet WCAG 2.5.5 (44x44px)
══════════════════════════════════════════════════════════ */

/* Footer links: adequate tap height on mobile */
@media (max-width: 639px) {
  .site-footer-list a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
  }
  .site-footer-contact-row a {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
  }
  .site-footer-social a,
  .site-footer-social-link {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
}

/* Currency switcher: touch-friendly buttons + full-width on mobile */
.hs-cur-btn { min-height: 2.75rem; }
.hs-cur-btn .hs-flag-ico {
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
}
.hs-cur-btn--active .hs-flag-ico {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}
img.hs-flag-ico {
  display: inline-block;
  vertical-align: -0.15em;
}

@media (max-width: 639px) {
  .hs-cur-switcher {
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 0.75rem;
    width: 100%;
    box-sizing: border-box;
  }
  .hs-cur-btn { flex: 1 1 auto; justify-content: center; }
}

/* Duration select: 16px font prevents iOS zoom */
@media (max-width: 639px) {
  .hs-dur-select { min-height: 2.75rem; font-size: 1rem; }
}

/* Urgency bar: compact on very small screens */
@media (max-width: 479px) {
  .hs-urgency-bar { padding: 0.625rem 1rem; font-size: 0.75rem; }
  .hs-urgency-countdown { gap: 0.25rem; }
}

/* Drawer sub-links: adequate tap target */
.site-drawer-sublink {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}

/* Focus ring for keyboard / touch navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--hs-brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Long words / URLs must not overflow on mobile */
.hs-pg-card,
.hs-plan-card,
[data-hs-plan-card],
.hs-pg-billing,
.hs-pg-tag {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Inline code / pre blocks scroll horizontally instead of overflowing */
pre, code {
  overflow-x: auto;
  max-width: 100%;
}

/* Plan CTA: comfortable font size on mobile */
@media (max-width: 639px) {
  .hs-plan-card a[data-hs-track],
  [data-hs-plan-card] a[data-hs-track] {
    font-size: 1rem;
  }
}

/* Overflow-x-auto wrapper helper (also used by the fix script) */
.overflow-x-auto.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}

/* ──────────────────────────────────────────────────────────────────────────────
   FAB polish — Tawk/Freshchat vs mobile CTA + misc (WhatsApp FAB is bottom-left in critical-header-fallback)
────────────────────────────────────────────────────────────────────────────── */

/* Tawk / Freshchat: lift on small screens so the sticky mobile plan CTA bar stays clear (WhatsApp FAB is bottom-left now). */
@media (max-width: 639px) {
  #fc_frame,
  iframe[id^="fc_widget"],
  #tawk-bubble-container,
  #tawkchat-minified,
  #tawkchat-minifiedcontainer,
  .widget-visible[id^="tawk"],
  div[id^="tawkchat"],
  div[id*="tawkchat"],
  div[class*="tawk-"] iframe,
  .tawk-button-container,
  .tawk-min-container {
    bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Promo bar: make it more compact on very narrow screens */
@media (max-width: 380px) {
  .site-promo-inner { padding: .4rem .75rem; gap: .35rem; }
  .site-promo-text { font-size: .75rem; }
  .site-btn-promo-ghost { font-size: .75rem; padding: .25rem .5rem; }
  .site-btn-promo-solid { font-size: .75rem; padding: .3rem .625rem; }
}

/* Mobile drawer: add subtle bottom padding so last item clears any OS chrome */
#hs-nav-panel .site-drawer-nav {
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

/* Sub-menu open chevron rotation */
.site-drawer-details[open] .hs-nav-chevron {
  transform: rotate(180deg);
  transition: transform .2s ease;
}
.site-drawer-details .hs-nav-chevron {
  transition: transform .2s ease;
  margin-left: auto;
  flex-shrink: 0;
}

/* Drawer link active state (current page) */
.site-drawer-link[aria-current="page"],
.site-drawer-link.active {
  background: var(--hs-brand-soft);
  color: var(--hs-brand);
}
.site-drawer-link[aria-current="page"] svg,
.site-drawer-link.active svg { color: var(--hs-brand); }

/* Fix: site-drawer-details > summary chevron should also rotate */
.site-drawer-details > summary .site-dropdown-chevron {
  margin-left: auto;
  flex-shrink: 0;
}

/* Prevent horizontal scroll bleed-through on mobile */
@media (max-width: 639px) {
  .hs-nav-drawer-panel { border-radius: 0 0 0 1rem; }
  body.hs-nav-open { overflow: hidden; }
}

/* Legacy per-page `.hs-promo-strip` embeds — unify to Hostinger-style bar sitewide */
.hs-promo-strip,
.site-promo {
  background: var(--hs-promo-grad) !important;
  background-image: var(--hs-promo-grad) !important;
  color: #e9e7f4 !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: 0 6px 28px -18px rgba(24,12,54,.55), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.hs-promo-strip p,
.hs-promo-strip strong,
.site-promo p,
.site-promo strong,
.site-promo-text {
  color: inherit !important;
}
.hs-promo-strip .hs-promo-code,
.site-promo-code {
  color: #faf5ff !important;
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
}
.hs-promo-strip .hs-promo-copy,
.site-btn-promo-ghost,
.hs-promo-copy {
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Billing panel / store landing pages — align loud inline hero gradients with brand (no PHP edits) */
body[data-hs-store-landing] section[aria-label="Web hosting hero"] {
  background: linear-gradient(135deg,#0f172a 0%,#1e1b4b 30%,#312e81 62%,#4c1d95 100%) !important;
}
body[data-hs-store-landing] section[aria-label="Web hosting hero"] > div[style*="radial-gradient"] {
  opacity: .42 !important;
}
body[data-hs-store-landing] nav[aria-label="Breadcrumb"] span[style*="ea580c"] {
  color: #a5b4fc !important;
}

/* Store sub-landings: calm purple hero + inner shell (removes need for extra radial div) */
body[data-hs-store-landing] .hs-sub-landing-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 26%, #312e81 56%, #4c1d95 92%) !important;
}
body[data-hs-store-landing] .hs-sub-landing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 72% 60% at 78% 36%, rgba(103, 61, 230, 0.26), transparent 56%);
}
body[data-hs-store-landing] .hs-sub-landing-hero > .hs-sub-landing-hero__inner {
  position: relative;
  z-index: 1;
}

/* Network & specialist sub-landings: same purple hero shell as store pages */
body[data-hs-sub-landing-hero] .hs-sub-landing-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 26%, #312e81 56%, #4c1d95 92%) !important;
}
body[data-hs-sub-landing-hero] .hs-sub-landing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 72% 60% at 78% 36%, rgba(103, 61, 230, 0.26), transparent 56%);
}
body[data-hs-sub-landing-hero] .hs-sub-landing-hero > .hs-sub-landing-hero__inner {
  position: relative;
  z-index: 1;
}

html[data-hs-pipeline="india-conversion"] body[data-hs-store-landing] .hs-sub-latency-strip {
  background: linear-gradient(90deg, #f5f3ff 0%, #faf5ff 50%, #f5f3ff 100%) !important;
  border-bottom-color: #e9d5ff !important;
}

/* Cyber product landings — teal shell aligned with /hosting/ hub */
body[data-hs-cyber-product-landing] .hs-sub-landing-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #020913 0%, #061a2e 48%, #0a2740 100%) !important;
}
body[data-hs-cyber-product-landing] .hs-sub-landing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 70% 55% at 78% 18%, rgba(56, 189, 248, 0.22), transparent 55%);
}
body[data-hs-cyber-product-landing] .hs-sub-landing-hero > .hs-sub-landing-hero__inner {
  position: relative;
  z-index: 1;
}
body[data-hs-cyber-product-landing] .hs-sub-landing-hero[style*="0066ff"] {
  background: linear-gradient(135deg, #003d52 0%, #006884 45%, #0284c7 100%) !important;
}
body[data-hs-cyber-product-landing] .hs-sub-landing-hero[style*="0066ff"]::before {
  opacity: 0;
}
html[data-hs-pipeline="india-conversion"] body[data-hs-cyber-product-landing] .hs-sub-latency-strip {
  background: linear-gradient(90deg, rgba(6, 18, 38, 0.95) 0%, rgba(4, 12, 28, 0.92) 50%, rgba(6, 18, 38, 0.95) 100%) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.12) !important;
  border-bottom-color: rgba(56, 189, 248, 0.12) !important;
  color: #e8f4ff !important;
}
html[data-hs-pipeline="india-conversion"] body[data-hs-cyber-product-landing] .hs-sub-latency-strip .text-slate-900,
html[data-hs-pipeline="india-conversion"] body[data-hs-cyber-product-landing] .hs-sub-latency-strip h2 {
  color: #e8f4ff !important;
}
html[data-hs-pipeline="india-conversion"] body[data-hs-cyber-product-landing] .hs-sub-latency-strip p,
html[data-hs-pipeline="india-conversion"] body[data-hs-cyber-product-landing] .hs-sub-latency-strip .text-slate-700 {
  color: #8bacc8 !important;
}
html[data-hs-pipeline="india-conversion"] body[data-hs-cyber-product-landing] .hs-sub-latency-strip a {
  color: #38bdf8 !important;
}
body[data-hs-cyber-product-landing] section.bg-orange-500 {
  background: linear-gradient(135deg, #003d52 0%, #006884 45%, #0284c7 100%) !important;
}
body[data-hs-cyber-product-landing] section.bg-orange-500 p.text-orange-50,
body[data-hs-cyber-product-landing] section.bg-orange-500 .text-orange-50 {
  color: #b8e8ff !important;
}
body[data-hs-cyber-product-landing] .hs-in-hero {
  background: linear-gradient(160deg, #020913 0%, #061a2e 48%, #0a2740 100%) !important;
}
body[data-hs-cyber-product-landing] .hs-in-hero::before {
  background: radial-gradient(ellipse 72% 60% at 78% 18%, rgba(56, 189, 248, 0.22), transparent 55%),
    radial-gradient(ellipse 50% 40% at 8% 85%, rgba(0, 102, 255, 0.12), transparent 52%) !important;
}
body[data-hs-cyber-product-landing] section[aria-label="Email hosting hero"] > div[style*="radial-gradient"] {
  background: radial-gradient(ellipse 70% 55% at 75% 40%, rgba(56, 189, 248, 0.2), transparent) !important;
}
body[data-hs-cyber-product-landing] section[aria-label="Windows hosting hero"] > div[style*="radial-gradient"] {
  background: radial-gradient(ellipse 70% 55% at 80% 40%, rgba(56, 189, 248, 0.18), transparent) !important;
}
body[data-hs-cyber-product-landing] section[aria-label="Get professional email"] {
  background: linear-gradient(135deg, #003d52 0%, #006884 45%, #0284c7 100%) !important;
}
body[data-hs-cyber-product-landing] section[aria-label="Get professional email"] p[style*="fecaca"] {
  color: #b8e8ff !important;
}
body[data-hs-cyber-product-landing] section[aria-label="Get professional email"] a[style*="text-red-700"] {
  color: #020913 !important;
  background: #fff !important;
}
body[data-hs-cyber-product-landing] .hs-sub-landing-hero nav a {
  color: #e8f4ff !important;
}
body[data-hs-cyber-product-landing] .hs-sub-landing-hero nav a:hover {
  color: #38bdf8 !important;
}
body[data-hs-cyber-product-landing] .hs-sub-landing-hero nav span {
  color: #4a6d8c !important;
}

/* —— Professional homepage & card refinements (2026) —— */
.hs-hero-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.hs-hero-status-badge::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.22);
  flex-shrink: 0;
}
.hs-card__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid var(--hs-brand-border);
  background: var(--hs-brand-soft);
  color: var(--hs-brand);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.hs-card .hs-card__mark + h3 {
  margin-top: 0;
}
body[data-hs-cyber-product-landing] .hs-sub-landing-hero h1.text-slate-50 {
  color: #e8f4ff !important;
}