/* Cards (it-340). Floating, never bordered: white on a tint with elevation, tint on white, raised on dark.
 *
 * .mkt-card      — white, floating (on a tinted section)
 * .mkt-panel     — tinted, flat (on a white section); holds a picture and its words
 * .mkt-tile      — raised, on the dark section (AI Studio)
 * .mkt-feature   — an icon, a title, a line; --row puts the icon beside the words
 * .mkt-step      — a big number, a title, a line
 * .mkt-industry  — an industry card; --featured is the purple one that links
 * .mkt-checks    — a list with a check before each line
 * .mkt-band      — a tinted block inside a section (the trust strip)
 * .mkt-integrations — a card in a row: a partner's logo, the words, the way to ask (the mortgage page's LOS line)
 * .mkt-leader   — a person on About us: their photo in a circle (the dot), name, role, a few lines; .mkt-leaders rows them
 */

.mkt-card {
  background: var(--mkt-surface);
  border-radius: var(--mkt-radius-2xl);
  padding: var(--mkt-space-7);
  box-shadow: var(--mkt-shadow-lg);
}

.mkt-panel {
  display: flex;
  flex-direction: column;
  gap: var(--mkt-space-6);
  padding: var(--mkt-pad-card);
  border-radius: var(--mkt-radius-2xl);
  background: var(--mkt-tint);
}

.mkt-panel--compact {
  padding: var(--mkt-pad-tile);
  gap: var(--mkt-space-5-5);
}

.mkt-panel__title,
.mkt-tile__title {
  display: flex;
  align-items: flex-start;
  gap: var(--mkt-space-2-5);
}

.mkt-panel__title {
  color: var(--mkt-purple);
}

.mkt-panel__title .mkt-h3 {
  color: var(--mkt-ink);
}

.mkt-panel .mkt-body,
.mkt-tile .mkt-body {
  margin-top: var(--mkt-space-2-5);
}

.mkt-tile {
  display: flex;
  flex-direction: column;
  gap: var(--mkt-space-6);
  padding: var(--mkt-space-7);
  border-radius: var(--mkt-radius-2xl);
  background: var(--mkt-dark-raised);
}

.mkt-tile__title {
  color: var(--mkt-lilac-on-dark);
}

.mkt-tile__title .mkt-h3 {
  color: var(--mkt-surface);
}

.mkt-tile__title > .mkt-icon,
.mkt-panel__title > .mkt-icon {
  margin-top: var(--mkt-icon-nudge);
}

/* The wide tile: words beside the pictures. */
.mkt-tile--wide {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mkt-space-7) var(--mkt-space-12);
}

.mkt-tile--wide > :first-child {
  flex: 1 1 var(--mkt-basis-lg);
  min-width: 0;
}

.mkt-tile--wide > :last-child {
  flex: 1 1 var(--mkt-basis-3xl);
  min-width: 0;
}

.mkt-feature .mkt-h4 {
  margin: var(--mkt-space-3-5) 0 var(--mkt-space-1-5);
}

.mkt-feature--row {
  display: flex;
  gap: var(--mkt-space-4);
}

.mkt-feature--row .mkt-h4 {
  margin: 0 0 var(--mkt-space-1);
}

.mkt-feature__icon {
  display: block;
  color: var(--mkt-purple);
}

.mkt-feature__icon .mkt-icon {
  width: var(--mkt-icon-2xl);
  height: var(--mkt-icon-2xl);
}

.mkt-feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--mkt-space-5-5);
  margin-top: var(--mkt-space-9);
}

.mkt-step__number {
  font-family: var(--mkt-font-display);
  font-size: var(--mkt-size-step);
  font-weight: var(--mkt-weight-heavy);
  line-height: var(--mkt-leading-tight);
  color: var(--mkt-ring);
}

.mkt-step .mkt-h4 {
  margin: var(--mkt-space-3-5) 0 var(--mkt-space-2);
  font-size: var(--mkt-size-body-xl);
}

.mkt-band {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mkt-space-10);
  padding: var(--mkt-pad-band);
  border-radius: var(--mkt-radius-3xl);
  background: var(--mkt-tint);
}

.mkt-band__head {
  flex: 1 1 100%;
}

.mkt-band__head > .mkt-h2 {
  max-width: var(--mkt-measure-xl);
}

.mkt-band > .mkt-feature {
  flex: 1 1 var(--mkt-basis-xs);
  min-width: 0;
}

.mkt-industry {
  display: flex;
  flex-direction: column;
  gap: var(--mkt-space-1-5);
  padding: var(--mkt-space-6);
  border-radius: var(--mkt-radius-2xl);
  background: var(--mkt-tint);
}

.mkt-industry .mkt-h3 {
  margin-top: var(--mkt-space-0-5);
}

