/* ============================================================
   Landing — Helpdesk software voor KMO's
   Layered on top of tokens.css + site.css + feature-page.css + compare-page.css.
   Only page-specific bits live here; generic sections reuse .fp-* / .cmp-*.
   ============================================================ */

/* Green variant of the hero side-card icon (orange variant lives in feature-page.css) */
.fp-hero__side-ico--green {
  background: var(--success);
  box-shadow: 0 6px 14px -4px rgba(31, 157, 106, 0.4);
}

/* ============================================================
   Cost band — "zonder per-ticket-kosten"
   Two cards: a classic helpdesk's stacking cost vs Sarrai's flat price.
   ============================================================ */
.hd-cost {
  padding-block: clamp(48px, 5vw, 80px);
  background: var(--bg-app);
}
.hd-cost__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 980px;
  margin-inline: auto;
  align-items: stretch;
}
.hd-cost__card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-2xl);
  padding: clamp(26px, 3vw, 38px);
  background: #fff;
}
.hd-cost__card--them {
  background: var(--neutral-50);
  color: var(--fg-3);
}
.hd-cost__card--us {
  border-color: color-mix(in oklch, var(--brand-orange) 35%, transparent);
  border-top: 4px solid var(--brand-orange);
  box-shadow: 0 18px 44px -22px rgba(235, 120, 14, 0.3), var(--shadow-xs);
}
.hd-cost__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.hd-cost__card--them .hd-cost__tag { color: var(--brand-navy-300); }
.hd-cost__card--us .hd-cost__tag { color: var(--brand-orange-700); }

/* Them — stacking line items that add up to "onvoorspelbaar" */
.hd-cost__stack {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.hd-cost__line {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--fg-2);
}
.hd-cost__op {
  flex: none;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--neutral-200);
  color: var(--fg-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  align-self: flex-start;
}
.hd-cost__line b { color: var(--fg-1); font-weight: 600; }
.hd-cost__line--total {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  align-items: center;
}
.hd-cost__line--total .hd-cost__op {
  background: transparent;
  color: var(--fg-3);
  font-size: 16px;
}
.hd-cost__total {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--brand-navy-800);
}

/* Us — one flat price */
.hd-cost__amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.hd-cost__amount-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hd-cost__amount-num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.8rem + 2.4vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--brand-navy-800);
  line-height: 1;
}
.hd-cost__amount-per { font-size: 15px; color: var(--fg-3); }
.hd-cost__usline {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.hd-cost__usline li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--fg-2);
}
.hd-cost__usline li svg { flex: none; margin-top: 2px; color: var(--success); }
.hd-cost__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 26px;
}

@media (max-width: 820px) {
  .hd-cost__grid { grid-template-columns: 1fr; }
}