/* Dark shared style for FormSuite product inner pages. Loaded after legacy inline CSS. */
:root {
  --bg: #07080a !important;
  --bg-2: #0b0d12 !important;
  --panel: rgba(255, 255, 255, 0.045) !important;
  --ink: #f5f7fb !important;
  --muted: #a7afbd !important;
  --line: rgba(255, 255, 255, 0.09) !important;
  --brand: #7c83ff !important;
  --brand-soft: rgba(124, 131, 255, 0.14) !important;
  --accent: #35d07f !important;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh !important;
  margin: 0 !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-feature-settings: "cv01", "ss03" !important;
  color: #f5f7fb !important;
  background:
    radial-gradient(circle at 18% -8%, rgba(94, 106, 210, 0.24), transparent 34rem),
    radial-gradient(circle at 92% 10%, rgba(53, 208, 127, 0.10), transparent 28rem),
    linear-gradient(180deg, #07080a, #0b0d12 54%, #07080a) !important;
  line-height: 1.65 !important;
}
a { color: #dfe3ff !important; text-decoration: none !important; }
a:hover { color: #fff !important; }

.shell, main, .container, .wrap {
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 28px 20px 64px !important;
}
.shell > .nav, body > .nav, nav.nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin: -28px -20px 28px !important;
  padding: 16px 20px !important;
  background: rgba(7, 8, 10, 0.80) !important;
  border-bottom: 1px solid rgba(255,255,255,0.055) !important;
  backdrop-filter: blur(18px) !important;
  color: #b7bfcc !important;
  font-size: 0.88rem !important;
}
.nav a:first-child {
  color: #fff !important;
  font-weight: 700 !important;
}
.nav a[href*="install"], .nav a[href*="marketplace"] {
  color: #fff !important;
}

.hero, header.hero, section.hero {
  background: linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.035)) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 24px !important;
  padding: 30px !important;
  box-shadow: 0 28px 90px rgba(0,0,0,0.36) !important;
}
.eyebrow, .pill, .badge, .tag {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  gap: 8px !important;
  min-height: 30px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  color: #dfe3ff !important;
  background: rgba(124, 131, 255, 0.14) !important;
  border: 1px solid rgba(124, 131, 255, 0.24) !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}
h1 {
  color: #f5f7fb !important;
  font-size: clamp(2.35rem, 6vw, 4.8rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.055em !important;
  font-weight: 600 !important;
  margin: 14px 0 14px !important;
}
h2 {
  color: #f5f7fb !important;
  font-size: clamp(1.55rem, 3.2vw, 2.45rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em !important;
  font-weight: 600 !important;
}
h3 { color: #f5f7fb !important; letter-spacing: -0.02em !important; }
p, li, dd, .muted, .hero p, .card p, .card li { color: #a7afbd !important; }
strong { color: #f5f7fb !important; }

.grid, .cards, .feature-grid, .content-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr) !important;
  gap: 18px !important;
  margin-top: 24px !important;
}
.card, article.card, aside.card, .panel, .guide-panel, .faq-panel, section:not(.hero) > article, main > article {
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.035)) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  box-shadow: none !important;
}
.card + .card, section + section { margin-top: 22px !important; }
ul, ol { padding-left: 1.25rem !important; }
li + li { margin-top: 8px !important; }

.btn, .button, .hero-actions a, .path-links a, .card a:not(.plain), a.btn-primary, a.btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  background: rgba(255,255,255,0.045) !important;
  color: #e6eaf3 !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.btn-primary, .hero-actions a:first-child, .path-links a:first-child {
  background: linear-gradient(135deg, #5e6ad2, #848cff) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 12px 44px rgba(94,106,210,0.30) !important;
}
.hero-actions, .path-links, .link-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 20px !important;
}

.faq-item, details {
  border-top: 1px solid rgba(255,255,255,0.075) !important;
  padding-top: 16px !important;
}
.faq-item:first-child, details:first-child { border-top: 0 !important; }
footer {
  color: #707988 !important;
  border-top: 1px solid rgba(255,255,255,0.055) !important;
  margin-top: 36px !important;
  padding-top: 22px !important;
  text-align: center !important;
}
code, pre {
  color: #e7e9ff !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
}