.mkt-industry--featured {
  position: relative;
  overflow: hidden;
  gap: var(--mkt-space-4);
  min-height: var(--mkt-basis-md);
  padding: var(--mkt-pad-card);
  background: var(--mkt-purple);
  color: var(--mkt-surface);
  text-decoration: none;
}

.mkt-industry--featured:hover {
  background: var(--mkt-purple-hover);
  color: var(--mkt-surface);
}

.mkt-industry--featured::after {
  content: '';
  position: absolute;
  width: var(--mkt-glow);
  height: var(--mkt-glow);
  border-radius: 50%;
  background: var(--mkt-veil-on-dark);
  right: var(--mkt-glow-right);
  bottom: var(--mkt-glow-bottom);
}

.mkt-industry__title {
  max-width: var(--mkt-measure-sm);
  font-family: var(--mkt-font-display);
  font-size: var(--mkt-size-card-title);
  font-weight: var(--mkt-weight-bold);
  line-height: var(--mkt-leading-snug);
  letter-spacing: var(--mkt-tracking-tight);
}

.mkt-industry__text {
  max-width: var(--mkt-measure-sm);
  font-size: var(--mkt-size-body);
  line-height: var(--mkt-leading-relaxed);
  color: var(--mkt-tint-strong);
}

.mkt-industry__go {
  margin-top: auto;
  color: var(--mkt-surface);
}

.mkt-industries {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mkt-space-5);
}

.mkt-industries > .mkt-industry--featured {
  flex: 2 1 var(--mkt-basis-2xl);
  min-width: 0;
}

.mkt-industries__rest {
  flex: 3 1 var(--mkt-basis-4xl);
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--mkt-space-5);
}

.mkt-industries__rest > .mkt-industry {
  flex: 1 1 var(--mkt-basis-sm);
  min-width: 0;
}

.mkt-checks {
  display: flex;
  flex-direction: column;
  gap: var(--mkt-space-3-5);
  margin-top: var(--mkt-space-7);
  padding: 0;
  list-style: none;
}

.mkt-checks li {
  display: flex;
  gap: var(--mkt-space-3);
  align-items: flex-start;
  font-size: var(--mkt-size-body);
  line-height: var(--mkt-leading-body);
}

.mkt-checks--on-dark .mkt-check {
  background: var(--mkt-dark-chip);
  color: var(--mkt-orchid);
}

/* A plain list of lines under a panel's title. */
.mkt-lines {
  display: flex;
  flex-direction: column;
  gap: var(--mkt-space-2);
  margin-top: var(--mkt-space-3-5);
  padding: 0;
  list-style: none;
  font-size: var(--mkt-size-md);
  line-height: var(--mkt-leading-relaxed);
  color: var(--mkt-text);
}

/* The mortgage page's LOS line, under the Encompass steps: ICE's logo, the words, the way to ask. Wraps under the logo
 * on a phone. */
.mkt-integrations {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mkt-space-4) var(--mkt-space-6);
  margin-top: var(--mkt-space-5);
}

.mkt-integrations__logo {
  flex: none;
  width: var(--mkt-icon-box-lg);
  height: var(--mkt-icon-box-lg);
}

.mkt-integrations__text {
  flex: 1 1 var(--mkt-basis-md);
  min-width: 0;
  margin: 0;
  font-size: var(--mkt-size-body-lg);
  line-height: var(--mkt-leading-body);
  color: var(--mkt-text);
}

.mkt-integrations__text strong {
  color: var(--mkt-ink);
}

/* About us's leadership: two to a row on a wide window, one under it. */
.mkt-leaders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mkt-space-5);
}

@media (max-width: 959px) {
  .mkt-leaders {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A person: their photo in a circle — the dot, ringed in the tint — beside their name, role and a few lines. Where the
 * words no longer fit beside it (a phone), they go under the photo. */
.mkt-leader {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--mkt-space-6) var(--mkt-space-7);
  padding: var(--mkt-pad-card);
}

.mkt-leader__photo {
  flex: none;
  width: var(--mkt-portrait);
  height: var(--mkt-portrait);
  border-radius: 50%;
  object-fit: cover;
  background: var(--mkt-tint-strong);
  box-shadow: 0 0 0 var(--mkt-space-1-5) var(--mkt-tint);
}

.mkt-leader__words {
  flex: 1 1 var(--mkt-basis-xs);
  min-width: 0;
}

.mkt-leader__role {
  margin-top: var(--mkt-space-1);
  font-size: var(--mkt-size-sm);
  font-weight: var(--mkt-weight-semibold);
  color: var(--mkt-purple);
}

.mkt-leader .mkt-body {
  margin-top: var(--mkt-space-3-5);
}