/* Workforce Assemble commercial / SaaS presentation */

:root {
  --site-nav-h: 98px;
}

/* Keep direct application login links off the public marketing site for now. */
a[href^="https://app.workforceassemble.com"] {
  display: none !important;
}

/* Pricing is still being refined. Keep all public links to it hidden without deleting the page. */
a[href="pricing.html"] {
  display: none !important;
}

/* Keep the rejected homepage quick-scan strip out of the public experience. */
.quick-scan-section {
  display: none !important;
}

.nav,
.nav-inner { min-height: var(--site-nav-h); }
.nav-inner { max-width: 1450px; }
.brand { gap: 16px; }
.brand-mark-badge { width: 66px; height: 66px; border-radius: 16px; }
.brand-name { font-size: 1.36rem; }
.brand-tagline { font-size: .69rem; margin-top: 5px; }
.nav-links { gap: 2px; }
.nav-links a { padding: 10px 12px; font-size: .95rem; font-weight: 650; }
.nav-signin { border: 1px solid var(--border-strong); background: transparent; }
.nav-demo { background: var(--c-primary-600); color: #fff; }

/* Marketing hero carousel */
.hero-commercial {
  position: relative;
  padding-top: calc(var(--site-nav-h) + 14px);
  padding-bottom: 26px;
  overflow: hidden;
}
.hero-commercial .container { max-width: 1490px; }
.hero-slide { display: none; }
.hero-slide.is-active { display: grid; }
.hero-slide {
  grid-template-columns: minmax(0,.86fr) minmax(650px,1.14fr);
  gap: 28px;
  align-items: center;
  height: 430px;
  min-height: 430px;
}
.hero-copy { max-width: 650px; }
.hero-copy h1 {
  margin-top: 14px;
  font-size: clamp(2.65rem,3.55vw,4rem);
  line-height: 1.01;
  max-width: 650px;
  text-wrap: balance;
}
.hero-copy .lead { margin-top: 18px; max-width: 640px; font-size: clamp(.98rem,1.16vw,1.12rem); }
.hero-copy .hero-cta { margin-top: 24px; }
.hero-side {
  justify-self: end;
  width: min(100%,800px);
  transform: translateX(10px);
}
.hero-carousel-controls {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
}
.hero-dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: transparent;
}
.hero-dot[aria-selected="true"] { width: 28px; border-radius: 99px; background: var(--c-primary-500); border-color: var(--c-primary-500); }

