:root {
  color-scheme: dark;
  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;
  --bg: #050505;
  --bg-soft: #0a0a0d;
  --panel: rgba(16, 16, 20, 0.82);
  --panel-strong: rgba(20, 20, 24, 0.92);
  --border: rgba(255, 255, 255, 0.08);
  --text: #f4f4f5;
  --muted: #a5a5ad;
  --accent: #34f5a2;
  --accent-2: #5ac8ff;
  --accent-soft: rgba(52, 245, 162, 0.16);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --btn-loading-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z'/%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
}

::selection {
  background: rgba(52, 245, 162, 0.35);
  color: #06110c;
}
::-moz-selection {
  background: rgba(52, 245, 162, 0.35);
  color: #06110c;
}

html {
  scroll-behavior: smooth;
}

.tenant-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 24px;
}
.tenant-modal-overlay.hidden { display: none; }
.tenant-modal {
  width: 100%;
  max-width: 440px;
  max-height: 85vh;
  background: var(--panel-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tenant-modal h3 { margin: 0 0 12px; font-family: var(--font-display); font-size: 1.15rem; flex: 0 0 auto; }
.tenant-modal p { color: var(--muted); font-size: 0.92rem; line-height: 1.5; margin: 0 0 18px; }
.tenant-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex: 0 0 auto; }

/* Long modals (e.g. router management) wrap their body in this so only the
   body scrolls — the title above and the action buttons below stay pinned,
   same fixed-header pattern as the captive portal's own modals. */
.modal-scroll-body {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding-right: 10px;
  margin-right: -10px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
.modal-scroll-body::-webkit-scrollbar { width: 6px; }
.modal-scroll-body::-webkit-scrollbar-track { background: transparent; margin-block: 6px; }
.modal-scroll-body::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; opacity: .6; }
.modal-scroll-body::-webkit-scrollbar-thumb:hover { background: var(--accent); opacity: 1; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 20%, rgba(52, 245, 162, 0.08), transparent 28%),
    radial-gradient(circle at 80% 0%, rgba(90, 200, 255, 0.08), transparent 20%),
    linear-gradient(180deg, #050505 0%, #060606 45%, #050505 100%);
  color: var(--text);
  font-family: var(--font-body), sans-serif;
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.page {
  position: relative;
  z-index: 1;
  padding-top: 112px;
}

.backdrop,
.grid-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.backdrop {
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.06), transparent 42%),
    radial-gradient(circle at 50% 80%, rgba(52, 245, 162, 0.04), transparent 45%);
  z-index: 0;
}

.grid-overlay {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 120px 120px;
  opacity: 0.2;
  z-index: 0;
}

.shell {
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding: 18px 0 12px;
}

.header-shell {
  /* Outer card only — the nav row's own flex layout lives on .header-inner
     below instead, so this can stack .header-inner above .dropdown-panel
     in normal block flow (letting .header-shell's real height include an
     open panel) without the panel getting fought over as a flex sibling of
     the brand/nav/actions row. */
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(8, 8, 10, 0.72);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  position: relative; /* anchors the Resources dropdown panel + glow ring below */
  /* Deliberately NOT transitioning border-radius: the box height jumps the
     instant the panel appears (display can't be animated), so a radius
     mid-transition from 999px down to var(--radius-xl) briefly lands on
     huge intermediate values (e.g. 500px) relative to that now-tall box —
     that's what rounds it into a blob/circle instead of a clean rect.
     Snapping the radius instantly avoids that; the panel's own opacity/
     transform transition still carries the "opening" feel. */
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
}

.brand-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand-name {
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.brand-tagline,
.muted {
  color: var(--muted);
}

.brand-tagline {
  font-size: 0.84rem;
}

/* home.html only: its tagline is longer ("...Wi-Fi hotspot platform") than
   every other page's ("...captive portals") and wraps to 2 lines in the
   narrow mobile header, taking up extra vertical space next to the Menu
   button — swap to the shorter wording below 768px, desktop keeps the
   longer one. */
.brand-tagline-mobile {
  display: none;
}

@media (max-width: 768px) {
  .brand-tagline-desktop {
    display: none;
  }
  .brand-tagline-mobile {
    display: block;
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
  justify-content: flex-end;
}

/* Login sits in .header-actions (desktop) / .mobile-menu (mobile) as the
   only .btn.ghost there — Get started is .btn.primary — so these selectors
   are naturally scoped to just the Login button without needing an extra
   class on every page. */
.header-actions .btn.ghost:hover,
.header-actions .btn.ghost:focus-visible,
.mobile-menu .btn.ghost:hover,
.mobile-menu .btn.ghost:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(52, 245, 162, 0.2);
  color: var(--accent);
}

.nav-link,
.nav-dropdown {
  color: var(--muted);
  font-size: 0.94rem;
  padding: 8px 12px;
  border-radius: 999px;
  border: none;
  background: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-link:hover,
.nav-dropdown:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.dropdown-icon {
  font-size: 0.7rem;
  transition: transform 0.3s ease;
}

.nav-dropdown[aria-expanded="true"] .dropdown-icon {
  transform: rotate(180deg);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.account-menu {
  position: relative;
}

.account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.account-trigger:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(52, 245, 162, 0.24);
}

.account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #06110c;
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.account-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  padding: 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: rgba(10, 10, 12, 0.98);
  box-shadow: var(--shadow);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 30;
}

.account-dropdown.open {
  display: flex;
}

.account-dropdown a,
.account-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.account-dropdown a:hover,
.account-dropdown button:hover {
  background: rgba(255, 255, 255, 0.06);
}

.account-dropdown .danger {
  color: #ff8a8a;
}

.account-dropdown-label {
  padding: 8px 12px 2px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.account-captive-item {
  display: flex !important;
  align-items: center;
  gap: 10px;
}

.account-captive-item.active {
  color: var(--accent);
  cursor: default;
}

.account-avatar.small {
  width: 24px;
  height: 24px;
  font-size: 0.68rem;
  flex-shrink: 0;
}

.account-dropdown-divider {
  height: 1px;
  margin: 6px 4px;
  background: var(--border);
}

.account-captive-add {
  color: var(--accent);
  font-weight: 600;
}

.account-captive-add-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px 10px;
}

.account-captive-add-form input {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
}

.account-captive-add-form button {
  padding: 8px 12px !important;
  border-radius: var(--radius-sm);
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  font-weight: 600;
  text-align: center !important;
}

.account-captive-add-error {
  font-size: 0.78rem;
  color: #ff8a8a;
}

.site-header.scrolled .header-shell {
  background: rgba(8, 8, 10, 0.85);
  backdrop-filter: blur(20px);
}

.site-header.scrolled .header-inner {
  padding: 12px 18px;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
}

.dropdown-panel {
  /* Deliberately real in-flow content (not position:absolute) — a header
     that's actually as tall as its open panel is what lets the glow ring
     below (sized off .header-shell's own box) extend down to wrap the
     panel too, instead of stopping at the short pill-bar height. Safe here
     because .site-header itself is position:fixed and takes no space in
     the page's own layout, so growing this doesn't push page content. */
  display: none;
  background: rgba(8, 8, 10, 0.96);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 26px 28px 28px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  opacity: 0;
  transform: translateY(-4px);
  visibility: hidden;
}

/* Scoped to .active (not just .expanded) because the header can now carry
   more than one dropdown panel (Resources, Solutions) — .expanded alone
   would show ALL of them at once since it's a single shared class on the
   header itself. JS (initHeader) puts .active only on whichever panel is
   currently open, and removes it from every other one at the same time. */
.site-header.expanded .dropdown-panel.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

/* The panel is now nested INSIDE .header-shell (not a sibling of it), so
   this one glowing ring wraps the whole pill nav + open panel as a single
   continuous card — same technique as the ISN Cloud reference: an animated
   gradient painted only into the border itself via mask-composite, sized to
   the shell's own (now-larger) corner radius via `inherit`. */
.site-header.expanded .header-shell {
  border-color: transparent;
  border-radius: var(--radius-xl);
}

.site-header.expanded .header-shell::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border-radius: inherit;
  background: linear-gradient(90deg,
    rgba(52, 245, 162, 0.2) 0%,
    rgba(52, 245, 162, 0.9) 20%,
    rgba(255, 255, 255, 1) 50%,
    rgba(52, 245, 162, 0.9) 80%,
    rgba(52, 245, 162, 0.2) 100%);
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  padding: 2px;
  animation: neon-flow 3s ease-in-out infinite;
  z-index: -1;
}
@keyframes neon-flow {
  0%   { background-position: 0% center; }
  50%  { background-position: 100% center; }
  100% { background-position: 0% center; }
}

