/* MostlyQR — marketing styles. Layout-only mk-* classes on top of the
   Mostly Tiny token layer. All values resolve to design-system tokens. */

body { margin: 0; background: var(--bg); }
.mk-root { font-family: var(--font-sans); color: var(--fg); -webkit-font-smoothing: antialiased; }
.mk-wrap { max-width: 1140px; margin: 0 auto; padding: 0 32px; }
.mk-eyebrow {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
}
.mk-h1 { font-family: var(--font-display); font-weight: 600; font-size: 58px; line-height: 1.02; letter-spacing: -0.045em; margin: 16px 0 0; text-wrap: balance; }
.mk-h2 { font-family: var(--font-display); font-weight: 600; font-size: 36px; line-height: 1.08; letter-spacing: -0.034em; margin: 10px 0 0; text-wrap: balance; }
.mk-lead { font-size: 17px; line-height: 1.55; color: var(--fg-muted); max-width: 32em; margin: 18px 0 0; text-wrap: pretty; }

/* ── Nav ── */
.mk-nav { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--hairline); }
.mk-nav__inner { height: 62px; display: flex; align-items: center; gap: 28px; }
.mk-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--fg); }
.mk-nav__links { display: flex; gap: 26px; margin-left: 14px; }
.mk-nav__links a { font-size: 13.5px; font-weight: 500; color: var(--fg-muted); text-decoration: none; transition: color .12s; }
.mk-nav__links a:hover { color: var(--fg); }
.mk-nav__cta { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ── Hero ── */
.mk-hero { padding: 64px 0 56px; overflow: hidden; position: relative; }
.mk-hero__inner { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 52px; align-items: center; position: relative; z-index: 1; }
.mk-hero__actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; align-items: center; }
.mk-hero__meta { display: flex; gap: 22px; margin-top: 26px; flex-wrap: wrap; }
.mk-hero__meta span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--fg-muted); font-weight: 500; }
.mk-hero__meta svg { color: var(--good); }

/* The hero promise — never-expires guarantee, made loud */
.mk-promise {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
  padding: 11px 16px 11px 13px; border-radius: var(--radius-pill);
  background: var(--accent-bg-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  color: color-mix(in srgb, var(--accent) 82%, var(--fg));
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
}
.mk-promise__ic { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); flex: none; }

/* ── Live builder widget (hero) ── */
.mk-widget { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; max-width: 420px; margin-left: auto; }
.mk-widget__bar { display: flex; align-items: center; gap: 7px; padding: 0 16px; height: 42px; border-bottom: 1px solid var(--hairline); background: var(--bg); }
.mk-dot { width: 11px; height: 11px; border-radius: 50%; }
.mk-widget__title { margin-left: 10px; font-size: 12px; color: var(--fg-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.mk-widget__body { padding: 22px; }
.mk-widget__row { display: grid; grid-template-columns: 168px 1fr; gap: 18px; align-items: center; }
.qr-stage { position: relative; background: #fff; border-radius: var(--radius); padding: 12px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--hairline); }
.qr-stage svg { width: 144px; height: 144px; display: block; }
.qr-stage svg .mq-mod { transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); transform-box: fill-box; transform-origin: center; }
.qr-scan { position: absolute; left: 12px; right: 12px; top: 12px; height: 24%; border-radius: 8px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 26%, transparent), transparent); animation: scan 2.8s var(--ease-out) infinite; pointer-events: none; }
@keyframes scan { 0% { transform: translateY(-4px); opacity: 0; } 12% { opacity: 1; } 70% { transform: translateY(118px); opacity: 1; } 100% { transform: translateY(132px); opacity: 0; } }
.mk-widget__controls { display: flex; flex-direction: column; gap: 10px; }
.mk-widget__label { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-subtle); }
.mk-typepicker { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-type { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--bg); font-size: 12px; font-weight: 500; color: var(--fg-muted); cursor: pointer; transition: all .14s var(--ease-out); }
.mk-type[data-on="true"] { background: var(--accent-bg-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent); }
.mk-swatches { display: flex; gap: 7px; }
.mk-swatch { width: 24px; height: 24px; border-radius: 7px; cursor: pointer; border: 2px solid transparent; box-shadow: inset 0 0 0 1px var(--border); transition: transform .12s var(--ease-out); }
.mk-swatch[data-on="true"] { border-color: var(--fg); }
.mk-swatch:hover { transform: scale(1.08); }
.mk-widget__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.mk-widget__hint { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fg-muted); }
.mk-widget__hint svg { color: var(--accent); }

