/* =====================================================================
   PROGRAM COMPARISON
   ---------------------------------------------------------------------
   Four bands, in the order a merchant needs them:
     1. .engine-inputs  what we need from you, all visible at once
     2. .engine-floor   where your money actually goes today
     3. .engine-progs   the five programs, same size, no featured tile
     4. disclosure and the one action

   The parity rule from the POS pages applies here too. Every program card
   gets the same width, the same type size and the same amount of room. A
   comparison that visually favours one option is an advertisement wearing
   a calculator costume.
   ===================================================================== */

.engine {
  background: var(--charcoal);
  color: var(--on-dark);
  padding: 72px 0;
  --gold: var(--gold-on-dark);
}
.engine .eyebrow { color: var(--gold-on-dark); }
.engine h3 { color: var(--on-dark); }

.engine-head { max-width: 820px; margin-bottom: 40px; }
.engine-head h2 { color: var(--on-dark); }
.engine-head .lede { color: var(--on-dark-muted); }

/* ---------- 1. Inputs ------------------------------------------------ */
.engine-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px 32px;
  padding: 26px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--r-lg);
}
.engine-inputs label {
  display: block;
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--on-dark);
  margin-bottom: 12px;
}
.engine-inputs .ei-or {
  margin-top: 16px;
  color: var(--on-dark-muted); font-weight: 400; letter-spacing: .08em;
}
.engine .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.engine .chip {
  font: inherit; font-size: 14px; cursor: pointer;
  padding: 8px 14px; border-radius: 999px;
  background: transparent; color: var(--on-dark-muted);
  border: 1px solid var(--on-dark-line);
}
.engine .chip:hover { color: var(--on-dark); border-color: var(--gold); }
.engine .chip[aria-pressed="true"] {
  background: var(--gold-btn); border-color: var(--gold-btn); color: #fff; font-weight: 700;
}
.engine .chip-lg { font-size: 15px; padding: 9px 16px; }

.engine input[type="text"],
.engine select {
  width: 100%; font: inherit; font-size: 16px;
  padding: 11px 13px; border-radius: var(--r-sm);
  background: var(--charcoal); color: var(--on-dark);
  border: 1px solid var(--on-dark-line);
}
.engine input[type="text"]:focus,
.engine select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }

/* ---------- 2. Where the money goes ---------------------------------- */
.engine-floor {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px 56px;
  align-items: center;
  padding: 46px 0;
  margin: 40px 0;
  border-top: 1px solid var(--on-dark-line);
  border-bottom: 1px solid var(--on-dark-line);
}
.ef-copy h3 { font-size: clamp(24px, 3vw, 34px); margin: 8px 0 16px; }
.ef-copy p { color: var(--on-dark-muted); margin: 0; }

/* The bar is the argument. Gold is the part nobody can remove, so the
   remainder reads immediately as the part that is worth arguing about. */
.efb {
  height: 46px; border-radius: var(--r-sm); overflow: hidden;
  background: rgba(255, 255, 255, .12);
  border: 1px solid var(--on-dark-line);
}
.efb-floor {
  height: 100%; background: var(--gold);
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}
.efb-key { margin-top: 20px; display: grid; gap: 16px; }
.efb-key div { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: baseline; }
.efb-key strong { font-size: 21px; color: var(--on-dark); }
.efb-key span:last-child { grid-column: 2; font-size: 14px; color: var(--on-dark-muted); }
.efb-swatch { width: 13px; height: 13px; border-radius: 3px; grid-row: 1 / 3; align-self: center; }
.efb-swatch--floor { background: var(--gold); }
.efb-swatch--margin { background: rgba(255, 255, 255, .22); }

/* ---------- 3. The five programs ------------------------------------- */
.engine-progs-head { max-width: 760px; margin-bottom: 30px; }
.engine-progs-head h3 { font-size: clamp(22px, 2.8vw, 32px); margin: 0 0 12px; }
.engine-progs-head p { color: var(--on-dark-muted); margin: 0; }

.progs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  align-items: stretch;
}
.prog {
  display: flex; flex-direction: column;
  padding: 24px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--r-lg);
}
.prog header { margin-bottom: 12px; }
.prog h3 { font-size: 22px; margin: 0 0 10px; }
.prog-tag {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 3px;
}
.prog-tag--merchant { background: rgba(255, 255, 255, .14); color: var(--on-dark); }
.prog-tag--customer { background: var(--gold-btn); color: #fff; }

.prog-blurb { font-size: 14.5px; color: var(--on-dark-muted); margin: 0 0 18px; }
.prog-fig {
  display: block; font-family: var(--display, inherit);
  font-size: 30px; line-height: 1.1; color: var(--on-dark);
}
.prog-unit {
  display: block; font-family: var(--body);
  font-size: 12px; font-weight: 400; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gold); margin-top: 6px;
}
.prog-sub { font-size: 13.5px; color: var(--on-dark-muted); margin: 12px 0 0; }

.prog-meta {
  margin: 18px 0 0; padding: 16px 0 0;
  border-top: 1px solid var(--on-dark-line);
  display: grid; gap: 10px;
}
.prog-meta div { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; }
.prog-meta dt { font-size: 12.5px; color: var(--on-dark-muted); }
.prog-meta dd { margin: 0; font-size: 13.5px; font-weight: 600; text-align: right; }

.prog-note {
  font-size: 13px; color: var(--on-dark-muted);
  margin: 16px 0 0; padding-top: 14px;
  border-top: 1px solid var(--on-dark-line);
}
/* Pushed to the bottom so the cards line up whatever the copy length. */
.prog-best {
  margin: 14px 0 0; padding-top: 14px; margin-top: auto;
  font-size: 13px; color: var(--gold);
}

/* A program the merchant cannot legally run is shown, not hidden. Finding
   out later is worse than seeing it greyed out now. */
.prog-out { opacity: .55; }
.prog-out .prog-fig { text-decoration: line-through; text-decoration-thickness: 1px; }

/* ---------- 4. Disclosure and action --------------------------------- */
.engine-disc {
  margin: 34px 0 0; max-width: 90ch;
  font-size: 12.5px; line-height: 1.65; color: #8B857C;
}
.engine-cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }

/* This section is charcoal but does not carry .dark, so the shared
   .dark .btn-ghost rule never reached it and the button label rendered
   charcoal on charcoal. Invisible, and only findable by looking. */
.engine .btn-ghost { color: var(--on-dark); border-color: var(--on-dark-line); }
.engine .btn-ghost:hover { border-color: var(--on-dark); background: rgba(255, 255, 255, .06); }

/* ---------- Responsive ----------------------------------------------- */
@media (max-width: 900px) {
  .engine { padding: 56px 0; }
  .engine-floor { grid-template-columns: 1fr; gap: 30px; padding: 34px 0; margin: 30px 0; }
  .engine-inputs { padding: 20px; gap: 22px; }
}
@media (max-width: 560px) {
  .progs { grid-template-columns: 1fr; }
  .prog-fig { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .efb-floor { transition: none; }
}