/* Backdrop blur behind the header when the Resources menu is open —
   dynamically created/toggled by initHeader() in app.js, not markup in
   each page (so this applies uniformly without touching all 14 files). */
.mega-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 7, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 15; /* below .site-header (20), above normal page content */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.mega-menu-backdrop.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mega-menu-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
}

.mega-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 24px;
  border-right: 1px solid var(--border);
}

.mega-left h4 {
  font-family: var(--font-display), sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

.mega-left p {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.mega-left .btn {
  align-self: flex-start;
  margin-top: 6px;
}

.mega-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mega-item {
  display: block;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.mega-item:hover {
  background: rgba(52, 245, 162, 0.08);
  border-color: rgba(52, 245, 162, 0.24);
  transform: translateY(-2px);
}

/* Resources dropdown — the original intro blurb on the left, plus two
   icon-led link columns (Resources / Products) to its right. */
.mega-triple-list {
  grid-template-columns: 0.85fr 1fr 1fr;
}

.mega-list-col h4 {
  font-family: var(--font-display), sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 14px;
}

.mega-list-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Same icon-card treatment as .mega-industry-item in the Solutions
   dropdown, kept as its own class (rather than reused directly) so tuning
   the label size here doesn't also resize the Solutions industry grid. */
.mega-link-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.mega-link-item:hover {
  background: rgba(52, 245, 162, 0.08);
  border-color: rgba(52, 245, 162, 0.24);
  transform: translateY(-2px);
}

.mega-link-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mega-link-icon svg {
  width: 16px;
  height: 16px;
}

.mega-link-item strong {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

/* Solutions dropdown — a denser 3-column grid instead of .mega-list's
   single vertical stack, since it holds ~9 industries rather than 3 links. */
.mega-industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.mega-industry-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.mega-industry-item:hover {
  background: rgba(52, 245, 162, 0.08);
  border-color: rgba(52, 245, 162, 0.24);
  transform: translateY(-2px);
}

.mega-industry-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mega-industry-icon svg {
  width: 16px;
  height: 16px;
}

.mega-industry-item strong {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

@media (max-width: 940px) {
  .mega-menu-grid {
    grid-template-columns: 1fr;
  }
  .mega-industries-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .mega-left {
    padding-right: 0;
    padding-bottom: 18px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

@media (max-width: 768px) {
  .dropdown-panel {
    box-shadow: none;
    padding: 16px 0 20px;
    background: rgba(8, 8, 10, 0.98);
  }
}

.mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.94rem;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 999px;
  transition: background 0.2s ease;
}

.mobile-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
}

.mobile-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: var(--muted);
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.94rem;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mobile-dropdown-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border-color: rgba(52, 245, 162, 0.2);
}

/* Its own bounded, independently-scrolling box — separate from the outer
   .mobile-menu's own scroll — so a long accordion (e.g. Solutions' 9
   industries) doesn't force the whole menu to scroll a long way past it to
   reach Resources/Pricing/Login below. Only the items that don't fit here
   scroll into view inside THIS box; everything below it in the outer menu
   stays put. */
.mobile-dropdown {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0 0 0;
  margin-left: 8px;
}

.mobile-dropdown.open {
  display: flex;
  max-height: 230px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 8px;
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.02);
  scrollbar-width: thin;
  scrollbar-color: rgba(52, 245, 162, 0.5) rgba(255, 255, 255, 0.05);
}

.mobile-dropdown::-webkit-scrollbar { width: 6px; }
.mobile-dropdown::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03); border-radius: 999px; }
.mobile-dropdown::-webkit-scrollbar-thumb {
  background: rgba(52, 245, 162, 0.35);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* Nested INSIDE .header-shell now (a sibling of .header-inner and the two
   .dropdown-panel elements), not a separate fixed box floating below it —
   that's what lets .site-header.expanded's border-radius-squaring + glow
   ring (see .site-header.expanded .header-shell::before above) wrap this
   panel into the exact same continuous card the desktop mega-menu gets,
   instead of a disconnected floating drawer with the page visible through
   the gap underneath it. display:none at rest — same as .dropdown-panel —
   is required, not optional: opacity/visibility alone don't remove an
   element from layout, so a display:flex base state here would leave this
   panel's full (multi-hundred-px) height reserved inside .header-shell at
   ALL times, on every viewport width, including desktop — inflating the
   header's real box (and dragging its backdrop-filter blur down over the
   page with it) even while "closed" and even where .mobile-menu is never
   shown at all. Bounded to the viewport height with its own scroll so
   opening Solutions/Resources inside it never grows the panel past the
   screen — the accordion has its OWN nested scroll (above) for its content,
   and this outer scroll covers the rest (Pricing/Login/Get started) if the
   combined list is still taller than the viewport allows. */
.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  background: rgba(8, 8, 10, 0.98);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  padding: 16px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(52, 245, 162, 0.5) rgba(255, 255, 255, 0.05);
}