/* hero floating proof chips */
.mk-floatchip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: var(--radius-pill); background: var(--bg-elev); border: 1px solid var(--border); box-shadow: var(--shadow-soft); font-size: 12px; font-weight: 600; z-index: 2; }
.mk-floatchip--a { right: -10px; top: 8px; }
.mk-floatchip--b { left: -22px; bottom: 26px; }
.mk-floatchip__ic { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }

/* ── Logos / social proof band ── */
.mk-logos { padding: 8px 0 40px; }
.mk-logos__label { text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-subtle); margin: 0 0 20px; }
.mk-logos__row { display: flex; justify-content: center; align-items: center; gap: 40px; flex-wrap: wrap; opacity: 0.62; }
.mk-logos__row span { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.03em; color: var(--fg); }

/* ── Section heads ── */
.mk-section-head { text-align: center; margin-bottom: 44px; }
.mk-section-head .mk-h2 { max-width: 17em; margin-inline: auto; }
.mk-section-head .mk-lead { margin-inline: auto; }

/* ── Features ── */
.mk-features { padding: 64px 0; }
.mk-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mk-feature__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--accent-bg-soft); color: var(--accent); margin-bottom: 16px; }
.mk-feature__title { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.016em; margin: 0 0 8px; }
.mk-feature__body { font-size: 13.5px; line-height: 1.56; color: var(--fg-muted); margin: 0; }

/* ── Compare cut ── */
.mk-compare { padding: 24px 0 64px; }
.mk-compare__card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); overflow: hidden; }
.mk-ctable { width: 100%; border-collapse: collapse; }
.mk-ctable th, .mk-ctable td { padding: 18px 22px; text-align: left; border-bottom: 1px solid var(--hairline); }
.mk-ctable thead th { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; vertical-align: bottom; }
.mk-ctable thead th:first-child { color: var(--fg-subtle); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.mk-ctable .col-them { width: 22%; color: var(--fg-muted); }
.mk-ctable .col-us { width: 26%; }
.mk-ctable__usbrand { display: inline-flex; align-items: center; gap: 8px; }
.mk-ctable tbody td:first-child { font-size: 14px; font-weight: 500; color: var(--fg); }
.mk-ctable .cell { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; }
.mk-ctable .cell--bad { color: var(--fg-muted); }
.mk-ctable .cell--good { color: color-mix(in srgb, var(--good) 72%, var(--fg)); font-weight: 600; }
.mk-ctable .pip { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: none; }
.mk-ctable .pip--bad { background: var(--bad-soft); color: var(--bad); }
.mk-ctable .pip--good { background: var(--good-soft); color: var(--good); }
.mk-ctable thead .col-us { background: var(--accent-bg-soft); border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.mk-ctable tbody .col-us { background: color-mix(in srgb, var(--accent-bg-soft) 55%, transparent); }
.mk-ctable tr:last-child td { border-bottom: none; }

/* ── Node-flow teaser ── */
.mk-flow { padding: 24px 0 56px; }
.mk-flow__card { background: var(--brand-midnight); border-radius: var(--radius-xl); padding: 48px; display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 44px; align-items: center; overflow: hidden; position: relative; }
.mk-flow__copy .mk-h2 { color: #fff; }
.mk-flow__copy .mk-lead { color: rgba(255,255,255,0.66); }
.mk-flow__price { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; color: rgba(255,255,255,0.5); }
.mk-flow__price s { color: rgba(255,255,255,0.4); }
.mk-flow__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.mk-flow__chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 7px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.86); font-size: 12px; font-weight: 600; }
.mk-flow__chip--more { padding: 6px 12px; color: rgba(255,255,255,0.5); }
.mk-flow__chipic { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: #fff; flex: none; }
.mk-flow__canvas { position: relative; height: 360px; border-radius: var(--radius); background:
  radial-gradient(circle at 1px 1px, rgba(255,255,255,0.10) 1px, transparent 0) 0 0 / 22px 22px,
  color-mix(in srgb, var(--brand-midnight) 70%, #fff 4%); border: 1px solid rgba(255,255,255,0.08); overflow: hidden; }
.mk-node { position: absolute; white-space: nowrap; padding: 10px 13px; border-radius: 12px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.13); backdrop-filter: blur(6px); color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,0.22); }
.mk-node__h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.mk-node__sub { font-size: 10.5px; color: rgba(255,255,255,0.55); margin-top: 3px; }
.mk-node__ic { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; flex: none; }
.mk-node--trigger { left: 22px; top: 158px; }
.mk-node--cond { left: 186px; top: 112px; }
.mk-node--int0 { right: 22px; top: 30px; }
.mk-node--int1 { right: 22px; top: 116px; }
.mk-node--int2 { right: 22px; top: 202px; }
.mk-node--int3 { right: 22px; top: 288px; }
.mk-flow__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mk-flow__svg path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 6; opacity: 0.75; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -22; } }