.hero-company-panel,
.hero-role-panel,
.hero-attention-panel {
  width: 100%;
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 28px;
  padding: 28px;
  background: linear-gradient(145deg,rgba(255,255,255,.97),rgba(246,249,252,.94));
  box-shadow: var(--sh-xl);
}
.hero-company-grid { display:grid; grid-template-columns:1.03fr 150px 1fr; align-items:center; gap:20px; }
.hero-stack { display:grid; gap:11px; }
.hero-mini {
  padding: 13px 15px; border:1px solid var(--border); border-radius:12px; background:#fff;
}
.hero-mini strong { display:block; font-size:.9rem; color:var(--text-strong); }
.hero-mini span { display:block; font-size:.72rem; color:var(--text-muted); margin-top:3px; }
.hero-core {
  min-height:146px; border-radius:30px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  padding:16px; background:linear-gradient(160deg,#14283a,#0f1f31); color:#fff; border:1px solid rgba(88,216,215,.24);
}
.hero-core img { width:62px; height:62px; }
.hero-core strong { margin-top:7px; font-size:1.08rem; }
.hero-core small { margin-top:4px; color:#a9bbc7; font-size:.69rem; }
.hero-role-list { display:grid; gap:12px; }
.hero-role-row { display:grid; grid-template-columns:170px 1fr; gap:16px; align-items:center; padding:15px 16px; border:1px solid var(--border); background:#fff; border-radius:12px; }
.hero-role-row strong { color:var(--text-strong); font-size:.88rem; }
.hero-role-row span { color:var(--text-muted); font-size:.77rem; }
.hero-attention-list { display:grid; gap:12px; }
.hero-attention-item { display:grid; grid-template-columns:138px 1fr; gap:16px; padding:15px 16px; border:1px solid var(--border); border-radius:12px; background:#fff; }
.hero-attention-item strong { font-size:.88rem; color:var(--text-strong); }
.hero-attention-item span { font-size:.77rem; color:var(--text-muted); }

/* Connection section */
.connection-title { max-width: 900px; }
.connection-model-polished { display:grid; gap:12px; margin-top:40px; }
.connection-model-polished .connection-row { grid-template-columns:190px 1fr; }
.connection-category { font-family:var(--font-display); font-weight:800; color:#fff; }

/* SaaS cards */
.saas-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:38px; }
.saas-card { padding:24px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg); box-shadow:var(--sh-sm); }
.saas-card h3 { font-size:1.18rem; }
.saas-card p { margin-top:8px; color:var(--text-muted); font-size:.9rem; }
.saas-card ul { display:grid; gap:7px; margin-top:14px; }
.saas-card li { color:var(--text-muted); font-size:.84rem; position:relative; padding-left:16px; }
.saas-card li::before { content:'•'; position:absolute; left:0; color:var(--c-secondary-500); }

/* Pricing */
.pricing-tier-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:42px; }
.pricing-tier { padding:26px; border:1px solid var(--border); border-radius:var(--r-xl); background:var(--bg); box-shadow:var(--sh-sm); }
.pricing-tier.featured { border-color:var(--c-primary-300); box-shadow:var(--sh-lg); }
.pricing-tier .tier-range { display:inline-flex; padding:5px 9px; border-radius:999px; background:var(--bg-muted); color:var(--text-muted); font-size:.72rem; font-weight:800; }
.pricing-tier h3 { margin-top:12px; }
.pricing-tier .tier-price { margin-top:12px; font-family:var(--font-display); font-size:2rem; font-weight:800; color:var(--text-strong); }
.pricing-tier .tier-price small { font-family:var(--font-sans); font-size:.8rem; font-weight:600; color:var(--text-muted); }
.pricing-tier p { margin-top:8px; color:var(--text-muted); font-size:.88rem; }
.pricing-tier ul { display:grid; gap:8px; margin-top:16px; }
.pricing-tier li { color:var(--text-muted); font-size:.82rem; }
.pricing-note { margin-top:18px; text-align:center; color:var(--text-muted); font-size:.84rem; }

.base-includes { display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:start; }
.storage-panel { padding:26px; border:1px solid var(--border); border-radius:var(--r-xl); background:var(--bg-soft); }
.storage-panel h3 { margin-bottom:10px; }
.storage-panel p { color:var(--text-muted); }
.storage-panel ul { display:grid; gap:9px; margin-top:16px; }
.storage-panel li { color:var(--text-muted); font-size:.86rem; }
.bundle-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:38px; }
.bundle-card { padding:22px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg); }
.bundle-card h3 { font-size:1.02rem; }
.bundle-card p { margin-top:7px; color:var(--text-muted); font-size:.83rem; }

/* Security */
.security-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px; }
.security-card { padding:24px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg); }
.security-card .security-kicker { font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--c-secondary-600); }
.security-card h3 { margin-top:8px; font-size:1.12rem; }
.security-card p { margin-top:8px; color:var(--text-muted); font-size:.87rem; }
.security-boundary { padding:26px; border:1px solid var(--c-primary-100); background:var(--c-primary-50); color:var(--c-primary-900); border-radius:var(--r-xl); }
.security-boundary p { margin-top:8px; color:var(--c-primary-800); }

/* Contact: compact the primary form so the whole interaction sits higher in the viewport. */
.contact-hero { padding-top: 34px !important; padding-bottom: 24px !important; }
.contact-hero h1 { margin-top: 10px; font-size: clamp(2rem, 3vw, 3.2rem); }
.contact-hero .lead { margin-top: 10px; }
.contact-section { padding-top: 24px !important; padding-bottom: 38px !important; }
.contact-page-shell { max-width: 1240px; }
.contact-form-wide { padding: 24px !important; }
.contact-intent-fieldset { margin-bottom: 16px !important; }
.contact-intent-grid { gap: 10px !important; }
.contact-intent-card { padding: 12px 14px !important; min-height: 0 !important; }
.contact-fields { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px 14px !important; }
.contact-fields .field.full { grid-column: 1 / -1; }
.contact-fields .field label { margin-bottom: 5px !important; }
.contact-fields input,
.contact-fields select { min-height: 42px !important; padding-top: 8px !important; padding-bottom: 8px !important; }
.contact-fields textarea { min-height: 88px !important; }
.contact-security-check { margin-top: 16px !important; }
.contact-security-check .form-note { margin-top: 5px !important; }
.contact-submit-row { margin-top: 14px !important; gap: 16px !important; align-items: center !important; }
.contact-submit-row .form-note { margin: 0 !important; }
.contact-submit-row .form-note + .form-note { margin-top: 4px !important; }
.contact-next-grid { margin-top: 24px !important; }