.mobile-menu::-webkit-scrollbar { width: 8px; }
.mobile-menu::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03); border-radius: 999px; }
.mobile-menu::-webkit-scrollbar-thumb {
  background: rgba(52, 245, 162, 0.35);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.mobile-menu.open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

/* Login/Get started centralized here (full-width + spacing) instead of
   per-file inline styles, so every page gets the same look — and a divider
   above Login visually separates "navigate" links from "act" buttons, since
   in the old floating-drawer layout the boundary was implied by the panel
   just ending; now that it's one continuous scroll area, it needs its own
   separator to read as two groups. display:flex (not block) is deliberate —
   .btn's own align-items/justify-content:center (base rule) only take
   effect on a flex container, so this keeps the label truly centered both
   ways in the pill instead of just horizontally via text-align. */
.mobile-menu .btn {
  display: flex;
}

.mobile-menu .btn.ghost {
  margin-top: 10px;
  padding: 14px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-menu .btn.primary {
  margin-top: 6px;
}

.mobile-link {
  display: block;
  color: var(--muted);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 0.94rem;
  transition: all 0.2s ease;
}

/* Icon + label row — used for the items inside an open .mobile-dropdown
   (Solutions' industries, Resources' links), matching the icon treatment
   the same items already get in the desktop mega-menu
   (.mega-industry-item/.mega-link-item), just smaller. */
.mobile-link.mobile-link-icon {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mobile-link-svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--accent);
}

.mobile-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

@media (max-width: 768px) {
  .nav {
    display: none;
  }

  .header-actions {
    display: none;
  }

  .mobile-toggle {
    display: block;
  }

  .header-inner {
    justify-content: space-between;
  }
}

.hero {
  padding: 28px 0 36px;
}

.hero-shell,
.split-shell,
.dashboard-shell,
.status-shell,
.portal-shell {
  display: grid;
  gap: 24px;
}

.hero-shell {
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  align-items: stretch;
}

.hero-copy,
.panel,
.hero-card,
.status-card,
.portal-stage,
.preview-panel,
.support-card,
.news-card,
.step-card,
.feature-card,
.stat-card,
.mini-card,
.hero-proof-stat {
  position: relative;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(22, 22, 26, 0.95), rgba(12, 12, 14, 0.88));
  box-shadow: var(--shadow);
  border-radius: var(--radius-xl);
}

.hero-copy {
  padding: 34px;
  overflow: hidden;
}

.eyebrow,
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(52, 245, 162, 0.22);
  background: rgba(52, 245, 162, 0.08);
  color: #d9fff1;
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hero h1,
.section h2,
.panel h2,
.portal-stage h2 {
  margin: 0;
  font-family: var(--font-display), sans-serif;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.hero-title {
  display: block;
  font-size: clamp(3rem, 5vw, 5.6rem);
  /* Fixed at exactly 2 lines now by construction, not by guesswork: line 1
     is static hardcoded text (never changes height), line 2 is capped to
     short 2-3 word phrases that always fit on one line at this font size —
     so unlike the old full-sentence rotator, there's no variable line count
     left to reserve space for. */
  min-height: calc(1.2em * 2);
  line-height: 1.2;
  position: relative;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.hero-title-rotating {
  color: var(--accent);
}

.hero-title-rotating::after {
  content: '';
  display: inline-block;
  position: relative;
  width: 0.08em;
  height: 1em;
  background: var(--accent);
  margin-left: 0.04em;
  vertical-align: text-bottom;
  animation: cursor-blink 0.9s steps(2) infinite;
}

@keyframes cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.hero p,
.section-intro,
.panel p,
.portal-stage p,
.status-card p,
.news-card p,
.support-card p {
  color: var(--muted);
}

.hero-actions,
.inline-actions,
.footer-actions,
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.96rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn.primary {
  background: linear-gradient(135deg, var(--accent), #7bf9c3);
  color: #06110c;
  box-shadow: 0 16px 40px rgba(52, 245, 162, 0.28);
}

.btn.secondary {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
  color: var(--text);
}

.btn.ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

button:disabled {
  cursor: not-allowed;
}

/* Toggled by JS alongside `disabled` on any submit/action button while a
   request is in flight (see app.js's disabled=true/false pairs) — hides the
   button's own label and shows a small flashing cloud glyph instead, so the
   button can't be pressed again mid-request. Same cloud motif as the
   full-page loading overlay used elsewhere in the ISN product, just sized to
   sit inside a button. Selector is deliberately not scoped to `.btn` so it
   also works on custom-styled buttons (e.g. the captive switcher list). */
button.btn-loading {
  position: relative;
  color: transparent !important;
}
button.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  color: var(--text);
  background-color: currentColor;
  -webkit-mask-image: var(--btn-loading-cloud);
  mask-image: var(--btn-loading-cloud);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  animation: btn-loading-flash 1s ease-in-out infinite;
}
.btn.primary.btn-loading::after {
  color: #06110c;
}
@keyframes btn-loading-flash {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 1; }
}

.hero-side,
.stack,
.form-shell,
.portal-steps,
.support-grid,
.news-grid,
.features-grid,
.stats-grid,
.dashboard-grid,
.status-grid,
.two-up {
  display: grid;
  gap: 18px;
}

.hero-side {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hero-card,
.panel,
.status-card,
.portal-stage,
.preview-panel,
.support-card,
.news-card,
.step-card,
.feature-card,
.stat-card,
.mini-card {
  padding: 22px;
}

.stat-card {
  min-height: 132px;
}

.stat-value,
.big-number {
  display: block;
  font-family: var(--font-display), sans-serif;
  font-size: clamp(1.9rem, 3vw, 3rem);
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.stat-value[data-dashboard-domain] {
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
}

.stat-label,
.pill,
.meta,
.small,
.help-copy,
.form-help,
.note,
.status-copy {
  color: var(--muted);
  font-size: 0.92rem;
}

.section {
  padding: 16px 0 32px;
}

.section-title {
  margin: 0 0 8px;
  font-family: var(--font-display), sans-serif;
  font-size: clamp(2rem, 3vw, 3rem);
  letter-spacing: -0.04em;
}

.section-intro {
  max-width: 68ch;
  margin: 0 0 18px;
}

.stats-grid,
.features-grid,
.portal-steps,
.support-grid,
.news-grid,
.dashboard-grid,
.status-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.stat-card { grid-column: span 4; }
.feature-card { grid-column: span 4; }
.step-card { grid-column: span 3; }
.support-card { grid-column: span 4; }
.news-card { grid-column: span 4; }
.status-card { grid-column: span 6; }
.status-item { grid-column: span 12; }
.dashboard-main { grid-column: span 8; }
.dashboard-aside { grid-column: span 4; }

.live-preview-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.live-preview-tab {
  flex: 1;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: var(--radius-sm);
  padding: 7px 4px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.live-preview-tab:hover { color: var(--text); }
.live-preview-tab.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.live-preview-phone {
  border: 8px solid #1a1a1e;
  border-radius: 32px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow);
  max-width: 520px;
  margin: 0 auto;
}
.live-preview-phone iframe {
  width: 100%;
  aspect-ratio: 9 / 16;
  height: auto;
  border: 0;
  display: block;
  background: #0a0a0d;
}
.live-preview-aside {
  position: sticky;
  top: 90px;
  align-self: start;
  grid-row: 1 / span 2;
  grid-column: 7 / span 6;
  padding-top: 14px;
  padding-bottom: 14px;
}
#branding .dashboard-main {
  grid-column: span 6;
}
@media (max-width: 1040px) {
  .live-preview-aside {
    position: static;
    grid-row: auto;
    grid-column: span 12;
  }
}
.portal-stage { grid-column: span 7; }
.preview-panel { grid-column: span 5; }

.step-index,
.chip,
.badge,
.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.step-card h3,
.feature-card h3,
.support-card h3,
.news-card h3,
.portal-stage h3,
.hero-card h3,
.panel h3 {
  margin: 12px 0 8px;
  font-family: var(--font-display), sans-serif;
  letter-spacing: -0.03em;
}

.value-list,
.checklist,
.bullet-list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.value-list li,
.bullet-list li,
.checklist li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--muted);
}

