/* ============================================================
   BMS landing — page-specific styles (layout primitives in its.css)
   ============================================================ */

/* centered hero */
.bms-hero {
  max-width: 860px;
  margin: 0 auto;
  padding: 150px 24px 56px;
  text-align: center;
}

.bms-hero-title {
  font-size: clamp(38px, 5.5vw, 62px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
}

.bms-hero-title em { font-style: normal; color: var(--violet); }

.bms-hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* suite window container */
.bms-window-wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px 40px;
}

.bms-window-wrap .product-window { margin-bottom: 0; }

.bms-shot-img {
  display: block;
  width: 100%;
  height: auto;
}

/* RMS two-card section */
.bms-rms {
  max-width: 1120px;
  margin: 0 auto;
  padding: 112px 24px;
}

.bms-rms-head { margin-bottom: 36px; }

.bms-rms-head h2 {
  font-size: clamp(25px, 3.2vw, 34px);
  font-weight: 900;
  line-height: 1.28;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

.bms-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.bms-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-window);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.bms-card:hover { transform: translateY(-6px); }

.bms-card-visual {
  flex: 1;
  background: var(--bg-soft);
  padding: 30px 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}

.bms-card-visual-full {
  flex: 0 0 auto;
  padding: 0;
  min-height: 0;
  background: transparent;
  align-items: flex-start;
}

.bms-card-visual-full .bms-shot-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  vertical-align: top;
}

.bms-card-stretch .bms-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

.bms-card-body { padding: 22px 26px 26px; min-height: 118px; }

.bms-card-body h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }

.bms-card-body p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; }

/* CRM customer list mock */
.bms-crm { padding: 14px 16px 16px; background: #fff; }

.bms-crm-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.bms-crm-search {
  flex: 1;
  font-size: 10px;
  color: var(--ink-faint);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bms-crm-filter {
  font-size: 10px;
  font-weight: 700;
  color: var(--violet-deep);
  border: 1px solid var(--violet);
  border-radius: 8px;
  padding: 6px 12px;
  white-space: nowrap;
}

.bms-crm-count { font-size: 9px; color: var(--ink-faint); white-space: nowrap; }

.bms-crm-table {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.bms-crm-row {
  display: grid;
  grid-template-columns: 36px 62px 66px 1.3fr 1fr 1fr 62px 42px;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  font-size: 9.5px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}

.bms-crm-row:last-child { border-bottom: none; }

.bms-crm-row:nth-child(odd):not(.bms-crm-head) { background: var(--bg); }

.bms-crm-row > * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.bms-crm-row b { color: var(--violet-deep); font-weight: 700; }

.bms-crm-head {
  background: linear-gradient(90deg, var(--violet), #8D7FF0);
  color: #fff;
  font-size: 9px;
  font-weight: 500;
  border-bottom: none;
}

.crm-tag {
  display: inline-block;
  font-style: normal;
  font-size: 8.5px;
  border-radius: 999px;
  padding: 2px 8px;
}

.tg-a { background: var(--violet-soft); color: var(--violet-deep); }
.tg-b { background: rgba(244, 184, 201, 0.35); color: #B85C7D; }
.tg-c { background: rgba(123, 201, 166, 0.22); color: #3E8A66; }

.crm-link { color: var(--violet); }
.crm-dim { color: var(--ink-faint); }

/* OMS payroll rules mock */
.bms-pay { padding: 14px 16px 16px; background: #fff; }

.bms-pay-kicker { font-size: 8px; color: var(--ink-faint); }

.bms-pay-title { font-size: 14px; font-weight: 900; margin: 2px 0 10px; }

.bms-pay-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  padding: 12px 14px;
  margin-bottom: 10px;
}

.bms-pay-card:last-child { margin-bottom: 0; }

.bms-pay-card h5 { font-size: 11px; font-weight: 700; margin-bottom: 2px; }

.bms-pay-card > p { font-size: 9px; color: var(--ink-faint); margin-bottom: 8px; }

.bms-pay-sub b { font-weight: 700; color: var(--ink-soft); }

.bms-crm-table { background: #fff; }

.bms-pay-t1 .bms-crm-row { grid-template-columns: 1.3fr 0.7fr 0.9fr 1.4fr 52px; }

.bms-pay-t2 .bms-crm-row { grid-template-columns: 84px 1fr 0.8fr 1fr 36px 52px; }

/* feature section breathing room (page loads its.css first) */
.its-feature {
  padding-top: 112px;
  padding-bottom: 112px;
}

/* light gap above dark CTA — the band between OMS and footer block */
.its-cta {
  margin-top: 72px;
}

@media (max-width: 900px) {
  .bms-hero { padding-top: 120px; }
  .bms-cards { grid-template-columns: 1fr; }
  .bms-rms,
  .its-feature {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .its-cta { margin-top: 48px; }
}