/* 3rd-i · /enterprise #one-stop, the one vendor / one lump sum beat
   -----------------------------------------------------------------
   The ledger (bought separately vs one agreement), the three lump sum cards,
   and the day-one onboarding trio from the client's organization onboarding
   renders. Token-only, both themes. Prefix: ons- */

.ons-ledger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(14px, 2vw, 24px);
  align-items: stretch;
}
.ons-col {
  position: relative;
  padding: clamp(22px, 2.8vw, 34px);
  border-radius: var(--r);
  border: 1px solid var(--line-hi);
  background: var(--panel);
  box-shadow: var(--soft-shadow);
}
.ons-col--one {
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    var(--grad) border-box;
  border: 2px solid transparent;
}
.ons-col--one::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(60% 50% at 80% 0%, color-mix(in srgb, var(--magenta) 12%, transparent), transparent 70%);
  pointer-events: none;
}
.ons-col-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}
.ons-col--one .ons-col-title { color: var(--text); }
.ons-col-title img { display: block; width: 58px; height: auto; }

.ons-lines, .ons-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ons-lines li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--line-hi);
  color: var(--dim);
  font-size: 14.5px;
}
.ons-lines li span { color: var(--text); }
.ons-lines li i {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: var(--pill);
  background: var(--panel-2);
  color: var(--dim);
}
.ons-checks li {
  position: relative;
  padding: 11px 14px 11px 42px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-hi);
  background: var(--panel-2);
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.45;
}
.ons-checks li::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--grad);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23000'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23000'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ons-col-foot { margin: 16px 0 0; color: var(--dim); font-size: 14px; line-height: 1.5; }
.ons-col-foot b { color: var(--text); }

/* three lump sum cards */
.ons-lump {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  margin-top: clamp(14px, 2vw, 24px);
}
.ons-lump-card {
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--r);
  border: 1px solid var(--line-hi);
  background: var(--panel);
  box-shadow: var(--soft-shadow);
}
.ons-lump-k {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 10px;
  border-radius: var(--pill);
  background: color-mix(in srgb, var(--acc-sky) 14%, var(--panel-2));
  color: var(--acc-sky);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ons-lump-card:nth-child(2) .ons-lump-k { background: color-mix(in srgb, var(--acc-magenta) 12%, var(--panel-2)); color: var(--acc-magenta); }
.ons-lump-card:nth-child(3) .ons-lump-k { background: color-mix(in srgb, var(--acc-royal) 14%, var(--panel-2)); color: var(--acc-royal); }
.ons-lump-card h3 { margin: 0 0 8px; font-size: 19px; letter-spacing: -0.015em; }
.ons-lump-card p { margin: 0; color: var(--dim); font-size: 14.5px; line-height: 1.58; }

/* day one onboarding trio */
.ons-onboard {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
  margin-top: clamp(40px, 6vw, 72px);
  padding: clamp(24px, 3.4vw, 44px) clamp(20px, 3.4vw, 48px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-hi);
  background: linear-gradient(160deg, color-mix(in srgb, var(--royal) 8%, transparent), transparent 46%), var(--panel);
  box-shadow: var(--soft-shadow);
}
.ons-onboard-copy h3 { margin: 10px 0 12px; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.02em; }
.ons-onboard-copy p { margin: 0; color: var(--dim); font-size: 15.5px; line-height: 1.6; max-width: 44rem; }
.ons-onboard-copy .cta-row { margin-top: 22px; }
.ons-onboard-phones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 16px);
  align-items: center;
}
.ons-onboard-phones img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(20, 30, 70, 0.2));
}
.ons-onboard-phones img:nth-child(2) { transform: translateY(-12px); }

@media (max-width: 980px) {
  .ons-ledger { grid-template-columns: 1fr; }
  .ons-onboard { grid-template-columns: 1fr; }
  .ons-onboard-phones { max-width: 520px; margin-inline: auto; }
}
@media (max-width: 760px) {
  .ons-lump { grid-template-columns: 1fr; }
  .ons-lines li { flex-direction: column; align-items: flex-start; gap: 6px; }
}