.value-list li::before,
.bullet-list li::before,
.checklist li::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 4px rgba(52, 245, 162, 0.08);
  flex: 0 0 10px;
}

.form-shell,
.branding-form,
.login-form {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.field,
.field-wide,
.field-sm,
.brand-preview,
.form-rail,
.portal-card,
.router-card,
.status-rail {
  grid-column: span 12;
}

.field-sm { grid-column: span 4; }
.field { grid-column: span 6; }

.field label,
.field-sm label,
.field-wide label,
.brand-preview label {
  display: grid;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--text);
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  padding: 12px 14px;
  font: inherit;
  outline: none;
}

/* Native <select> only paints its CLOSED state from page CSS in most
   browsers — the OPEN dropdown list is otherwise OS-chrome-rendered
   (defaults to a jarring white popup against this dark theme). Hiding the
   native arrow + drawing our own keeps the closed state on-brand.
   background-color/color on <option> alone is NOT enough in Chromium/Edge —
   it still paints the open list with light OS chrome unless the control is
   also told the page is dark via `color-scheme`, which is the actual switch
   that makes Chromium use its dark native palette (list background, text,
   scrollbar) for the popup. Firefox honors the <option> colors directly
   either way, so this is additive there, not a behavior change. */
.select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 42px;
  cursor: pointer;
  color-scheme: dark;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23a5a5ad' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
}

.select option {
  background-color: #141418;
  color: var(--text);
}

.textarea {
  min-height: 116px;
  resize: vertical;
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: rgba(52, 245, 162, 0.5);
  box-shadow: 0 0 0 4px rgba(52, 245, 162, 0.12);
}

.color-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.color-input {
  width: 58px;
  height: 46px;
  padding: 0;
  border: none;
  background: transparent;
}

.upload-box {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.03);
}

.upload-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.upload-preview img,
.brand-avatar,
.logo-slot img,
.portal-logo {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.logo-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
}

.preview-frame {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 50% 0%, rgba(52, 245, 162, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(18, 18, 22, 0.98), rgba(10, 10, 12, 0.98));
  overflow: hidden;
}

.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  /* .preview-frame's own overflow:hidden + border-radius should clip this
     (its first child) uniformly, but explicit corners here guard against
     the parent clip not reliably rounding a flex child in every browser. */
  border-radius: 24px 24px 0 0;
}

.preview-body {
  padding: 22px;
  display: grid;
  gap: 16px;
}

.preview-card,
.portal-login,
.status-item,
.mini-panel {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  padding: 16px;
}

.preview-card {
  display: grid;
  gap: 10px;
}

.preview-form {
  display: grid;
  gap: 12px;
}

.preview-input,
.preview-submit {
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  padding: 12px 14px;
  font: inherit;
}

