/* ==========================================================================
   QUANTECH ADVISORS — HOMEPAGE SECTIONS (index.html only; needs site.css)
   ========================================================================== */
/* ==========================================================================
   1. HERO
   ========================================================================== */
.mk-hero { padding-top: calc(var(--mk-header-h) + clamp(20px, 4vw, 48px)); position: relative; }
.mk-hero::before { /* faint survey grid — "a system", not decoration for its own sake */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--mk-line) 1px, transparent 1px), linear-gradient(90deg, var(--mk-line) 1px, transparent 1px);
  background-size: 64px 64px; opacity: .45;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 0%, transparent 75%);
}
.mk-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.mk-hero h1 {
  font-family: var(--mk-display); font-weight: 700; letter-spacing: -.032em; line-height: .98;
  font-size: clamp(2.7rem, 5.6vw, 5rem); margin: 22px 0 26px; text-wrap: balance;
}
.mk-hero h1 .mk-h1-soft { color: var(--mk-ink-3); font-weight: 600; }
.mk-hero h1 .mk-h1-accent { color: var(--mk-coral-hd); }
.mk-hero .mk-lead { font-size: clamp(1.08rem, 1.45vw, 1.24rem); max-width: 31em; }
.mk-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.mk-hero-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 26px; font-size: 14.5px; color: var(--mk-ink-3); }
.mk-hero-facts li { display: inline-flex; align-items: center; gap: 8px; }
.mk-hero-facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mk-teal); }

