/* ==========================================================================
   Eazzier Transport — marketing surface layer (loaded ONLY by marketing pages,
   after eazzier.css; UI manual §9). Every color below comes from the brand
   scales already declared in base.html's tailwind.config (primary 50–950,
   gold 50–900) — no invented colors. Display face: Bricolage Grotesque,
   marketing-only (manual §3). Prefix: .mk-*
   ========================================================================== */

:root {
  /* Brand-scale aliases used by this layer (values = tailwind.config scales) */
  --mk-night: #280336;        /* primary-950 — dark panels, hero scrim base */
  --mk-night-2: #400755;      /* primary-900 — device frame, panel borders */
  --mk-paper: #fffaeb;        /* gold-50 — ticket paper */
  --mk-paper-edge: #ffe488;   /* gold-200 — ticket accent rule */
}

.mk-display {
  font-family: "Bricolage Grotesque", "Inter", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   Nav — transparent over the hero photo, solid after scroll (marketing.js
   toggles .is-scrolled). Fallback with JS off: stays transparent over hero.
   -------------------------------------------------------------------------- */
.mk-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background var(--et-med) var(--et-ease),
              border-color var(--et-med) var(--et-ease),
              box-shadow var(--et-med) var(--et-ease);
}
.mk-nav-link { color: rgba(255, 255, 255, .82); transition: color var(--et-fast) var(--et-ease); }
.mk-nav-link:hover { color: #fff; }
.mk-nav-wordmark { color: #fff; }
.mk-nav-sub { color: rgba(255, 255, 255, .55); }
.mk-nav-logo { background: #fff; color: var(--et-primary); }
.mk-nav-signin { color: rgba(255, 255, 255, .85); }
.mk-nav-signin:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.mk-nav.is-scrolled {
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-color: var(--et-border);
}
.mk-nav.is-scrolled .mk-nav-link { color: var(--et-muted); }
.mk-nav.is-scrolled .mk-nav-link:hover { color: var(--et-primary); }
.mk-nav.is-scrolled .mk-nav-wordmark { color: var(--et-primary); }
.mk-nav.is-scrolled .mk-nav-sub { color: var(--et-muted); }
/* The logo is now the purple brand-mark image — keep the chip white in both
   nav states so the mark never sits on its own colour. */
.mk-nav.is-scrolled .mk-nav-logo { background: #fff; box-shadow: inset 0 0 0 1px var(--et-primary-fainter); }
.mk-nav.is-scrolled .mk-nav-signin { color: var(--et-body); }
.mk-nav.is-scrolled .mk-nav-signin:hover { background: var(--et-primary-fainter); color: var(--et-primary); }

/* --------------------------------------------------------------------------
   Hero — full-bleed photograph + purple night scrim. Text sits on the darker
   left edge; contrast there stays ≥ 4.5:1 (scrim .92 → .55 over mid photo).
   -------------------------------------------------------------------------- */
/* No overflow:hidden — the hero ticket deliberately hangs over the fold. */
.mk-hero { position: relative; background: var(--mk-night); }
.mk-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 40%;
}
.mk-hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(76deg, rgba(40, 3, 54, .94) 0%, rgba(40, 3, 54, .72) 38%,
                    rgba(40, 3, 54, .28) 68%, rgba(40, 3, 54, .42) 100%),
    linear-gradient(to top, rgba(40, 3, 54, .85) 0%, rgba(40, 3, 54, 0) 32%);
}
.mk-hero-title {
  color: #fff;
  font-size: clamp(2.5rem, 5.4vw, 4.6rem);
  line-height: 1.02; font-weight: 800;
}
.mk-hero-title em { font-style: normal; color: var(--et-gold); }
.mk-hero-sub { color: rgba(255, 255, 255, .82); }
.mk-hero-trust { color: rgba(255, 255, 255, .75); }
.mk-hero-trust b { color: #fff; font-weight: 600; }

/* Outline button that lives on photo/dark panels */
.btn-outline-light { background: transparent; border-color: rgba(255, 255, 255, .4); color: #fff; }
.btn-outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }

/* --------------------------------------------------------------------------
   The signature artifact — a printed ticket. Gold-tinted paper, tabular
   figures, QR block, sawtooth tear along the bottom edge.
   -------------------------------------------------------------------------- */
.mk-ticket {
  background: var(--mk-paper);
  color: var(--et-ink);
  border-radius: 14px 14px 0 0;
  box-shadow: var(--et-shadow-pop);
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 8px) no-repeat,
    conic-gradient(from -45deg at 50% 100%, #000 90deg, rgba(0, 0, 0, 0) 0) 0 100% / 16px 8px repeat-x;
  mask:
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 8px) no-repeat,
    conic-gradient(from -45deg at 50% 100%, #000 90deg, rgba(0, 0, 0, 0) 0) 0 100% / 16px 8px repeat-x;
}
.mk-ticket-head {
  display: flex; align-items: center; gap: .5rem;
  padding: .625rem .875rem;
  border-bottom: 1px dashed #d9c76a;
  font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--et-gold-ink);
}
.mk-ticket-body { padding: .75rem .875rem .875rem; display: flex; gap: .875rem; align-items: center; }
.mk-ticket-route { font-weight: 800; font-size: 1.125rem; letter-spacing: -.01em; white-space: nowrap; }
.mk-ticket-meta { font-size: .6875rem; color: var(--et-gold-ink); font-weight: 600; }
.mk-ticket-qr { color: var(--et-ink); flex: none; }
.mk-ticket-qr svg { width: 42px; height: 42px; }

/* Hero placement: rotated, hanging over the fold. Hidden below lg (template). */
.mk-ticket-hero {
  position: absolute; right: clamp(1rem, 7vw, 7rem); bottom: -1.25rem; z-index: 10;
  width: 300px; transform: rotate(-4deg);
}

/* --------------------------------------------------------------------------
   Ticket-stub eyebrow — section label with punched notches at both ends.
   Light surfaces get paper; dark panels get the .mk-stub-dark variant.
   -------------------------------------------------------------------------- */
.mk-stub {
  display: inline-flex; align-items: center; gap: .625rem;
  padding: .4375rem 1.125rem;
  background: var(--et-gold-soft); color: var(--et-gold-ink);
  font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  border-radius: 8px;
  -webkit-mask:
    radial-gradient(circle 5px at 0 50%, rgba(0, 0, 0, 0) 97%, #000) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle 5px at 100% 50%, rgba(0, 0, 0, 0) 97%, #000) 100% 0 / 50% 100% no-repeat;
  mask:
    radial-gradient(circle 5px at 0 50%, rgba(0, 0, 0, 0) 97%, #000) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle 5px at 100% 50%, rgba(0, 0, 0, 0) 97%, #000) 100% 0 / 50% 100% no-repeat;
}
.mk-stub .mk-stub-sep { width: 0; align-self: stretch; border-left: 1px dashed currentColor; opacity: .5; }
.mk-stub-dark { background: rgba(255, 255, 255, .12); color: var(--et-gold); }

/* Section headline scale (chapters) */
.mk-h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); line-height: 1.08; font-weight: 800; }
.mk-lead { font-size: 1.0625rem; line-height: 1.65; color: var(--et-muted); }

/* --------------------------------------------------------------------------
   Photography — rounded, captioned, harmonized with a faint purple wash.
   -------------------------------------------------------------------------- */
.mk-photo { position: relative; border-radius: 20px; overflow: hidden; background: var(--mk-night); }
.mk-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(40, 3, 54, .38), rgba(40, 3, 54, 0) 42%);
}
.mk-photo-chip {
  position: absolute; left: .875rem; bottom: .875rem; z-index: 1;
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255, 255, 255, .92); color: var(--et-ink);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: .75rem; font-weight: 600; padding: .375rem .75rem; border-radius: 9999px;
}
.mk-photo-chip svg { width: 13px; height: 13px; color: var(--et-primary); }