.preview-submit {
  background: linear-gradient(135deg, var(--accent), #7bf9c3);
  color: #06110c;
  font-weight: 700;
}

.status-item,
.mini-panel {
  display: grid;
  gap: 8px;
}

.status-label {
  font-size: 0.84rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.status-value {
  font-family: var(--font-display), sans-serif;
  font-size: 1.2rem;
  letter-spacing: -0.03em;
}

.ok {
  color: #8dfac7;
}

.warn {
  color: #ffd166;
}

.danger {
  color: #ff8a8a;
}

.footer {
  padding: 32px 0 48px;
  color: var(--muted);
}

.footer-shell {
  display: grid;
  gap: 18px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 80;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(52, 245, 162, 0.22);
  background: rgba(8, 8, 10, 0.92);
  box-shadow: var(--shadow);
}

.hidden {
  display: none !important;
}

.stack {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stack .panel {
  min-height: 100%;
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.panel-title {
  margin: 0;
  font-family: var(--font-display), sans-serif;
  font-size: 1.2rem;
}

.panel-subtitle {
  margin: 6px 0 0;
  color: var(--muted);
}

.auth-shell {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 36px;
  align-items: start;
}

.auth-shell.wide {
  grid-template-columns: 1fr 560px;
}

.auth-visual {
  position: sticky;
  top: 120px;
  padding: 28px 8px;
}

.auth-visual h1 {
  margin: 0 0 16px;
}

.auth-highlights {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 26px;
}

/* .stat-card normally lives in a 12-col grid and spans 4 of them — inside
   the 3-col auth-highlights grid that same "span 4" makes each card take a
   whole row by itself. Override to one column so they sit side by side. */
.auth-highlights .stat-card {
  grid-column: span 1;
  padding: 16px;
  min-height: 0;
}

.auth-highlights .stat-value {
  font-size: clamp(1.3rem, 2vw, 1.8rem);
}

@media (max-width: 640px) {
  .auth-highlights {
    grid-template-columns: 1fr;
  }
}

.auth-card {
  padding: 28px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 20px;
}

.auth-brand.center {
  align-items: center;
  text-align: center;
}

.auth-logo {
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
}

.auth-brand .brand {
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
}

.auth-kicker {
  color: var(--muted);
  font-size: 0.92rem;
}

.auth-form {
  display: grid;
  gap: 12px;
}

.auth-form label {
  display: grid;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--text);
}

.auth-form .two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.form-error,
.form-success {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}

.form-error {
  color: #ff7b7b;
  background: rgba(255, 123, 123, 0.06);
  border: 1px solid rgba(255, 123, 123, 0.18);
}

.form-success {
  color: #8ef0b0;
  background: rgba(52, 245, 162, 0.08);
  border: 1px solid rgba(52, 245, 162, 0.2);
}

.auth-aux {
  margin-top: 4px;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.auth-aux a,
.auth-link-btn {
  color: var(--accent);
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  padding: 0;
}

.auth-aux a:hover,
.auth-link-btn:hover {
  color: #7efac2;
}

.auth-secondary-link {
  margin-top: -4px;
}

.auth-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 4, 6, 0.72);
  backdrop-filter: blur(6px);
}

.auth-modal {
  width: min(420px, 100%);
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: rgba(16, 16, 20, 0.98);
  box-shadow: var(--shadow);
}

/* Wider variant for content-heavy modals (currently just Payment terms) —
   scoped to this modifier so every other .auth-modal (OTP, forgot-password,
   trial, pay-now) keeps its original narrow width. Also switches to a
   flex column with a capped viewport height so .modal-scroll-body's
   flex:1 1 auto/min-height:0 can actually bound the scroll area, same
   fixed-header-and-footer pattern .tenant-modal already uses. */
.auth-modal.wide {
  width: min(640px, 100%);
  max-height: min(88vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.auth-modal.wide h3 { flex: 0 0 auto; }
.auth-modal.wide .auth-modal-actions { flex: 0 0 auto; }

.auth-modal h3 {
  margin: 0 0 8px;
  font-family: var(--font-display), sans-serif;
}

.auth-modal p {
  margin: 0 0 16px;
  color: var(--muted);
}

.auth-modal-form {
  display: grid;
  gap: 12px;
}

.auth-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.otp-input-label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 8px;
}

.otp-input-group {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 0 4px;
}

.otp-box {
  width: 46px;
  height: 56px;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text, #f4f4f5);
  font-family: var(--font-display), sans-serif;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.otp-box:focus {
  outline: none;
  border-color: var(--accent, #5ac8ff);
  box-shadow: 0 0 0 3px rgba(90, 200, 255, 0.18);
}

.otp-box:disabled {
  opacity: 0.5;
}

.otp-countdown {
  margin: 0;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

.otp-countdown.otp-countdown-warn {
  color: #f5a623;
}

.otp-countdown.otp-countdown-expired {
  color: #ff5c5c;
  font-weight: 600;
}

@media (max-width: 980px) {
  .auth-shell,
  .auth-shell.wide {
    grid-template-columns: 1fr;
  }

  .auth-visual {
    position: static;
    order: 2;
  }

  .auth-card {
    order: 1;
  }
}

@media (max-width: 1040px) {
  .hero-shell,
  .dashboard-shell,
  .portal-shell {
    grid-template-columns: 1fr;
  }

  .stat-card,
  .feature-card,
  .step-card,
  .support-card,
  .news-card,
  .status-card,
  .dashboard-main,
  .dashboard-aside,
  .portal-stage,
  .preview-panel,
  .field,
  .field-sm {
    grid-column: span 12;
  }

  .hero-side,
  .stack {
    grid-template-columns: 1fr;
  }

  .nav {
    display: none;
  }
}

@media (max-width: 720px) {
  .site-header {
    padding-top: 12px;
  }

  .hero-copy,
  .hero-card,
  .panel,
  .status-card,
  .portal-stage,
  .preview-panel,
  .support-card,
  .news-card,
  .step-card,
  .feature-card,
  .stat-card {
    padding: 18px;
    border-radius: 22px;
  }

  .header-shell {
    border-radius: 22px;
  }

  .header-inner {
    padding: 18px;
  }

  .page {
    padding-top: 96px;
  }

  .hero h1 {
    font-size: clamp(2.5rem, 11vw, 4rem);
  }

  .hero-actions,
  .inline-actions,
  .form-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  .shell {
    width: min(1200px, calc(100% - 24px));
  }
}

/* ── Sidebar dashboard (isn/business-dashboard.html) ──
   Ported from the ISN Cloud reference's .migrate-* docs sidebar, renamed to
   .dash-* so it never collides with this file's existing .dashboard-shell/
   .dashboard-main names used elsewhere. Reuses the same --accent/--border/
   --radius-lg custom properties already shared between both codebases. */
.dash-layout {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

.dash-nav {
  position: fixed;
  top: 128px;
  left: calc((100vw - min(1200px, calc(100% - 40px))) / 2);
  bottom: 24px;
  width: 240px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 18px 18px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  z-index: 5;
}

.dash-nav-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 14px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
}

.dash-nav-header-brand {
  color: var(--text);
  font-weight: 700;
  font-size: 0.92rem;
  font-family: var(--font-display), sans-serif;
}

.dash-nav-body {
  display: grid;
  gap: 18px;
  overflow-y: auto;
  padding-bottom: 18px;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(52, 245, 162, 0.5) rgba(255, 255, 255, 0.05);
}

.dash-nav-body::-webkit-scrollbar { width: 8px; }
.dash-nav-body::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03); border-radius: 999px; }
.dash-nav-body::-webkit-scrollbar-thumb {
  background: rgba(52, 245, 162, 0.35);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.dash-nav-group {
  display: grid;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.dash-nav-group:first-child {
  padding-top: 0;
  border-top: none;
}

.dash-nav-group-title {
  position: sticky;
  top: 0;
  z-index: 2;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
  padding: 2px 4px 6px;
}

.dash-nav-links {
  display: grid;
  gap: 6px;
}

.dash-nav-link {
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--muted);
  border: 1px solid transparent;
  font-size: 0.9rem;
  transition: border 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.dash-nav-link:hover {
  color: var(--text);
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.05);
}

.dash-nav-link.is-active {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(52, 245, 162, 0.14);
  font-weight: 500;
  box-shadow: inset 0 0 0 1px rgba(52, 245, 162, 0.3);
}

.dash-nav-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0 0;
  border-top: 1px solid var(--border);
}

.dash-nav-cta .btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 10px;
  font-size: 0.84rem;
  white-space: nowrap;
}

/* Revealed in place of the Publish button once a tenant has actually
   published (see #dash-publish-btn / #dash-published-url-wrap, isn/app.js) —
   the real "<slug>.PLATFORM_BASE_DOMAIN" or custom-domain URL, not the
   internal WYSIWYG preview link used elsewhere on this page. Its own small
   labeled block (not just another pill jammed into the button row) so the
   truncated URL and the Copy button both get enough room to read cleanly. */
.dash-published-url {
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
  min-width: 0;
  gap: 6px;
}

.dash-published-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Shimmering gradient text, not a flat color — a tenant going live is a
     one-time, worth-celebrating moment, not just another status label. */
  background: linear-gradient(90deg, #34f5a2, #b6ffe0, #34f5a2, #7bf9c3);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: dash-live-shimmer 2.6s linear infinite;
}

.dash-published-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent, #34f5a2);
  box-shadow: 0 0 0 0 rgba(52, 245, 162, 0.55);
  animation: dash-live-pulse 1.7s ease-out infinite;
}

@keyframes dash-live-shimmer {
  to { background-position: -300% center; }
}

@keyframes dash-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(52, 245, 162, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(52, 245, 162, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 245, 162, 0); }
}

.dash-published-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.dash-published-link {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 14px;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(52, 245, 162, 0.35);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--accent, #34f5a2);
  background: rgba(52, 245, 162, 0.1);
  box-shadow: 0 0 14px rgba(52, 245, 162, 0.25);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.dash-published-link:hover {
  background: rgba(52, 245, 162, 0.16);
  border-color: rgba(52, 245, 162, 0.45);
}

/* .dash-nav-cta .btn (above) already sets padding/font-size for every .btn
   in this row at equal specificity to a bare .dash-published-copy rule — the
   extra .dash-nav-cta prefix here is required to actually win the override,
   not just tidiness. */
.dash-nav-cta .dash-published-copy {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.82rem;
}

/* Missed-payment alert — the SAME header every page already has just
   flashes its own border red (its normal pill shape, unchanged size),
   toggled via #site-header.billing-alert in loadSubscriptionStatus
   (isn/app.js). The notice itself is a compact pill sitting inline in
   .header-actions, right next to the SMS-credits badge — same row, same
   header, never a taller box or a second banner underneath it. */
.site-header.billing-alert .header-shell {
  animation: header-billing-pulse 1.8s ease-in-out infinite;
}

@keyframes header-billing-pulse {
  0%, 100% { border-color: rgba(255, 92, 92, 0.35); box-shadow: none; }
  50% { border-color: rgba(255, 92, 92, 0.9); box-shadow: 0 0 16px rgba(255, 92, 92, 0.35); }
}

/* Compact pill, same scale as the SMS-credits badge it sits beside —
   inserted into .header-actions by ensureHeaderBillingAlertPill()
   (isn/app.js), which runs after wireAccountHeader has already built that
   row (that function clears/rebuilds .header-actions on load, so this
   can't be static markup there — it would get wiped out). */
.billing-alert-pill {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 5px 6px 5px 14px;
  border-radius: 999px;
  background: rgba(255, 92, 92, 0.08);
  border: 1px solid rgba(255, 92, 92, 0.35);
}

.billing-alert-pill.visible {
  display: inline-flex;
}

.billing-alert-text {
  color: #ff9a9a;
  font-weight: 600;
  font-size: 0.8rem;
  white-space: nowrap;
}

.billing-alert-paynow-btn {
  background: transparent;
  color: #ff9a9a;
  border: 1px solid rgba(255, 92, 92, 0.55);
  border-radius: 999px;
  padding: 5px 14px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  animation: header-billing-pulse 1.8s ease-in-out infinite;
}

.billing-alert-paynow-btn:hover {
  background: rgba(255, 92, 92, 0.12);
}

.dash-content {
  display: grid;
  gap: 24px;
  margin-left: 272px;
  padding-bottom: 24px;
}

.dash-section {
  padding: 24px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: var(--shadow);
  scroll-margin-top: 128px;
}

.dash-section-head {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
}

/* Visually groups one topic's worth of controls inside a multi-topic
   .dash-section (e.g. Billing & plan's Subscription/Plan & pricing/
   Auto-scale/Payment gateways all live in one section) — a light nested
   card so each group reads as its own "thing you're busy with" instead of
   a flat scroll of headings separated only by margin. */
.dash-subgroup {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.025);
  padding: 22px;
}
.dash-subgroup + .dash-subgroup {
  margin-top: 22px;
}
.dash-subgroup .dash-section-head {
  margin-bottom: 16px;
}
.dash-subgroup .dash-section-head h3.panel-title {
  font-size: 1rem;
}
/* Compact variant for tightly-packed contexts (e.g. inside a modal) where
   the full 22px padding/spacing would waste too much of a smaller box. */
.dash-subgroup.tight {
  padding: 14px 16px;
}
.dash-subgroup.tight + .dash-subgroup.tight {
  margin-top: 12px;
}
.dash-subgroup.tight h4 {
  margin: 0 0 6px;
  font-family: var(--font-display), sans-serif;
  font-size: 0.95rem;
}
.dash-subgroup.tight p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.dash-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 123, 123, 0.3);
  background: rgba(255, 123, 123, 0.08);
  color: #ff9d9d;
  font-size: 0.82rem;
  font-weight: 600;
}

