/**
 * HostStack Layout System — unified grid, containers, bands, rhythm.
 * Single source of truth for page structure (Stripe / Vercel / Linear class).
 * Loaded globally after hs-design-system.css.
 */

html.hs-theme-cyber {
  /* --- Layout tokens (nav, sections, cards share these) --- */
  --hs-layout-max: 72rem;
  --hs-layout-max-wide: 80rem;
  --hs-layout-prose: 42rem;
  --hs-layout-prose-narrow: 36rem;
  --hs-layout-gutter: clamp(1rem, 4vw, 1.5rem);
  --hs-layout-gap: clamp(0.75rem, 2vw, 1rem);
  --hs-layout-gap-lg: clamp(1rem, 2.5vw, 1.5rem);
  --hs-layout-section-y: clamp(2rem, 4.5vw, 3.5rem);
  --hs-layout-section-y-sm: clamp(1.5rem, 3vw, 2.5rem);

  /* Sync design-system container vars */
  --hs-container: var(--hs-layout-max);
  --hs-container-narrow: var(--hs-layout-prose-narrow);
  --hs-container-wide: var(--hs-layout-max-wide);
  --hs-section-y: var(--hs-layout-section-y);
  --hs-section-y-compact: var(--hs-layout-section-y-sm);

  overflow-x: clip;
  max-width: 100%;
}

html.hs-theme-cyber body {
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}

/* =============================================================================
   ATMOSPHERE — one background layer (.hs-page-bg), no stacked grid overlays
   ============================================================================= */

html.hs-theme-cyber body::before {
  display: none !important;
}

html.hs-theme-cyber .hs-page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #020913;
  background-image:
    radial-gradient(ellipse 100% 55% at 50% -8%, rgba(56, 189, 248, 0.07), transparent 62%),
    radial-gradient(ellipse 60% 40% at 100% 20%, rgba(37, 99, 235, 0.04), transparent 55%);
  opacity: 1 !important;
  mask-image: none !important;
}

/* =============================================================================
   MAIN SHELL — vertical rhythm, no double padding hacks
   ============================================================================= */

html.hs-theme-cyber .hs-main,
html.hs-theme-cyber main.flex-1,
html.hs-theme-cyber main#main {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

html.hs-theme-cyber .hs-main > *,
html.hs-theme-cyber main.flex-1 > section,
html.hs-theme-cyber main#main > section {
  width: 100%;
  min-width: 0;
}

/* =============================================================================
   CONTAINERS — one width system
   ============================================================================= */

html.hs-theme-cyber .hs-container,
html.hs-theme-cyber .hs-layout-container {
  width: 100%;
  max-width: var(--hs-layout-max);
  margin-inline: auto;
  padding-inline: var(--hs-layout-gutter);
}

html.hs-theme-cyber .hs-container--narrow,
html.hs-theme-cyber .hs-layout-container--prose {
  max-width: var(--hs-layout-prose);
}

html.hs-theme-cyber .hs-container--wide,
html.hs-theme-cyber .hs-layout-container--wide {
  max-width: var(--hs-layout-max-wide);
}

/* Tailwind / legacy wrappers snap to the same grid */
html.hs-theme-cyber main .max-w-6xl,
html.hs-theme-cyber main .max-w-5xl {
  max-width: var(--hs-layout-max) !important;
  width: 100%;
}

html.hs-theme-cyber main .max-w-7xl {
  max-width: var(--hs-layout-max-wide) !important;
  width: 100%;
}

html.hs-theme-cyber main .max-w-4xl {
  max-width: min(var(--hs-layout-max), 56rem) !important;
}

html.hs-theme-cyber main .max-w-3xl,
html.hs-theme-cyber main .max-w-2xl {
  max-width: var(--hs-layout-prose) !important;
}

html.hs-theme-cyber main .max-w-xl {
  max-width: var(--hs-layout-prose-narrow) !important;
}