/* --------------------------------------------------------------------------
   Dark chapter panel (hardware) — a rounded night slab on the white page.
   -------------------------------------------------------------------------- */
.mk-panel {
  background: var(--mk-night); color: rgba(255, 255, 255, .82);
  border-radius: 28px; overflow: hidden; position: relative;
}
.mk-panel h2, .mk-panel h3 { color: #fff; }
.mk-panel-glow {
  position: absolute; pointer-events: none; border-radius: 9999px;
  background: radial-gradient(closest-side, rgba(255, 215, 92, .16), rgba(255, 215, 92, 0));
}
.mk-feature-row { display: flex; gap: .875rem; align-items: flex-start; }
.mk-feature-row svg { width: 20px; height: 20px; color: var(--et-gold); flex: none; margin-top: .125rem; }
.mk-feature-row b { color: #fff; font-weight: 600; display: block; }
.mk-feature-row p { font-size: .875rem; line-height: 1.55; color: rgba(255, 255, 255, .62); }

/* --------------------------------------------------------------------------
   The counter terminal — CSS render of the all-in-one POS (11" screen,
   thermal printer, NFC). The ticket "prints" when the panel scrolls in.
   -------------------------------------------------------------------------- */
.mk-pos { width: min(360px, 100%); margin-inline: auto; position: relative; }
.mk-pos-frame {
  background: var(--mk-night-2);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 22px; padding: 12px; box-shadow: var(--et-shadow-pop);
  position: relative; z-index: 1;
}
.mk-pos-screen { background: #fff; border-radius: 12px; overflow: hidden; }
.mk-pos-head {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem; border-bottom: 1px solid var(--et-border);
  font-size: .75rem; font-weight: 700; color: var(--et-ink);
}
.mk-pos-seats { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; padding: .75rem; }
.mk-pos-seat { aspect-ratio: 1; border-radius: 5px; border: 1.5px solid #d9d3e3; background: #fff; }
.mk-pos-seat.is-taken { background: #f0eef4; border-color: #f0eef4; }
.mk-pos-seat.is-sel { background: var(--et-gold); border-color: var(--et-gold-strong); }
.mk-pos-foot {
  display: flex; align-items: center; gap: .625rem;
  padding: .625rem .75rem; border-top: 1px solid var(--et-border);
}
.mk-pos-total { font-weight: 800; font-size: .9375rem; color: var(--et-ink); }
.mk-pos-print {
  margin-left: auto; background: var(--et-gold); color: #3f2f00;
  font-size: .75rem; font-weight: 700; padding: .5rem .875rem; border-radius: 9999px;
  display: inline-flex; align-items: center; gap: .375rem;
}
.mk-pos-print svg { width: 13px; height: 13px; }
/* printer slot + emerging ticket */
.mk-pos-slot {
  height: 10px; width: 70%; margin: 12px auto 0;
  background: rgba(0, 0, 0, .55); border-radius: 9999px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .8);
}
.mk-pos-out { position: relative; width: 66%; margin: 0 auto; height: 150px; overflow: hidden; }
.mk-pos-paper {
  position: absolute; inset: 0 0 auto 0;
  transform: translateY(-104%);
  transition: transform 1.1s var(--et-ease) .15s;
}
.is-inview .mk-pos-paper { transform: translateY(0); }
.mk-pos-paper .mk-ticket-route { font-size: .875rem; }
.mk-pos-paper .mk-ticket-body { padding: .625rem .75rem .75rem; gap: .625rem; }
.mk-pos-paper .mk-ticket-qr svg { width: 28px; height: 28px; }
/* NFC pad on the bezel */
.mk-pos-nfc {
  position: absolute; top: 50%; right: -11px; transform: translateY(-50%);
  width: 22px; height: 44px; border-radius: 0 10px 10px 0;
  background: var(--mk-night-2); border: 1px solid rgba(255, 255, 255, .14); border-left: none;
}
.mk-pos-nfc::after {
  content: ""; position: absolute; inset: 50% auto auto 50%; width: 8px; height: 8px;
  border-radius: 9999px; background: var(--et-gold); transform: translate(-50%, -50%);
}

/* Spec chips under the device */
.mk-spec { display: inline-flex; align-items: center; gap: .4rem;
  font-size: .75rem; font-weight: 600; color: rgba(255, 255, 255, .75);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 9999px; padding: .375rem .75rem; }
.mk-spec svg { width: 13px; height: 13px; color: var(--et-gold); }

/* --------------------------------------------------------------------------
   SMS notification mock (parcels chapter)
   -------------------------------------------------------------------------- */
.mk-sms { display: flex; gap: .75rem; align-items: flex-start; }
.mk-sms-bubble {
  background: #fff; border: 1px solid var(--et-border); border-radius: 4px 16px 16px 16px;
  padding: .625rem .875rem; box-shadow: var(--et-shadow-card);
}
.mk-sms-app { font-size: .6875rem; font-weight: 700; color: var(--et-muted); text-transform: uppercase; letter-spacing: .08em; }
.mk-sms-text { font-size: .875rem; color: var(--et-ink); line-height: 1.5; }
.mk-sms-text b { font-weight: 700; }
.mk-sms-time { font-size: .6875rem; color: var(--et-muted); }

/* --------------------------------------------------------------------------
   Loyalty punch card (return chapter)
   -------------------------------------------------------------------------- */
.mk-punch-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.mk-punch {
  width: 34px; height: 34px; border-radius: 9999px;
  border: 1.5px dashed #d9c76a; display: inline-flex; align-items: center; justify-content: center;
  color: transparent; flex: none;
}
.mk-punch.is-hit { background: var(--et-gold); border: 1.5px solid var(--et-gold-strong); color: #3f2f00; }
.mk-punch svg { width: 15px; height: 15px; }
.mk-punch.is-free { border-style: solid; border-color: var(--et-primary); color: var(--et-primary); font-size: .625rem; font-weight: 800; }

/* --------------------------------------------------------------------------
   Scroll reveal — one quiet entrance per element; reduced motion = none.
   -------------------------------------------------------------------------- */
.mk-reveal { opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--et-ease), transform .6s var(--et-ease); }
.mk-reveal.is-inview { opacity: 1; transform: none; }
.mk-reveal-late { transition-delay: .12s; }
@media (prefers-reduced-motion: reduce) {
  .mk-reveal { opacity: 1; transform: none; transition: none; }
  .mk-pos-paper { transform: none; transition: none; }
  .fade-up { animation: none; }
}

/* --------------------------------------------------------------------------
   Final CTA + small screens
   -------------------------------------------------------------------------- */
.mk-cta-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.mk-cta-scrim { position: absolute; inset: 0;
  background: linear-gradient(88deg, rgba(40, 3, 54, .96) 32%, rgba(40, 3, 54, .78) 58%, rgba(40, 3, 54, .35) 100%); }

@media (max-width: 1023px) {
  .mk-ticket-hero { display: none; }
}
@media (max-width: 480px) {
  /* Ticket stubs stay on one line on small phones */
  .mk-stub { letter-spacing: .08em; padding: .375rem .875rem; font-size: .625rem; }
}

/* --------------------------------------------------------------------------
   FAQ (2026-08 rework) — native <details> accordions, no JS
   -------------------------------------------------------------------------- */
.mk-faq summary { list-style: none; position: relative; padding-right: 2.75rem; }
.mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq summary::after { content: "+"; position: absolute; right: 1.25rem; top: 50%;
  transform: translateY(-50%); font-weight: 800; font-size: 1.1rem; color: var(--et-primary); }
.mk-faq[open] summary::after { content: "\2013"; }

/* --------------------------------------------------------------------------
   Legal documents (privacy / terms), 2026-08-12 — shared doc typography
   -------------------------------------------------------------------------- */
.legal-body h2 { font-weight: 800; font-size: 1.15rem; color: #1e293b; margin: 2.25rem 0 .75rem; letter-spacing: -.01em; }
.legal-body h3 { font-weight: 700; font-size: .95rem; color: #334155; margin: 1.5rem 0 .5rem; }
.legal-body p  { font-size: .925rem; line-height: 1.65; color: #475569; margin: .6rem 0; }
.legal-body ul { list-style: disc; padding-left: 1.4rem; margin: .6rem 0; }
.legal-body ul li { font-size: .925rem; line-height: 1.6; color: #475569; margin: .35rem 0; }
.legal-body a  { color: var(--et-primary); font-weight: 600; }
.legal-body strong { color: #1e293b; }

/* --------------------------------------------------------------------------
   Sell-more-seats — the empty-leg strip (2026-08-12): one seat, two tickets,
   split at the middle stop. Bars are a two-row mini-Gantt under a route line.
   -------------------------------------------------------------------------- */
.mk-legviz { max-width: 420px; }
.mk-legviz-line { position: relative; height: 2px; background: #e5e0ec; margin: 14px 5px 0; }
.mk-legviz-dot { position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 9999px; background: #fff; border: 2.5px solid var(--et-primary); }
.mk-legviz-dot:nth-child(1) { left: -5px; }
.mk-legviz-dot:nth-child(2) { left: 50%; margin-left: -5px; }
.mk-legviz-dot:nth-child(3) { right: -5px; }
.mk-legviz-cities { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; color: #64748b; margin-top: 8px; }
.mk-legviz-bar { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; border-radius: 8px; padding: 6px 10px; }
.mk-legviz-bar svg { width: 12px; height: 12px; flex: none; }
.mk-legviz-bar-a { width: calc(50% - 3px); margin-top: 10px; background: var(--et-primary-soft); color: var(--et-primary); }
.mk-legviz-bar-b { width: calc(50% - 3px); margin-left: calc(50% + 3px); margin-top: 6px; background: var(--et-gold-soft); color: var(--et-gold-ink); }

/* Payment badges (2026-08-12): real brand marks inside the pill. A wordmark
   logo (Visa, M-Pesa, Wave) stands alone; a symbol mark keeps its text label. */
.pay-badge img { height: 16px; width: auto; display: block; }

/* --------------------------------------------------------------------------
   Payments band (2026-08-12 owner pass) — a night slab with the house
   ticket-tear along its bottom edge; the hero ticket hangs down into it.
   Brand pills stay white so the real marks keep their own colours.
   -------------------------------------------------------------------------- */
.mk-payband {
  position: relative; overflow: hidden;
  background: var(--mk-night);
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 8px) no-repeat,
    conic-gradient(from -45deg at 50% 100%, #000 90deg, rgba(0, 0, 0, 0) 0) 0 100% / 16px 8px repeat-x;
  mask:
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 8px) no-repeat,
    conic-gradient(from -45deg at 50% 100%, #000 90deg, rgba(0, 0, 0, 0) 0) 0 100% / 16px 8px repeat-x;
}
.mk-payband .pay-badge {
  border-color: rgba(255, 255, 255, .1);
  border-radius: 12px; padding: .5625rem 1rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
  transition: transform var(--et-fast) var(--et-ease);
}
.mk-payband .pay-badge:hover { transform: translateY(-2px); }
.mk-payband .pay-badge img { height: 18px; }
.mk-pay-more {
  display: inline-flex; align-items: center;
  border: 1.5px dashed rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .8);
  border-radius: 9999px; padding: .5rem 1rem;
  font-size: .8125rem; font-weight: 600;
}

/* --------------------------------------------------------------------------
   How-it-works route (2026-08-12 owner pass) — the four steps are stops on a
   dashed road (lg+ only; stacked cards need no line). The little bus drives
   from the first stop to the last when the section scrolls into view;
   reduced motion parks it at the last stop.
   -------------------------------------------------------------------------- */
.mk-steps { position: relative; }
.mk-steps-line { display: none; }
@media (min-width: 1024px) {
  .mk-steps-line {
    display: block; position: absolute; top: -2.75rem; left: 0; right: 0;
    border-top: 2px dashed #e3dbee;
  }
  .mk-steps-stop {
    position: absolute; top: -6px; margin-left: -5px;
    width: 10px; height: 10px; border-radius: 9999px;
    background: #fff; border: 2.5px solid var(--et-primary);
  }
  .mk-steps-bus {
    position: absolute; top: -21px; left: calc(11.9% - 15px);
    color: var(--et-primary); background: #fff; padding: 0 4px;
    transition: left 1.4s var(--et-ease) .3s;
  }
  .mk-steps-bus svg { width: 22px; height: 22px; display: block; }
  .mk-steps.is-inview .mk-steps-bus { left: calc(88.1% - 15px); }
}
@media (prefers-reduced-motion: reduce) {
  .mk-steps-bus { transition: none; left: calc(88.1% - 15px); }
}
/* display:flex (not the component's inline-flex) so the title always starts
   on its own line below the icon — an inline icon made long step titles wrap
   around it ("Add routes, vehicles / and trips"). */
.mk-step-icon { position: relative; display: flex; }
.mk-step-n {
  position: absolute; top: -5px; right: -7px;
  width: 19px; height: 19px; border-radius: 9999px;
  background: var(--et-primary); color: #fff;
  font-size: .625rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px #fff;
}

/* --------------------------------------------------------------------------
   Sell-more cards (2026-08-12 owner pass) — soft house washes over the white
   card, and a passenger's phone on the branded booking site, assembled from
   the POS mock's own pieces.
   -------------------------------------------------------------------------- */
.mk-wash-primary {
  background: linear-gradient(150deg, #fff 0%, var(--et-primary-fainter) 45%, var(--et-primary-soft) 100%);
  border-color: #eadef5;
}
.mk-wash-gold {
  background: linear-gradient(150deg, #fff 0%, #fffcf1 45%, var(--et-gold-soft) 100%);
  border-color: #f1e5bb;
}
.mk-phone {
  width: min(232px, 100%); margin-inline: auto;
  background: var(--mk-night-2);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 26px; padding: 10px;
  box-shadow: var(--et-shadow-pop);
}
.mk-phone-notch {
  width: 60px; height: 5px; border-radius: 9999px;
  background: rgba(255, 255, 255, .28); margin: 2px auto 9px;
}
.mk-phone-screen { background: #fff; border-radius: 16px; overflow: hidden; }
.mk-phone .mk-pos-seats { padding: .625rem .75rem; gap: 4px; }
.mk-phone .mk-pos-total { font-size: .75rem; }
.mk-phone-pay {
  margin-left: auto; flex: none;
  width: 26px; height: 26px; border-radius: 9999px;
  background: var(--et-gold); color: #3f2f00;
  display: inline-flex; align-items: center; justify-content: center;
}
.mk-phone-pay svg { width: 13px; height: 13px; }

/* --------------------------------------------------------------------------
   Colour bands (2026-08-12 owner pass — "the white and blandness is too
   much"): the middle chapters alternate soft house tints, so the hero's
   warmth runs the whole page. Cards stay white and lift off the bands.
   Tints blend the brand scales (primary-soft / gold-soft) toward white.
   -------------------------------------------------------------------------- */
.mk-band-primary { background: linear-gradient(180deg, #fbf7fe 0%, #f3eafa 100%); }
.mk-band-paper { background: linear-gradient(180deg, #fffdf6 0%, #fbf3da 100%); }
.mk-band-gold { background: radial-gradient(110% 90% at 50% 0%, #fff3c6 0%, #fffdf4 55%, #fff 100%); }
/* The stage the demo trip card sits on — the dashboard's own light ground,
   warmed: purple into ticket gold, so the white card reads like the shipped
   screen and still belongs to the marketing page. */
.mk-demo-stage {
  background: linear-gradient(135deg, #f6eefb 0%, #fdf6e3 100%);
  border: 1px solid #ecdff2; border-radius: 28px;
}