/* ── Pricing ── */
.mk-pricing { padding: 64px 0; }
.mk-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: var(--bg-chip); margin: 22px auto 0; }
.mk-toggle button { border: none; background: transparent; padding: 8px 18px; border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--fg-muted); cursor: pointer; transition: all .16s var(--ease-out); }
.mk-toggle button[data-on="true"] { background: var(--bg-elev); color: var(--fg); box-shadow: var(--shadow-xs); }
.mk-toggle__save { color: var(--good); font-weight: 600; }
.mk-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; align-items: start; }
.mk-plan { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); padding: 28px; display: flex; flex-direction: column; gap: 18px; position: relative; }
.mk-plan--feat { border-color: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: 0 1px 3px rgba(10,10,26,.04), 0 18px 44px color-mix(in srgb, var(--accent) 16%, transparent); }
.mk-plan__tag { position: absolute; top: -11px; left: 28px; padding: 4px 11px; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-fg); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.mk-plan__name { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.mk-plan__price { display: flex; align-items: baseline; gap: 4px; }
.mk-plan__amt { font-family: var(--font-display); font-size: 44px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.mk-plan__per { font-size: 13px; color: var(--fg-subtle); }
.mk-plan__desc { font-size: 13px; color: var(--fg-muted); line-height: 1.5; min-height: 38px; }
.mk-plan__feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.mk-plan__feats li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--fg); line-height: 1.4; }
.mk-plan__feats svg { color: var(--accent); flex: none; margin-top: 1px; }
.mk-guarantee { display: flex; align-items: center; justify-content: center; gap: 11px; margin-top: 32px; padding: 16px 22px; border-radius: var(--radius); background: var(--good-soft); border: 1px solid color-mix(in srgb, var(--good) 26%, transparent); color: color-mix(in srgb, var(--good) 64%, var(--fg)); font-size: 13.5px; font-weight: 600; text-align: center; }
.mk-guarantee svg { color: var(--good); flex: none; }

/* ── Testimonials ── */
.mk-quotes { padding: 24px 0 64px; }
.mk-quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mk-quote { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-xs); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.mk-quote__stars { display: flex; gap: 2px; color: var(--accent); }
.mk-quote__text { font-size: 14.5px; line-height: 1.5; color: var(--fg); letter-spacing: -0.01em; }
.mk-quote__who { display: flex; align-items: center; gap: 11px; }
.mk-quote__av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 14px; flex: none; }
.mk-quote__name { font-size: 13px; font-weight: 600; }
.mk-quote__role { font-size: 12px; color: var(--fg-subtle); }