/* Network centrepiece — the logo's own geometry, at scale */
.mk-net { position: relative; width: 100%; max-width: 540px; margin-left: auto; aspect-ratio: 1 / 1; padding: 0; }
.mk-net svg { width: 100%; height: 100%; overflow: visible; }
.mk-net .e { stroke: url(#mk-net-grad); stroke-width: 1.6; fill: none; opacity: .55; }
.mk-net .e-core { stroke-width: 1.2; stroke-dasharray: 3 5; opacity: .5; }
.mk-net .e-hi { opacity: 1; stroke-width: 2.6; }
.mk-net .n { fill: #fff; stroke-width: 2.4; }
.mk-net .n-in { fill: var(--mk-blue); }
.mk-net .core-ring { fill: none; stroke: var(--mk-coral); stroke-width: 1.5; opacity: .35; transform-origin: 300px 300px; animation: mk-ring 3.6s var(--mk-ease) infinite; }
.mk-net .core { fill: var(--mk-coral); }
.mk-net .pulse { fill: var(--mk-teal); }
@keyframes mk-ring { 0% { transform: scale(.6); opacity: .55; } 100% { transform: scale(1.9); opacity: 0; } }
.mk-js .mk-net .e { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.6s var(--mk-ease), opacity .3s, stroke-width .3s; }
.mk-js .mk-net .e-core { stroke-dasharray: 3 5; stroke-dashoffset: 0; opacity: 0; transition: opacity 1s .9s; }
.mk-js .mk-net.is-in .e { stroke-dashoffset: 0; }
.mk-js .mk-net.is-in .e-core { opacity: .5; }

.mk-net-label {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px; border-radius: 999px;
  background: var(--mk-white); border: 1px solid var(--mk-line); box-shadow: 0 6px 18px -10px rgba(11,27,51,.35);
  font-size: 13.5px; font-weight: 600; color: var(--mk-ink); transition: border-color .25s, transform .25s var(--mk-ease), box-shadow .25s;
}
.mk-net-label i { width: 8px; height: 8px; border-radius: 50%; background: var(--mk-teal); flex-shrink: 0; }
.mk-net-label.is-hi { border-color: var(--mk-teal); box-shadow: 0 10px 24px -10px rgba(23,184,173,.55); transform: translate(-50%, -50%) scale(1.04); }
.mk-net-core-label {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, 34px); white-space: nowrap;
  font-family: var(--mk-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--mk-coral-ink); font-weight: 500;
  background: var(--mk-paper); padding: 2px 8px; border-radius: 6px;
}

/* ==========================================================================
   2. PRODUCT WINDOW (interactive Q-App preview)
   ========================================================================== */
.mk-product { padding: clamp(36px, 4vw, 48px) 0 0; }
.mk-product-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 22px; flex-wrap: wrap; }
.mk-product-head p { max-width: 34em; color: var(--mk-ink-2); }
.mk-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--mk-paper-2); border: 1px solid var(--mk-line); overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.mk-tabs::-webkit-scrollbar { display: none; }
.mk-tab { border: 0; background: transparent; padding: 9px 16px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--mk-ink-3); white-space: nowrap; transition: background-color .2s, color .2s, box-shadow .2s; }
.mk-tab:hover { color: var(--mk-ink); }
.mk-tab[aria-selected="true"] { background: #fff; color: var(--mk-ink); box-shadow: 0 1px 2px rgba(11,27,51,.12), 0 0 0 1px var(--mk-line); }

.mk-window {
  border-radius: 18px; overflow: hidden; background: #fff; position: relative;
  box-shadow: 0 0 0 1px rgba(11,27,51,.08), 0 40px 80px -40px rgba(11,27,51,.45), 0 18px 36px -24px rgba(11,27,51,.25);
  font-family: 'Inter', system-ui, sans-serif;
}
.mk-chrome { display: flex; align-items: center; gap: 14px; padding: 11px 16px; background: var(--mk-app-side); }
.mk-dots { display: flex; gap: 7px; }
.mk-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; background: #FF5F57; }
.mk-dots i:nth-child(2) { background: #FEBC2E; } .mk-dots i:nth-child(3) { background: #28C840; }
.mk-url { flex: 1; display: flex; justify-content: center; }
.mk-url span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: rgba(255,255,255,.62); background: rgba(255,255,255,.07); border-radius: 7px; padding: 4px 14px; }
.mk-url svg { width: 11px; height: 11px; }

.mk-app { display: flex; height: 580px; }
.mk-side { width: 196px; flex-shrink: 0; background: var(--mk-app-side); padding: 18px 12px; display: flex; flex-direction: column; gap: 1px; overflow: hidden; position: relative; }
.mk-side::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(rgba(11,18,32,0), var(--mk-app-side)); pointer-events: none; }
.mk-side-brand { display: flex; align-items: center; gap: 9px; padding: 0 6px 18px; }
.mk-side-brand b { width: 30px; height: 30px; border-radius: 9px; background: #fff; display: grid; place-items: center; flex-shrink: 0; }
.mk-side-brand b img { width: 22px; height: 22px; object-fit: contain; }
.mk-side-brand strong { display: block; color: #fff; font-size: 13.5px; line-height: 1.2; }
.mk-side-brand small { display: block; color: #7DD3E8; font-size: 11px; }
.mk-side-sec { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: #4B5B73; padding: 12px 10px 4px; text-transform: uppercase; }
.mk-side-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; border: 0; background: transparent; width: 100%; text-align: left;
  color: #94A3B8; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: default;
}
.mk-side-item svg { width: 15px; height: 15px; flex-shrink: 0; }
.mk-side-item .mk-qmark { width: 17px; height: 17px; margin: -1px; }
button.mk-side-item { cursor: pointer; transition: background-color .2s, color .2s; }
button.mk-side-item:hover { color: #E2E8F0; background: rgba(255,255,255,.05); }
.mk-side-item.is-active { background: rgba(255,255,255,.1); color: #fff; }
.mk-side-item .mk-new { margin-left: auto; font-size: 9.5px; padding: 1px 6px; border-radius: 6px; background: rgba(23,184,173,.2); color: var(--mk-mint); letter-spacing: .03em; }

.mk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #F8FAFC; }
.mk-topbar { display: flex; justify-content: flex-end; align-items: center; gap: 14px; padding: 10px 22px; background: #fff; border-bottom: 1px solid #EEF1F6; color: #94A3B8; }
.mk-topbar svg { width: 16px; height: 16px; }
.mk-topbar .mk-pill { font-size: 11px; font-weight: 700; color: #475569; border: 1px solid #E2E8F0; border-radius: 20px; padding: 2px 9px; }
.mk-topbar .mk-av { width: 28px; height: 28px; border-radius: 50%; background: var(--mk-ink); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.mk-screen { padding: 20px 24px; flex: 1; min-height: 0; overflow: hidden; }
.mk-screen[hidden] { display: none; }
.mk-js .mk-screen { animation: mk-fade .45s var(--mk-ease); }
@keyframes mk-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mk-screen-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.mk-screen-head h3 { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 21px; letter-spacing: -.02em; color: #0F172A; }
.mk-app-btn { background: #0E7490; color: #fff; font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: 9px; white-space: nowrap; }
.mk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.mk-stat { background: #fff; border: 1px solid #EEF1F6; border-radius: 12px; padding: 12px 14px; min-width: 0; }
.mk-stat span { display: block; font-size: 11.5px; color: #64748B; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-stat strong { display: block; font-size: 19px; font-weight: 800; color: #0F172A; letter-spacing: -.02em; margin-top: 2px; white-space: nowrap; }
.mk-stat strong.g { color: #059669; } .mk-stat strong.r { color: #DC2626; }
.mk-sub { display: flex; gap: 18px; border-bottom: 1px solid #E2E8F0; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: #64748B; }
.mk-sub span { padding: 0 2px 9px; }
.mk-sub span.on { color: #0E7490; box-shadow: inset 0 -2px 0 #0E7490; }
.mk-card { background: #fff; border: 1px solid #EEF1F6; border-radius: 12px; padding: 14px 16px; }
.mk-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; }
.mk-card-head b { font-size: 11px; letter-spacing: .08em; color: #64748B; }
.mk-seg { display: inline-flex; background: #F1F5F9; border-radius: 8px; padding: 2px; font-size: 11.5px; font-weight: 600; color: #64748B; }
.mk-seg span { padding: 3px 10px; border-radius: 6px; } .mk-seg span.on { background: #fff; color: #0F172A; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.mk-sales-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 12px; }
.mk-chart { position: relative; height: 190px; }
.mk-chart svg { width: 100%; height: 100%; }
.mk-chart .ax { stroke: #EEF1F6; stroke-width: 1; }
.mk-legend { display: flex; gap: 16px; font-size: 11.5px; color: #64748B; margin-top: 6px; }
.mk-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.mk-vel li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #F1F5F9; font-size: 12.5px; }
.mk-vel li:last-child { border-bottom: 0; }
.mk-vel li span { color: #0F172A; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-vel li em { font-style: normal; color: #64748B; font-size: 11.5px; }
.mk-vel li i { grid-column: 1 / -1; height: 5px; border-radius: 4px; background: #E0F2FE; position: relative; overflow: hidden; }
.mk-vel li i::after { content: ""; position: absolute; inset: 0; width: var(--w); background: linear-gradient(90deg, #17B8AD, #1663B8); border-radius: 4px; }

.mk-chips { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.mk-chips span { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid #E2E8F0; color: #475569; background: #fff; }
.mk-chips span.on { background: #0F172A; border-color: #0F172A; color: #fff; }
.mk-mtable { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #EEF1F6; border-radius: 12px; overflow: hidden; font-size: 13px; }
.mk-mtable th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #64748B; font-weight: 700; padding: 10px 14px; background: #F8FAFC; border-bottom: 1px solid #EEF1F6; white-space: nowrap; }
.mk-mtable td { padding: 11px 14px; border-bottom: 1px solid #F1F5F9; color: #334155; white-space: nowrap; }
.mk-mtable tr:last-child td { border-bottom: 0; }
.mk-mtable td:first-child { color: #0F172A; font-weight: 600; }
.mk-mtable .num { text-align: right; font-variant-numeric: tabular-nums; }
.mk-mbadge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.mk-mbadge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mk-mbadge.ok { background: #ECFDF5; color: #047857; }
.mk-mbadge.low { background: #FFF1EC; color: #C2410C; }
.mk-mbadge.move { background: #EFF6FF; color: #1D4ED8; }
.mk-mbadge.wait { background: #F1F5F9; color: #475569; }
.mk-mbadge.late { background: #FEF2F2; color: #B91C1C; }
.mk-track { display: flex; align-items: center; gap: 0; min-width: 150px; }
.mk-track i { width: 9px; height: 9px; border-radius: 50%; background: #CBD5E1; flex-shrink: 0; }
.mk-track b { height: 2px; flex: 1; background: #CBD5E1; }
.mk-track .on { background: #0E7490; }

/* ==========================================================================
   3. PROBLEM
   ========================================================================== */
.mk-problem-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.mk-pains { margin-top: 40px; border-top: 1px solid var(--mk-line-2); }
.mk-pains li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 20px 0; border-bottom: 1px solid var(--mk-line-2); }
.mk-pains li > span { font-family: var(--mk-mono); font-size: 13px; color: var(--mk-coral-ink); padding-top: 3px; }
.mk-pains h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 4px; }
.mk-pains p { color: var(--mk-ink-2); font-size: 16px; }

.mk-mess { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 74px; gap: 14px; }
.mk-frag {
  background: #fff; border: 1px solid var(--mk-line); border-radius: 14px; padding: 14px 16px; position: relative;
  box-shadow: 0 14px 30px -22px rgba(11,27,51,.45); font-size: 13.5px; color: var(--mk-ink-2);
  transform: rotate(var(--r, 0deg)); transition: transform .6s var(--mk-ease);
}
.mk-frag-kind { display: flex; align-items: center; gap: 7px; font-family: var(--mk-mono); font-size: 11px; color: var(--mk-ink-3); margin-bottom: 8px; letter-spacing: .02em; }
.mk-frag-kind svg { width: 14px; height: 14px; }
.mk-frag--sheet { grid-column: 1 / 5; grid-row: 1 / 4; --r: -1.6deg; padding: 0; overflow: hidden; }
.mk-frag--sheet .mk-frag-kind { padding: 12px 14px 0; }
.mk-sheet-grid { display: grid; grid-template-columns: 36px 1.6fr 1fr 1fr; font-family: var(--mk-mono); font-size: 12px; margin-top: 4px; }
.mk-sheet-grid span { border-top: 1px solid #ECEFF3; border-left: 1px solid #ECEFF3; padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #334155; }
.mk-sheet-grid span.h { background: #F4F6F8; color: #64748B; font-weight: 500; }
.mk-sheet-grid span.q { background: #FFF6D6; color: #8A6100; }
.mk-sheet-grid span.x { color: #B91C1C; text-decoration: line-through; }
.mk-frag--chat { grid-column: 4 / 7; grid-row: 3 / 5; --r: 2.2deg; background: #E7F7EE; border-color: #CBEBD8; z-index: 2; }
.mk-frag--chat p { background: #fff; border-radius: 10px 10px 10px 2px; padding: 8px 11px; color: var(--mk-ink); box-shadow: 0 1px 1px rgba(0,0,0,.05); }
.mk-frag--chat small { display: block; text-align: right; font-size: 11px; color: #5B7A68; margin-top: 4px; }
.mk-frag--note { grid-column: 5 / 7; grid-row: 1 / 3; --r: 3deg; background: #FFF4C7; border-color: #F1E3A0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 15.5px; color: #4A3E10; line-height: 1.35; }
.mk-frag--mail { grid-column: 1 / 4; grid-row: 4 / 6; --r: 1.2deg; z-index: 1; }
.mk-frag--mail strong { display: block; color: var(--mk-ink); font-size: 14px; margin-bottom: 2px; }
.mk-frag--bill { grid-column: 4 / 7; grid-row: 5 / 6; --r: -2deg; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mk-frag--bill strong { color: var(--mk-coral-ink); font-family: var(--mk-mono); font-size: 13px; white-space: nowrap; }
.mk-mess.is-in .mk-frag { transform: rotate(calc(var(--r, 0deg) * 1.4)); }

/* ==========================================================================
   4. ECOSYSTEM
   ========================================================================== */

/* ==========================================================================
   5. QORA
   ========================================================================== */
.mk-qora { background: var(--mk-night); color: var(--mk-night-text); overflow: hidden; }
.mk-qora::before {
  content: ""; position: absolute; width: 900px; height: 900px; right: -300px; top: -340px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(23,184,173,.22), rgba(22,99,184,.08) 45%, transparent 70%);
}
.mk-qora .mk-eyebrow { color: var(--mk-mint); }
.mk-qora .mk-h2 { color: #fff; }
.mk-qora .mk-lead { color: var(--mk-night-muted); }
.mk-qora-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: center; position: relative; }
.mk-qtile--hero {
  display: grid;
  width: 76px; height: 76px; border-radius: 22px; margin-bottom: 28px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 0 0 8px rgba(43,163,176,.08), 0 18px 50px -12px rgba(43,163,176,.55);
  animation: mk-breathe 4.8s ease-in-out infinite;
}
@keyframes mk-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }

.mk-msg { max-width: 88%; font-size: 15.5px; line-height: 1.55; }
.mk-msg--you { align-self: flex-end; background: #fff; color: var(--mk-ink); padding: 11px 16px; border-radius: 16px 16px 4px 16px; font-weight: 500; }
.mk-msg--q { align-self: flex-start; color: var(--mk-night-text); }

.mk-msg--q ol { margin-top: 10px; display: grid; gap: 6px; counter-reset: q; }
.mk-msg--q ol li { counter-increment: q; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid var(--mk-night-line); font-size: 14.5px; }
.mk-msg--q ol li::before { content: counter(q); font-family: var(--mk-mono); color: var(--mk-night-muted); font-size: 12px; }
.mk-msg--q ol li em { font-style: normal; font-family: var(--mk-mono); font-size: 12.5px; color: var(--mk-night-muted); }
.mk-goto { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(94,234,212,.1); border: 1px solid rgba(94,234,212,.35); color: #fff; font-weight: 600; font-size: 14.5px; }
.mk-goto small { font-family: var(--mk-mono); font-size: 11px; color: var(--mk-mint); letter-spacing: .04em; }
.mk-path { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-family: var(--mk-mono); font-size: 12.5px; }
.mk-path span { padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,.08); }

.mk-qora .mk-note { color: var(--mk-night-muted); margin-top: 14px; }

.mk-typing { display: inline-flex; gap: 4px; padding: 6px 0; }
.mk-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--mk-night-muted); animation: mk-typing 1s infinite; }
.mk-typing i:nth-child(2) { animation-delay: .15s; } .mk-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes mk-typing { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* ==========================================================================
   6. INSIGHTS
   ========================================================================== */

.mk-q-src { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-q-src span { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 6px; background: var(--mk-paper-2); color: var(--mk-ink-2); border: 1px solid var(--mk-line); }

/* ==========================================================================
   7. ADVISORS + MARKETS
   ========================================================================== */
.mk-adv { background: var(--mk-paper-2); border-top: 1px solid var(--mk-line); }

/* ==========================================================================
   8. START / TRUST
   ========================================================================== */
.mk-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: clamp(40px, 6vw, 64px); counter-reset: s; }
.mk-step-card { padding: 26px 24px 26px 0; border-top: 2px solid var(--mk-line-2); position: relative; }
.mk-step-card::before { content: ""; position: absolute; top: -2px; left: 0; width: 44px; height: 2px; background: var(--mk-coral); }
.mk-step-card span { font-family: var(--mk-mono); font-size: 12px; color: var(--mk-coral-ink); }
.mk-step-card h3 { font-size: 19px; font-weight: 700; letter-spacing: -.015em; margin: 10px 0 8px; }
.mk-step-card p { color: var(--mk-ink-2); font-size: 15.5px; }

/* ==========================================================================
   9. PRICING
   ========================================================================== */
.mk-price { background: var(--mk-white); border-top: 1px solid var(--mk-line); border-bottom: 1px solid var(--mk-line); }
.mk-price-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.mk-plan { border-radius: 24px; background: var(--mk-night); color: var(--mk-night-text); padding: clamp(24px, 4vw, 40px); position: relative; overflow: hidden; }
.mk-plan::after { content: ""; position: absolute; right: -120px; bottom: -160px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(23,184,173,.25), transparent 70%); pointer-events: none; }
.mk-plan-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.mk-plan-top h3 { font-family: var(--mk-display); font-size: 26px; letter-spacing: -.02em; color: #fff; }
.mk-cycle { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--mk-night-line); }
.mk-cycle button { border: 0; background: transparent; padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--mk-night-muted); }
.mk-cycle button[aria-pressed="true"] { background: #fff; color: var(--mk-ink); }
.mk-plan-desc { color: var(--mk-night-muted); margin: 10px 0 26px; font-size: 15.5px; }
.mk-amount { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mk-amount strong { font-family: var(--mk-display); font-size: clamp(3rem, 6vw, 4.4rem); font-weight: 700; letter-spacing: -.025em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.mk-amount span { font-size: 15px; color: var(--mk-night-muted); }
.mk-amount-sub { min-height: 24px; margin-top: 8px; font-size: 14.5px; color: var(--mk-mint); }
.mk-plan .mk-btn { width: 100%; margin-top: 26px; }
.mk-plan-foot { margin-top: 16px; font-size: 14px; color: var(--mk-night-muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; position: relative; z-index: 1; }
.mk-plan-foot a { color: #fff; }
.mk-incl h3 { font-family: var(--mk-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mk-ink-3); font-weight: 500; margin-bottom: 14px; }
.mk-incl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.mk-incl-grid li { display: flex; gap: 10px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--mk-line); font-size: 15.5px; color: var(--mk-ink-2); }
.mk-incl-grid svg { width: 18px; height: 18px; color: var(--mk-teal-ink); flex-shrink: 0; margin-top: 3px; }
.mk-incl-grid li strong { color: var(--mk-ink); font-weight: 650; }

/* ---------- Final CTA ---------- */
.mk-final { padding: 0 0 clamp(64px, 9vw, 120px); }
.mk-final-card {
  position: relative; overflow: hidden; border-radius: 28px; background: var(--mk-night); color: #fff;
  padding: clamp(40px, 7vw, 96px) clamp(24px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 32px; align-items: end;
}
.mk-final-card .mk-final-net { position: absolute; right: -60px; top: -60px; width: 460px; height: 460px; opacity: .22; pointer-events: none; }
.mk-final-card h2 { font-family: var(--mk-display); font-size: clamp(2.2rem, 5vw, 4.1rem); font-weight: 700; letter-spacing: -.028em; line-height: 1; position: relative; text-wrap: balance; }
.mk-final-card h2 span { color: var(--mk-mint); }
.mk-final-card p { color: var(--mk-night-muted); margin-top: 18px; max-width: 30em; position: relative; }
.mk-final-ctas { display: grid; gap: 12px; position: relative; }
.mk-final-ctas .mk-btn--ghost { border-color: rgba(255,255,255,.25); color: #fff; }
.mk-final-ctas .mk-btn--ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; }

/* ==========================================================================
   PILLARS (ecosystem map colouring — the app's five pillars)
   ========================================================================== */
[data-pillar="sales"] { --p: #E8744F; }
[data-pillar="inventory"] { --p: #2BA3B0; }
[data-pillar="sourcing"] { --p: #C98A1A; }
[data-pillar="logistics"] { --p: #1E5FA8; }
[data-pillar="admin"] { --p: #7C5CD6; }
[data-pillar="intel"] { --p: #0F2A52; }

/* ==========================================================================
   SELL EVERYWHERE (bento)
   ========================================================================== */

.mk-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.mk-tile { position: relative; overflow: hidden; border-radius: 22px; background: #fff; border: 1px solid var(--mk-line); padding: clamp(20px, 2.6vw, 30px); display: flex; flex-direction: column; gap: 10px; min-height: 280px; }
.mk-tile h3 { font-family: var(--mk-display); font-size: clamp(1.35rem, 2vw, 1.65rem); letter-spacing: -.02em; line-height: 1.1; }
.mk-tile p { color: var(--mk-ink-2); font-size: 15.5px; max-width: 32em; }
.mk-tile-k { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mk-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mk-ink-3); }
.mk-tile-k svg.i { width: 16px; height: 16px; color: var(--mk-coral); }
.mk-tile--pos { grid-column: span 4; grid-row: span 2; background: var(--mk-night); color: var(--mk-night-text); border-color: transparent; }
.mk-tile--pos h3 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.mk-tile--pos p { color: var(--mk-night-muted); }
.mk-tile--pos .mk-tile-k { color: var(--mk-night-muted); }
.mk-tile--links, .mk-tile--store { grid-column: span 2; }
.mk-tile--catalog { grid-column: span 3; }
.mk-tile--quote { grid-column: span 3; background: var(--mk-coral-soft); border-color: #F5D3C5; justify-content: center; }
.mk-tile--quote blockquote { margin: 0; font-family: var(--mk-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -.02em; line-height: 1.12; color: var(--mk-ink); }
.mk-tile--quote cite { font-style: normal; font-family: var(--mk-mono); font-size: 12px; color: var(--mk-coral-ink); }

.mk-pos { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; }
.mk-pos-cart, .mk-pos-pay { background: rgba(255,255,255,.05); border: 1px solid var(--mk-night-line); border-radius: 16px; padding: 14px; }
.mk-pos-cart li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--mk-night-line); font-size: 14px; color: var(--mk-night-text); }
.mk-pos-cart li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-pos-cart li em { font-style: normal; font-family: var(--mk-mono); font-size: 13px; color: var(--mk-night-muted); }
.mk-pos-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; font-size: 13px; color: var(--mk-night-muted); }
.mk-pos-total strong { font-family: var(--mk-display); font-size: 26px; color: #fff; letter-spacing: -.02em; }
.mk-pos-pay b { display: block; font-family: var(--mk-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mk-night-muted); font-weight: 500; margin-bottom: 10px; }
.mk-chipset { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-chipset span { font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--mk-night-line); color: var(--mk-night-text); }
.mk-chipset span.on { background: var(--mk-mint); border-color: var(--mk-mint); color: var(--mk-ink); }
.mk-pos-ok { margin-top: 12px; display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--mk-mint); }
.mk-pos-ok svg.i { width: 16px; height: 16px; margin-top: 2px; }

.mk-wa { margin-top: auto; background: #E7F7EE; border-radius: 16px; padding: 12px; display: grid; gap: 8px; }
.mk-wa-bubble { background: #fff; border-radius: 12px 12px 12px 3px; padding: 10px 12px; font-size: 13.5px; box-shadow: 0 1px 1px rgba(0,0,0,.05); }
.mk-wa-bubble u { color: #0B6E99; overflow-wrap: anywhere; }
.mk-wa-bubble small { display: block; text-align: right; color: #5B7A68; font-size: 11px; margin-top: 4px; }
.mk-gw { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-gw span { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 8px; background: var(--mk-paper); border: 1px solid var(--mk-line); color: var(--mk-ink-2); }

.mk-storecard { margin-top: auto; border: 1px solid var(--mk-line); border-radius: 16px; overflow: hidden; background: var(--mk-paper); }
.mk-storecard-top { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #fff; border-bottom: 1px solid var(--mk-line); font-family: var(--mk-mono); font-size: 11.5px; color: var(--mk-ink-3); }
.mk-storecard-top i { width: 8px; height: 8px; border-radius: 50%; background: var(--mk-success); }
.mk-storecard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px; }
.mk-storecard-grid div { aspect-ratio: 1; border-radius: 10px; background: linear-gradient(135deg, #E9E4D8, #F7F3EA); position: relative; }
.mk-storecard-grid div:nth-child(2) { background: linear-gradient(135deg, #DDF1F2, #F2FAFA); }
.mk-storecard-grid div:nth-child(3) { background: linear-gradient(135deg, #FCE8E0, #FFF6F2); }
.mk-storecard-grid div::after { content: ""; position: absolute; left: 8px; right: 30%; bottom: 8px; height: 5px; border-radius: 4px; background: rgba(11,27,51,.18); }

.mk-catalog { margin-top: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mk-catalog div { border: 1px solid var(--mk-line); border-radius: 14px; padding: 12px; background: var(--mk-paper); display: grid; gap: 6px; font-size: 13px; color: var(--mk-ink-2); }
.mk-catalog div svg.i { color: var(--mk-teal-ink); }
.mk-catalog div strong { color: var(--mk-ink); font-size: 14px; }

/* ==========================================================================
   MADE FOR MEXICO
   ========================================================================== */
.mk-mx { background: var(--mk-night); color: var(--mk-night-text); overflow: hidden; }
.mk-mx::before { content: ""; position: absolute; width: 900px; height: 900px; left: -380px; bottom: -520px; border-radius: 50%; background: radial-gradient(circle, rgba(232,116,79,.18), rgba(27,58,107,.1) 45%, transparent 70%); pointer-events: none; }
.mk-mx .mk-eyebrow { color: var(--mk-mint); }
.mk-mx .mk-eyebrow b { color: var(--mk-night-muted); }
.mk-mx .mk-h2 { color: #fff; }
.mk-mx .mk-lead { color: var(--mk-night-muted); }
.mk-mx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; position: relative; }
.mk-mx-list { margin-top: 36px; border-top: 1px solid var(--mk-night-line); }
.mk-mx-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 14px; padding: 18px 0; border-bottom: 1px solid var(--mk-night-line); }
.mk-mx-list li svg.i { grid-row: 1 / 3; width: 22px; height: 22px; color: var(--mk-mint); margin-top: 3px; }
.mk-mx-list strong { color: #fff; font-size: 17px; }
.mk-mx-list span { color: var(--mk-night-muted); font-size: 15.5px; }
.mk-cfdi { background: #fff; color: var(--mk-ink); border-radius: 20px; padding: 22px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); position: relative; font-size: 13.5px; transform: rotate(1.2deg); }
.mk-cfdi-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 14px; border-bottom: 1px dashed var(--mk-line-2); }
.mk-cfdi-head b { font-family: var(--mk-mono); font-size: 11px; letter-spacing: .08em; color: var(--mk-ink-3); font-weight: 500; display: block; }
.mk-cfdi-head strong { font-family: var(--mk-display); font-size: 22px; letter-spacing: -.02em; }
.mk-cfdi-stamp { font-family: var(--mk-mono); font-size: 11px; font-weight: 600; color: var(--mk-success); border: 1.5px solid var(--mk-success); border-radius: 8px; padding: 4px 8px; transform: rotate(-4deg); white-space: nowrap; }
.mk-cfdi dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 16px; padding: 14px 0; border-bottom: 1px dashed var(--mk-line-2); margin: 0; }
.mk-cfdi dt { color: var(--mk-ink-3); }
.mk-cfdi dd { font-family: var(--mk-mono); font-size: 12.5px; text-align: right; overflow-wrap: anywhere; margin: 0; }
.mk-cfdi-lines { padding: 8px 0; }
.mk-cfdi-lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 6px 0; }
.mk-cfdi-lines li em { font-style: normal; font-family: var(--mk-mono); }
.mk-cfdi-tot { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--mk-line); }
.mk-cfdi-tot div { display: flex; justify-content: space-between; color: var(--mk-ink-2); }
.mk-cfdi-tot div:last-child { color: var(--mk-ink); font-weight: 700; font-size: 16px; }
.mk-cfdi-tot em { font-style: normal; font-family: var(--mk-mono); }
.mk-mx-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.mk-mx-tags span { font-family: var(--mk-mono); font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--mk-night-line); color: var(--mk-night-muted); }
.mk-mx .mk-note { color: var(--mk-night-muted); margin-top: 16px; }

/* ==========================================================================
   QORA — briefing + guide views
   ========================================================================== */
.mk-brief { display: grid; gap: 10px; }
.mk-brief-hello { font-family: var(--mk-display); font-size: 24px; color: #fff; letter-spacing: -.02em; }
.mk-brief-sub { color: var(--mk-night-muted); font-size: 15px; margin-bottom: 6px; }
.mk-brief li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid var(--mk-night-line); font-size: 15px; color: var(--mk-night-text); }
.mk-brief li > i { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; }
.mk-brief li > i svg.i { width: 18px; height: 18px; }
.mk-brief li > i.c { background: rgba(232,116,79,.16); color: #F3A386; }
.mk-brief li > i.g { background: rgba(245,184,65,.16); color: var(--mk-gold); }
.mk-brief li > i.t { background: rgba(126,227,218,.14); color: var(--mk-mint); }
.mk-brief li small { color: var(--mk-night-muted); font-size: 18px; }
.mk-trips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.mk-trips span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid var(--mk-night-line); font-size: 14px; color: var(--mk-night-text); }
.mk-trips span svg.i { width: 16px; height: 16px; color: var(--mk-mint); }
.mk-qfacts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; font-size: 14px; color: var(--mk-night-muted); }
.mk-qfacts li { display: inline-flex; align-items: center; gap: 8px; }
.mk-qfacts li svg.i { width: 16px; height: 16px; color: var(--mk-mint); }
.mk-qora .mk-eyebrow { color: var(--mk-mint); }

/* ==========================================================================
   AVAILABILITY, REFERRAL BAND, SECURITY, SERVICES
   ========================================================================== */

.mk-store-badge { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; border-radius: 14px; background: #000; color: #fff; text-decoration: none; }
.mk-store-badge svg.i { width: 22px; height: 22px; }
.mk-store-badge span { display: grid; line-height: 1.15; font-size: 16px; font-weight: 600; }
.mk-store-badge small { font-size: 10.5px; font-weight: 500; opacity: .8; }

.mk-refband { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px 32px; align-items: center; padding: clamp(22px, 3vw, 32px) clamp(22px, 4vw, 40px); border-radius: 24px; background: var(--mk-coral-soft); border: 1px solid #F5D3C5; }
.mk-refband b { font-family: var(--mk-display); font-size: clamp(2.6rem, 5vw, 3.6rem); letter-spacing: -.03em; color: var(--mk-coral-ink); line-height: 1; }
.mk-refband h3 { font-family: var(--mk-display); font-size: clamp(1.25rem, 2vw, 1.5rem); letter-spacing: -.02em; }
.mk-refband p { color: var(--mk-ink-2); font-size: 15.5px; margin-top: 4px; }

/* ==========================================================================
   RESPONSIVE (homepage sections)
   ========================================================================== */
@media (max-width: 1100px) {
  .mk-side { width: 172px; }
  .mk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
  .mk-tile--pos { grid-column: span 6; grid-row: auto; }
  .mk-tile--links, .mk-tile--store { grid-column: span 3; }
}
@media (max-width: 900px) {
  .mk-hero-grid, .mk-problem-grid, .mk-qora-grid, .mk-price-grid, .mk-final-card, .mk-mx-grid, .mk-faq-grid { grid-template-columns: minmax(0, 1fr); }
  .mk-net { max-width: 520px; margin: 8px auto 0; }

  .mk-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-side { display: none; }
  .mk-app { height: auto; min-height: 520px; }
  .mk-sales-grid { grid-template-columns: minmax(0, 1fr); }
  .mk-mess { max-width: 560px; }
  .mk-problem-grid > .mk-mess { order: 2; }
  .mk-tile--catalog, .mk-tile--quote { grid-column: span 6; }
  .mk-cfdi { max-width: 460px; transform: none; }
  .mk-refband { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .mk-hero h1 { font-size: clamp(2.55rem, 11.5vw, 3.4rem); margin: 18px 0 20px; }
  .mk-hero-ctas .mk-btn { width: 100%; }
  .mk-net { margin-top: 24px; width: 82%; }
  .mk-net-label { font-size: 11.5px; padding: 4px 9px 4px 7px; gap: 5px; }
  .mk-net-label i { width: 6px; height: 6px; }
  .mk-product-head { flex-direction: column; align-items: stretch; }
  .mk-window { border-radius: 14px; }
  .mk-chrome { padding: 9px 12px; }
  .mk-url span { font-size: 11px; padding: 3px 10px; }
  .mk-topbar { padding: 8px 14px; }
  .mk-screen { padding: 16px 14px; }
  .mk-screen-head h3 { font-size: 18px; }
  .mk-stats { gap: 8px; }
  .mk-stat { padding: 10px 11px; }
  .mk-stat strong { font-size: 16px; }
  .mk-mtable { font-size: 12.5px; }
  .mk-mtable .mk-hide-sm { display: none; }
  .mk-mtable th, .mk-mtable td { padding: 9px 10px; }
  .mk-mess { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 64px; gap: 10px; }
  .mk-frag { font-size: 12.5px; padding: 11px 12px; }
  .mk-frag--sheet { grid-column: 1 / 6; }
  .mk-frag--note { grid-column: 4 / 7; grid-row: 1 / 3; font-size: 13.5px; z-index: 3; }
  .mk-frag--chat { grid-column: 2 / 7; grid-row: 4 / 6; }
  .mk-frag--mail { grid-column: 1 / 5; grid-row: 6 / 8; }
  .mk-frag--bill { grid-column: 2 / 7; grid-row: 8 / 9; }

  .mk-steps { grid-template-columns: minmax(0, 1fr); }

  .mk-msg { max-width: 100%; }
  .mk-final-card .mk-final-net { width: 300px !important; height: 300px !important; }
  .mk-tile--links, .mk-tile--store { grid-column: span 6; }
  .mk-tile { min-height: 0; }
  .mk-pos, .mk-catalog { grid-template-columns: minmax(0, 1fr); }
  .mk-store-badge { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-qtile--hero { animation: none; }
  
  .mk-js .mk-net .e { stroke-dashoffset: 0; }
  .mk-js .mk-net .e-core { opacity: .5; }
  .mk-net .pulse, .mk-net .core-ring { display: none; }
  .mk-frag, .mk-mess.is-in .mk-frag { transform: rotate(var(--r, 0deg)); }
}
@media print {  { }
}

.mk-final-net svg { width: 100%; height: 100%; }

/* ==========================================================================
   REFINEMENTS (pass 1)
   ========================================================================== */
.mk-faq-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.mk-faq-grid > div:first-child p { margin-top: 18px; color: var(--mk-ink-2); }

/* Bento: POS + links on row 1, store / catalog / quote on row 2 */
.mk-tile--pos { grid-column: span 4; grid-row: auto; }
.mk-tile--links { grid-column: span 2; }
.mk-tile--store, .mk-tile--catalog, .mk-tile--quote { grid-column: span 2; }
.mk-tile--catalog .mk-catalog { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.mk-tile--catalog .mk-catalog div { grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 2px 10px; padding: 9px 12px; }
.mk-tile--catalog .mk-catalog div svg.i { grid-row: 1 / 3; width: 18px; height: 18px; }
.mk-tile--catalog .mk-catalog div span { font-size: 12.5px; }

/* Made for Mexico: light section (contrasts with the dark Qora section after it) */
.mk-mx { background: var(--mk-white); color: var(--mk-ink); border-top: 1px solid var(--mk-line); }
.mk-mx::before { background: radial-gradient(circle, rgba(232,116,79,.12), rgba(43,163,176,.06) 45%, transparent 70%); left: auto; right: -420px; bottom: auto; top: -380px; }
.mk-mx .mk-eyebrow { color: var(--mk-teal-ink); }
.mk-mx .mk-eyebrow b { color: var(--mk-ink-3); }
.mk-mx .mk-h2 { color: var(--mk-ink); }
.mk-mx .mk-lead { color: var(--mk-ink-2); }
.mk-mx-list { border-top-color: var(--mk-line); }
.mk-mx-list li { border-bottom-color: var(--mk-line); }
.mk-mx-list li svg.i { color: var(--mk-coral); }
.mk-mx-list strong { color: var(--mk-ink); }
.mk-mx-list span { color: var(--mk-ink-2); }
.mk-mx-tags span { border-color: var(--mk-line-2); color: var(--mk-ink-2); background: var(--mk-paper); }
.mk-mx .mk-note { color: var(--mk-ink-3); }
.mk-mx figure { position: relative; padding: 28px; border-radius: 28px; background: var(--mk-night); }
.mk-mx figure::after { content: ""; position: absolute; inset: 0; border-radius: 28px; background: radial-gradient(circle at 80% 10%, rgba(43,163,176,.28), transparent 55%); pointer-events: none; }
.mk-mx figure .mk-cfdi { z-index: 1; }
.mk-mx figure .mk-note { color: var(--mk-night-muted); position: relative; z-index: 1; }

@media (max-width: 1100px) {
  .mk-tile--pos, .mk-tile--links { grid-column: span 6; }
  .mk-tile--store, .mk-tile--catalog, .mk-tile--quote { grid-column: span 3; }
  .mk-tile--quote { grid-column: span 6; }
}
@media (max-width: 900px) {
  .mk-faq-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .mk-tile--store, .mk-tile--catalog, .mk-tile--quote { grid-column: span 6; }
  .mk-mx figure { padding: 16px; }
}
/* ==========================================================================
   PREMIUM DIRECTION — HOMEPAGE (folios, planes, pillars, Qora cards, …)
   ========================================================================== */

/* ---------- Section head: headline left, lead right ---------- */
.mk-sec-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 20px 64px; align-items: end; margin: 26px 0 clamp(36px, 5vw, 56px); }
.mk-sec-head .mk-lead { max-width: 34em; }

/* ---------- Marquee band ---------- */
.mk-marquee { background: var(--mk-sun); color: var(--mk-ink); overflow: hidden; padding: 18px 0; margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid rgba(11,27,51,.08); border-bottom: 1px solid rgba(11,27,51,.08); }
.mk-marquee-track { display: flex; width: max-content; animation: mk-marquee 36s linear infinite; }
.mk-marquee:hover .mk-marquee-track, .mk-marquee:focus-within .mk-marquee-track { animation-play-state: paused; }
.mk-marquee ul { display: flex; flex-shrink: 0; }
.mk-marquee li { display: flex; align-items: center; font-family: var(--mk-display); font-weight: 700; font-size: clamp(1.25rem, 2.2vw, 1.85rem); letter-spacing: -.015em; text-transform: uppercase; white-space: nowrap; }
.mk-marquee li::after { content: "✺"; margin: 0 clamp(18px, 2.6vw, 34px); font-size: .8em; }
@keyframes mk-marquee { to { transform: translateX(-50%); } }
.mk-product { padding-top: clamp(56px, 7vw, 88px); }

/* ---------- Pillar explorer ---------- */
.mk-pillars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.mk-pillar { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 212px; padding: 20px; border: 0; border-radius: 24px; text-align: left; color: var(--mk-ink); transition: transform var(--mk-fast) var(--mk-ease), box-shadow var(--mk-fast); }
.mk-pillar:hover { transform: translateY(-2px); }
.mk-pillar[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--mk-ink); }
.mk-pillar-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: auto; }
.mk-pillar-top em { font-style: normal; font-family: var(--mk-mono); font-size: 12.5px; letter-spacing: .1em; color: var(--mk-ink-2); }
.mk-pillar-top svg.i { width: 38px; height: 38px; padding: 9px; border-radius: 50%; background: #fff; color: var(--mk-ink); }
.mk-pillar strong { font-family: var(--mk-display); font-size: clamp(1.25rem, 1.8vw, 1.55rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; margin-top: 18px; }
.mk-pillar > span:last-child { font-size: 13.5px; line-height: 1.45; color: var(--mk-ink-2); }

.mk-pp { margin-top: 12px; border: 1.5px solid var(--mk-ink); border-radius: var(--mk-radius-l); padding: clamp(22px, 3vw, 36px); display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 24px 48px; background: #fff; }
.mk-pp h3 { font-family: var(--mk-display); font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -.025em; line-height: 1; margin: 8px 0 22px; }
.mk-pp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
.mk-pp-chips button { border: 1px solid var(--mk-line-2); background: var(--mk-paper); border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600; color: var(--mk-ink); transition: background-color var(--mk-fast), color var(--mk-fast), border-color var(--mk-fast); }
.mk-pp-chips button:hover { border-color: var(--mk-ink); }
.mk-pp-chips button[aria-pressed="true"] { background: var(--mk-ink); border-color: var(--mk-ink); color: #fff; }
.mk-pp-desc { color: var(--mk-ink-2); font-size: 15.5px; min-height: 3.2em; max-width: 34em; }
.mk-pp-conn { margin-top: 10px; border-top: 1px solid var(--mk-line); }
.mk-pp-conn li { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--mk-line); font-size: 15px; color: var(--mk-ink-2); }
.mk-pp-conn li strong { color: var(--mk-ink); display: flex; align-items: center; gap: 8px; }
.mk-pp-conn li strong::before { content: "→"; color: var(--mk-ink-3); font-weight: 400; }
.mk-pp-conn li .mk-qmark { width: 18px; height: 18px; color: var(--mk-navy); }
.mk-js .mk-pp.is-swapping > * { opacity: 0; transform: translateY(6px); }
.mk-pp > * { transition: opacity var(--mk-base) var(--mk-ease), transform var(--mk-base) var(--mk-ease); }

.mk-qrow { margin-top: 12px; display: flex; align-items: center; gap: 16px; padding: 16px 22px 16px 16px; border-radius: 24px; background: var(--mk-night); color: #fff; text-decoration: none; transition: background-color var(--mk-fast); }
.mk-qrow:hover { background: var(--mk-night-2); }
.mk-qrow .mk-qtile { width: 46px; height: 46px; border-radius: 13px; }
.mk-qrow-txt { display: grid; }
.mk-qrow-txt small { font-family: var(--mk-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mk-sun); }
.mk-qrow-txt strong { font-family: var(--mk-display); font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 600; letter-spacing: -.01em; }
.mk-qrow-cta { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; white-space: nowrap; }
.mk-qrow-cta svg.i { width: 18px; height: 18px; transition: transform var(--mk-fast) var(--mk-ease); }
.mk-qrow:hover .mk-qrow-cta svg.i { transform: translateX(3px); }

/* ---------- Bento on planes (light tiles) ---------- */
.mk-bento .mk-tile { border: 0; border-radius: var(--mk-radius-l); }
.mk-bento .mk-tile--pos { color: var(--mk-ink); }
.mk-bento .mk-tile--pos h3 { color: var(--mk-ink); }
.mk-bento .mk-tile--pos p, .mk-bento .mk-tile--pos .mk-tile-k { color: var(--mk-ink-2); }
.mk-bento .mk-tile-k, .mk-bento .mk-tile-k span { color: var(--mk-ink-2); }
.mk-bento .mk-tile-k svg.i { color: var(--mk-ink); }
.mk-bento .mk-pos-cart, .mk-bento .mk-pos-pay { background: #fff; border: 1px solid var(--mk-line); }
.mk-bento .mk-pos-cart li { color: var(--mk-ink); border-bottom-color: var(--mk-line); }
.mk-bento .mk-pos-cart li em, .mk-bento .mk-pos-total { color: var(--mk-ink-3); }
.mk-bento .mk-pos-total strong { color: var(--mk-ink); }
.mk-bento .mk-pos-pay b { color: var(--mk-ink-3); }
.mk-bento .mk-chipset span { border-color: var(--mk-line-2); color: var(--mk-ink); }
.mk-bento .mk-chipset span.on { background: var(--mk-ink); border-color: var(--mk-ink); color: #fff; }
.mk-bento .mk-pos-ok, .mk-bento .mk-pos-ok span { color: var(--mk-teal-ink); }
.mk-bento .mk-gw span { background: #fff; border-color: transparent; color: var(--mk-ink); }
.mk-bento .mk-wa { background: rgba(255,255,255,.55); }
.mk-bento .mk-storecard { border-color: transparent; }
.mk-bento .mk-catalog div { background: #fff; border-color: transparent; }
.mk-bento .mk-catalog div span { color: var(--mk-ink-2); }
.mk-bento .mk-tile--quote { background: #fff; border: 1.5px solid var(--mk-ink); }
.mk-bento .mk-tile--quote .mk-quote-ic { width: 26px; height: 26px; color: var(--mk-coral-hd); margin-bottom: 6px; }
.mk-bento .mk-tile--quote cite { color: var(--mk-ink-3); }

/* ---------- Made for Mexico on a teal plane ---------- */
.mk-mx { background: var(--mk-plane-teal); border-top: 0; color: var(--mk-ink); }
.mk-mx::before { display: none; }
.mk-mx .mk-h2 em { color: var(--mk-navy); }
.mk-mx .mk-lead, .mk-mx-list span { color: var(--mk-ink-2); }
.mk-mx-list, .mk-mx-list li { border-color: rgba(11,27,51,.16); }
.mk-mx-list li svg.i { color: var(--mk-ink); }
.mk-mx-tags span { background: #fff; border-color: transparent; color: var(--mk-ink-2); }
.mk-mx .mk-folio > i { background: rgba(11,27,51,.22); }
.mk-mx .mk-folio > small, .mk-mx .mk-note { color: var(--mk-ink-2); }
.mk-mx figure { padding: 0; background: none; border-radius: 0; }
.mk-mx figure::after { display: none; }
.mk-mx .mk-cfdi { box-shadow: 0 40px 80px -36px rgba(11,27,51,.55); }
.mk-mx .mk-mx-grid { margin-top: 0; }

/* ---------- Qora: three cards on ink ---------- */
.mk-qora .mk-sec-head .mk-lead { color: var(--mk-night-muted); }
.mk-qhead { display: grid; gap: 22px; }
.mk-qhead .mk-qtile--hero { margin-bottom: 0; }
.mk-qcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.mk-qcard { display: flex; flex-direction: column; gap: 12px; min-height: 440px; padding: 22px; border-radius: var(--mk-radius-l); color: var(--mk-ink); }
.mk-qcard--ask { background: #fff; }
.mk-qcard-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.mk-qcard-top .mk-label { color: var(--mk-ink-2); }
.mk-qcard .mk-qtile { width: 30px; height: 30px; border-radius: 9px; }
.mk-qcard .mk-msg { max-width: 100%; font-size: 15px; line-height: 1.5; }
.mk-qcard .mk-msg--you { align-self: stretch; background: var(--mk-sun-soft); color: var(--mk-ink); border-radius: 16px 16px 4px 16px; padding: 12px 14px; font-weight: 500; }
.mk-qcard .mk-msg--q { background: var(--mk-paper); color: var(--mk-ink); border-radius: 16px; padding: 14px; }
.mk-qcard .mk-msg--q ol li { background: #fff; border-color: var(--mk-line); color: var(--mk-ink); }
.mk-qcard .mk-msg--q ol li::before { color: var(--mk-ink-3); }
.mk-qcard .mk-msg--q ol li em { color: var(--mk-teal-ink); font-weight: 600; }
.mk-qcard .mk-msg--q p { margin-top: 10px; }
.mk-qinput { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border: 1.5px solid var(--mk-line-2); border-radius: 999px; color: var(--mk-ink-3); font-size: 14.5px; }
.mk-qinput b { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; background: var(--mk-ink); color: #fff; display: grid; place-items: center; }
.mk-qinput b svg.i { width: 16px; height: 16px; }
.mk-qcard .mk-brief-hello { font-family: var(--mk-display); font-size: clamp(1.7rem, 2.4vw, 2.1rem); letter-spacing: -.025em; color: var(--mk-ink); line-height: 1.05; }
.mk-qcard .mk-brief-sub { color: var(--mk-ink-2); margin: 0 0 4px; }
.mk-qcard .mk-brief { display: grid; gap: 8px; }
.mk-qcard .mk-brief li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 14px; background: #fff; border: 0; color: var(--mk-ink-2); font-size: 14.5px; }
.mk-qcard .mk-brief li strong { color: var(--mk-ink); }
.mk-qcard .mk-brief li small { color: var(--mk-ink-3); font-size: 18px; }
.mk-qcard-foot { margin-top: auto; font-size: 13.5px; }
.mk-qcard .mk-msg--hi { background: #fff; border-radius: 16px 16px 16px 4px; padding: 12px 14px; color: var(--mk-ink); }
.mk-qcard .mk-trips { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-qcard .mk-trips span { background: #fff; border: 0; border-radius: 999px; padding: 8px 13px; font-size: 13.5px; font-weight: 600; color: var(--mk-ink); }
.mk-qcallout { margin-top: auto; background: var(--mk-night); color: var(--mk-night-muted) !important; border-radius: 18px; padding: 16px; font-size: 14.5px; }
.mk-qcallout strong { color: #fff; display: block; }
.mk-qfoot { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-top: 20px; }
.mk-qfoot .mk-qfacts { margin: 0; }
.mk-qfoot .mk-note { margin: 0; color: var(--mk-night-muted); max-width: 36em; }

/* ---------- Insights: 2 × 2 cards with labelled mini-charts ---------- */
.mk-icards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mk-icard { background: var(--mk-paper-2); border-radius: var(--mk-radius-l); padding: clamp(22px, 3vw, 30px); display: flex; flex-direction: column; }
.mk-icard h3 { font-family: var(--mk-display); font-size: clamp(1.35rem, 2.1vw, 1.65rem); letter-spacing: -.02em; line-height: 1.1; }
.mk-icard > p { color: var(--mk-ink-2); font-size: 15.5px; margin: 8px 0 18px; }
.mk-icard .mk-q-src { margin-top: auto; padding-top: 16px; }
.mk-icard .mk-q-src span { background: #fff; border-color: transparent; font-family: var(--mk-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
.mk-viz2 { background: #fff; border-radius: 18px; padding: 16px 18px; display: grid; gap: 12px; }
.mk-vrow { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 64px; gap: 12px; align-items: center; font-size: 13.5px; color: var(--mk-ink); }
.mk-vrow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-vrow i, .mk-stack { display: flex; height: 12px; border-radius: 999px; background: var(--mk-paper-2); overflow: hidden; }
.mk-vrow i b { width: var(--w); background: var(--c); border-radius: 999px; }
.mk-vrow em { font-style: normal; font-family: var(--mk-mono); font-size: 12px; color: var(--mk-ink-2); text-align: right; }
.mk-stack b { flex: 0 0 var(--w); background: var(--c); }
.mk-stack { height: 16px; }
.mk-legend2 { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--mk-ink-2); }
.mk-legend2 > span { display: inline-flex; align-items: center; gap: 7px; }
.mk-legend2 i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.mk-legend2 strong { color: var(--mk-ink); }
.mk-arow { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 14px; align-items: center; }
.mk-arow > div:first-child span { display: block; font-family: var(--mk-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-ink-3); }
.mk-arow > div:first-child strong { font-family: var(--mk-mono); font-size: 15px; font-variant-numeric: tabular-nums; }
.mk-viz-note { font-size: 12.5px; color: var(--mk-ink-3); }
.mk-locs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mk-locs div { background: var(--mk-paper); border-radius: 14px; padding: 12px 8px; text-align: center; display: grid; gap: 2px; }
.mk-locs strong { font-family: var(--mk-display); font-size: 26px; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.mk-locs span { font-family: var(--mk-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-ink-2); }
.mk-locs .is-sky { background: var(--mk-plane-sky); }
.mk-locs .is-sun { background: var(--mk-plane-sun); grid-column: 1 / -1; }

/* ---------- Advisory cards + stats row ---------- */
.mk-adv-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mk-adv-card { border-radius: var(--mk-radius-l); padding: clamp(24px, 3.4vw, 40px); display: flex; flex-direction: column; gap: 12px; }
.mk-adv-card.mk-plane--soft { background: #fff; }
.mk-adv-card h3 { font-family: var(--mk-display); font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: -.025em; line-height: 1.05; }
.mk-adv-card > p { color: var(--mk-ink-2); }
.mk-rows { border-top: 1px solid rgba(11,27,51,.14); margin: 6px 0 8px; }
.mk-rows li { display: grid; gap: 2px; padding: 13px 0; border-bottom: 1px solid rgba(11,27,51,.14); }
.mk-rows li strong { font-weight: 650; color: var(--mk-ink); }
.mk-rows li span { font-size: 14.5px; color: var(--mk-ink-2); }
.mk-rows--svc li { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
.mk-rows--svc li strong { grid-column: 1; }
.mk-rows--svc li span { grid-column: 1; }
.mk-rows--svc li em { grid-column: 2; grid-row: 1 / 3; align-self: center; font-style: normal; font-family: var(--mk-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mk-ink); }
.mk-adv-card .mk-btn, .mk-adv-card .mk-textlink { align-self: flex-start; margin-top: auto; }
.mk-stats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(40px, 6vw, 64px); border-top: 2px solid var(--mk-ink); }
.mk-stats3 > div { padding: 18px 20px 0 0; display: grid; gap: 4px; }
.mk-stats3 b { font-family: var(--mk-display); font-size: clamp(1.9rem, 3.4vw, 2.8rem); letter-spacing: -.03em; line-height: 1; }
.mk-stats3 b em { font-style: normal; color: var(--mk-teal-ink); }
.mk-stats3 span { font-size: 14.5px; color: var(--mk-ink-2); max-width: 22em; }
.mk-stats3-note { margin-top: 22px; color: var(--mk-ink-2); max-width: 48em; }

/* ---------- Start: trust row ---------- */
.mk-trust4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: clamp(40px, 6vw, 64px); }
.mk-trust4 li { background: var(--mk-paper-2); border-radius: 22px; padding: 22px; display: grid; gap: 6px; align-content: start; }
.mk-trust4 svg.i { width: 22px; height: 22px; color: var(--mk-teal-ink); margin-bottom: 6px; }
.mk-trust4 strong { font-size: 16px; }
.mk-trust4 span { font-size: 14.5px; color: var(--mk-ink-2); }

/* ---------- Pricing referral band on a plane ---------- */
.mk-refband.mk-plane--coral { background: var(--mk-plane-coral); border: 0; margin-top: 12px; text-decoration: none; color: var(--mk-ink); }
.mk-refband.mk-plane--coral b { color: var(--mk-ink); }
.mk-price .mk-price-grid { margin-bottom: 0; }

/* ---------- Final CTA on a sun plane ---------- */
.mk-final-card { background: var(--mk-plane-sun); color: var(--mk-ink); }
.mk-final-card h2 { color: var(--mk-ink); }
.mk-final-card h2 span { color: var(--mk-navy); }
.mk-final-card p { color: var(--mk-ink-2); }
.mk-final-card .mk-label { color: var(--mk-ink-2); display: block; margin-bottom: 14px; }
.mk-final-card .mk-final-net { opacity: .14; }
.mk-final-ctas .mk-btn--ghost { border-color: var(--mk-ink); color: var(--mk-ink); }
.mk-final-ctas .mk-btn--ghost:hover { background: rgba(255,255,255,.4); border-color: var(--mk-ink); }
.mk-final-apps { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 6px; }
.mk-final-apps .mk-textlink { border-color: var(--mk-ink); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .mk-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk-qcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-qcards > :last-child { grid-column: 1 / -1; min-height: 0; }
  .mk-trust4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .mk-sec-head, .mk-pp, .mk-icards, .mk-adv-cards, .mk-stats3 { grid-template-columns: minmax(0, 1fr); }
  .mk-pp-conn li { grid-template-columns: 140px minmax(0, 1fr); }
  .mk-stats3 > div { padding: 16px 0; border-bottom: 1px solid var(--mk-line-2); }
}
@media (max-width: 640px) {
  .mk-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-pillars > :last-child { grid-column: 1 / -1; }
  .mk-pillar { min-height: 150px; padding: 16px; }
  .mk-pillar strong { margin-top: 12px; }
  .mk-pp-conn li { grid-template-columns: minmax(0, 1fr); }
  .mk-qcards { grid-template-columns: minmax(0, 1fr); }
  .mk-qcard { min-height: 0; }
  .mk-qrow { flex-wrap: wrap; }
  .mk-qrow-cta { margin-left: 62px; }
  .mk-vrow { grid-template-columns: minmax(0, 110px) minmax(0, 1fr) 56px; }
  .mk-arow { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .mk-locs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-trust4 { grid-template-columns: minmax(0, 1fr); }
  .mk-marquee { padding: 14px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-marquee-track { animation: none; }
  .mk-pillar, .mk-pp > * { transition: none; }
}

/* Qora "ask" card plays its conversation once when it scrolls into view */
.mk-js .mk-qcard--ask .mk-step { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--mk-ease), transform .5s var(--mk-ease); }
.mk-js .mk-qcard--ask .mk-step.is-on { opacity: 1; transform: none; }
.mk-qcard .mk-typing i { background: var(--mk-ink-3); }
@media (prefers-reduced-motion: reduce) { .mk-js .mk-qcard--ask .mk-step { opacity: 1; transform: none; transition: none; } }
@media print { .mk-js .mk-qcard--ask .mk-step { opacity: 1; transform: none; } .mk-marquee-track { animation: none; } }

/* ---------- Refinements (pass 2) ---------- */
.mk-pp .mk-label { justify-content: flex-start; gap: 6px; }
.mk-bento .mk-tile.mk-plane--soft { background: var(--mk-paper-2); }
.mk-bento .mk-tile.mk-plane--teal { background: var(--mk-plane-teal); }
.mk-bento .mk-tile.mk-plane--coral { background: var(--mk-plane-coral); }
.mk-bento .mk-tile.mk-plane--sun { background: var(--mk-plane-sun); }
.mk-bento .mk-tile h3 { color: var(--mk-ink); }
.mk-mx figure .mk-note, .mk-mx figcaption { color: var(--mk-ink-2); margin-top: 18px; }
.mk-final-card h2 span { color: var(--mk-coral-ink); }
.mk-plane--coral .mk-btn--primary, .mk-plane--sun .mk-btn--primary { color: #fff; }

@media (max-width: 640px) {
  .mk-incl-grid { grid-template-columns: minmax(0, 1fr); }
  .mk-pillar strong { font-size: 1.12rem; overflow-wrap: anywhere; }
  .mk-pillar > span:last-child { font-size: 12.5px; }
}

/* ==========================================================================
   ONLINE STORE — interactive recreation of the app's "Store design" editor
   (templates, colours and defaults mirror the app's store/design/presets.ts)
   ========================================================================== */
.mk-shop { background: #fff; }

/* ---------- Step rail ---------- */
.mk-shop-rail { display: flex; align-items: stretch; gap: 16px; margin-bottom: 16px; }
.mk-shop-rail ol { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mk-shop-step { position: relative; width: 100%; height: 100%; display: grid; gap: 4px; align-content: start; padding: 16px 6px 6px 0; border: 0; background: none; text-align: left; color: var(--mk-ink-3); cursor: pointer; }
.mk-shop-bar { position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 3px; background: var(--mk-line); overflow: hidden; }
.mk-shop-bar b { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--mk-ink); }
.mk-shop-step.is-done .mk-shop-bar b { width: 100%; background: var(--mk-ink-3); }
.mk-shop-step[aria-current="step"] .mk-shop-bar b { width: 100%; background: var(--mk-ink); }
.mk-shop-step.is-run .mk-shop-bar b { width: 0; animation: mk-shop-bar var(--d, 5s) linear forwards; }
@keyframes mk-shop-bar { to { width: 100%; } }
.mk-shop-step em { font-style: normal; font-family: var(--mk-mono); font-size: 12px; letter-spacing: .08em; }
.mk-shop-step strong { font-family: var(--mk-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.15; color: inherit; transition: color var(--mk-fast); }
.mk-shop-step > span { font-size: 14px; line-height: 1.45; }
.mk-shop-step:hover, .mk-shop-step[aria-current="step"] { color: var(--mk-ink); }
.mk-shop-step[aria-current="step"] > span { color: var(--mk-ink-2); }
.mk-shop-play { flex-shrink: 0; align-self: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--mk-ink); background: #fff; color: var(--mk-ink); display: grid; place-items: center; transition: background-color var(--mk-fast), color var(--mk-fast); }
.mk-shop-play:hover { background: var(--mk-ink); color: #fff; }
.mk-shop-play svg.i { width: 18px; height: 18px; }

/* ---------- Stage: one colour plane with a sun and an arch ---------- */
.mk-shop-stage { --pad: clamp(14px, 3vw, 44px); position: relative; isolation: isolate; overflow: hidden; border-radius: var(--mk-radius-l); background: var(--mk-plane-sky); padding: var(--pad); }
.mk-shop-sun { position: absolute; z-index: -1; right: -56px; top: -70px; width: 240px; height: 240px; border-radius: 50%; background: var(--mk-sun); }
.mk-shop-arch { position: absolute; z-index: -1; left: -36px; bottom: -60px; width: 250px; height: 330px; border-radius: 125px 125px 0 0; background: var(--mk-plane-coral); }
.mk-shop-note { margin-top: 14px; }

/* ---------- Editor window ---------- */
.mk-sd { display: grid; grid-template-columns: 58px minmax(0, 1fr); height: 680px; background: #F6F7F9; color: var(--mk-ink); }
.mk-sd svg.i { width: 16px; height: 16px; }
.mk-sd-rail { background: var(--mk-app-side); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0; }
.mk-sd-rail i { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: rgba(255,255,255,.5); }
.mk-sd-rail i.on { background: rgba(255,255,255,.12); color: #fff; }
.mk-sd-rail svg.i { width: 18px; height: 18px; }
.mk-sd-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.mk-sd-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 18px; padding: 16px 20px 12px; }
.mk-sd-titles { min-width: 0; }
.mk-sd-back { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--mk-ink-3); }
.mk-sd-back svg.i { width: 14px; height: 14px; }
.mk-sd-head h3 { font-family: var(--mk-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 6px 0 3px; }
.mk-sd-head p { max-width: 44em; font-size: 12.5px; line-height: 1.45; color: var(--mk-ink-3); }
.mk-sd-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mk-sd-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: #A44A06; white-space: nowrap; }
.mk-sd-status.is-live { color: var(--mk-success); }
.mk-sd-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-radius: 10px; border: 1px solid var(--mk-line-2); background: #fff; color: var(--mk-ink); font-size: 13px; font-weight: 600; white-space: nowrap; transition: background-color var(--mk-fast), opacity var(--mk-fast), transform var(--mk-fast); }
.mk-sd-btn:disabled { opacity: .45; cursor: default; }
.mk-sd-btn--primary { background: var(--mk-teal-ink); border-color: var(--mk-teal-ink); color: #fff; }
.mk-sd-btn--primary:not(:disabled):hover { background: #12606A; }
.mk-sd-btn.is-busy svg.i { animation: mk-sd-spin .6s linear infinite; }
@keyframes mk-sd-spin { to { transform: rotate(360deg); } }

.mk-sd-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 372px minmax(0, 1fr); gap: 14px; padding: 0 20px 20px; }
.mk-sd-ctl { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.mk-sd-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--mk-line-2); overflow-x: auto; scrollbar-width: none; }
.mk-sd-tabs::-webkit-scrollbar { display: none; }
.mk-sd-tabs button { flex-shrink: 0; border: 0; background: none; padding: 8px 7px 9px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 12.5px; font-weight: 600; color: var(--mk-ink-3); white-space: nowrap; transition: color var(--mk-fast), border-color var(--mk-fast); }
.mk-sd-tabs button:hover { color: var(--mk-ink); }
.mk-sd-tabs [aria-selected="true"] { color: var(--mk-teal-ink); border-bottom-color: var(--mk-teal-ink); }
.mk-sd-panel { flex: 1; min-height: 0; overflow-y: auto; margin-top: 12px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--mk-line); scrollbar-width: thin; }
.mk-sd-panel h4 { font-size: 14px; font-weight: 700; color: var(--mk-ink); }
.mk-sd-panel h4.mt { margin-top: 16px; }
.mk-sd-hint { margin: 2px 0 10px; font-size: 12px; line-height: 1.45; color: var(--mk-ink-3); }
.mk-sd-note { margin-top: 10px; font-size: 11.5px; line-height: 1.45; color: var(--mk-ink-3); }
.mk-sd-lbl { display: block; font-size: 12px; font-weight: 600; color: var(--mk-ink-2); }

/* Template cards (same anatomy as the app's picker) */
.mk-sd-tpls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mk-sd-tpl { position: relative; display: flex; flex-direction: column; padding: 0; border: 1px solid var(--mk-line-2); border-radius: 12px; background: #fff; overflow: hidden; text-align: left; transition: border-color var(--mk-fast), box-shadow var(--mk-fast); }
.mk-sd-tpl:hover { border-color: var(--mk-ink-3); }
.mk-sd-tpl[aria-pressed="true"] { border-color: var(--mk-teal-ink); box-shadow: 0 0 0 2px var(--mk-teal-ink); }
.mk-sd-thumb { position: relative; height: 60px; padding: 8px 10px; background: var(--b); color: var(--t); }
.mk-sd-thumb .aa { display: block; font-family: var(--h); font-size: 21px; line-height: 1; font-weight: 600; }
.mk-sd-tpl[data-pick="bold"] .aa { text-transform: uppercase; font-weight: 700; }
.mk-sd-tpl[data-pick="boutique"] .aa { font-style: italic; font-weight: 500; }
.mk-sd-thumb i { display: block; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--t) 22%, var(--b)); margin-top: 6px; width: 46%; }
.mk-sd-thumb i + i { width: 28%; margin-top: 4px; }
.mk-sd-thumb .buy { position: absolute; left: 10px; bottom: 7px; padding: 2px 7px; border-radius: 4px; background: var(--p); color: var(--on); font-size: 9.5px; font-weight: 700; }
.mk-sd-thumb b { position: absolute; right: 10px; bottom: 9px; width: 11px; height: 11px; border-radius: 50%; background: var(--a); }
.mk-sd-tpl-txt { display: grid; gap: 1px; padding: 7px 9px 9px; }
.mk-sd-tpl-txt strong { font-size: 12.5px; font-weight: 700; color: var(--mk-ink); }
.mk-sd-tpl-txt span { font-size: 11px; line-height: 1.35; color: var(--mk-ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mk-sd-tick { position: absolute; right: 7px; top: 7px; width: 20px; height: 20px; border-radius: 50%; background: var(--mk-teal-ink); color: #fff; display: grid; place-items: center; opacity: 0; transform: scale(.6); transition: opacity var(--mk-fast), transform var(--mk-fast); }
.mk-sd-tick svg.i { width: 12px; height: 12px; stroke-width: 3; }
.mk-sd-tpl[aria-pressed="true"] .mk-sd-tick { opacity: 1; transform: none; }

/* Brand */
.mk-sd-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.mk-sd-seg { display: inline-flex; padding: 2px; border-radius: 9px; border: 1px solid var(--mk-line-2); background: #fff; }
.mk-sd-seg button { border: 0; background: none; border-radius: 7px; padding: 4px 10px; font-size: 12px; font-weight: 600; color: var(--mk-ink-3); }
.mk-sd-seg [aria-pressed="true"] { background: var(--mk-ink); color: #fff; }
.mk-sd-colors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
.mk-sd-color--wide { grid-column: 1 / -1; }
.mk-sd-cf { display: flex; align-items: center; gap: 6px; margin-top: 5px; padding: 4px; border: 1px solid var(--mk-line-2); border-radius: 9px; background: #fff; }
.mk-sd-cf i { width: 24px; height: 24px; flex-shrink: 0; border-radius: 6px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); transition: background-color .3s; }
.mk-sd-cf code { font-family: var(--mk-mono); font-size: 11.5px; color: var(--mk-ink-2); overflow: hidden; text-overflow: ellipsis; }
.mk-sd-color small { display: block; margin-top: 3px; font-size: 11px; color: var(--mk-ink-3); }
.mk-sd-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mk-sd-swatches button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: var(--c); box-shadow: 0 0 0 1px var(--mk-line-2); transition: box-shadow var(--mk-fast), transform var(--mk-fast); }
.mk-sd-swatches button:hover { transform: scale(1.08); }
.mk-sd-swatches [aria-pressed="true"] { box-shadow: 0 0 0 2px var(--mk-ink); }
.mk-sd-swatches [data-swatch=""] { background: conic-gradient(var(--c) 0 50%, #fff 0); }
.mk-sd-warn { margin-top: 10px; padding: 7px 9px; border-radius: 9px; background: #FEF3C7; color: #78350F; font-size: 11.5px; line-height: 1.4; }
.mk-sd-sample { margin-top: 10px; padding: 12px; border-radius: 12px; border: 1px solid var(--mk-line); background: var(--sf-bg); color: var(--sf-text); transition: background-color .3s, color .3s; }
.mk-sd-sample strong { display: block; font-family: var(--sf-head); font-size: 15px; font-weight: 600; }
.mk-sd-sample > span { display: block; font-size: 12px; opacity: .8; margin-top: 2px; }
.mk-sd-sample div { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.mk-sd-sample div b { padding: 5px 12px; border-radius: 7px; background: var(--sf-primary); color: var(--sf-on); font-size: 12px; transition: background-color .3s; }
.mk-sd-sample div em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--sf-accent); }
.mk-sd-fonts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mk-sd-fonts div { padding: 7px 9px; border: 1px solid var(--mk-line-2); border-radius: 9px; }
.mk-sd-fonts b { display: block; margin-top: 2px; font-size: 15px; font-weight: 600; color: var(--mk-ink); }

/* Hero */
.mk-sd-layouts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mk-sd-layouts button { display: grid; gap: 5px; justify-items: center; padding: 6px 4px 7px; border: 1px solid var(--mk-line-2); border-radius: 10px; background: #fff; font-size: 10.5px; font-weight: 600; color: var(--mk-ink-2); line-height: 1.2; }
.mk-sd-layouts [aria-pressed="true"] { border-color: var(--mk-teal-ink); box-shadow: 0 0 0 1.5px var(--mk-teal-ink); color: var(--mk-ink); }
.mk-sd-dg { position: relative; width: 100%; height: 30px; border-radius: 5px; background: var(--mk-paper-2); overflow: hidden; }
.mk-sd-dg i, .mk-sd-dg b { position: absolute; display: block; border-radius: 2px; }
.mk-sd-dg b { background: #C9D3E0; }
.mk-sd-dg i { background: var(--mk-ink-3); height: 3px; }
.mk-sd-dg--full b { inset: 0; border-radius: 0; } .mk-sd-dg--full i { left: 6px; bottom: 7px; width: 40%; background: #fff; }
.mk-sd-dg--split b { right: 4px; top: 4px; bottom: 4px; width: 44%; } .mk-sd-dg--split i { left: 5px; top: 13px; width: 36%; }
.mk-sd-dg--editorial b { left: 4px; right: 4px; bottom: 4px; height: 11px; } .mk-sd-dg--editorial i { left: 25%; right: 25%; top: 7px; }
.mk-sd-dg--minimal i { left: 15%; right: 15%; top: 12px; height: 5px; }
.mk-sd-field { display: block; margin-top: 12px; }
.mk-sd-field input[type="text"] { display: block; width: 100%; margin-top: 5px; height: 34px; padding: 0 10px; border: 1px solid var(--mk-line-2); border-radius: 9px; background: #fff; font: inherit; font-size: 13px; color: var(--mk-ink); }
.mk-sd-field input[type="text"]:focus { outline: none; border-color: var(--mk-teal-ink); box-shadow: 0 0 0 3px rgba(23,112,123,.18); }
.mk-sd-field input.is-typing { border-color: var(--mk-teal-ink); box-shadow: 0 0 0 3px rgba(23,112,123,.18); }
.mk-sd-imgs { display: flex; gap: 6px; margin-top: 5px; }
.mk-sd-imgs button { width: 54px; height: 54px; padding: 4px; border-radius: 10px; border: 1px solid var(--mk-line-2); background: var(--tint); }
.mk-sd-imgs button svg { width: 100%; height: 100%; }
.mk-sd-imgs [aria-pressed="true"] { border-color: var(--mk-teal-ink); box-shadow: 0 0 0 2px var(--mk-teal-ink); }

/* Sections */
.mk-sd-secs { display: grid; gap: 5px; }
.mk-sd-secs li { display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 7px; border: 1px solid var(--mk-line); border-radius: 10px; background: #fff; font-size: 13px; font-weight: 600; color: var(--mk-ink); transition: background-color var(--mk-fast); }
.mk-sd-secs li.is-moved { animation: mk-sd-moved .7s var(--mk-ease); }
@keyframes mk-sd-moved { from { background: #E3F4F5; } }
.mk-sd-secs li.is-off > span { color: var(--mk-ink-3); text-decoration: line-through; }
.mk-sd-secs li > svg.i { color: var(--mk-ink-3); width: 14px; height: 14px; }
.mk-sd-secs li > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-sd-secs button { width: 26px; height: 26px; border-radius: 7px; border: 0; background: none; color: var(--mk-ink-2); display: grid; place-items: center; }
.mk-sd-secs button:not(:disabled):hover { background: var(--mk-paper-2); color: var(--mk-ink); }
.mk-sd-secs button:disabled { opacity: .3; }
.mk-sd-secs button[aria-pressed="false"] { color: var(--mk-ink-3); }

/* Announcement & more */
.mk-sd-switch { position: relative; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--mk-ink); cursor: pointer; }
.mk-sd-switch input { position: absolute; left: 0; top: 0; opacity: 0; width: 1px; height: 1px; margin: 0; }
.mk-sd-switch .tr { position: relative; flex-shrink: 0; width: 34px; height: 20px; border-radius: 999px; background: var(--mk-line-2); transition: background-color var(--mk-fast); }
.mk-sd-switch .tr::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform var(--mk-fast) var(--mk-ease); }
.mk-sd-switch input:checked + .tr { background: var(--mk-teal-ink); }
.mk-sd-switch input:checked + .tr::after { transform: translateX(14px); }
.mk-sd-switch input:focus-visible + .tr { outline: 2px solid var(--mk-ink); outline-offset: 2px; }
.mk-sd-kv { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--mk-line); font-size: 12.5px; color: var(--mk-ink-3); }
.mk-sd-kv b { color: var(--mk-ink); font-weight: 600; }

/* Preview pane */
.mk-sd-pv { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-radius: 14px; background: #fff; border: 1px solid var(--mk-line); overflow: hidden; }
.mk-sd-pv-head { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 14px; border-bottom: 1px solid var(--mk-line); }
.mk-sd-pv-head strong { margin-right: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; }
.mk-sd-pv-head strong.is-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mk-success); box-shadow: 0 0 0 3px rgba(0,95,87,.18); }
.mk-sd-dev { display: inline-flex; padding: 2px; border-radius: 9px; border: 1px solid var(--mk-line-2); }
.mk-sd-dev button, .mk-sd-reload { width: 32px; height: 28px; border: 0; border-radius: 7px; background: none; color: var(--mk-ink-3); display: grid; place-items: center; }
.mk-sd-dev [aria-pressed="true"] { background: var(--mk-paper-2); color: var(--mk-ink); }
.mk-sd-reload:hover, .mk-sd-dev button:hover { color: var(--mk-ink); }
.mk-sd-screen { flex: 1; min-height: 0; display: flex; justify-content: center; padding: 10px; background: #E9EDF2; }
.mk-sf-frame { position: relative; container: sf / inline-size; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; border: 0 solid #0B1B33; border-radius: 8px; background: var(--sf-bg); box-shadow: 0 1px 2px rgba(11,27,51,.08); transition: width .55s var(--mk-ease), border-width .55s var(--mk-ease), border-radius .55s var(--mk-ease), background-color .4s, opacity .2s; }
.mk-sf-frame::-webkit-scrollbar { display: none; }
.mk-sf-frame.is-phone { width: 286px; border-width: 7px; border-radius: 30px; box-shadow: 0 24px 40px -22px rgba(11,27,51,.6); }
.mk-sf-frame.is-reload { opacity: .25; }

/* ---------- The storefront itself ---------- */
.mk-sf { --sf-muted: color-mix(in srgb, var(--sf-text) 66%, var(--sf-bg)); --sf-line: color-mix(in srgb, var(--sf-text) 13%, var(--sf-bg)); --sf-soft: color-mix(in srgb, var(--sf-text) 5%, var(--sf-bg)); --sf-pad: 20px;
  min-height: 100%; background: var(--sf-bg); color: var(--sf-text); font-family: var(--sf-body); font-size: 12px; line-height: 1.5; transition: background-color .4s, color .4s; }
.mk-sf svg.i { width: 15px; height: 15px; }
.mk-sf[data-tpl="artisan"] { --sf-hw: 500; --sf-rb: 6px; --sf-ri: 4px; --sf-cols: 3; }
.mk-sf[data-tpl="modern"] { --sf-hw: 650; --sf-hls: -.035em; --sf-rb: 999px; --sf-ri: 14px; --sf-cols: 3; }
.mk-sf[data-tpl="luxury"] { --sf-hw: 500; --sf-hls: 0em; --sf-rb: 0; --sf-ri: 0; --sf-cols: 2; --sf-pad: 28px; --sf-hscale: 1.18; }
.mk-sf[data-tpl="boutique"] { --sf-hw: 500; --sf-hs: italic; --sf-rb: 0; --sf-ri: 0; --sf-cols: 3; }
.mk-sf[data-tpl="bold"] { --sf-hw: 700; --sf-ht: uppercase; --sf-hls: -.04em; --sf-rb: 4px; --sf-ri: 6px; --sf-cols: 3; --sf-hscale: 1.12; }
.mk-sf[data-tpl="marketplace"] { --sf-hw: 800; --sf-hls: -.03em; --sf-rb: 8px; --sf-ri: 10px; --sf-cols: 4; --sf-pad: 16px; --sf-hscale: .86; }

.sf-banner { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 10px; background: #1D4ED8; color: #fff; font-family: 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 600; text-align: center; }
.sf-banner svg.i { width: 13px; height: 13px; }
.sf-ann { padding: 6px 12px; background: var(--sf-text); color: var(--sf-bg); text-align: center; font-size: 10.5px; letter-spacing: .03em; animation: sf-in .4s var(--mk-ease); }
@keyframes sf-in { from { opacity: 0; transform: translateY(-4px); } }

.sf-head { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px var(--sf-pad); border-bottom: 1px solid var(--sf-line); }
.sf-menu { display: none; }
.sf-logo { font-family: var(--sf-head); font-weight: var(--sf-hw, 600); font-size: 16px; letter-spacing: var(--sf-hls, -.01em); text-transform: var(--sf-ht, none); font-style: var(--sf-hs, normal); white-space: nowrap; }
.sf-nav { display: flex; gap: 14px; font-size: 11.5px; color: var(--sf-muted); }
.sf-icons { display: flex; align-items: center; gap: 12px; justify-self: end; }
.sf-cart { position: relative; display: inline-grid; }
.sf-cart b { position: absolute; right: -7px; top: -6px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: var(--sf-primary); color: var(--sf-on); font-size: 9px; font-weight: 700; display: grid; place-items: center; }
.sf-cart.is-bump b { animation: sf-bump .5s var(--mk-ease); }
@keyframes sf-bump { 0% { transform: scale(.3); } 60% { transform: scale(1.35); } }
.sf-search { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; background: var(--sf-soft); color: var(--sf-muted); font-size: 11px; }
.mk-sf[data-tpl="marketplace"] .sf-head { grid-template-columns: auto minmax(0, 1fr) auto; }
.mk-sf[data-tpl="marketplace"] .sf-nav { display: none; }
.mk-sf[data-logo="center"] .sf-head { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.mk-sf[data-logo="center"] .sf-nav { order: -1; }
.mk-sf[data-logo="center"] .sf-logo { text-align: center; }
.mk-sf[data-tpl="luxury"] .sf-logo { font-size: 14px; letter-spacing: .3em; text-transform: uppercase; font-weight: 600; font-family: var(--sf-body); }

.sf-hero { display: grid; gap: 18px; align-items: center; padding: calc(var(--sf-pad) + 6px) var(--sf-pad); }
.sf-hero-txt { display: grid; justify-items: start; }
.sf-eyebrow { font-size: 9.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--sf-muted); }
.sf-h1 { margin: 7px 0 8px; font-family: var(--sf-head); font-weight: var(--sf-hw, 600); font-style: var(--sf-hs, normal); text-transform: var(--sf-ht, none); letter-spacing: var(--sf-hls, -.02em); font-size: calc(clamp(22px, 5.4cqi, 44px) * var(--sf-hscale, 1)); line-height: 1.04; overflow-wrap: anywhere; }
.sf-sub { max-width: 30em; color: var(--sf-muted); font-size: 12px; }
.sf-btn { display: inline-flex; margin-top: 14px; padding: 8px 16px; border-radius: var(--sf-rb); background: var(--sf-primary); color: var(--sf-on); font-size: 11.5px; font-weight: 700; transition: background-color .4s, color .4s; }
.mk-sf[data-tpl="bold"] .sf-btn { text-transform: uppercase; letter-spacing: .04em; }
.mk-sf[data-tpl="luxury"] .sf-btn { letter-spacing: .14em; text-transform: uppercase; font-weight: 600; font-size: 10.5px; padding: 10px 20px; }
.sf-hero[data-l="split"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sf-hero[data-l="split"] .sf-art { order: 2; aspect-ratio: 5 / 4; }
.sf-hero[data-l="editorial"] { justify-items: center; text-align: center; }
.sf-hero[data-l="editorial"] .sf-hero-txt { justify-items: center; }
.sf-hero[data-l="editorial"] .sf-art { order: 2; width: 100%; aspect-ratio: 16 / 6; }
.sf-hero[data-l="full"] { position: relative; padding: 0; }
.sf-hero[data-l="full"] .sf-art { aspect-ratio: 16 / 8.6; border-radius: 0; justify-items: end; padding-right: 9%; }
.sf-hero[data-l="full"] .sf-art i { right: 4%; }
.sf-hero[data-l="full"] .sf-art::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.1) 72%); }
.sf-hero[data-l="full"] .sf-hero-txt { position: absolute; z-index: 3; left: var(--sf-pad); right: var(--sf-pad); bottom: 18px; color: #fff; }
.sf-hero[data-l="full"] .sf-eyebrow, .sf-hero[data-l="full"] .sf-sub { color: rgba(255,255,255,.88); }
.sf-hero[data-l="full"] .sf-btn { background: #fff; color: #111; }
.sf-hero[data-l="minimal"] { padding-block: calc(var(--sf-pad) + 18px) calc(var(--sf-pad) + 6px); }
.sf-hero[data-l="minimal"] .sf-h1 { font-size: calc(clamp(28px, 8.4cqi, 66px) * var(--sf-hscale, 1)); line-height: .96; }

.sf-art { position: relative; overflow: hidden; display: grid; place-items: center; border-radius: var(--sf-ri); background: var(--tint); }
.sf-art::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: rgba(0,0,0,.05); }
.sf-art i { position: absolute; right: 9%; top: 10%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.55); }
.sf-art svg { position: relative; z-index: 1; height: 80%; max-width: 64%; }
.sf-hero[data-l="editorial"] .sf-art svg, .sf-hero[data-l="full"] .sf-art svg { height: 92%; }

.sf-sec { padding: calc(var(--sf-pad) * .6) var(--sf-pad) calc(var(--sf-pad) * .9); }
.sf-sec-t { margin-bottom: 12px; font-family: var(--sf-head); font-weight: var(--sf-hw, 600); font-style: var(--sf-hs, normal); text-transform: var(--sf-ht, none); letter-spacing: var(--sf-hls, -.01em); font-size: calc(clamp(15px, 3.3cqi, 24px) * var(--sf-hscale, 1)); line-height: 1.1; }
.mk-sf[data-logo="center"] .sf-sec-t { text-align: center; }
.sf-grid { display: grid; grid-template-columns: repeat(var(--sf-cols), minmax(0, 1fr)); gap: 14px 12px; }
.sf-card b { display: block; margin-top: 7px; font-size: 11.5px; font-weight: 600; line-height: 1.3; }
.sf-price { display: block; color: var(--sf-muted); font-size: 11px; }
.sf-low { display: block; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--sf-accent); }
.sf-img { position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: var(--sf-ratio); border-radius: var(--sf-ri); background: var(--tint); }
.sf-img svg { width: 76%; height: 76%; }
.sf-card.is-out .sf-img svg { opacity: .55; filter: grayscale(.5); }
.sf-out { position: absolute; left: 7px; top: 7px; padding: 3px 8px; border-radius: 999px; background: #fff; color: #111; font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mk-sf[data-tpl="bold"] .sf-img { box-shadow: inset 0 0 0 2px var(--sf-text); }
.mk-sf[data-scheme="dark"] .sf-img, .mk-sf[data-scheme="dark"] .sf-art, .mk-sf[data-scheme="dark"] .sf-cat i { background: color-mix(in srgb, var(--tint) 24%, var(--sf-bg)); }
.sf-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sf-cat { display: grid; gap: 6px; text-align: center; font-size: 11px; font-weight: 600; }
.sf-cat i { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--sf-ri); background: var(--tint); }
.mk-sf[data-tpl="modern"] .sf-cat i, .mk-sf[data-tpl="marketplace"] .sf-cat i { border-radius: 50%; }
.sf-cat svg { width: 64%; height: 64%; }
.sf-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.sf-story .sf-art { aspect-ratio: 4 / 3; }
.sf-story p { color: var(--sf-muted); }
.sf-link { display: inline-block; margin-top: 8px; font-weight: 700; color: var(--sf-primary); border-bottom: 1px solid currentColor; }
.sf-craft, .sf-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sf-values { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-craft div, .sf-values div { padding: 12px; border-radius: var(--sf-ri); background: var(--sf-soft); }
.sf-craft em { display: block; font-style: normal; font-family: var(--sf-head); font-size: 18px; color: var(--sf-primary); }
.sf-craft b, .sf-values b { display: block; margin: 2px 0; font-size: 11.5px; }
.sf-craft span { color: var(--sf-muted); font-size: 11px; }
.sf-values svg.i { color: var(--sf-primary); }
.sf-quote { padding: 18px; border-radius: var(--sf-ri); background: var(--sf-soft); text-align: center; font-family: var(--sf-head); font-style: var(--sf-hs, normal); font-size: 16px; line-height: 1.35; }
.sf-quote cite { display: block; margin-top: 8px; font-family: var(--sf-body); font-style: normal; font-size: 11px; color: var(--sf-muted); }
.sf-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px; border: 1px solid var(--sf-line); border-radius: var(--sf-ri); }
.sf-info b { display: block; font-size: 11px; } .sf-info span { color: var(--sf-muted); font-size: 11px; }
.sf-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 8px; padding: 16px var(--sf-pad) 22px; border-top: 1px solid var(--sf-line); color: var(--sf-muted); font-size: 10.5px; }
.sf-foot .sf-logo { color: var(--sf-text); font-size: 13px; }

/* Phone-width storefront (the phone preview, and small screens) */
@container sf (max-width: 480px) {
  .mk-sf { --sf-pad: 14px; }
  .sf-head, .mk-sf[data-logo="center"] .sf-head, .mk-sf[data-tpl="marketplace"] .sf-head { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
  .sf-menu { display: inline-grid; }
  .sf-nav, .sf-search { display: none; }
  .mk-sf[data-logo="center"] .sf-logo { text-align: center; }
  .sf-hero[data-l="split"] { grid-template-columns: minmax(0, 1fr); }
  .sf-hero[data-l="split"] .sf-art { order: 0; }
  .sf-hero[data-l="full"] .sf-art { aspect-ratio: 4 / 5; place-items: start center; padding: 14% 0 0; }
  .sf-h1 { font-size: calc(26px * var(--sf-hscale, 1)); }
  .sf-hero[data-l="minimal"] .sf-h1 { font-size: calc(34px * var(--sf-hscale, 1)); }
  .sf-grid { --sf-cols: 2; }
  .sf-cats, .sf-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-story, .sf-craft, .sf-info { grid-template-columns: minmax(0, 1fr); }
  .sf-sec-t { font-size: calc(18px * var(--sf-hscale, 1)); }
}

/* ---------- Order that arrives after publishing ---------- */
.mk-shop-order { position: absolute; z-index: 4; left: calc(var(--pad) + 78px); bottom: calc(var(--pad) + 22px); width: 300px; padding: 14px; border-radius: 18px; background: #fff; color: var(--mk-ink); box-shadow: 0 0 0 1px rgba(11,27,51,.06), 0 30px 60px -24px rgba(11,27,51,.6); opacity: 0; transform: translateY(18px) scale(.96); pointer-events: none; transition: opacity .45s var(--mk-ease), transform .45s var(--mk-ease); }
.mk-shop-order.is-on { opacity: 1; transform: none; }
.mk-so-top { display: flex; align-items: center; gap: 10px; }
.mk-so-top > div { flex: 1; min-width: 0; display: grid; }
.mk-so-top b { font-size: 14px; }
.mk-so-top small { font-size: 12px; color: var(--mk-ink-3); }
.mk-so-top em { font-style: normal; font-family: var(--mk-mono); font-size: 11.5px; color: var(--mk-ink-3); }
.mk-so-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--mk-sun); color: var(--mk-ink); }
.mk-so-ic svg.i { width: 18px; height: 18px; }
.mk-so-line { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--mk-line); font-size: 13.5px; }
.mk-so-line strong { font-family: var(--mk-mono); font-variant-numeric: tabular-nums; }
.mk-so-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.mk-so-chips span { padding: 3px 9px; border-radius: 999px; background: var(--mk-paper-2); color: var(--mk-ink-2); font-size: 11.5px; font-weight: 600; }
.mk-so-chips .is-ok { background: #DDF5EF; color: #005F57; }
.mk-so-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: var(--mk-paper); font-size: 12px; color: var(--mk-ink-2); }
.mk-so-foot b { font-family: var(--mk-mono); color: var(--mk-ink); }
.mk-shop-order.is-on .mk-so-chips span { animation: sf-in .4s var(--mk-ease) both; }
.mk-shop-order.is-on .mk-so-chips span:nth-child(2) { animation-delay: .5s; }
.mk-shop-order.is-on .mk-so-chips span:nth-child(3) { animation-delay: .9s; }

/* ---------- Demo cursor ---------- */
.mk-shop-cursor { position: absolute; z-index: 6; left: 0; top: 0; width: 24px; height: 24px; pointer-events: none; opacity: 0; transition: transform .55s cubic-bezier(.45, .05, .25, 1), opacity .3s; filter: drop-shadow(0 3px 4px rgba(11,27,51,.3)); }
.mk-shop-cursor.is-on { opacity: 1; }
.mk-shop-cursor svg { width: 24px; height: 24px; transform-origin: 3px 3px; transition: transform .15s; }
.mk-shop-cursor::before { content: ""; position: absolute; left: -10px; top: -10px; width: 26px; height: 26px; border-radius: 50%; background: rgba(23,112,123,.35); transform: scale(0); opacity: 0; }
.mk-shop-cursor.is-click svg { transform: scale(.82); }
.mk-shop-cursor.is-click::before { animation: mk-sd-click .5s ease-out; }
@keyframes mk-sd-click { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

/* ---------- Facts + tags ---------- */
.mk-shop-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(40px, 6vw, 64px); }
.mk-shop-facts li { display: grid; gap: 6px; align-content: start; padding: 22px; border-radius: 22px; background: var(--mk-paper-2); }
.mk-shop-facts svg.i { width: 40px; height: 40px; padding: 10px; margin-bottom: 6px; border-radius: 12px; background: #fff; color: var(--mk-teal-ink); }
.mk-shop-facts strong { font-size: 16.5px; }
.mk-shop-facts span { font-size: 14.5px; color: var(--mk-ink-2); }
.mk-shop-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mk-shop-tags span { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--mk-line-2); font-family: var(--mk-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mk-ink-2); }

/* ---------- Store tile in "Vender" now points here ---------- */
.mk-tile--store .mk-textlink { align-self: flex-start; margin-top: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .mk-sd { grid-template-columns: minmax(0, 1fr); }
  .mk-sd-rail { display: none; }
  .mk-sd-body { grid-template-columns: 320px minmax(0, 1fr); }
  .mk-sd-head p { display: none; }
  .mk-shop-order { left: calc(var(--pad) + 20px); }
  .mk-shop-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .mk-shop-rail ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  .mk-sd { height: auto; }
  .mk-sd-head { flex-wrap: wrap; align-items: center; }
  .mk-sd-btn--ghost { display: none; }
  .mk-sd-body { grid-template-columns: minmax(0, 1fr); padding: 0 12px 12px; }
  .mk-sd-ctl { height: 360px; }
  .mk-sd-pv { height: 540px; }
  .mk-shop-order { position: relative; left: auto; bottom: auto; width: auto; max-width: 420px; margin: 12px auto 0; display: none; }
  .mk-shop-order.is-on { display: block; }
}
@media (max-width: 640px) {
  .mk-shop-rail { flex-wrap: wrap; }
  .mk-shop-rail ol { flex-basis: 100%; }
  .mk-shop-step > span { display: none; }
  .mk-shop-step strong { font-size: 1rem; }
  .mk-shop-play { width: 44px; height: 44px; }
  .mk-shop-stage { --pad: 10px; border-radius: 22px; }
  .mk-sd-head { padding: 12px; }
  .mk-sd-head h3 { font-size: 19px; }
  .mk-sd-actions { width: 100%; flex-wrap: wrap; row-gap: 6px; }
  .mk-sd-status { order: 3; flex-basis: 100%; }
  .mk-sd-colors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-sd-pv { height: 500px; }
  .mk-shop-facts { grid-template-columns: minmax(0, 1fr); }
  .mk-shop-sun { width: 150px; height: 150px; right: -50px; top: -50px; }
  .mk-shop-arch { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-sf-frame, .mk-shop-order, .mk-sd-tick, .mk-sf, .sf-btn { transition: none; }
  .mk-shop-step.is-run .mk-shop-bar b, .sf-ann, .sf-cart.is-bump b, .mk-shop-order.is-on .mk-so-chips span, .mk-sd-secs li.is-moved { animation: none; }
  .mk-shop-cursor { display: none; }
}