/**
 * Merchant Processing Experience V1
 * Law: MCKNX_COMMERCIAL_EXPERIENCE_LAW — reduce uncertainty, increase confidence.
 * Identity frozen. Documentary: CD_03. Publication: HOLD.
 */
:root {
  --mp-basalt: #080a0d;
  --mp-stone: #11151a;
  --mp-raised: #171c22;
  --mp-limestone: #e8e3d8;
  --mp-silver: #aeb5bd;
  --mp-silver-dim: #747d87;
  --mp-gold: #c5a567;
  --mp-gold-bright: #dfc285;
  --mp-line: rgba(196, 203, 211, 0.18);
  --mp-line-gold: rgba(197, 165, 103, 0.45);
  --mp-max: 1120px;
  --mp-sans: "Segoe UI", "Helvetica Neue", sans-serif;
  --mp-serif: Georgia, "Times New Roman", serif;
  --mp-fast: 160ms;
  --mp-med: 280ms;
  --mp-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mp-fade, .mp-hero-media img { animation: none !important; transition: none !important; }
}

body.mp-body {
  margin: 0;
  color: var(--mp-limestone);
  background: var(--mp-basalt);
  font-family: var(--mp-sans);
  line-height: 1.65;
}

.mp-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--mp-gold);
  color: #1a1510;
  padding: 10px 14px;
  z-index: 100;
  font-weight: 600;
}
.mp-skip:focus { left: 12px; top: 12px; }
.mp-main:focus { outline: none; }

.mp-header {
  position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid var(--mp-line);
  background: rgba(8, 10, 13, 0.94);
  backdrop-filter: blur(16px);
}
.mp-header-inner {
  max-width: var(--mp-max);
  margin: 0 auto;
  padding: 0 24px;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px 20px;
  flex-wrap: wrap;
}
.mp-stage-label { flex: 1 1 auto; }
.mp-progress { margin-left: auto; }
.mp-building-exit {
  order: 10;
  flex: 0 0 100%;
  margin: 0 0 8px;
  text-align: right;
  color: var(--mp-silver);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.mp-building-exit:hover,
.mp-building-exit:focus-visible {
  color: var(--mp-gold-bright);
  outline: none;
}
.mp-brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--mp-limestone);
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.mp-brand em { color: var(--mp-gold-bright); font-style: normal; font-weight: 700; }
.mp-brand img { width: 40px; height: 40px; object-fit: contain; }
.mp-stage-label {
  color: var(--mp-silver-dim);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mp-stage-label strong { color: var(--mp-gold); font-weight: 600; }

.mp-progress {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
  max-width: 58%;
}
.mp-progress a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 4px;
  border: 1px solid var(--mp-line);
  background: transparent;
  color: var(--mp-silver-dim);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--mp-fast) var(--mp-ease), border-color var(--mp-fast) var(--mp-ease), color var(--mp-fast) var(--mp-ease);
}
.mp-progress a[aria-current="step"],
.mp-progress a.is-done {
  background: rgba(197, 165, 103, 0.18);
  border-color: var(--mp-gold);
  color: var(--mp-gold-bright);
}
.mp-progress a:hover, .mp-progress a:focus-visible {
  border-color: var(--mp-gold-bright);
  color: var(--mp-limestone);
  outline: none;
}

.mp-main { flex: 1; }
.mp-section {
  max-width: var(--mp-max);
  margin: 0 auto;
  padding: 56px 24px 40px;
}
.mp-kicker {
  margin: 0 0 12px;
  color: var(--mp-gold);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mp-question {
  margin: 0 0 18px;
  font-family: var(--mp-serif);
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 18ch;
}
.mp-answer {
  margin: 0 0 28px;
  color: var(--mp-silver);
  font-size: 1.05rem;
  max-width: 54ch;
}
.mp-answer strong { color: var(--mp-limestone); font-weight: 600; }

.mp-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 36px;
  align-items: center;
}
@media (max-width: 900px) {
  .mp-hero { grid-template-columns: 1fr; }
  .mp-progress { max-width: 100%; }
}

.mp-hero-media {
  position: relative;
  border: 1px solid var(--mp-line);
  background: var(--mp-stone);
  overflow: hidden;
  min-height: 280px;
}
.mp-hero-media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  min-height: 280px;
}
.mp-hero-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 12px 14px;
  background: linear-gradient(transparent, rgba(8,10,13,0.92));
  color: var(--mp-silver);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.mp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.mp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 20px;
  border: 1px solid transparent;
  text-decoration: none;
  font: 600 0.76rem/1 var(--mp-sans);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--mp-fast) var(--mp-ease), border-color var(--mp-fast) var(--mp-ease), color var(--mp-fast) var(--mp-ease);
}
.mp-btn:focus-visible { outline: 2px solid var(--mp-gold); outline-offset: 3px; }
.mp-btn-primary { background: var(--mp-gold); color: #1a1510; }
.mp-btn-primary:hover { background: var(--mp-gold-bright); }
.mp-btn-secondary {
  background: transparent; color: var(--mp-limestone);
  border-color: var(--mp-line);
}
.mp-btn-secondary:hover { border-color: var(--mp-gold); color: var(--mp-gold-bright); }
.mp-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.mp-panel {
  border: 1px solid var(--mp-line);
  background: var(--mp-raised);
  padding: 22px 24px;
  margin: 20px 0 28px;
}
.mp-panel h3 {
  margin: 0 0 10px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mp-gold);
  font-weight: 600;
}
.mp-panel p, .mp-panel li { color: var(--mp-silver); margin: 0 0 8px; }
.mp-panel ul { margin: 0; padding-left: 1.1rem; }

.mp-form label {
  display: block; margin-bottom: 14px;
  font-size: 0.78rem; color: var(--mp-silver);
}
.mp-form input, .mp-form select, .mp-form textarea {
  display: block; width: 100%; margin-top: 6px;
  min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--mp-line);
  background: var(--mp-stone);
  color: var(--mp-limestone);
  font: inherit;
}
.mp-form textarea { min-height: 96px; resize: vertical; }
.mp-form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 700px) { .mp-form-row { grid-template-columns: 1fr; } }
.mp-consent {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 0.78rem; color: var(--mp-silver); margin: 16px 0;
}
.mp-consent input { margin-top: 4px; }
.mp-notice {
  margin-top: 12px; padding: 12px 14px;
  border: 1px solid var(--mp-line);
  color: var(--mp-silver);
  font-size: 0.85rem;
}
.mp-notice.is-ok { border-color: rgba(142,187,161,0.5); color: #b7d4c4; }
.mp-notice.is-err { border-color: rgba(214,143,143,0.5); color: #e2b4b4; }

.mp-echo dt {
  margin: 12px 0 2px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mp-gold);
}
.mp-echo dd { margin: 0; color: var(--mp-limestone); }

.mp-footer {
  border-top: 1px solid var(--mp-line);
  padding: 28px 24px 40px;
  color: var(--mp-silver-dim);
  font-size: 0.78rem;
}
.mp-footer-inner { max-width: var(--mp-max); margin: 0 auto; }
.mp-footer a { color: var(--mp-silver); text-decoration: none; }
.mp-footer a:hover { color: var(--mp-gold-bright); }
.mp-voice { color: var(--mp-gold); font-style: italic; }

.mp-hold {
  display: none;
  margin-top: 18px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mp-silver-dim);
}
body.mp-founder-mode .mp-hold {
  display: block;
}