/* ── Final CTA ── */
.mk-cta { padding: 8px 0 80px; }
.mk-cta__inner { text-align: center; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); padding: 56px 40px; }
.mk-cta__inner .mk-lead { margin-inline: auto; }
.mk-cta__actions { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }

/* ── Footer ── */
.mk-footer { border-top: 1px solid var(--hairline); background: var(--bg-elev); }
.mk-footer__inner { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 32px; padding: 52px 32px 36px; max-width: 1140px; margin: 0 auto; }
.mk-footer__tag { font-size: 13px; color: var(--fg-muted); max-width: 24em; margin: 14px 0 0; line-height: 1.5; }
.mk-footer__h { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 14px; }
.mk-footer__col { display: flex; flex-direction: column; gap: 11px; }
.mk-footer__col a { font-size: 13.5px; color: var(--fg-muted); text-decoration: none; transition: color .12s; }
.mk-footer__col a:hover { color: var(--fg); }
.mk-footer__base { display: flex; justify-content: space-between; align-items: center; padding: 18px 32px; border-top: 1px solid var(--hairline); font-size: 12.5px; color: var(--fg-subtle); max-width: 1140px; margin: 0 auto; }

/* logo tiny-dot drop */
.mq-logo-dot { transform-box: fill-box; transform-origin: center; animation: dotDrop 0.62s var(--ease-spring) 0.15s both; }
@keyframes dotDrop { 0% { transform: translateY(-7px) scale(0); opacity: 0; } 60% { transform: translateY(1px) scale(1.18); opacity: 1; } 100% { transform: translateY(0) scale(1); } }

/* tweak panel mount */
#tweaks-root { position: fixed; inset: 0; pointer-events: none; z-index: 90; }

/* ── "Mostly #1" honest-flex banner (between nav & hero, contained) ── */
.mk-topbar { display: inline-flex; align-items: center; gap: 12px; margin: 22px 0 -10px; padding: 9px 16px 9px 11px; border-radius: var(--radius-pill); background: var(--brand-midnight); color: #fff; max-width: 100%; }
.mk-topbar svg { flex: none; }
.mk-topbar__chip { flex: none; display: inline-flex; align-items: center; white-space: nowrap; padding: 3px 9px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--accent) 30%, transparent); color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.mk-topbar__txt { margin: 0; font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,0.72); letter-spacing: -0.005em; }
.mk-topbar__txt b { color: #fff; font-weight: 600; }

/* ── Why MostlyQR (merged: freeze proof + receipts) ── */
.mk-why { padding: 56px 0; }
.mk-why__toggle { display: flex; align-items: center; justify-content: center; gap: 12px; margin: -8px 0 4px; }
.mk-why__receipts { text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-subtle); margin: 44px 0 20px; position: relative; }
.mk-why__receipts::before, .mk-why__receipts::after { content: ""; position: absolute; top: 50%; width: calc(50% - 80px); height: 1px; background: var(--hairline); }
.mk-why__receipts::before { left: 0; }
.mk-why__receipts::after { right: 0; }