.dash-badge.ok {
  border-color: rgba(52, 245, 162, 0.3);
  background: rgba(52, 245, 162, 0.08);
  color: #8dfac7;
}

/* Neutral blue tint — deliberately NOT the red .dash-badge default (that
   reads as an alert) or the green .ok variant (that reads as "all good") —
   impersonation is neither, just a distinct mode worth flagging clearly. */
.dash-badge.info {
  border-color: rgba(90, 200, 255, 0.35);
  background: rgba(90, 200, 255, 0.1);
  color: #7ed4ff;
}

/* Same visual language as .dash-badge but an actual clickable <button>. */
.dash-badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(90, 200, 255, 0.35);
  background: rgba(90, 200, 255, 0.1);
  color: #7ed4ff;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.dash-badge-btn:hover {
  background: rgba(90, 200, 255, 0.18);
}

.impersonate-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
}
.impersonate-result-item:hover {
  border-color: rgba(90, 200, 255, 0.4);
  background: rgba(90, 200, 255, 0.06);
}

.dash-quote-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.dash-quote-row .field-sm { flex: 0 0 auto; width: 160px; }

.dash-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.dash-history-table th,
.dash-history-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}

.dash-history-table td:first-child,
.dash-history-table th:first-child {
  color: var(--text);
}

@media (max-width: 980px) {
  .dash-nav {
    position: static;
    width: auto;
    height: auto;
    bottom: auto;
  }

  .dash-content {
    margin-left: 0;
  }
}

/* ── Platform status sensors (isn/status.html) — dark-themed port of the
   sensor-card visual language on the per-tenant status.html (dot/badge/
   uptime/latency/90-bar sparkline/expand-to-modal), restyled with this
   file's own --bg/--panel/--accent/--border variables so it matches every
   other isn/ page instead of that page's own light-branded inline styles. ── */