html.hs-theme-cyber main .mx-auto.max-w-6xl,
html.hs-theme-cyber main .mx-auto.max-w-7xl,
html.hs-theme-cyber main .mx-auto.max-w-5xl,
html.hs-theme-cyber main .mx-auto.max-w-4xl,
html.hs-theme-cyber main .mx-auto.max-w-3xl {
  padding-inline: var(--hs-layout-gutter);
}

html.hs-theme-cyber main .px-4,
html.hs-theme-cyber main .sm\:px-6 {
  padding-inline: var(--hs-layout-gutter) !important;
}

html.hs-theme-cyber .hs-nav__inner {
  max-width: var(--hs-layout-max);
  padding-inline: var(--hs-layout-gutter);
}

/* =============================================================================
   SECTIONS & BANDS — full-bleed background, contained content
   ============================================================================= */

html.hs-theme-cyber .hs-section,
html.hs-theme-cyber .hs-ent-section,
html.hs-theme-cyber .hs-layout-section {
  padding-block: var(--hs-layout-section-y);
  width: 100%;
}

html.hs-theme-cyber .hs-section--compact,
html.hs-theme-cyber .hs-layout-section--compact {
  padding-block: var(--hs-layout-section-y-sm);
}
html.hs-theme-cyber .hs-band,
html.hs-theme-cyber .hs-section--alt,
html.hs-theme-cyber .hs-ent-section--alt,
html.hs-theme-cyber .hs-in-band--white,
html.hs-theme-cyber .hs-in-band--muted {
  background: rgba(4, 12, 28, 0.35) !important;
  border-block: 1px solid rgba(56, 189, 248, 0.06) !important;
  box-shadow: none !important;
}

html.hs-theme-cyber .hs-in-band--pricing {
  background: rgba(2, 9, 19, 0.5) !important;
  border-block: 1px solid rgba(56, 189, 248, 0.06) !important;
}

html.hs-theme-cyber .hs-in-band--final {
  background: rgba(4, 12, 28, 0.45) !important;
  border-block: 1px solid rgba(56, 189, 248, 0.08) !important;
}

html.hs-theme-cyber .hs-band__inner {
  max-width: var(--hs-layout-max);
  margin-inline: auto;
  padding-inline: var(--hs-layout-gutter);
}

html.hs-theme-cyber .hs-section__head,
html.hs-theme-cyber .hs-ent-section__head,
html.hs-theme-cyber .hs-layout-section__head {
  max-width: var(--hs-layout-prose);
  margin-inline: auto;
  margin-bottom: var(--hs-layout-gap-lg);
  text-align: center;
}

html.hs-theme-cyber .hs-section__head p,
html.hs-theme-cyber .hs-ent-section__head p,
html.hs-theme-cyber .hs-layout-section__head p {
  max-width: var(--hs-layout-prose-narrow);
  margin-inline: auto;
}

/* =============================================================================
   PROSE / READABILITY — cap line length in headings blocks only
   ============================================================================= */

html.hs-theme-cyber .hs-lead,
html.hs-theme-cyber .hs-prose p,
html.hs-theme-cyber .hs-prose li {
  max-width: var(--hs-layout-prose-narrow);
}

html.hs-theme-cyber .hs-section__head p,
html.hs-theme-cyber .hs-ent-section__head p,
html.hs-theme-cyber .hs-layout-section__head p,
html.hs-theme-cyber .hs-sub-landing-hero__lead {
  max-width: var(--hs-layout-prose-narrow);
  margin-inline: auto;
}

html.hs-theme-cyber .hs-ent-hero__lead,
html.hs-theme-cyber .hs-ent-split__lead {
  max-width: var(--hs-layout-prose-narrow);
}

html.hs-theme-cyber .hs-prose {
  max-width: var(--hs-layout-prose);
  margin-inline: auto;
}

/* =============================================================================
   GRID SYSTEM — unified column gaps
   ============================================================================= */

html.hs-theme-cyber .hs-grid,
html.hs-theme-cyber .hs-ent-grid,
html.hs-theme-cyber .hs-layout-grid {
  display: grid;
  gap: var(--hs-layout-gap-lg);
  align-items: stretch;
}