/* ── Freeze, don't kill ── */
.mk-freeze { padding: 56px 0 28px; }
.mk-freeze__toggle { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; }
.mk-freeze__tl { font-size: 12px; font-weight: 600; color: var(--fg-subtle); }
.mk-segment2 { display: inline-flex; padding: 4px; border-radius: var(--radius-pill); background: var(--bg-chip); }
.mk-segment2 button { border: none; background: transparent; padding: 8px 20px; border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--fg-muted); cursor: pointer; transition: all .16s var(--ease-out); }
.mk-segment2 button[data-on="true"] { background: var(--bg-elev); color: var(--fg); box-shadow: var(--shadow-xs); }
.mk-freeze__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 36px; }
.mk-fcard { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); padding: 22px; transition: border-color .24s var(--ease-out), opacity .24s var(--ease-out); }
.mk-fcard--us { border-color: color-mix(in srgb, var(--accent) 32%, transparent); }
.mk-fcard.is-dead { background: var(--bg); }
.mk-fcard__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; min-height: 26px; }
.mk-fcard__them { font-size: 13.5px; font-weight: 600; color: var(--fg-muted); }
.mk-fcard__body { display: grid; grid-template-columns: 132px 1fr; gap: 18px; align-items: center; }
.mk-fcard__qrwrap { position: relative; width: 132px; height: 132px; border-radius: var(--radius); display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px var(--hairline); transition: opacity .24s var(--ease-out); }
.mk-fcard.is-dead .mk-fcard__qrwrap { opacity: 0.6; }
.mk-fcard__qrwrap svg { width: 116px; height: 116px; border-radius: 6px; }
.mk-fcard__deadx { position: absolute; right: -7px; top: -7px; width: 28px; height: 28px; border-radius: 50%; background: var(--bad); color: #fff; display: grid; place-items: center; box-shadow: 0 3px 8px rgba(179,38,30,0.4); }
.mk-fcard__note { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hairline); font-size: 12.5px; font-weight: 500; color: var(--fg-muted); }
.mk-fcard__note svg { flex: none; color: var(--good); }
.mk-fcard__note .is-bad { display: inline-flex; align-items: center; gap: 8px; color: var(--bad); }
.mk-fcard__note .is-bad svg { color: var(--bad); }
.mk-fcard__note .is-good { display: inline-flex; align-items: center; gap: 8px; color: color-mix(in srgb, var(--good) 64%, var(--fg)); font-weight: 600; }
.mk-fcard__note .is-good svg { color: var(--good); }

/* mini result screen */
.mk-screen { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg); min-height: 132px; display: flex; flex-direction: column; }
.mk-screen__bar { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-bottom: 1px solid var(--hairline); background: var(--bg-elev); }
.mk-screen__lock { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: var(--good-soft); color: var(--good); flex: none; }
.mk-screen--dead .mk-screen__lock { background: var(--bad-soft); color: var(--bad); }
.mk-screen__url { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-screen__menu { padding: 12px 14px; position: relative; }
.mk-screen__frozenrib { position: absolute; right: 10px; top: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--good-soft); color: color-mix(in srgb, var(--good) 60%, var(--fg)); font-size: 10px; font-weight: 700; }
.mk-screen__mh { font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 10px; }
.mk-screen__mrow { display: flex; justify-content: space-between; font-size: 12px; color: var(--fg-muted); padding: 5px 0; border-bottom: 1px solid var(--hairline); }
.mk-screen__mrow:last-child { border-bottom: none; }
.mk-screen__mrow span:last-child { font-variant-numeric: tabular-nums; color: var(--fg); }
.mk-screen__404 { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 16px; text-align: center; }
.mk-screen__404big { font-family: var(--font-display); font-size: 34px; font-weight: 700; letter-spacing: -0.04em; color: var(--bad); line-height: 1; }
.mk-screen__404t { font-size: 12px; color: var(--fg-muted); }
.mk-screen__404btn { margin-top: 4px; padding: 6px 13px; border-radius: var(--radius-pill); background: var(--bad-soft); color: var(--bad); font-size: 11.5px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .mq-logo-dot, .qr-scan, .mk-flow__svg path { animation: none; }
}
@media (max-width: 940px) {
  .mk-hero__inner, .mk-flow__card, .mk-footer__inner { grid-template-columns: 1fr; }
  .mk-feature-grid, .mk-plans, .mk-quote-grid, .mk-freeze__grid { grid-template-columns: 1fr; }
  .mk-h1 { font-size: 44px; }
  .mk-nav__links { display: none; }
  .mk-widget { margin: 0 auto; }
  .mk-topbar__chip { display: none; }
}