/* Marketing pages: home, how it works, pricing, our promise, your data, about, cardholders, resellers.
   Same rules as site.css: aligned grids with fixed column widths, muted second lines, pills, tiles,
   boxes with dividers; gold only for buttons, highlights and attention. Everything here starts with mk-. */

/* ---------- shared pieces ---------- */
.mk-page { padding: 34px 0 56px; }
.mk-intro .h1 { margin-bottom: 10px; }
.mk-intro .lead { margin-bottom: 22px; }
.mk-tiles { margin: 0 0 28px; }
.mk-block { margin: 0 0 28px; }
.mk-block > .box-h { margin-bottom: 12px; }
.mk-block > .box-h h2 { font: 800 19px/1.3 var(--head); }
.mk-block > .box-h a { font-size: 14px; white-space: nowrap; }
.mk-block > .box-h h2 .pill { vertical-align: middle; margin-left: 6px; font-family: var(--sans); }
.mk-src { margin: -4px 0 14px; font-size: 14px; color: var(--text-2); max-width: 780px; }
.mk-note { margin: 10px 2px 0; font-size: 12.5px; color: var(--text-3); }
.mk-box-h { font: 700 16px/1.3 var(--head); margin: 0 0 12px; }
.mk-box .ticks { font-size: 14px; }
.mk-p { margin: 0 0 12px; font-size: 14px; color: var(--text-2); }
.mk-p-end { margin: 12px 0 0; }
.mk-p-top { margin: 14px 0 8px; }
.mk-more { font-size: 14px; white-space: nowrap; }
.mk-after { margin: 12px 0 0; font-size: 14px; }
.mk-cta { margin-top: 20px; }
.mk-tabs { margin-bottom: 22px; }
.mk-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-page .two > .box { min-width: 0; }

/* A short notice with an icon (partner pages) */
.mk-notice { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 22px; padding: 12px 16px; border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 12px; background: var(--surface); }
.mk-notice .ic { color: var(--gold); flex: none; margin-top: 2px; }
.mk-notice div { display: grid; gap: 2px; min-width: 0; }
.mk-notice b { font-weight: 600; font-size: 14.5px; }
.mk-notice span { font-size: 13.5px; color: var(--text-2); }

/* Number circles in a list */
.mk-n { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--gold-line); color: var(--gold); display: grid; place-items: center; font: 800 12.5px/1 var(--head); }
.mk-n .ic { display: block; }

/* Long second lines in aligned lists wrap instead of being cut off */
.mk-walk .m span, .mk-causes .m span, .mk-methods .m span, .mk-data .m span { white-space: normal; overflow: visible; line-height: 1.45; }
.mk-walk .w span, .mk-causes .w span, .mk-data .w span { white-space: normal; }
/* Head cells above a column with a divider line up with its text */
.rows.mk-walk > li.head > :last-child, .rows.mk-causes > li.head > :last-child, .rows.mk-data > li.head > :last-child { padding-left: 15px; }

/* Questions */
.faq .mk-faq-a { margin-top: 10px; max-width: 860px; }
.faq .mk-faq-a p { margin: 0 0 8px; }
.mk-faq-a ul { margin: 0 0 8px; padding-left: 20px; color: var(--text-2); font-size: 14.5px; }
.mk-faq-a h2, .mk-faq-a h3 { font-size: 15px; margin: 12px 0 6px; }
.mk-faq-a > :last-child { margin-bottom: 0; }

/* ---------- home ---------- */
.mk-dates .date-line li { grid-template-columns: 20px 124px minmax(0, 1fr); }
.mk-dates .date-line .t { font-size: 13.5px; }
.mk-dates .date-line .t b { display: block; color: var(--text); font-weight: 600; font-size: 14px; margin-bottom: 1px; }
.mk-dates footer { border-top: 1px solid var(--border); padding-top: 12px; }
.mk-hero-logo { display: grid; place-items: center; }
.mk-product { margin-top: 34px; }
.mk-product .disclose { font-size: 15px; }
.mk-hero .mk-tiles { margin: 16px 0 0; }
.mk-pbox .pill { justify-self: start; }
.mk-pbox .btn { justify-self: start; margin-top: 6px; }

/* ---------- how it works: the walkthrough ---------- */
.rows.mk-walk > li { grid-template-columns: 28px minmax(0, 1fr) 190px; }
.rows.mk-walk > li.mk-end .mk-n { border-color: var(--border); color: var(--text-3); }
.rows.mk-walk > li.mk-end .m b, .rows.mk-walk > li.mk-end .w b { color: var(--text-2); }
.mk-pay { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 28px; flex-wrap: wrap; }
.mk-pay > div:first-child { flex: 1 1 460px; min-width: 0; }
.mk-pay .mk-p { margin: 0; }
.mk-pay-links { display: grid; gap: 6px; font-size: 14px; }