html.hs-theme-cyber .hs-grid > *,
html.hs-theme-cyber .hs-ent-grid > *,
html.hs-theme-cyber .hs-layout-grid > * {
  min-width: 0;
}

html.hs-theme-cyber .hs-grid--2,
html.hs-theme-cyber .hs-ent-grid--2 {
  grid-template-columns: 1fr;
}

html.hs-theme-cyber .hs-grid--3,
html.hs-theme-cyber .hs-ent-grid--3 {
  grid-template-columns: 1fr;
}

html.hs-theme-cyber .hs-grid--4,
html.hs-theme-cyber .hs-ent-grid--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  html.hs-theme-cyber .hs-grid--2,
  html.hs-theme-cyber .hs-ent-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html.hs-theme-cyber .hs-grid--3,
  html.hs-theme-cyber .hs-ent-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  html.hs-theme-cyber .hs-grid--4,
  html.hs-theme-cyber .hs-ent-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

html.hs-theme-cyber .hs-pg-grid,
html.hs-theme-cyber .plans-grid,
html.hs-theme-cyber .hs-plans-grid-hosting {
  gap: var(--hs-layout-gap-lg) !important;
  max-width: var(--hs-layout-max-wide);
  margin-inline: auto;
}

html.hs-theme-cyber .hs-ent-split,
html.hs-theme-cyber .hs-layout-split {
  display: grid;
  gap: var(--hs-layout-gap-lg);
  align-items: start;
}

@media (min-width: 960px) {
  html.hs-theme-cyber .hs-ent-split,
  html.hs-theme-cyber .hs-layout-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* =============================================================================
   KILL LEGACY PURPLE / NOISE — dark marketing shell
   ============================================================================= */

html.hs-theme-cyber body:not([data-hs-store-landing]) .hs-in-hero {
  background: transparent !important;
}

html.hs-theme-cyber body:not([data-hs-store-landing]) .hs-in-hero::before,
html.hs-theme-cyber body:not([data-hs-store-landing]) .hs-in-hero::after {
  display: none !important;
}

html.hs-theme-cyber body:not([data-hs-store-landing]) .hs-in-hero .hs-in-hero__grid-bg,
html.hs-theme-cyber body:not([data-hs-store-landing]) .hs-in-hero [class*="grid-bg"] {
  display: none !important;
}

html.hs-theme-cyber .hs-in-conversion-wrap {
  background: transparent !important;
}

/* Section inline background overrides → transparent (band classes handle tint) */
html.hs-theme-cyber main section[id="plans"][style*="background"],
html.hs-theme-cyber main .hs-ent-section[style*="background"] {
  background: transparent !important;
}

/* Hero local glow only — no second grid */
html.hs-theme-cyber .hs-ent-hero::before {
  background:
    radial-gradient(ellipse 70% 45% at 20% 0%, rgba(56, 189, 248, 0.08), transparent 58%),
    radial-gradient(ellipse 50% 35% at 90% 10%, rgba(37, 99, 235, 0.05), transparent 55%) !important;
}

html.hs-theme-cyber .hs-ent-hero {
  overflow: clip;
}

/* Ultrawide — prevent stretched empty margins feeling broken */
@media (min-width: 1400px) {
  html.hs-theme-cyber .hs-layout-max-viewport {
    max-width: min(var(--hs-layout-max), calc(100vw - 2 * var(--hs-layout-gutter)));
    margin-inline: auto;
  }
}

/* Mobile section rhythm */
@media (max-width: 639px) {
  html.hs-theme-cyber .hs-section,
  html.hs-theme-cyber .hs-ent-section,
  html.hs-theme-cyber .hs-layout-section {
    padding-block: var(--hs-layout-section-y-sm);
  }

  html.hs-theme-cyber main .max-w-6xl,
  html.hs-theme-cyber main .max-w-7xl {
    padding-inline: var(--hs-layout-gutter);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.hs-theme-cyber .hs-page-bg {
    background-image: none;
  }
}