@media (max-width: 860px) {
  .shell, main, .container, .wrap { padding-left: 16px !important; padding-right: 16px !important; }
  .shell > .nav, body > .nav, nav.nav { margin-left: -16px !important; margin-right: -16px !important; }
  .grid, .cards, .feature-grid, .content-grid { grid-template-columns: 1fr !important; }
  .hero, header.hero, section.hero { padding: 22px !important; }
  h1 { font-size: clamp(2.3rem, 13vw, 3.8rem) !important; }
}

/* Override common legacy guide/article components that used light pastel cards. */
.tile, .path, .official, .box, .callout, .note, .resource-card, .workflow-card, .comparison-card, .step, .steps li, .checklist li, .faq-item {
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.035)) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  color: #f5f7fb !important;
}
.tile.blue, .tile.green, .tile.amber, .tile.rose, .tile.teal,
.path.blue, .path.green, .path.amber, .path.rose, .path.teal,
.card.blue, .card.green, .card.amber, .card.rose, .card.teal {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.035)) !important;
}
.official-links a, .resource-links a, .related a, .link-card, .reference-card {
  background: rgba(255,255,255,0.045) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  color: #e6eaf3 !important;
}
.tag, .chip, .label {
  background: rgba(124, 131, 255, 0.14) !important;
  border: 1px solid rgba(124, 131, 255, 0.24) !important;
  color: #dfe3ff !important;
}
.tile p, .path p, .official p, .box p, .callout p, .note p,
.tile li, .path li, .official li, .box li, .callout li, .note li {
  color: #a7afbd !important;
}

/* Broad FormSuite dark-theme normalization for legacy product/detail pages.
   Keep this at the end so it beats old inline light cards loaded earlier. */
.trust-strip,
.workflow-grid,
.step-grid,
.mini-guide-grid,
.features,
.feature-grid,
.grid,
.cards {
  gap: 14px !important;
}
.trust-item,
.step-card,
.mini-guide-card,
.feature,
.visual-panel:not(.video-panel),
.form-event,
.mail-card,
.install-panel,
.note,
.link-bar a,
.link-row a,
.resource-card,
.workflow-card,
.comparison-card,
.tile,
.path,
.official,
.box,
.callout,
.panel,
.card,
article.card,
aside.card,
section:not(.hero) > article,
main > article {
  background: linear-gradient(180deg, rgba(255,255,255,0.060), rgba(255,255,255,0.036)) !important;
  border: 1px solid rgba(255,255,255,0.095) !important;
  color: #f5f7fb !important;
  box-shadow: none !important;
}
.trust-item strong,
.step-card strong,
.step-card h3,
.mini-guide-card strong,
.feature strong,
.feature h3,
.install-panel strong,
.note strong,
.form-event strong,
.mail-card strong,
.link-bar a,
.link-row a,
.card strong,
.card h2,
.card h3,
.panel strong,
.panel h2,
.panel h3 {
  color: #f5f7fb !important;
}
.trust-item span,
.step-card p,
.mini-guide-card p,
.feature p,
.install-panel p,
.note,
.note p,
.form-event p,
.mail-body,
.card p,
.panel p {
  color: #a7afbd !important;
}
.step-card .number,
.step-num,
.status-pill,
.mail-head {
  background: rgba(124, 131, 255, 0.14) !important;
  color: #dfe3ff !important;
  border: 1px solid rgba(124, 131, 255, 0.24) !important;
}
.mail-line { background: rgba(255,255,255,0.16) !important; }
.btn,
.button,
.hero-actions a,
.path-links a,
.link-bar a,
.link-row a,
.card a:not(.plain),
a.btn-primary,
a.btn-secondary {
  background: rgba(255,255,255,0.050) !important;
  color: #e6eaf3 !important;
  border-color: rgba(255,255,255,0.10) !important;
}
.btn-primary,
.hero-actions a:first-child,
.path-links a:first-child,
.link-bar a:first-child,
.link-row a:first-child,
a.btn-primary {
  background: linear-gradient(135deg, #5e6ad2, #848cff) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 12px 44px rgba(94,106,210,0.30) !important;
}
/* Avoid light islands inside old visual mockups unless they are media embeds. */
.product-visual [style*="background:#fff"],
.product-visual [style*="background: #fff"],
.product-visual [style*="background:white"],
.product-visual [style*="background: white"] {
  background: rgba(255,255,255,0.055) !important;
}
.video-panel,
.video-frame { background: #0f172a !important; }