.overall-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.85rem; font-weight: 700;
  padding: 6px 16px; border-radius: 999px; border: 1.5px solid;
  margin-top: 14px;
}
.overall-pill.operational { background: rgba(52, 245, 162, .12); border-color: rgba(52, 245, 162, .4); color: var(--accent); }
.overall-pill.degraded    { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .4); color: #fbbf24; }
.overall-pill.outage      { background: rgba(239, 68, 68, .14); border-color: rgba(239, 68, 68, .4); color: #f87171; }
.overall-pill.unknown     { background: rgba(255, 255, 255, .06); border-color: var(--border); color: var(--muted); }

.sensor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-items: stretch; }
.sensor-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px 22px 18px;
  transition: border-color .2s;
  /* Column layout + the min-heights below keep the uptime/latency row,
     bars, and "View details" button lined up in a straight horizontal row
     across every card in the grid, regardless of whether that card's own
     name/description happens to wrap to one line or two. */
  display: flex; flex-direction: column;
}
.sensor-card:hover { border-color: rgba(52, 245, 162, .3); }
.sensor-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 3px; min-height: 2.6rem; }
.sensor-name { font-size: 0.93rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }

@keyframes dot-pulse-isn {
  0%   { box-shadow: 0 0 0 0 rgba(52, 245, 162, .55); }
  60%  { box-shadow: 0 0 0 6px rgba(52, 245, 162, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 245, 162, 0); }
}
.sensor-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.sensor-dot.operational { background: var(--accent); box-shadow: 0 0 0 3px rgba(52, 245, 162, .18); animation: dot-pulse-isn 2s ease-out infinite; }
.sensor-dot.degraded    { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); }
.sensor-dot.down        { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .18); }
.sensor-dot.unknown     { background: #6b7280; }

.sensor-badge { font-size: 0.68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 3px 9px; flex-shrink: 0; border: 1px solid; }
.sensor-badge.operational { background: rgba(52, 245, 162, .1); color: var(--accent); border-color: rgba(52, 245, 162, .35); }
.sensor-badge.degraded    { background: rgba(245, 158, 11, .1); color: #fbbf24; border-color: rgba(245, 158, 11, .35); }
.sensor-badge.down        { background: rgba(239, 68, 68, .12); color: #f87171; border-color: rgba(239, 68, 68, .35); }
.sensor-badge.unknown     { background: rgba(255, 255, 255, .05); color: var(--muted); border-color: var(--border); }

.sensor-desc { font-size: 0.78rem; color: var(--muted); margin: 3px 0 9px; line-height: 1.4; min-height: 2.2rem; }
.sensor-meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.73rem; color: var(--muted); margin-bottom: 8px; }
.sensor-uptime { font-weight: 700; color: var(--text); }
.sensor-latency { font-weight: 600; }

.sensor-bars { display: flex; gap: 2px; align-items: flex-end; height: 28px; }
.sensor-bar { flex: 1; min-width: 0; border-radius: 2px; height: 100%; cursor: pointer; transition: opacity .1s; }
.sensor-bar:hover { opacity: .75; }
.sensor-bar.ok       { background: var(--accent); }
.sensor-bar.degraded { background: #f59e0b; height: 82%; }
.sensor-bar.down     { background: #ef4444; height: 40%; }
.sensor-bar.nodata   { background: rgba(255, 255, 255, .08); height: 50%; }

#platformBarTooltip {
  position: fixed; z-index: 9999;
  background: rgba(0, 0, 0, .9); color: #fff;
  font-size: 0.72rem; padding: 5px 10px; border-radius: 7px;
  pointer-events: none; white-space: nowrap; display: none;
  border: 1px solid var(--border);
}
.sensor-bar-label { display: flex; justify-content: space-between; font-size: 0.63rem; color: var(--muted); margin-top: 3px; }

.sensor-expand-btn {
  margin-top: auto; width: 100%;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--border); border-radius: var(--radius-md);
  color: var(--text); font-size: 0.78rem; font-weight: 600; padding: 7px 0;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.sensor-expand-btn:hover { background: rgba(52, 245, 162, .08); border-color: rgba(52, 245, 162, .4); color: var(--accent); }

.sensor-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 16px;
}
.sensor-modal-overlay.open { display: flex; }
.sensor-modal {
  background: var(--panel-strong); border: 1px solid var(--border); border-radius: var(--radius-lg);
  max-width: 620px; width: 100%; max-height: 90vh;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow);
}
.sensor-modal-header {
  background: linear-gradient(135deg, rgba(52, 245, 162, .14), rgba(90, 200, 255, .08));
  border-bottom: 1px solid var(--border);
  padding: 20px 22px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.sensor-modal-title { font-size: 1.15rem; font-weight: 800; color: var(--text); line-height: 1.3; margin-bottom: 2px; }
.sensor-modal-subtitle { font-size: 0.78rem; color: var(--muted); }
.sensor-modal-close {
  background: rgba(255, 255, 255, .06); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); padding: 5px 11px;
  cursor: pointer; font-size: 0.8rem; font-weight: 600; flex-shrink: 0;
}
.sensor-modal-close:hover { background: rgba(255, 255, 255, .12); }
.sensor-modal-body { flex: 1; overflow-y: auto; padding: 22px; }
.sensor-bars-lg { display: flex; gap: 3px; align-items: flex-end; height: 56px; margin-bottom: 4px; }
.sensor-bars-lg .sensor-bar { border-radius: 3px; }
.sensor-modal-stat-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-bottom: 18px; }
.sensor-modal-stat { background: rgba(255, 255, 255, .03); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; text-align: center; overflow: hidden; }
.sensor-modal-stat-val { font-size: clamp(0.9rem, 3.8vw, 1.3rem); font-weight: 800; color: var(--text); word-break: break-word; overflow-wrap: break-word; }
.sensor-modal-stat-lbl { font-size: 0.68rem; color: var(--muted); margin-top: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* ── Maintenance windows / incidents (isn/status.html) — reuses the SAME
   /api/maintenance/public feed the per-tenant status.html already reads
   (it carries no tenant_id — it's genuinely platform-wide), just restyled
   dark to match this page. ── */
.slot-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.slot-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); padding: 20px 22px; }
.slot-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; font-weight: 700; }
.slot-title { font-size: 0.97rem; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.slot-time { font-size: 0.83rem; color: var(--muted); line-height: 1.5; }
.slot-progress { margin-top: 10px; width: 100%; height: 7px; background: rgba(255, 255, 255, .06); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.slot-progress > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f59e0b, #ea580c); transition: width .5s ease; }

.maint-list { display: grid; gap: 14px; }
.maint-item { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; background: var(--panel); transition: border-color .2s; }
.maint-item:hover { border-color: rgba(52, 245, 162, .3); }
.maint-item.focused { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(52, 245, 162, .15); scroll-margin-top: 80px; }
.maint-item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.maint-title { font-size: 0.97rem; font-weight: 700; color: var(--text); }
.maint-badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.maint-meta { font-size: 0.8rem; color: var(--muted); margin-bottom: 8px; display: grid; gap: 2px; }
.maint-desc-preview { font-size: 0.88rem; color: var(--text); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.maint-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

.btn-primary-sm {
  border: 1px solid rgba(52, 245, 162, .4); background: rgba(52, 245, 162, .08); color: var(--accent);
  border-radius: 999px; padding: 7px 16px; font-size: 0.78rem; font-weight: 700;
  cursor: pointer; text-decoration: none; transition: background .15s;
  display: inline-flex; align-items: center; gap: 5px;
}
.btn-primary-sm:hover { background: rgba(52, 245, 162, .15); }

.sev-info     { background: rgba(90, 200, 255, .1); color: var(--accent-2); border-color: rgba(90, 200, 255, .35); }
.sev-minor    { background: rgba(245, 158, 11, .1); color: #fbbf24; border-color: rgba(245, 158, 11, .35); }
.sev-major    { background: rgba(234, 88, 12, .12); color: #fb923c; border-color: rgba(234, 88, 12, .4); }
.sev-critical { background: rgba(239, 68, 68, .12); color: #f87171; border-color: rgba(239, 68, 68, .35); }
.badge-status { background: rgba(255, 255, 255, .05); color: var(--text); border-color: var(--border); }

.empty-state {
  text-align: center; padding: 40px 16px; color: var(--muted); font-size: 0.9rem;
  border: 1.5px dashed var(--border); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .02);
}
.empty-state svg { width: 36px; height: 36px; color: var(--muted); margin-bottom: 12px; display: block; margin-left: auto; margin-right: auto; }

.alert-investigating { border-radius: var(--radius-lg); padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.alert-investigating.warn-level { background: rgba(245, 158, 11, .08); border: 1.5px solid rgba(245, 158, 11, .35); }
.alert-investigating.down-level { background: rgba(239, 68, 68, .08); border: 1.5px solid rgba(239, 68, 68, .35); }
.alert-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.alert-pulse { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; animation: alertPulse 1.6s ease-in-out infinite; }
.alert-pulse.warn-level { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, .2); animation-name: alertPulseWarn; }
.alert-pulse.down-level { background: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, .2); }
@keyframes alertPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .4); } 60% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); } }
@keyframes alertPulseWarn { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .4); } 60% { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); } }
.alert-title { font-size: 1rem; font-weight: 800; color: var(--text); }
.alert-badge { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 999px; padding: 3px 10px; border: 1px solid; }
.alert-badge.warn-level { background: rgba(245, 158, 11, .12); color: #fbbf24; border-color: rgba(245, 158, 11, .35); }
.alert-badge.down-level { background: rgba(239, 68, 68, .12); color: #f87171; border-color: rgba(239, 68, 68, .35); }
.alert-affected { font-size: 0.83rem; color: var(--text); font-weight: 600; }
.alert-body { font-size: 0.88rem; color: var(--muted); line-height: 1.55; }
.alert-footer { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }

.modal-field { margin-bottom: 14px; }
.modal-field-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 4px; }
.modal-field-value { font-size: 0.92rem; color: var(--text); line-height: 1.55; white-space: pre-wrap; }

/* ── Homepage — hero photo + IT SaaS positioning sections ─────────────────
   Photos are expected as transparent-background PNGs (no card/border of
   their own) so they float directly on the page's dark backdrop the same
   way every other modern SaaS marketing hero does it. A missing image file
   just renders as empty space — layout never breaks if a photo isn't in
   place yet. */
.hero-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 360px;
  /* .hero-shell's grid has align-items:stretch (shared with other page
     layouts, not overridden here), which stretches this column to match
     hero-copy's full height. align-self overrides just this one grid item
     so the stack (photo + proof stats) only takes the height it actually
     needs and centers within the row, instead of the photo being forced to
     the bottom of an oversized box. */
  align-self: center;
}