/* ---------- pricing: limit bands × age bands ---------- */
.rows.mk-c1 > li { grid-template-columns: minmax(0, 1.3fr) repeat(1, minmax(0, 1fr)); }
.rows.mk-c2 > li { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); }
.rows.mk-c3 > li { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); }
.rows.mk-c4 > li { grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); }
.rows.mk-c5 > li { grid-template-columns: minmax(0, 1.3fr) repeat(5, minmax(0, 1fr)); }
.rows.mk-c6 > li { grid-template-columns: minmax(0, 1.3fr) repeat(6, minmax(0, 1fr)); }
.mk-grid .mk-glim { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-grid .mk-gc { font: 700 15px/1.3 var(--head); font-variant-numeric: lining-nums tabular-nums; }
.mk-grid .mk-gc i { font-style: normal; font-weight: 500; color: var(--text-3); }
.mk-grid .mk-g1 { padding-left: 15px; border-left: 1px solid var(--border); }
.rows.mk-grid > li.head .mk-g1 { border-left-color: transparent; }
.rows.mk-methods > li { grid-template-columns: minmax(0, 1fr) 130px; }
.mk-methods .pill { justify-self: start; }

/* ---------- our promise ---------- */
.rows.mk-causes > li { grid-template-columns: minmax(0, 1fr) 280px; }
.steps.mk-steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- your data ---------- */
.rows.mk-data > li { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) 240px; }
.mk-data .m b { white-space: normal; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mk-data .mk-why { font-size: 14px; color: var(--text-2); min-width: 0; }

/* ---------- about ---------- */
.mk-about { align-items: stretch; }
.mk-who .kv { border: 0; border-radius: 0; background: none; }
.mk-who .kv > div { grid-template-columns: 90px minmax(0, 1fr); padding: 9px 0; }
.mk-who .kv > div:first-child { padding-top: 0; }

/* ---------- partner pages: the join form ---------- */
.mk-join { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 14px; align-items: start; scroll-margin-top: 90px; }
.mk-join .form-errors { margin: 0 0 14px; }
.mk-form { max-width: none; }
.mk-form .field { align-content: start; }
.mk-sel { display: grid; gap: 6px; min-width: 0; align-content: start; }
.mk-sel.has-error select { border-color: var(--err); }
.mk-consent { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.mk-consent.has-error { border-color: color-mix(in srgb, var(--err) 45%, transparent); }
.mk-consent .check { font-size: 13.5px; line-height: 1.5; }
.mk-consent .err-text { margin-left: 30px; }
.mk-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- tablets ---------- */
@media (max-width: 980px) {
  .mk-join { grid-template-columns: 1fr; }
  .rows.mk-data > li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 200px; }
}
@media (max-width: 760px) {
  .steps.mk-steps3 { grid-template-columns: 1fr; }
}

/* ---------- phones: columns stack (number left, text and date under each other) ---------- */
@media (max-width: 640px) {
  .mk-page { padding: 24px 0 40px; }
  .mk-block > .box-h { flex-wrap: wrap; }
  .mk-block > .box-h h2 { font-size: 17px; }
  .mk-hero-logo .hero-logo { max-width: 300px; }
  .mk-dates .date-line li { grid-template-columns: 18px 108px minmax(0, 1fr); gap: 8px; }
  .mk-product { margin-top: 26px; }
  .mk-product .disclose { font-size: 14.5px; }
  .rows.mk-walk > li { grid-template-columns: 28px minmax(0, 1fr) !important; gap: 6px 12px; }
  .rows.mk-walk > li > .w { grid-column: 2; }
  .rows.mk-grid > li { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px 14px; }
  .mk-grid .mk-glim { grid-column: 1 / -1; }
  .mk-grid .mk-gc { display: grid; gap: 1px; }
  .mk-grid .mk-gc::before { content: attr(data-l); font: 700 10.5px/1.4 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
  .mk-grid .mk-g1 { padding-left: 0; border-left: 0; }
  .mk-pay-links { grid-auto-flow: row; }
}

/* The condition line under the promise list */
.ticks li.mk-cond { color: var(--text-2); font-size: 13.5px; }
.ticks li.mk-cond::before { content: "*"; color: var(--text-3); }