/* Legal */
.legal { max-width:900px; margin:0 auto; }
.legal h2 { margin-top:34px; font-size:1.45rem; }
.legal h3 { margin-top:24px; font-size:1.1rem; }
.legal p, .legal li { color:var(--text-muted); }
.legal p { margin-top:10px; }
.legal ul { list-style:disc; padding-left:22px; margin-top:10px; }
.legal li { margin-top:6px; }

/* Footer legal links injected by JS */
.footer-legal { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.footer-legal a { color:var(--text-muted); font-size:.78rem; }

/* Give light mode more structure without making the site feel heavy. */
html[data-theme="light"] .card,
html[data-theme="light"] .saas-card,
html[data-theme="light"] .bundle-card,
html[data-theme="light"] .security-card,
html[data-theme="light"] .pricing-tier,
html[data-theme="light"] .department-grid article,
html[data-theme="light"] .role-band,
html[data-theme="light"] .contact-next-grid article,
html[data-theme="light"] .contact-form-wide {
  border-color: #c3cedc;
  box-shadow: 0 7px 20px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.05);
}

html[data-theme="light"] .hero-mini,
html[data-theme="light"] .hero-role-row,
html[data-theme="light"] .hero-attention-item {
  border-color: #cbd5e1;
  box-shadow: 0 3px 10px rgba(15,23,42,.06);
}

html[data-theme="light"] .section.tinted {
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

html[data-theme="light"] .card:hover,
html[data-theme="light"] .saas-card:hover,
html[data-theme="light"] .bundle-card:hover,
html[data-theme="light"] .security-card:hover,
html[data-theme="light"] .department-grid article:hover {
  border-color: #9fb1c8;
  box-shadow: 0 14px 30px rgba(15,23,42,.11), 0 4px 10px rgba(15,23,42,.06);
}

[data-theme="dark"] .hero-company-panel,
[data-theme="dark"] .hero-role-panel,
[data-theme="dark"] .hero-attention-panel,
[data-theme="dark"] .hero-mini,
[data-theme="dark"] .hero-role-row,
[data-theme="dark"] .hero-attention-item,
[data-theme="dark"] .saas-card,
[data-theme="dark"] .pricing-tier,
[data-theme="dark"] .bundle-card,
[data-theme="dark"] .security-card { background:var(--bg-soft); }

/* The shared nav uses --nav-h while the commercial header uses --site-nav-h. Keep the menu aligned with the actual header height. */
.mobile-menu { top: var(--site-nav-h); }

@media (max-width:1180px) {
  :root { --site-nav-h: 90px; }
  .brand-mark-badge { width:58px; height:58px; }
  .brand-name { font-size:1.18rem; }
  .brand-tagline { font-size:.61rem; }
  .nav-links a { font-size:.88rem; padding-inline:8px; }
  .hero-slide { grid-template-columns:1fr; height:auto; min-height:0; }
  .hero-side { justify-self:start; width:min(100%,800px); transform:none; }
  .hero-copy { max-width:950px; }
}

@media (max-width:900px) {
  .pricing-tier-grid,.bundle-grid,.saas-grid,.security-grid { grid-template-columns:repeat(2,1fr); }
  .base-includes { grid-template-columns:1fr; }
  .contact-fields { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width:768px) {
  :root { --site-nav-h: 80px; }
  .brand-mark-badge { width:50px; height:50px; }
  .mobile-menu { top: var(--site-nav-h); max-height: calc(100dvh - var(--site-nav-h)); }
  .hero-commercial { padding-top:calc(var(--site-nav-h) + 10px); padding-bottom:22px; }
  .hero-slide { gap:28px; }
  .hero-company-grid { grid-template-columns:1fr; }
  .hero-core { min-height:90px; }
  .hero-copy h1 { font-size:clamp(2.2rem,10.5vw,3.2rem); }
  .pricing-tier-grid,.bundle-grid,.saas-grid,.security-grid { grid-template-columns:1fr; }
  .connection-model-polished .connection-row { grid-template-columns:1fr; }
  .contact-hero { padding-top: 22px !important; padding-bottom: 18px !important; }
  .contact-section { padding-top: 18px !important; }
  .contact-form-wide { padding: 18px !important; }
  .contact-fields { grid-template-columns: 1fr !important; gap: 10px !important; }
  .contact-intent-grid { grid-template-columns: 1fr !important; }
  .contact-intent-card { padding: 10px 12px !important; }
  .contact-submit-row { align-items: stretch !important; }
}

/* Keep light/dark control available on small phones as part of the accessibility/mobile audit. */
@media (max-width:430px) {
  .theme-toggle { display:inline-flex !important; }
}