/* Compact variant for the 4 hero-side stat cards — the default .stat-card
   sizing (132px min-height, up to 3rem value text) is tuned for full-width
   sections elsewhere; here it made 4 short one-line labels take up far more
   vertical space than the content needs. Same shrink treatment already
   established by .auth-highlights .stat-card for the same reason. */
.hero-side .stat-card {
  padding: 16px;
  min-height: 0;
}

.hero-side .stat-value {
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
}

.hero-side .stat-label {
  font-size: 0.82rem;
}

.hero-photo-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}

.hero-photo {
  width: 100%;
  max-width: 420px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55));
}

/* "We power N captives / managing N users daily" proof block, sitting right
   below the photo inside the same hero-visual column (not a separate
   full-width section) — two count-up stat blocks plus the free-trial CTA. */
.hero-proof {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 380px;
}

.hero-proof-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.hero-proof-stat {
  padding: 14px 10px;
  text-align: center;
}

.count-value {
  display: block;
  font-family: var(--font-display), sans-serif;
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  font-weight: 800;
  color: var(--accent);
  line-height: 1.1;
}

.count-label {
  display: block;
  margin-top: 4px;
  font-size: 0.76rem;
  line-height: 1.3;
  color: var(--muted);
}

.hero-proof .btn {
  width: 100%;
}

.hero-floating-badge {
  position: absolute;
  left: 0;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(22, 22, 26, 0.95), rgba(12, 12, 14, 0.9));
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}

.hero-floating-badge .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  flex-shrink: 0;
}

.hero-floating-badge strong {
  display: block;
  font-family: var(--font-display), sans-serif;
  font-size: 0.95rem;
  line-height: 1.2;
}

.hero-floating-badge span {
  display: block;
  font-size: 0.76rem;
  color: var(--muted);
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 600;
}

.trust-item svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
  flex-shrink: 0;
}

.photo-split {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  gap: 36px;
  align-items: center;
}

.photo-split.reverse {
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
}

.photo-split.reverse .photo-split-media {
  order: 2;
}

.photo-split-media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-split-media img {
  width: 100%;
  max-width: 360px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.5));
}

@media (max-width: 900px) {
  .trust-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .photo-split,
  .photo-split.reverse {
    grid-template-columns: 1fr;
  }
  .photo-split.reverse .photo-split-media {
    order: 0;
  }
  .hero-visual {
    min-height: 260px;
  }
}

/* ── Shared site footer — every isn/ marketing page (not dashboard/login/
   signup, which stay as-is). Plain repeated markup per page (no templating
   layer in this codebase), styled once here. ───────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 60px;
  padding: 48px 0 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.footer-brand img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.footer-brand span {
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
  color: var(--text);
}

.footer-col h4 {
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.footer-col a {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.92rem;
  transition: color 0.15s;
}

.footer-col a:hover {
  color: var(--accent);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--muted);
}

@media (max-width: 720px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Shared jump-nav pills + small icon badge — previously duplicated as
   identical inline <style> blocks in features.html and solutions.html. */
.feature-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 28px;
}

.feature-jump a {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}

.feature-jump a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.deep-dive-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.deep-dive-icon svg {
  width: 22px;
  height: 22px;
}
hr.modal-divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }