/* Raibs HRM showcase page — reuses the showcase layout with the HRM app's green */
@import url("crm-page.css");

.hrm.crm-hero, .hrm.crm-world, .hrm.crm-tour-sec, .hrm.crm-flow, .hrm.crm-feats-sec {
  --crm-navy: #0C2B26;
  --crm-navy-2: #123A33;
  --crm-cobalt: #0E9F6E;
  --crm-cobalt-d: #0B845B;
  --crm-marigold: #F5B83D;
  --crm-green: #0E9F6E;
}
.hrm.crm-hero { background: radial-gradient(900px 480px at 80% -10%, rgba(16,183,127,.45), transparent 65%), radial-gradient(600px 360px at 0% 30%, rgba(245,184,61,.14), transparent 70%), var(--crm-navy); }
.hrm.crm-hero .crumbs { color: #9CC7B8; }
.hrm.crm-hero .crumbs a, .hrm.crm-hero .lead, .hrm .crm-ticks { color: #CBE7DC; }
.hrm .btn.crm-btn { box-shadow: 0 10px 24px -12px rgba(14,159,110,.9); }
.hrm .crm-stage { padding-right: 0; }
.hrm .crm-step-ic, .hrm .crm-feat-ic { background: #E6F6EF; }
.hrm .crm-tabs button[aria-selected="true"] { box-shadow: 0 12px 30px -20px rgba(12,43,38,.5), inset 3px 0 0 var(--crm-cobalt); }
.hrm.crm-world { background: radial-gradient(700px 360px at 100% 0%, rgba(16,183,127,.35), transparent 65%), var(--crm-navy); color: #CBE7DC; }
.hrm .crm-steps { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
  .hrm .crm-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  /* no phone screenshot here, so keep the computer screenshot on phones */
  .hrm .crm-stage > .crm-shot { display: block; }
  .hrm .crm-steps { grid-template-columns: 1fr; }
}