/* ROI: savings by industry, the cross-industry table and the method */
.roi-head__picks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; max-width: 980px; }
.roi-pick {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 12px 3px 12px 3px;
  border: 1px solid var(--on-dark-rule); background: rgba(255, 255, 255, .05); color: var(--on-dark) !important;
  font-size: .875rem; font-weight: 700; text-decoration: none; transition: background-color .15s, border-color .15s;
}
.roi-pick .ico { color: var(--peach); }
.roi-pick:hover { background: rgba(255, 255, 255, .12); border-color: var(--peach); }

.roi-cards__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.roi-card {
  height: 100%; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 12px; padding: 20px; text-decoration: none; color: var(--ink);
  border-radius: var(--petal-md); background: var(--sheet); border: 1px solid var(--rule); transition: background-color .25s, color .25s, transform .25s, box-shadow .25s;
}
.roi-card__top { display: flex; align-items: center; gap: 12px; }
.roi-card__name { font: 500 1.0625rem/1.2 var(--font-display); }
.roi-card__cut { font-size: .8125rem; color: var(--ink-2); }
.roi-card__cut b { font: 500 1.75rem/1 var(--font-display); color: var(--wine); margin-right: 4px; }
.roi-card__bar { display: block; height: 5px; border-radius: 4px; background: var(--paper-2); overflow: hidden; }
.roi-card__bar i { display: block; height: 100%; border-radius: 4px; background: var(--rose); }
.roi-card__nums { margin: 0; display: grid; gap: 8px; align-content: start; }
.roi-card__nums div { display: grid; gap: 1px; }
.roi-card__nums dt { font-size: .75rem; color: var(--ink-3); }
.roi-card__nums dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.roi-card__go { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 700; color: var(--aubergine); }
.roi-card__go .ico { transition: transform .2s; }
.roi-card:hover, .roi-card:focus-visible { background: var(--aubergine); border-color: var(--aubergine); color: #fff; transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.roi-card:hover .leaf-ico, .roi-card:focus-visible .leaf-ico { background: rgba(255, 255, 255, .1); color: var(--peach); }
.roi-card:hover .roi-card__cut, .roi-card:hover .roi-card__nums dt, .roi-card:focus-visible .roi-card__cut, .roi-card:focus-visible .roi-card__nums dt { color: var(--on-dark-2); }
.roi-card:hover .roi-card__cut b, .roi-card:focus-visible .roi-card__cut b { color: var(--peach); }
.roi-card:hover .roi-card__bar, .roi-card:focus-visible .roi-card__bar { background: rgba(255, 255, 255, .14); }
.roi-card:hover .roi-card__bar i, .roi-card:focus-visible .roi-card__bar i { background: var(--peach); }
.roi-card:hover .roi-card__go, .roi-card:focus-visible .roi-card__go { color: #fff; }
.roi-card:hover .roi-card__go .ico { transform: translateX(4px); }

.roi-method__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.roi-method__list li { display: grid; gap: 12px; align-content: start; padding: 24px; border-radius: var(--petal-md); background: var(--sheet); border: 1px solid var(--rule); }
.roi-method__list p { font-size: .9375rem; color: var(--ink-2); }

@media (max-width: 1180px) { .roi-cards__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .roi-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roi-method__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) { .roi-cards__grid { grid-template-columns: minmax(0, 1fr); } }

/* ROI calculator, one month at full adoption: headers sit on one line above their columns, figures line up
   with the first line of their label, and the label column is wide enough for most labels to fit on one line */
.month-table th { vertical-align: bottom; line-height: 1.3; }
.month-table td { vertical-align: top; line-height: 1.45; }
.month-table tbody tr:not(.math-row) > td:first-child { width: 40%; }
@media (max-width: 560px) { .month-table tbody tr:not(.math-row) > td:first-child { width: 32%; } }