/* ==========================================================================
   RaveRewards marketing.css (WP1): page layout for the marketing site, help centre and legal pages.
   Shared components (.btn, .faq, .card-campaign, .field ...) live in base.css and are never restyled here.
   Prefixes: mk- marketing, dm- book a demo, bk- brand kit, hc- help centre, lg- legal.
   ========================================================================== */

/* ---------- Shared marketing primitives ---------- */
.mk-head { margin-bottom: 56px; }
.mk-head__title { max-width: 820px; }
.mk-head__lead { max-width: 640px; }
.mk-faq__h { font: inherit; letter-spacing: inherit; margin: 0; }
.mk-faq .section-head { margin-bottom: 40px; }
.mk-pl { margin-left: 6px; }
.pill-link .i { width: 14px; height: 14px; }
.mk-glyph { flex: none; }
.mk-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--model-cpm); flex: none; }
.mk-dot--retainer { background: var(--model-retainer); } .mk-dot--per_post { background: var(--model-per-post); }
.mk-cursor { position: absolute; z-index: 3; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); pointer-events: none; }
.mk-mini-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: var(--fill-3); color: var(--text); font-size: 12px; font-weight: 600; white-space: nowrap; }
.mk-mini-btn .i { width: 14px; height: 14px; }
.mk-mini-btn--primary { background: var(--grad-molten-btn); color: var(--on-accent); box-shadow: var(--hi-btn); }
.mk-mini-btn--good { background: var(--success-soft); color: var(--success); }
.mk-mini-btn--bad { background: var(--danger-soft); color: var(--danger); }
.mk-float, .mk-glass { background: var(--surface-2); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--border), var(--hi-top), var(--sh-3); }

/* Wordmarks of fictional demo brands */
.mk-wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.mk-wordmark--upper { font-size: 15px; letter-spacing: .16em; font-weight: 600; text-transform: uppercase; }
.mk-wordmark--lower { font-size: 21px; font-weight: 700; letter-spacing: -0.04em; }
.mk-logos { position: relative; z-index: 2; }
.mk-logos .logo-cloud { gap: 40px 24px; }
.mk-logos .logo-cloud > li { max-height: none; opacity: .62; }
.mk-logos .logo-cloud > li:hover { opacity: .95; }
.mk-logos__cap { margin-top: 28px; text-align: center; font-size: 12px; font-weight: 500; color: var(--text-3); }

/* Marquee (logos, stat pills) */
.mk-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mk-marquee__track { display: flex; width: max-content; animation: mk-marquee 46s linear infinite; }
.mk-marquee__item { padding-right: 64px; color: var(--text-3); opacity: .75; }
.mk-marquee:hover .mk-marquee__track { animation-play-state: paused; }
@keyframes mk-marquee { to { transform: translateX(-50%); } }

/* ---------- Home: hero and orbit ---------- */
.mk-hero { position: relative; padding-top: clamp(64px, 8vw, 104px); text-align: center; overflow: hidden; isolation: isolate; }
.mk-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad-ember-hero); pointer-events: none; }
.mk-hero__title { max-width: 980px; margin: 0 auto; }
.mk-hero__lead { max-width: 620px; margin: 24px auto 0; }
.mk-hero__ctas { margin-top: 36px; }
.mk-orbit { position: relative; height: clamp(380px, 46vw, 640px); margin-top: 8px; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 98%); mask-image: linear-gradient(180deg, #000 72%, transparent 98%); }
.mk-orbit::before { content: ""; position: absolute; left: 50%; top: 58%; width: min(1100px, 130vw); height: 70%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 176, 32, .15), rgba(245, 158, 11, .05) 55%, transparent); pointer-events: none; }
.mk-orbit__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mk-orbit__svg .g-line { fill: none; stroke: rgba(255, 190, 71, .55); stroke-width: 1.6; stroke-dasharray: 0 7; stroke-linecap: round; }
.mk-orbit__svg [data-orbit-back] .g-line { stroke: rgba(255, 190, 71, .16); }
.mk-orbit__svg .g-link { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(255, 176, 32, .55)); transition: opacity 400ms var(--ease-out); }
.mk-node { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; will-change: transform, opacity; transform-origin: 50% 50%; opacity: 0; }
.mk-node__tile { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: var(--text); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-strong), var(--hi-top), var(--sh-3); }
.mk-node__label { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 10px; border-radius: 10px; background: rgba(22, 22, 28, .86); box-shadow: inset 0 0 0 1px var(--border); white-space: nowrap; }
.mk-node__label b { font-size: 12px; font-weight: 600; color: var(--text); }
.mk-node__label span { font-size: 11px; font-weight: 500; color: var(--text-3); }
.mk-node--creator .avatar { box-shadow: 0 0 0 2px var(--bg), 0 6px 16px rgba(0, 0, 0, .5); }
.mk-node__handle { padding: 3px 9px; border-radius: var(--r-pill); background: rgba(22, 22, 28, .86); box-shadow: inset 0 0 0 1px var(--border); font-size: 11px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.mk-node__bubble { position: absolute; bottom: calc(100% + 8px); left: 50%; padding: 6px 11px; border-radius: 12px; background: var(--surface-3); color: var(--text); font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: var(--sh-2); opacity: 0; transform: translate(-50%, 6px) scale(.94); transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out); pointer-events: none; }
.mk-node__bubble::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.mk-node__bubble.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.mk-node__bubble.is-pay { background: #10281F; color: var(--money); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .3), var(--sh-2); font-variant-numeric: tabular-nums; }
.mk-hero .mk-logos { margin-top: -24px; padding-bottom: clamp(48px, 7vw, 88px); }
@media (max-width: 767px) {
  .mk-orbit { height: 400px; }
  .mk-node__label span { display: none; }
  .mk-node__tile { width: 40px; height: 40px; border-radius: 12px; }
  .mk-node__handle { display: none; }
}

/* ---------- Home: old way vs new way ---------- */
.mk-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; }
.mk-vs__card { border-radius: var(--r-2xl); padding: 36px; min-width: 0; }
.mk-vs__card--old { background: var(--fill-1); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.mk-vs__card--new { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-strong), var(--hi-top), var(--sh-4); }
.mk-vs__kicker { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 24px; }
.mk-vs__card--new .mk-vs__kicker { color: var(--text); }
.mk-vs__list { display: flex; flex-direction: column; gap: 20px; }
.mk-vs__list li { display: flex; gap: 14px; align-items: flex-start; font-size: 17px; line-height: 1.45; color: var(--text-2); }
.mk-vs__list li b { color: var(--text); font-weight: 600; }
.mk-vs__list .i { margin-top: 2px; flex: none; }
.mk-vs__card--old li { color: var(--text-3); }
.mk-vs__card--old li b { color: var(--text-2); font-weight: 500; }
.mk-vs__card--old .i { color: var(--text-4); }
.mk-vs__card--new .i { color: var(--success); }
.mk-vs__pill { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--border); font: 600 13px var(--font-mono); color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 1023px) {
  .mk-vs { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .mk-vs__pill { margin: 0 auto; }
  .mk-vs__card { padding: 28px 24px; }
  .mk-vs__list li { font-size: 16px; }
}

/* ---------- Home: three steps ---------- */
.mk-steps__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mk-step { border-radius: var(--r-2xl); background: var(--surface); box-shadow: var(--ring-card); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.mk-step__visual { position: relative; height: 300px; display: grid; place-items: center; overflow: hidden; background: var(--fill-1); -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); }
.mk-step__title { display: flex; align-items: center; gap: 12px; font-size: 22px; padding: 24px 28px 0; }
.mk-step__num { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--fill-3); font: 600 13px var(--font-ui); color: var(--text-2); flex: none; }
.mk-step__text { padding: 10px 28px 32px; font-size: 16px; line-height: 1.55; color: var(--text-3); }
@media (max-width: 1023px) { .mk-steps__grid { grid-template-columns: minmax(0, 1fr); } .mk-step__visual { height: 260px; } }

.mk-mini-modal { width: min(300px, 86%); padding: 16px; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border), var(--sh-3); text-align: left; }
.mk-mini-modal__title { font-size: 14px; font-weight: 600; }
.mk-mini-modal__sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.mk-mini-models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.mk-mini-model { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 10px; background: var(--fill-1); box-shadow: inset 0 0 0 1px var(--border-subtle); min-width: 0; }
.mk-mini-model b { font-size: 13px; font-weight: 600; margin-top: 4px; }
.mk-mini-model span { font-size: 11px; color: var(--text-3); line-height: 1.3; }
.mk-mini-model.is-on { background: rgba(255, 176, 32, .08); box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .45); }
.mk-mini-modal__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.mk-mini-modal__foot .mk-mini-btn--primary { animation: mk-press 4.8s var(--ease-out) infinite; }
.mk-step__cursor { right: 20%; bottom: 58px; animation: mk-cursor 4.8s var(--ease-out) infinite; }
@keyframes mk-cursor {
  0% { transform: translate(70px, 80px); opacity: 0; } 10% { opacity: 1; }
  45%, 60% { transform: translate(0, 0); } 52% { transform: translate(0, 0) scale(.82); }
  85% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(0, 0); opacity: 0; }
}
@keyframes mk-press { 0%, 48% { transform: none; filter: none; } 52% { transform: scale(.94); filter: brightness(1.1); } 60%, 100% { transform: none; } }

.mk-step__visual--clips { place-items: stretch; align-content: center; }
.mk-cliprow { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.mk-cliprow__track { display: flex; width: max-content; animation: mk-marquee 26s linear infinite; }
.mk-clip { position: relative; width: 112px; height: 200px; margin-right: 12px; border-radius: 14px; overflow: hidden; flex: none; background: #1B1B22 url('../brand/poster-fallback-640.jpg') center / cover; box-shadow: inset 0 0 0 1px var(--border-media), var(--sh-2); }
.mk-clip::before { content: ""; position: absolute; inset: 0; background: var(--tint, rgba(14, 14, 18, .35)); mix-blend-mode: color; }
.mk-clip::after { content: ""; position: absolute; inset: 0; background: var(--grad-media-bottom); }
.mk-clip--t1 { --tint: rgba(18, 120, 118, .8); } .mk-clip--t2 { --tint: rgba(170, 40, 60, .8); }
.mk-clip--t3 { --tint: rgba(40, 120, 60, .8); } .mk-clip--t4 { --tint: rgba(60, 80, 110, .8); }
.mk-clip__plat, .mk-clip__play, .mk-clip__meta { position: absolute; z-index: 1; color: #fff; }
.mk-clip__plat { top: 8px; left: 8px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--glass-media); }
.mk-clip__play { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .18); }
.mk-clip__play .i { fill: #fff; stroke: none; }
.mk-clip__meta { left: 8px; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 2px; font-size: 11px; }
.mk-clip__meta b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-clip__meta span { display: inline-flex; align-items: center; gap: 4px; color: var(--text-on-media-2); font-variant-numeric: tabular-nums; }

.mk-fin { width: min(320px, 88%); padding: 18px; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border), var(--sh-3); text-align: left; }
.mk-fin__top { display: flex; justify-content: space-between; font-size: 12px; font-weight: 500; color: var(--text-3); }
.mk-fin__top b { color: var(--text); font-weight: 600; }
.mk-fin__amount { margin: 8px 0 12px; font-size: 13px; color: var(--text-3); }
.mk-fin__amount b { font: 600 24px var(--font-display); letter-spacing: -0.02em; color: var(--text); }
.mk-fin__left { margin-top: 10px; font-size: 12px; color: var(--text-3); }
.mk-fin__left b { color: var(--money); font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-fin__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 14px; }
.mk-fin__chip { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--fill-1); font-size: 11px; font-weight: 500; color: var(--text-3); }
.mk-fin__chip b { font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.mk-fin__chip--paid b { color: var(--money); } .mk-fin__chip--pending b { color: var(--info); } .mk-fin__chip--back b { color: var(--danger); }

/* ---------- Home: verification pipeline ---------- */
.mk-pipe { position: relative; border-radius: 40px; padding: 56px 32px 48px; background: var(--grad-ember-hero), var(--surface); box-shadow: var(--ring-card); overflow: hidden; }
.mk-pipe__stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; list-style: none; }
.mk-pipe__stage { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.mk-pipe__stage + .mk-pipe__stage::before { content: ""; position: absolute; top: 110px; left: -24px; width: 40px; border-top: 2px dashed var(--border-strong); transform: translateX(-35%); }
.mk-pipe__visual { height: 220px; width: 100%; display: grid; place-items: center; }
.mk-pipe__num { font: 600 20px var(--font-display); color: var(--text-4); letter-spacing: .04em; margin-top: 20px; }
.mk-pipe__label { font-size: 20px; margin-top: 8px; }
.mk-pipe__text { font-size: 14px; line-height: 1.5; color: var(--text-3); margin-top: 8px; max-width: 240px; }
.mk-tip { display: inline-flex; align-items: center; gap: 6px; text-decoration: underline dotted var(--text-4); text-underline-offset: 5px; cursor: help; }
.mk-tip .i { color: var(--text-3); }
.mk-tip[data-tip]::after { font-family: var(--font-ui); }
.mk-accounts { width: 100%; max-width: 230px; padding: 10px; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.mk-accounts__row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; }
.mk-accounts__row > span { flex: 1; display: flex; flex-direction: column; font-size: 11px; color: var(--text-3); }
.mk-accounts__row b { font-size: 13px; color: var(--text); font-weight: 600; }
.mk-rings { position: relative; width: 170px; height: 170px; display: grid; place-items: center; }
.mk-rings span { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .28); animation: mk-ring 3.6s var(--ease-out) infinite; }
.mk-rings span:nth-child(2) { inset: 22px; animation-delay: .5s; }
.mk-rings span:nth-child(3) { inset: 44px; animation-delay: 1s; background: rgba(255, 176, 32, .05); }
.mk-rings i { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 1px var(--accent-border), var(--glow-accent); }
@keyframes mk-ring { 0% { transform: scale(.92); opacity: .5; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(.92); opacity: .5; } }
.mk-stackchips { position: relative; width: 200px; height: 170px; }
.mk-stackchip { position: absolute; left: 50%; display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 13px; font-weight: 600; white-space: nowrap; transform: translateX(-50%) rotate(var(--r)); animation: mk-bob 5s ease-in-out infinite; }
.mk-stackchip .i { color: var(--text-2); }
.mk-stackchip:nth-child(1) { top: 6px; } .mk-stackchip:nth-child(2) { top: 62px; animation-delay: .8s; } .mk-stackchip:nth-child(3) { top: 118px; animation-delay: 1.6s; }
@keyframes mk-bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -5px; } }
.mk-counter { display: flex; align-items: center; gap: 14px; padding: 18px 20px; text-align: left; }
.mk-counter__ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--success-soft); color: var(--success); flex: none; }
.mk-counter b { display: block; font: 600 28px var(--font-display); letter-spacing: -0.02em; line-height: 1.1; }
.mk-counter__label { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; }
.mk-claims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; border-top: 1px solid var(--border-subtle); }
.mk-claim { display: flex; gap: 14px; padding: 28px 32px 28px 0; font-size: 17px; line-height: 1.5; color: var(--text-3); border-bottom: 1px solid var(--border-subtle); }
.mk-claim:nth-child(odd) { border-right: 1px solid var(--border-subtle); }
.mk-claim:nth-child(even) { padding-left: 32px; padding-right: 0; }
.mk-claim b { color: var(--text); font-weight: 600; }
.mk-claim .i { color: var(--text-2); flex: none; margin-top: 3px; }
@media (max-width: 1023px) {
  .mk-pipe { padding: 40px 20px; border-radius: 28px; }
  .mk-pipe__stages { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .mk-pipe__stage + .mk-pipe__stage::before { display: none; }
}
@media (max-width: 767px) {
  .mk-pipe__stages { grid-template-columns: minmax(0, 1fr); }
  .mk-pipe__visual { height: auto; min-height: 180px; }
  .mk-claims { grid-template-columns: minmax(0, 1fr); }
  .mk-claim, .mk-claim:nth-child(even) { padding: 22px 0; border-right: 0; font-size: 16px; }
}

/* ---------- Bento tiles (home and creators) ---------- */
.mk-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mk-tile { position: relative; border-radius: var(--r-2xl); background: var(--surface); box-shadow: var(--ring-card); overflow: hidden; display: flex; flex-direction: column; min-height: 360px; min-width: 0; }
.mk-tile__copy { padding: 32px 32px 0; position: relative; z-index: 2; }
.mk-tile__title { font-size: clamp(24px, 2.4vw, 32px); }
.mk-tile__text { margin-top: 10px; font-size: 17px; line-height: 1.5; color: var(--text-3); max-width: 420px; }
.mk-tile__visual { position: relative; flex: 1; min-height: 200px; display: grid; place-items: center; padding: 24px; }
.mk-bento--home .mk-tile--flex { grid-column: span 2; flex-direction: row; align-items: center; }
.mk-bento--home .mk-tile--flex .mk-tile__copy { flex: 0 0 42%; padding-bottom: 32px; }
.mk-bento--home .mk-tile--bot { grid-column: span 2; flex-direction: row; align-items: center; }
.mk-bento--home .mk-tile--bot .mk-tile__copy { flex: 0 0 44%; padding-bottom: 32px; }
@media (max-width: 1023px) {
  .mk-bento { grid-template-columns: minmax(0, 1fr); }
  .mk-bento--home .mk-tile--flex, .mk-bento--home .mk-tile--bot { grid-column: auto; flex-direction: column; align-items: stretch; }
  .mk-bento--home .mk-tile--flex .mk-tile__copy, .mk-bento--home .mk-tile--bot .mk-tile__copy { flex: none; padding-bottom: 0; }
  .mk-tile { min-height: 0; }
  .mk-tile__copy { padding: 28px 24px 0; }
  .mk-tile__visual { min-height: 240px; }
}

.mk-composer { width: 100%; max-width: 360px; padding: 14px; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border), var(--sh-3); }
.mk-composer__thumb { position: relative; width: 64px; height: 64px; }
.mk-composer__thumb img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.mk-composer__thumb span { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-4); color: var(--text-2); }
.mk-composer__text { margin-top: 14px; min-height: 44px; font-size: 15px; line-height: 1.45; color: var(--text); }
.mk-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -3px; background: var(--accent); animation: mk-blink 1s steps(1) infinite; }
@keyframes mk-blink { 50% { opacity: 0; } }
.mk-composer__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.mk-composer__clip { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--fill-2); color: var(--text-3); }
.mk-composer__at { padding: 6px 12px; border-radius: var(--r-pill); background: var(--fill-3); font-size: 12px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }

.mk-fan { position: relative; width: 100%; max-width: 440px; height: 240px; }
.mk-fan__card { position: absolute; top: 20px; width: 168px; height: 210px; padding: 16px; border-radius: 18px; display: flex; flex-direction: column; gap: 4px; color: var(--on-accent); box-shadow: var(--sh-4); transition: transform 500ms var(--ease-drawer); }
.mk-fan__card b { font: 600 22px var(--font-display); letter-spacing: -0.02em; margin-top: auto; }
.mk-fan__card > span:not(.mk-fan__ico):not(.mk-fan__stat) { font-size: 12px; font-weight: 600; opacity: .72; }
.mk-fan__ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(23, 19, 10, .14); }
.mk-fan__stat { margin-top: 10px; padding: 6px 8px; border-radius: 8px; background: rgba(23, 19, 10, .12); font-size: 11px; font-weight: 700; display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.mk-fan__stat .delta { color: inherit; }
.mk-fan__card--cpm { left: 0; background: var(--model-cpm); transform: rotate(-7deg); z-index: 1; }
.mk-fan__card--retainer { left: 128px; background: var(--model-retainer); transform: rotate(-1deg) translateY(-6px); z-index: 2; }
.mk-fan__card--per_post { left: 256px; background: var(--model-per-post); transform: rotate(6deg); z-index: 3; }
.mk-tile--flex:hover .mk-fan__card--cpm { transform: rotate(-10deg) translate(-12px, -4px); }
.mk-tile--flex:hover .mk-fan__card--per_post { transform: rotate(9deg) translate(12px, -4px); }
@media (max-width: 479px) {
  .mk-fan { height: 230px; max-width: 320px; }
  .mk-fan__card { width: 140px; height: 190px; padding: 12px; }
  .mk-fan__card--retainer { left: 90px; } .mk-fan__card--per_post { left: 180px; }
}

.mk-botcard { width: 250px; padding: 14px 16px; border-radius: 16px; background: var(--surface-4); box-shadow: var(--sh-4); position: relative; }
.mk-botcard::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.mk-botcard__head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text-2); padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.mk-botcard ul { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.mk-botcard li { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 500; }
.mk-botcard li b { font-size: 13px; font-variant-numeric: tabular-nums; }
.mk-sq { width: 12px; height: 12px; border-radius: 3px; background: var(--success); }
.mk-sq--warn { background: var(--warn); }
.mk-tile--bot .mk-tile__visual { display: flex; flex-direction: column; gap: 22px; }
.mk-botpill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; border-radius: var(--r-pill); background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--border-strong); font-size: 13px; font-weight: 600; }
.mk-botcursor { position: absolute; left: calc(50% + 70px); bottom: 26%; animation: mk-hover 3.2s ease-in-out infinite; }
@keyframes mk-hover { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-6px, -4px); } }

.mk-roles { display: block; min-height: 220px; }
.mk-role { position: absolute; left: var(--x); top: var(--y); display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--r-pill); font-size: 17px; font-weight: 600; transform: rotate(var(--r)); white-space: nowrap; box-shadow: var(--sh-2); }
.mk-role .i { width: 16px; height: 16px; }
.mk-role--amber { background: var(--accent-soft); color: var(--accent-2); }
.mk-role--purple { background: rgba(192, 132, 252, .14); color: #D8B4FE; }
.mk-role--blue { background: var(--info-soft); color: var(--info); }
.mk-tile--teams .mk-tile__visual { margin: 12px 24px 24px; padding: 0; }

/* ---------- Home: sticky statement ---------- */
.mk-quote { position: relative; height: 210vh; }
.mk-quote__sticky { position: sticky; top: calc(var(--nav-h) + 16px); height: calc(100vh - var(--nav-h) - 32px); display: flex; align-items: center; }
.mk-quote__card { position: relative; border-radius: 40px; padding: clamp(40px, 7vw, 96px) clamp(24px, 6vw, 96px); background: var(--grad-ember-hero), var(--surface); box-shadow: var(--ring-card); text-align: center; overflow: hidden; }
.mk-quote__text { font: 500 clamp(26px, 3.6vw, 48px)/1.18 var(--font-display); letter-spacing: -0.025em; color: var(--text); max-width: 1000px; margin: 0 auto; }
.mk-quote__text .w { white-space: nowrap; }
.mk-quote__text .l { color: var(--text-4); transition: color 200ms linear; }
.mk-quote__text .l.is-on { color: var(--text); }
.mk-quote__card .quote-by { justify-content: center; margin-top: 40px; text-align: left; }
.mk-quote__card .quote-by > span { display: flex; flex-direction: column; }
.mk-quote__mark { flex: none; }
@media (max-width: 767px) { .mk-quote { height: 170vh; } .mk-quote__card { border-radius: 28px; } }

/* ---------- Autoplay tabs (home tour) ---------- */
.mk-tabs { position: relative; display: flex; justify-content: center; width: 100%; max-width: 820px; margin: 0 auto; padding-bottom: 20px; }
.mk-tabs__tab { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 12px; color: var(--text-3); transition: color var(--dur-3) var(--ease-out); }
.mk-tabs__tab + .mk-tabs__tab::before { content: ""; position: absolute; left: 0; top: 28px; height: 40px; width: 1px; background: var(--border); }
.mk-tabs__tab:hover { color: var(--text-3); }
.mk-tabs__tab[aria-selected="true"] { color: var(--text); }
.mk-tabs__ico { width: 72px; height: 48px; border-radius: var(--r-pill); display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--border-strong); transition: background-color var(--dur-3), box-shadow var(--dur-3); }
.mk-tabs__tab[aria-selected="true"] .mk-tabs__ico { background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--border-strong), var(--hi-top); }
.mk-tabs__label { font: 500 20px/1.2 var(--font-ui); letter-spacing: -0.02em; white-space: nowrap; }
.mk-tabs__track { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: var(--r-pill); background: var(--fill-3); overflow: hidden; }
.mk-tabs__fill { position: absolute; top: 0; bottom: 0; left: var(--fill-left, 0%); width: var(--fill-w, 0%); background: var(--accent); border-radius: inherit; }
@media (max-width: 767px) {
  .mk-tabs__ico { width: 52px; height: 38px; }
  .mk-tabs__label { font-size: 13px; white-space: normal; text-align: center; }
  .mk-tabs__tab { gap: 10px; padding: 0 6px; }
  .mk-tabs__tab + .mk-tabs__tab::before { top: 18px; height: 30px; }
}

/* ---------- Home: product tour app frame ---------- */
.mk-tour__wrap { display: flex; flex-direction: column; gap: 40px; }
.mk-app { position: relative; display: grid; grid-template-columns: 224px minmax(0, 1fr); height: 640px; max-width: 1120px; width: 100%; margin: 0 auto; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), var(--sh-4); overflow: hidden; text-align: left; -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent); mask-image: linear-gradient(180deg, #000 86%, transparent); }
.mk-app__side { background: var(--bg-sunken); border-right: 1px solid var(--border-subtle); padding: 16px 12px; display: flex; flex-direction: column; gap: 16px; }
.mk-app__org { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: var(--fill-1); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.mk-app__org > span:last-child { display: flex; flex-direction: column; min-width: 0; font-size: 11px; color: var(--text-3); }
.mk-app__org b { font-size: 13px; color: var(--text); font-weight: 600; }
.mk-app__orglogo { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); flex: none; }
.mk-app__nav { display: flex; flex-direction: column; gap: 2px; }
.mk-app__item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--text-3); transition: background-color var(--dur-3), color var(--dur-3); }
.mk-app__item > span:not(.count) { flex: 1; }
.mk-app__item.is-active { background: var(--fill-2); color: var(--text); }
.mk-app__main { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.mk-panel { display: flex; flex-direction: column; min-height: 0; flex: 1; animation: mk-panel-in 420ms var(--ease-out); }
@keyframes mk-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mk-app__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; padding: 0 20px; border-bottom: 1px solid var(--border-subtle); flex: none; }
.mk-app__bar > b { font: 600 17px var(--font-display); }
.mk-app__filters { padding: 14px 20px 0; }
.mk-chipset { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--fill-2); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.mk-chipset > span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; color: var(--text-3); white-space: nowrap; }
.mk-chipset > span i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--text-4); font-variant-numeric: tabular-nums; }
.mk-chipset > span.is-on { background: var(--surface-3); color: var(--text); box-shadow: var(--sh-1), var(--hi-top); }
.mk-chipset--sm > span { height: 26px; padding: 0 10px; font-size: 12px; }
.mk-review { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; padding: 16px 20px 20px; min-height: 0; }
.mk-review__phone { position: relative; height: 400px; border-radius: 22px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--border-media), var(--sh-3); }
.mk-review__phone img { width: 100%; height: 100%; object-fit: cover; }
.mk-review__phone::after { content: ""; position: absolute; inset: 0; background: var(--grad-media-bottom); }
.mk-review__plat, .mk-review__play, .mk-review__dur { position: absolute; z-index: 1; color: #fff; }
.mk-review__plat { top: 12px; left: 12px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--glass-media); }
.mk-review__play { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .2); }
.mk-review__play .i { fill: #fff; stroke: none; }
.mk-review__dur { bottom: 12px; right: 12px; font: 500 12px var(--font-mono); }
.mk-review__body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mk-review__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mk-review__acts { display: flex; align-items: center; gap: 8px; }
.mk-review__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mk-mstat { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-subtle); min-width: 0; }
.mk-mstat span { font-size: 12px; font-weight: 500; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-mstat b { font: 600 20px var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-review__chart { padding: 14px 16px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.mk-review__charthead { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.mk-review__svg { min-height: 150px; }
.mk-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 16px 20px 0; }
.mk-kpis .mk-mstat b { font-size: 17px; }
.mk-tablewrap { margin: 16px 20px 0; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--border-subtle); overflow-x: auto; }
.mk-mtable { width: 100%; min-width: 640px; font-size: 13px; }
.mk-mtable th { height: 38px; padding: 0 14px; text-align: left; font-size: 12px; font-weight: 500; color: var(--text-3); background: var(--fill-1); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
.mk-mtable td { height: 54px; padding: 0 14px; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; font-weight: 500; }
.mk-mtable tr:last-child td { border-bottom: 0; }
.mk-mtable .num { text-align: right; font-variant-numeric: tabular-nums; }
.mk-mtable .person__name { font-size: 13px; }
.mk-mtable tr.is-held td { background: rgba(251, 93, 93, .06); color: var(--text-3); }
.mk-strike { text-decoration: line-through; color: var(--danger); }
.mk-tour__note { text-align: center; font-size: 12px; font-weight: 500; color: var(--text-3); margin-top: -16px; }
@media (max-width: 1023px) {
  .mk-app { grid-template-columns: minmax(0, 1fr); height: auto; max-height: 720px; }
  .mk-app__side { display: none; }
  .mk-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .mk-review { grid-template-columns: minmax(0, 1fr); }
  .mk-review__phone { display: none; }
  .mk-review__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-app__bar { padding: 0 14px; } .mk-review, .mk-kpis { padding-left: 14px; padding-right: 14px; } .mk-tablewrap { margin: 14px; }
  .mk-app__filters { padding: 12px 14px 0; }
  /* Phones: each table row becomes a small card, so payout, status and earnings stay in view without a sideways
     scroll inside the picture. */
  .mk-tablewrap { overflow: visible; box-shadow: none; margin: 12px 14px 0; }
  .mk-mtable { min-width: 0; display: block; }
  .mk-mtable thead { display: none; }
  .mk-mtable tbody { display: flex; flex-direction: column; gap: 8px; }
  .mk-mtable tr { display: grid; align-items: center; gap: 6px 12px; padding: 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--border-subtle); }
  .mk-mtable td { height: auto; padding: 0; border: 0; min-width: 0; }
  .mk-mtable tr.is-held { background: rgba(251, 93, 93, .06); }
  .mk-mtable tr.is-held td { background: none; }
  .mk-mtable td[data-suffix]::after { content: " " attr(data-suffix); color: var(--text-3); font-weight: 400; }
  .mk-mtable .c-plats { display: none; }
  .mk-mtable--payouts tr { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "person person status" "camp views pay"; }
  .mk-mtable--payouts .c-person { grid-area: person; } .mk-mtable--payouts .c-status { grid-area: status; }
  .mk-mtable--payouts .c-camp { grid-area: camp; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; }
  .mk-mtable--payouts .c-views { grid-area: views; } .mk-mtable--payouts .c-pay { grid-area: pay; }
  .mk-mtable--creators tr { grid-template-columns: 28px repeat(3, minmax(0, 1fr)); grid-template-areas: "rank person person earned" ". views appr clips"; }
  .mk-mtable--creators .c-rank { grid-area: rank; } .mk-mtable--creators .c-person { grid-area: person; }
  .mk-mtable--creators .c-earned { grid-area: earned; } .mk-mtable--creators .c-views { grid-area: views; text-align: left; }
  .mk-mtable--creators .c-appr { grid-area: appr; text-align: left; } .mk-mtable--creators .c-clips { grid-area: clips; text-align: left; }
}

/* ---------- CTA card (home, creators, pricing) ---------- */
.mk-cta { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; align-items: center; border-radius: 32px; padding: 56px; background: var(--grad-ember-card), var(--surface); box-shadow: var(--ring-card); overflow: hidden; }
.mk-cta__title { font-size: clamp(30px, 3.6vw, 48px); max-width: 560px; }
.mk-cta__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin-top: 28px; max-width: 520px; }
.mk-cta__stats li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--text-2); }
.mk-cta__stats .i { color: var(--text-3); flex: none; }
.mk-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.mk-cta__visual { position: relative; display: grid; place-items: center; min-height: 320px; }
.mk-cta__card { width: min(340px, 100%); transform: rotate(3deg); box-shadow: var(--sh-4); border-radius: var(--r-lg); }
.mk-cta__card .card-campaign { pointer-events: none; }
/* the toast sits over the top of the card's banner, clear of its title, budget row and progress bar */
.mk-cta__toast { position: absolute; right: 0; top: 6px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border), var(--sh-3); transform: rotate(2deg); }
.mk-cta__toast > span { display: flex; flex-direction: column; font-size: 12px; color: var(--text-3); }
.mk-cta__toast b { font-size: 13px; color: var(--text); }
.mk-cta__toast .i { fill: var(--money); stroke: none; }
@media (max-width: 1023px) {
  .mk-cta { grid-template-columns: minmax(0, 1fr); padding: 40px 28px; }
  .mk-cta__visual { min-height: 0; padding-bottom: 56px; }
  .mk-cta__visual--toast { padding: 28px 0 0; }
  .mk-cta__toast { top: 0; }
}
@media (max-width: 767px) {
  .mk-cta { padding: 32px 20px; border-radius: 24px; }
  .mk-cta__stats { grid-template-columns: minmax(0, 1fr); }
  .mk-cta__actions .btn { flex: 1 1 100%; }
  .mk-cta__toast { right: 4px; }
}

/* ---------- Creators: hero stepper ---------- */
.mk-hero--creators { padding-bottom: 24px; }
.mk-stepper { margin-top: 64px; }
.mk-utabs { position: relative; display: flex; justify-content: center; max-width: 520px; margin: 0 auto; padding-bottom: 18px; }
.mk-utabs__tab { position: relative; flex: 1 1 0; padding: 0 12px; font: 500 21px/1.2 var(--font-ui); letter-spacing: -0.02em; color: var(--text-3); transition: color var(--dur-3); }
.mk-utabs__tab + .mk-utabs__tab::before { content: ""; position: absolute; left: 0; top: 2px; height: 22px; width: 1px; background: var(--border); }
.mk-utabs__tab:hover { color: var(--text-3); }
.mk-utabs__tab[aria-selected="true"] { color: var(--text); }
.mk-stepper__panels { position: relative; min-height: 460px; margin-top: 40px; }
.mk-stepper__panel { animation: mk-panel-in 480ms var(--ease-out); }
.mk-carousel { position: relative; height: 420px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.mk-carousel__item { position: absolute; top: 40px; left: 50%; width: 328px; transform: translateX(calc(-50% + var(--off, 0) * 344px)) scale(.9); opacity: .38; filter: saturate(.6); transition: transform 900ms var(--ease-drawer), opacity 700ms var(--ease-out), filter 700ms var(--ease-out); }
.mk-carousel__item.is-center { transform: translateX(-50%) scale(1.06); opacity: 1; filter: none; z-index: 2; }
.mk-carousel__item.is-far { opacity: 0; }
.mk-carousel__item .card-campaign { box-shadow: var(--ring-card), var(--sh-3); }
@media (max-width: 767px) {
  .mk-carousel { height: 380px; }
  .mk-carousel__item { width: min(300px, 78vw); transform: translateX(calc(-50% + var(--off, 0) * 82vw)) scale(.9); }
  .mk-utabs__tab { font-size: 17px; }
}

.mk-est { padding: 28px; border-radius: var(--r-2xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), var(--sh-4); text-align: left; }
.mk-est__title { font: 600 22px/1.25 var(--font-display); letter-spacing: -0.02em; margin-bottom: 18px; }
.mk-est__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.mk-est__url { grid-column: 1 / -1; }
.mk-est__none { grid-column: 1 / -1; }
.mk-est__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.mk-est__presets { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-est__plats { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-subtle); font-size: 13px; font-weight: 500; color: var(--text-3); }
.mk-est__plats > span { display: inline-flex; align-items: center; gap: 8px; }
.mk-est__result { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 20px; padding: 16px 18px; border-radius: var(--r-md); background: var(--money-soft); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .22); }
.mk-est__amount { font: 600 32px/1 var(--font-display); letter-spacing: -0.02em; color: var(--money); font-variant-numeric: tabular-nums; }
.mk-est__why { flex: 1 1 260px; font-size: 14px; color: var(--text-2); }
@media (max-width: 767px) {
  .mk-est { padding: 20px; }
  .mk-est__grid { grid-template-columns: minmax(0, 1fr); }
  .mk-est__foot .btn { width: 100%; }
}

/* Receipt with torn edges */
.mk-receipt { display: flex; justify-content: center; padding: 20px 0; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .55)); }
.mk-receipt__paper { width: min(360px, 100%); padding: 36px 28px; background: #F5F5F7; color: #0E0E12; text-align: center;
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 16px 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 51% repeat-x;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 16px 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 51% repeat-x; }
.mk-receipt__kicker { font-size: 13px; font-weight: 500; color: #6E6E7C; }
.mk-receipt__camp { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; text-align: left; }
.mk-receipt__thumb { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: #0E0E12 center / cover; flex: none; }
.mk-receipt__names { display: flex; flex-direction: column; min-width: 0; font-size: 12px; color: #6E6E7C; }
.mk-receipt__names b { font-size: 14px; color: #0E0E12; font-weight: 600; }
.mk-receipt__amount { margin-top: 24px; font: 600 60px/1 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.mk-receipt__label { margin-top: 8px; font-size: 14px; font-weight: 500; color: #6E6E7C; }
.mk-receipt__rows { margin-top: 24px; padding-top: 16px; border-top: 1px dashed rgba(14, 14, 18, .2); display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.mk-receipt__rows div { display: flex; justify-content: space-between; gap: 12px; }
.mk-receipt__rows dt { color: #6E6E7C; }
.mk-receipt__rows dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-receipt--tilt { transform: rotate(3deg); }
@media (max-width: 479px) { .mk-receipt__amount { font-size: 48px; } }

/* ---------- Creators: strip, paid counter ---------- */
.mk-strip { padding: clamp(40px, 6vw, 72px) 0 0; text-align: center; }
.mk-strip__cap { font-size: 17px; font-weight: 500; color: var(--text-3); margin-bottom: 28px; padding-inline: var(--gutter); }
.mk-strip .mk-logos__cap { margin-top: 20px; }
.mk-paid { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mk-paid__num { color: var(--text); min-height: 1em; }
.mk-paid__label { margin: 12px 0 28px; font: 500 clamp(20px, 2.4vw, 30px)/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--text-3); }
.mk-paid__live { margin-top: 24px; font-size: 15px; color: var(--text-3); }
.mk-paid__live b { color: var(--money); font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-center { display: flex; justify-content: center; }

/* ---------- Creators: bento ---------- */
.mk-bento--creators { grid-template-rows: auto auto; }
.mk-bento--creators .mk-tile--easy { grid-row: span 2; }
.mk-bento--creators .mk-tile { min-height: 340px; }
@media (max-width: 1023px) { .mk-bento--creators .mk-tile--easy { grid-row: auto; } .mk-bento--creators .mk-tile { min-height: 0; } }
.mk-wd { position: relative; width: 100%; max-width: 300px; padding: 22px; border-radius: var(--r-xl); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border), var(--sh-3); }
.mk-wd__label { font-size: 13px; font-weight: 500; color: var(--text-3); }
.mk-wd__amount { margin-top: 6px; font: 600 40px/1.05 var(--font-display); letter-spacing: -0.03em; color: var(--money); font-variant-numeric: tabular-nums; }
.mk-wd__method { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding: 10px 12px; border-radius: 10px; background: var(--fill-1); font-size: 13px; color: var(--text-2); }
.mk-wd__note { margin-top: 12px; font-size: 12px; color: var(--text-3); }
.mk-wd__btn { margin-top: 18px; height: 40px; width: 100%; justify-content: center; font-size: 14px; animation: mk-press 4.8s var(--ease-out) infinite; }
.mk-wd__cursor { right: 30%; bottom: 8px; animation: mk-cursor 4.8s var(--ease-out) infinite; }
.mk-menu { width: 100%; max-width: 250px; height: 210px; overflow: hidden; border-radius: var(--r-xl); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border), var(--sh-3); -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
.mk-menu__track { padding: 8px; animation: mk-scrollup 16s linear infinite; }
@keyframes mk-scrollup { to { transform: translateY(-50%); } }
.mk-menu__label { font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; padding: 10px 10px 6px; }
.mk-menu__item { display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 10px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.mk-menu__item.is-on { background: var(--fill-2); color: var(--text); }
.mk-menu__item .i { color: var(--text-3); }
.mk-ring { position: relative; display: grid; place-items: center; }
.mk-ring svg { transform: rotate(-90deg); }
.mk-ring__bg { fill: none; stroke: var(--fill-3); stroke-width: 3; }
.mk-ring__arc { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 0; }
.mk-ring__text { position: absolute; font: 600 28px var(--font-display); letter-spacing: -0.02em; color: var(--accent-2); font-variant-numeric: tabular-nums; }
.mk-bars { display: flex; align-items: flex-end; gap: 8px; width: 100%; max-width: 300px; height: 170px; }
.mk-bars span { flex: 1; height: var(--h); border-radius: 6px 6px 3px 3px; background: var(--accent); opacity: calc(.35 + var(--h) / 160%); transform-origin: bottom; transform: scaleY(.1); transition: transform 900ms var(--ease-out) var(--d); }
.mk-tile--limit.is-in .mk-bars span { transform: none; }
.mk-pillrun { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.mk-pillrun__track { display: flex; width: max-content; animation: mk-marquee 22s linear infinite; }
.mk-statpill { display: inline-flex; flex-direction: column; gap: 2px; margin-right: 10px; padding: 12px 16px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); white-space: nowrap; }
.mk-statpill span { font-size: 11px; font-weight: 600; color: var(--text-3); }
.mk-statpill b { font: 600 18px var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mk-statpill--money b { color: var(--money); } .mk-statpill--info b { color: var(--info); } .mk-statpill--ok b { color: var(--success); }

/* ---------- Creators: sticky campaign types ---------- */
.mk-types { position: relative; height: 380vh; }
.mk-types__sticky { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); display: flex; align-items: center; overflow: hidden; }
.mk-types__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.mk-types__copy { position: relative; min-height: 220px; }
.mk-type { position: absolute; inset: 0 auto auto 0; display: flex; gap: 16px; font: 500 clamp(24px, 2.4vw, 32px)/1.3 var(--font-display); letter-spacing: -0.02em; color: var(--text-3); max-width: 520px; opacity: 0; transform: translateY(24px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.mk-type b { color: var(--text); font-weight: 600; }
.mk-type .i { width: 28px; height: 28px; margin-top: 4px; color: var(--text-2); flex: none; }
.mk-type.is-active, .mk-types:not(.is-live) .mk-type.is-first { opacity: 1; transform: none; }
.mk-types__cards { position: relative; height: 520px; }
.mk-typecards { position: absolute; inset: 0; opacity: 0; transition: opacity 500ms var(--ease-out); }
.mk-typecards.is-active, .mk-types:not(.is-live) .mk-typecards.is-first { opacity: 1; }
.mk-typecards__c { position: absolute; width: 300px; transition: transform 900ms var(--ease-drawer); }
.mk-typecards__c .card-campaign { box-shadow: var(--ring-card), var(--sh-4); }
.mk-typecards__c--1 { left: 4%; top: 2%; transform: rotate(-6deg) translateY(40px); }
.mk-typecards__c--2 { left: 42%; top: 12%; transform: rotate(4deg) translateY(60px); }
.mk-typecards__c--3 { left: 16%; top: 44%; transform: rotate(-2deg) translateY(80px); }
.mk-typecards.is-active .mk-typecards__c--1 { transform: rotate(-6deg); }
.mk-typecards.is-active .mk-typecards__c--2 { transform: rotate(4deg); }
.mk-typecards.is-active .mk-typecards__c--3 { transform: rotate(-2deg); }
@media (max-width: 1023px) {
  .mk-types { height: auto; padding-block: var(--section-y); }
  .mk-types__sticky { position: static; height: auto; overflow: visible; }
  .mk-types__grid { grid-template-columns: minmax(0, 1fr); }
  .mk-types__copy { min-height: 0; display: flex; flex-direction: column; }
  .mk-type { position: static; opacity: 1; transform: none; font-size: 20px; padding: 20px 0; border-bottom: 1px solid var(--border-subtle); }
  .mk-types__cards { display: none; }
}

/* ---------- Creators: illustrative stories ---------- */
.mk-stories__grid { columns: 2; column-gap: 20px; }
.mk-story { break-inside: avoid; margin-bottom: 20px; }
.mk-story__who { display: flex; align-items: center; gap: 12px; }
.mk-story__who > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; min-width: 0; font-size: 13px; color: var(--text-3); }
.mk-story__who b { font-size: 16px; color: var(--text); font-weight: 600; }
.mk-story__quote { font-size: 17px; line-height: 1.55; color: var(--text-2); }
.mk-story--cta { display: flex; flex-direction: column; gap: 20px; padding: 32px; border-radius: var(--r-lg); background: var(--grad-ember-card), var(--surface); box-shadow: var(--ring-card); }
.mk-story__ctatitle { font: 600 30px/1.1 var(--font-display); letter-spacing: -0.03em; }
@media (max-width: 767px) { .mk-stories__grid { columns: 1; } }

/* ---------- Agencies ---------- */
.mk-aghero { padding: 12px var(--gutter) 0; }
.mk-aghero__panel { position: relative; border-radius: 36px; background-color: var(--accent); color: var(--on-accent); overflow: hidden; padding: clamp(72px, 10vw, 140px) 0 clamp(56px, 8vw, 104px); isolation: isolate; }
.mk-aghero__panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(23, 19, 10, .22) 1.2px, transparent 1.6px); background-size: 14px 14px; -webkit-mask-image: radial-gradient(70% 90% at 70% 30%, #000, transparent 75%); mask-image: radial-gradient(70% 90% at 70% 30%, #000, transparent 75%); }
.mk-aghero__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.mk-aghero__title { font-size: clamp(40px, 6.4vw, 92px); line-height: .98; letter-spacing: -0.045em; color: var(--on-accent); max-width: 760px; margin-bottom: 36px; }
.mk-aghero__nots { display: flex; flex-direction: column; gap: 14px; font: 500 clamp(18px, 1.8vw, 24px)/1.3 var(--font-display); letter-spacing: -0.02em; padding-bottom: 8px; }
.mk-aghero__nots li { padding-top: 14px; border-top: 1px solid rgba(23, 19, 10, .18); }
.mk-aghero__side { display: flex; flex-direction: column; gap: 40px; }
/* hero visual: an agency login with its client workspaces, a dark card floating on the amber panel */
.mk-agcard { padding: 16px; border-radius: 20px; background: var(--bg); color: var(--text); box-shadow: 0 24px 60px rgba(23, 19, 10, .35), inset 0 0 0 1px var(--border); transform: rotate(-1.5deg); }
.mk-agcard__head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border-subtle); }
.mk-agcard__logo { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; color: #fff; background: var(--c); }
.mk-agcard__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mk-agcard__who b { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; }
.mk-agcard__who > span, .mk-agcard__name > span { font-size: 12px; color: var(--text-3); }
.mk-agcard__sw { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: var(--r-pill); background: var(--fill-2); font-size: 12px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.mk-agcard__list { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; }
.mk-agcard__row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; }
.mk-agcard__row.is-on { background: var(--fill-1); box-shadow: inset 0 0 0 1px var(--accent-border); }
.mk-agcard__glyph { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--fill-2); color: var(--text); }
.mk-agcard__name { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.mk-agcard__name b { font-size: 14px; font-weight: 600; }
.mk-agcard__paid { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-agcard__foot { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); font-size: 12px; color: var(--text-3); }
.mk-agcard__foot .c-money { font-weight: 600; }
@media (max-width: 767px) { .mk-aghero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } .mk-aghero__panel { border-radius: 24px; } .mk-aghero .btn { width: 100%; } .mk-agcard { display: none; } }
@media (prefers-reduced-motion: reduce) { .mk-agcard { transform: none; } }

.mk-statement__text { max-width: 1080px; margin: 0 auto; text-align: center; font: 600 clamp(28px, 4.6vw, 64px)/1.12 var(--font-display); letter-spacing: -0.035em; }
.mk-scribble { position: relative; white-space: nowrap; }
.mk-scribble svg { position: absolute; fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.mk-scribble svg path { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.4s var(--ease-out) .35s; }
.mk-statement__text.is-in .mk-scribble svg path { stroke-dashoffset: 0; }
.mk-scribble__spark { width: .5em; height: .5em; top: -.34em; right: -.3em; }
.mk-scribble__zig { left: 0; right: .2em; bottom: -.18em; width: calc(100% - .2em); height: .26em; }
.mk-scribble__line { left: 0; bottom: -.14em; width: 100%; height: .3em; }

.mk-std { position: relative; height: 240vh; }
.mk-std__sticky { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); overflow: hidden; display: flex; align-items: center; --q: calc(1 - var(--p, 0)); }
.mk-std__stage { position: relative; height: min(640px, 100%); display: grid; place-items: center; }
.mk-std__title { position: relative; z-index: 1; font-size: clamp(36px, 5.4vw, 76px); letter-spacing: -0.04em; text-align: center; filter: blur(calc(var(--q) * 10px)); opacity: calc(.25 + var(--p, 0) * .75); }
.mk-std__card { position: absolute; left: 50%; top: 50%; z-index: 2; width: min(460px, 42%); padding: 24px 26px; border-radius: var(--r-2xl); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border), var(--hi-top), var(--sh-4); --tx: 0px; --ty: 0px; --rot: 0deg;
  transform: translate(-50%, -50%) translate(calc(var(--tx) * var(--p, 0)), calc(var(--ty) * var(--p, 0) + var(--q) * 260px)) rotate(calc(var(--rot) * var(--q) + var(--rot) * .25)); }
.mk-std__card--1 { --tx: -270px; --ty: 170px; --rot: -8deg; }
.mk-std__card--2 { --tx: 270px; --ty: 170px; --rot: 5deg; }
.mk-std__card--3 { --tx: -270px; --ty: -175px; --rot: 4deg; }
.mk-std__card--4 { --tx: 270px; --ty: -175px; --rot: -5deg; }
.mk-std__card.is-amber { background: var(--accent); color: var(--on-accent); box-shadow: var(--sh-btn-accent), var(--sh-4); }
.mk-std__ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--fill-3); color: var(--text); }
.mk-std__card.is-amber .mk-std__ico { background: rgba(23, 19, 10, .14); color: var(--on-accent); }
.mk-std__ctitle { margin-top: 16px; font-size: 22px; }
.mk-std__card.is-amber .mk-std__ctitle { color: var(--on-accent); }
.mk-std__ctitle::after { content: ""; display: block; width: 28px; height: 2px; margin-top: 10px; border-radius: 2px; background: var(--accent); }
.mk-std__card.is-amber .mk-std__ctitle::after { background: var(--on-accent); }
.mk-std__ctext { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--text-3); }
.mk-std__card.is-amber .mk-std__ctext { color: rgba(23, 19, 10, .78); }
@media (max-width: 1023px) {
  .mk-std { height: auto; padding-block: var(--section-y); }
  .mk-std__sticky { position: static; height: auto; overflow: visible; display: block; }
  .mk-std__stage { height: auto; display: flex; flex-direction: column; gap: 16px; }
  .mk-std__title { filter: none; opacity: 1; margin-bottom: 16px; }
  .mk-std__card { position: static; width: 100%; transform: none; }
}

.mk-verified__top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center; margin-bottom: 56px; }
.mk-verified__title { font-size: clamp(40px, 6vw, 88px); letter-spacing: -0.045em; line-height: 1; }
.mk-bounce { display: inline-flex; }
.mk-bounce span { display: inline-block; animation: mk-bounce 1.6s var(--ease-out) infinite; }
.mk-bounce span:nth-child(2) { animation-delay: .12s; font-size: 1.03em; } .mk-bounce span:nth-child(3) { animation-delay: .24s; font-size: 1.06em; }
@keyframes mk-bounce { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-.12em); } }
.mk-verified__list { display: flex; flex-direction: column; gap: 14px; font-size: 20px; font-weight: 500; color: var(--text-2); }
.mk-verified__list li { display: flex; align-items: center; gap: 12px; }
.mk-verified__list .i { color: var(--accent); flex: none; }
.mk-apps { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-bottom: 48px; }
.mk-app-icon { position: relative; width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; color: #fff; background: var(--c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .08), var(--sh-3); transition: transform var(--dur-4) var(--ease-out); }
.mk-app-icon:hover { transform: translateY(-6px); }
.mk-app-icon .verified { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
@media (max-width: 767px) { .mk-verified__top { grid-template-columns: minmax(0, 1fr); } .mk-verified__list { font-size: 17px; } .mk-apps { gap: 16px; } .mk-app-icon { width: 60px; height: 60px; border-radius: 18px; } }

.mk-board__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mk-board__card { min-height: 300px; border-radius: 28px; padding: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; background-color: color-mix(in srgb, var(--c) 34%, var(--surface)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), var(--hi-top); }
.mk-board__logo { width: 96px; height: 96px; border-radius: 28px; display: grid; place-items: center; background: var(--c); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), var(--sh-3); margin-bottom: 16px; }
.mk-board__name { display: inline-flex; align-items: center; gap: 8px; font-size: 22px; }
.mk-board__proof { font-size: 16px; color: var(--text-on-media-2); font-variant-numeric: tabular-nums; }
@media (max-width: 1023px) { .mk-board__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .mk-board__grid { grid-template-columns: minmax(0, 1fr); } .mk-board__card { min-height: 240px; } }

.mk-emboss { display: grid; place-items: center; height: clamp(140px, 18vw, 260px); margin-bottom: 20px; border-radius: 28px; background-color: var(--accent); overflow: hidden; }
.mk-emboss span { font: 700 clamp(22px, 6.4vw, 92px)/1 var(--font-display); white-space: nowrap; letter-spacing: -0.045em; color: var(--accent); text-shadow: 0 -2px 1px rgba(255, 240, 200, .55), 0 3px 3px rgba(120, 70, 0, .45); text-align: center; padding: 0 16px; }
.mk-bento--agency { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-bento--agency .mk-tile { min-height: 400px; }
.mk-tile__line { padding: 0 32px 32px; font-size: 18px; line-height: 1.5; color: var(--text-3); }
.mk-tile__line b { color: var(--text); font-weight: 600; }
.mk-floaties { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 420px; }
.mk-floaties .mk-statpill { margin: 0; transform: rotate(var(--r)); box-shadow: inset 0 0 0 1px var(--border), var(--sh-3); animation: mk-bob 5s ease-in-out infinite; }
.mk-floaties .mk-statpill:nth-child(2) { animation-delay: .7s; } .mk-floaties .mk-statpill:nth-child(3) { animation-delay: 1.4s; } .mk-floaties .mk-statpill:nth-child(4) { animation-delay: 2.1s; }
.mk-linechart { width: 100%; max-width: 440px; height: 200px; overflow: visible; }
.mk-linechart__area { fill: rgba(255, 176, 32, .14); }
.mk-linechart__line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mk-linechart__dot { fill: var(--accent); stroke: var(--surface); stroke-width: 3; }
.mk-rollt { width: 100%; max-width: 420px; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border), var(--sh-3); overflow: hidden; font-size: 13px; }
.mk-rollt__head, .mk-rollt__row { display: grid; grid-template-columns: minmax(0, 1.6fr) 1fr 1fr; gap: 8px; padding: 0 16px; align-items: center; }
.mk-rollt__head { height: 36px; font-size: 12px; color: var(--text-3); background: var(--fill-1); border-bottom: 1px solid var(--border-subtle); }
.mk-rollt__head span:not(:first-child), .mk-rollt__row span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.mk-rollt__body { height: 200px; overflow: hidden; }
.mk-rollt__track { animation: mk-scrollup 14s linear infinite; }
.mk-rollt__row { height: 44px; border-bottom: 1px solid var(--border-subtle); font-weight: 500; }
.mk-rollt__row span:first-child { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; }
.mk-models3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 440px; }
.mk-models3__t { display: flex; flex-direction: column; gap: 4px; padding: 16px; min-height: 150px; border-radius: 18px; color: var(--on-accent); justify-content: flex-end; }
.mk-models3__t .i { margin-bottom: auto; }
.mk-models3__t b { font: 600 20px var(--font-display); letter-spacing: -0.02em; }
.mk-models3__t span { font-size: 12px; font-weight: 600; opacity: .72; }
.mk-models3__t--cpm { background: var(--model-cpm); } .mk-models3__t--retainer { background: var(--model-retainer); } .mk-models3__t--per_post { background: var(--model-per-post); }
@media (max-width: 767px) { .mk-bento--agency { grid-template-columns: minmax(0, 1fr); } .mk-bento--agency .mk-tile { min-height: 0; } .mk-tile__line { padding: 0 24px 28px; font-size: 16px; } .mk-models3__t { min-height: 120px; padding: 12px; } .mk-models3__t b { font-size: 16px; white-space: nowrap; } }

/* ---------- Pricing ---------- */
.mk-price-hero { padding-bottom: clamp(48px, 7vw, 88px); }
.mk-price-hero__title { font-size: clamp(44px, 6.4vw, 88px); letter-spacing: -0.04em; line-height: 1; }
.mk-audience { display: flex; max-width: 420px; margin: 56px auto 0; border-bottom: 1px solid var(--border); }
.mk-audience__tab { position: relative; flex: 1; padding: 0 12px 16px; font: 500 20px/1.2 var(--font-ui); letter-spacing: -0.02em; color: var(--text-3); transition: color var(--dur-2); }
.mk-audience__tab + .mk-audience__tab::before { content: ""; position: absolute; left: 0; top: 2px; height: 22px; width: 1px; background: var(--border); }
.mk-audience__tab:hover { color: var(--text-3); }
.mk-audience__tab[aria-current="page"] { color: var(--text); }
.mk-audience__tab[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px; }
.mk-ticket { position: relative; max-width: 600px; margin: 48px auto 0; padding: 56px 32px 72px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); border-radius: 24px 24px 0 0;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 14px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 22px 14px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 14px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 22px 14px repeat-x; }
.mk-ticket__big { font: 600 clamp(40px, 5vw, 60px)/1 var(--font-display); letter-spacing: -0.035em; }
.mk-ticket__sub { margin-top: 16px; font-size: 18px; font-weight: 500; color: var(--text-3); }
.mk-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; margin-top: 40px; font-size: 15px; color: var(--text-3); }
.mk-trust b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 4px; }
.mk-ptable { max-width: 900px; margin: 0 auto; }
.mk-ptable .pricing-table { grid-template-rows: repeat(var(--rows), auto); padding-top: 28px; }
.mk-ptable__row { display: contents; }
.mk-ptable__row > * { grid-row: var(--r); }
.mk-ptable__row > :nth-child(1) { grid-column: 1; } .mk-ptable__row > :nth-child(2) { grid-column: 2; } .mk-ptable__row > :nth-child(3) { grid-column: 3; }
.mk-ptable .pricing-table__featured { grid-row: 1 / -1; margin: -44px 6px -8px; }
.mk-ptable__head { min-height: 72px; font-size: 19px; }
.mk-ptable__row:last-child > .pricing-table__cell { border-bottom: 0; }
.mk-ptable__seal { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); box-shadow: 0 0 0 1px var(--border); }
.mk-ptable__seal .verified { width: 22px; height: 22px; }
.mk-ptable__tail { display: block; width: 70%; height: 48px; margin: 0 auto; fill: none; stroke: var(--border-strong); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.mk-compare__note { max-width: 640px; margin: 32px auto 0; text-align: center; font-size: 14px; color: var(--text-3); }
.mk-cta__calc { width: min(360px, 100%); padding: 24px; border-radius: var(--r-xl); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border), var(--sh-4); transform: rotate(2deg); }
.mk-cta__calck { font-size: 13px; font-weight: 500; color: var(--text-3); margin-bottom: 12px; }
.mk-cta__calcrow { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); font-size: 15px; color: var(--text-2); }
.mk-cta__calcrow b { color: var(--text); font-variant-numeric: tabular-nums; }
.mk-cta__calcrow b.c-money { color: var(--money); }
.mk-cta__calcrow--total { border-bottom: 0; font-weight: 600; color: var(--text); }
.mk-cta__calcrow--total b { font: 600 24px var(--font-display); letter-spacing: -0.02em; }
.mk-logos-sec { padding-top: clamp(24px, 4vw, 48px); }
@media (max-width: 767px) {
  .mk-ticket { padding: 40px 20px 56px; }
  .mk-ptable__head { min-height: 56px; font-size: 14px; }
  .mk-ptable .pricing-table__featured { margin: -40px 2px -4px; }
  .mk-audience__tab { font-size: 17px; }
}

/* ---------- Launch a campaign ---------- */
.mk-lhero { padding: clamp(56px, 8vw, 96px) 0 40px; text-align: center; background: var(--grad-ember-hero); }
.mk-lhero__title { font-size: clamp(40px, 5.4vw, 72px); letter-spacing: -0.04em; }
.mk-lhero__lead { margin: 16px auto 0; max-width: 560px; }
/* ---------- Changelog ---------- */
.mk-log { max-width: 880px; display: flex; flex-direction: column; }
.mk-log__entry { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 32px; padding: 40px 0; border-top: 1px solid var(--border-subtle); scroll-margin-top: calc(var(--nav-h) + 24px); }
.mk-log__entry:first-child { border-top: 0; padding-top: 0; }
.mk-log__date { font: 500 13px var(--font-mono); color: var(--text-3); padding-top: 8px; }
.mk-log__title { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.02em; }
.mk-log__items { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.mk-log__item { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.mk-log__who { justify-self: start; }
.mk-log__more { margin-top: 16px; padding-top: 32px; border-top: 1px solid var(--border-subtle); font-size: 15px; color: var(--text-3); }
.mk-log__ask { font: inherit; padding: 0; background: none; }
@media (max-width: 767px) {
  .mk-log__entry { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 32px 0; }
  .mk-log__date { padding-top: 0; }
  .mk-log__item { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
.mk-lhero__ctas { margin-top: 24px; }
.mk-wt-sec { padding-bottom: var(--section-y); }
.mk-wt { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.mk-wt__player { position: sticky; top: calc(var(--nav-h) + 24px); }
.mk-wt__stage { position: relative; border-radius: var(--r-2xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), var(--sh-4); overflow: hidden; outline-offset: 4px; }
.mk-wt__bar { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 18px; border-bottom: 1px solid var(--border-subtle); }
.mk-wt__bar .logo__word { font-size: 15px; }
.mk-wt__tag { font: 500 12px var(--font-mono); letter-spacing: .06em; color: var(--text-3); }
.mk-wt__panel { animation: mk-panel-in 420ms var(--ease-out); }
.mk-wt__screen { height: 380px; display: flex; flex-direction: column; background: var(--bg-sunken); }
.mk-wt__cap { display: flex; gap: 12px; padding: 16px 20px; min-height: 84px; font-size: 15px; line-height: 1.5; color: var(--text-2); border-top: 1px solid var(--border-subtle); }
.mk-wt__cap b { font: 500 13px var(--font-mono); color: var(--accent-2); padding-top: 2px; }
.mk-wt__poster { position: absolute; inset: 52px 0 0; display: grid; place-items: center; background: rgba(10, 10, 13, .55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.mk-wt__controls { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.mk-wt__track { flex: 1; height: 4px; margin-left: 8px; border-radius: var(--r-pill); background: var(--fill-3); overflow: hidden; }
.mk-wt__track span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; }
.mk-wt__ico-pause, .mk-wt__ico-replay { display: none; }
[data-wt-play].is-playing .mk-wt__ico-play { display: none; }
[data-wt-play].is-playing .mk-wt__ico-pause { display: inline-block; }
.is-ended [data-wt-play] .mk-wt__ico-play { display: none; }
.is-ended [data-wt-play] .mk-wt__ico-replay { display: inline-block; }
.mk-wt__ico-play, .mk-wt__ico-pause { fill: currentColor; stroke: none; }
.mk-chapters { display: flex; flex-direction: column; }
.mk-chapter { position: relative; display: flex; gap: 16px; width: 100%; padding: 16px 16px 16px 20px; text-align: left; border-bottom: 1px solid var(--border-subtle); border-radius: 0; transition: background-color var(--dur-2); }
.mk-chapter::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--accent); opacity: 0; transition: opacity var(--dur-3); }
.mk-chapter:hover { background: var(--fill-1); }
.mk-chapter.is-active::before { opacity: 1; }
.mk-chapter__num { font: 500 13px/1.6 var(--font-mono); color: var(--text-3); font-variant-numeric: tabular-nums; }
.mk-chapter.is-active .mk-chapter__num { color: var(--accent-2); }
.mk-chapter__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mk-chapter__title { font-size: 16px; font-weight: 500; color: var(--text-2); }
.mk-chapter.is-active .mk-chapter__title { color: var(--text); font-weight: 600; }
.mk-chapter__desc { display: none; font-size: 14px; line-height: 1.5; color: var(--text-3); }
.mk-chapter.is-active .mk-chapter__desc { display: block; }
.mk-wt__ctas { margin-top: 28px; gap: 20px; }
@media (max-width: 1023px) {
  .mk-wt { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .mk-wt__player { position: static; }
  .mk-wt__ctas { display: none; }
}
@media (max-width: 767px) { .mk-wt__cap { font-size: 14px; } }

/* Wizard mockups inside the walkthrough */
.mk-wiz__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--border-subtle); background: var(--surface); flex: none; }
.mk-wiz__back { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--text-3); }
.mk-wiz__step { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-3); min-width: 0; }
/* the step label wraps to a second line instead of cutting a word off */
.mk-wiz__step b { color: var(--text); font-weight: 600; line-height: 1.3; text-align: right; max-width: 200px; }
.mk-wiz__track { width: 90px; height: 4px; border-radius: 4px; background: var(--fill-3); overflow: hidden; }
.mk-wiz__track span { display: block; height: 100%; background: var(--accent); }
.mk-wiz__pct { font-variant-numeric: tabular-nums; width: 32px; text-align: right; }
/* safe: content taller than the screen starts at the top rather than spilling past both edges */
.mk-wiz__body { flex: 1; min-height: 0; display: grid; place-items: safe center; padding: 20px; overflow: hidden; }
.mk-wiz__modal, .mk-wiz__form, .mk-wiz__fund { width: 100%; max-width: 520px; }
.mk-wiz__modal { padding: 20px; border-radius: var(--r-xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), var(--sh-3); }
.mk-wiz__h { font: 600 18px var(--font-display); letter-spacing: -0.015em; }
.mk-wiz__sub { font-size: 13px; color: var(--text-3); margin: 4px 0 16px; }
.mk-wiz__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.mk-wiz__form { display: flex; flex-direction: column; gap: 14px; }
.mk-wiz__form .field__label { font-size: 12px; }
.mk-wiz__two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mk-wiz__three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mk-wiz__access { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
.mk-wiz__choice { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: var(--fill-1); box-shadow: inset 0 0 0 1px var(--border-subtle); font-size: 12px; color: var(--text-3); }
.mk-wiz__choice b { font-size: 13px; color: var(--text); }
.mk-wiz__choice.is-on { background: var(--accent-softer); box-shadow: inset 0 0 0 1px var(--accent-border); }
.mk-wiz__plats { display: flex; align-items: center; gap: 8px; }
.mk-wiz__hint { font-size: 12px; color: var(--text-3); margin-left: 6px; }
.mk-wiz__rules { gap: 8px; }
.mk-wiz__rule { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-subtle); font-size: 14px; font-weight: 500; }
.mk-wiz__sw { pointer-events: none; }
.mk-wiz__summary { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: center; width: 100%; max-width: 540px; }
.mk-wiz__card .card-campaign { pointer-events: none; }
.mk-wiz__dl { display: flex; flex-direction: column; font-size: 13px; }
.mk-wiz__dl div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-subtle); }
.mk-wiz__dl dt { color: var(--text-3); }
.mk-wiz__dl dd { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.mk-wiz__dl .is-total dd { color: var(--text); font-size: 15px; }
.mk-wiz__fund { display: flex; flex-direction: column; gap: 12px; }
.mk-wiz__fund .mk-wiz__dl div { padding: 6px 0; }
.mk-wiz__go { align-self: flex-end; height: 36px; font-size: 13px; }
@media (max-width: 767px) {
  /* phones show the card itself: that is what this step is about */
  .mk-wiz__summary { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .mk-wiz__summary .mk-wiz__card { width: 230px; }
  .mk-wiz__summary .mk-wiz__dl { display: none; }
  .mk-wiz__step b { max-width: none; }
  .mk-wiz__three { grid-template-columns: 1fr 1fr; }
  .mk-wiz__three > :last-child { display: none; }
  .mk-wiz__track, .mk-wiz__pct { display: none; }
  .mk-wiz__access { grid-template-columns: minmax(0, 1fr); }
  .mk-wiz__access .mk-wiz__choice:nth-child(3) { display: none; }
  .mk-wiz__fund .mk-wiz__access { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-wiz__body { padding: 14px; }
}

.mk-eyebrow-c { display: flex; justify-content: center; margin-bottom: 32px; }
.mk-explain__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
/* the help block's list is much taller than its heading: keep the heading at the top, next to the first rows */
.mk-helpblock .mk-explain__grid { align-items: start; }
.mk-explain__title { font-size: clamp(30px, 3.4vw, 44px); margin-top: 16px; max-width: 520px; }
.mk-explain__copy { margin-top: 20px; display: flex; flex-direction: column; gap: 14px; font-size: 16px; line-height: 1.6; color: var(--text-3); max-width: 540px; }
.mk-explain__logos { display: flex; align-items: center; justify-content: center; gap: 32px; min-height: 220px; border-radius: var(--r-2xl); background: var(--surface); box-shadow: var(--ring-card); }
.mk-explain__lock { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; font: 600 20px var(--font-display); letter-spacing: -0.02em; color: var(--text); }
.mk-explain__lock .i { color: var(--text); }
/* Two matching app tiles. The RaveClip PNG has a dark margin round its tile, so it is cropped to the tile, and the
   RaveRewards tile takes the same fill (#1A1A21, sampled from the PNG) so both marks read at the same size. */
.mk-explain__tile { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; overflow: hidden; background: #1A1A21; }
.mk-explain__tile img { display: block; width: 100%; height: 100%; transform: scale(1.56); }
.mk-explain__div { width: 1px; height: 96px; background: var(--border-strong); }
.mk-helplist { display: flex; flex-direction: column; border-top: 1px solid var(--border-subtle); }
.mk-helplist__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 4px; border-bottom: 1px solid var(--border-subtle); }
.mk-helplist__row > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mk-helplist__row b { font-size: 16px; font-weight: 600; color: var(--text-2); transition: color var(--dur-2); }
.mk-helplist__row > span > span { font-size: 13px; color: var(--text-3); }
.mk-helplist__row .i { color: var(--text-3); flex: none; transition: transform var(--dur-3) var(--ease-out), color var(--dur-2); }
.mk-helplist__row:hover b { color: var(--text); }
.mk-helplist__row:hover .i { transform: translateX(4px); color: var(--text); }
.mk-lquote__card { border-radius: 32px; padding: clamp(40px, 6vw, 80px) clamp(24px, 6vw, 80px); background: var(--grad-ember-hero), var(--surface); box-shadow: var(--ring-card); text-align: center; }
.mk-lquote__text { font: 500 clamp(24px, 3vw, 40px)/1.2 var(--font-display); letter-spacing: -0.025em; max-width: 900px; margin: 0 auto; }
.mk-lquote__card .quote-by { justify-content: center; text-align: left; }
.mk-lquote__card .quote-by > span { display: flex; flex-direction: column; }
@media (max-width: 1023px) { .mk-explain__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* ---------- Book a demo ---------- */
.dm-hero { padding: clamp(48px, 7vw, 96px) 0 var(--section-y); background: var(--grad-ember-hero); }
.dm-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 64px; align-items: start; }
.dm-hero__title { font-size: clamp(40px, 5vw, 64px); letter-spacing: -0.04em; }
.dm-hero__lead { margin-top: 20px; max-width: 480px; }
.dm-logos { margin-top: 48px; }
.dm-logos .logo-cloud { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: start; gap: 28px 24px; }
.dm-logos .mk-logos__cap { text-align: left; }
.dm-card { position: relative; padding: 24px; border-radius: var(--r-2xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), var(--sh-4); }
.dm-steps { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: 14px; font-weight: 500; color: var(--text-3); }
.dm-steps__item { display: inline-flex; align-items: center; gap: 8px; }
.dm-steps__item.is-active { color: var(--text); }
.dm-steps__n { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--border-strong); }
.dm-steps__item.is-active .dm-steps__n { background: var(--text); color: var(--bg); box-shadow: none; }
.dm-steps__item.is-done .dm-steps__n { background: var(--success-soft); color: var(--success); box-shadow: none; }
.dm-steps__sep { display: inline-flex; color: var(--text-4); }
.dm-form { gap: 16px; }
.dm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dm-actions { display: flex; justify-content: flex-end; margin-top: 4px; }
.dm-actions--split { justify-content: space-between; }
.dm-alert { margin-bottom: 16px; }
.dm-plats { margin: 0; padding: 0; }
.dm-plats legend { margin-bottom: 8px; }
.dm-chip { cursor: pointer; }
.dm-chip:has(input:checked) { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-border); color: var(--accent-2); }
.dm-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.dm-creator { padding: 8px 0 0; }
.dm-creator__title { font-size: 24px; }
.dm-creator__lead { margin: 8px 0 18px; font-size: 15px; color: var(--text-3); }
.dm-creator__steps { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.dm-creator__steps li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--text-2); }
.dm-creator__steps span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-2); font-size: 13px; font-weight: 700; flex: none; }
.dm-done { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 8px 0; }
.dm-done__ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--success-soft); color: var(--success); }
.dm-done__title { font-size: 26px; }
.dm-done__lead { font-size: 15px; color: var(--text-3); }
.dm-done__lead b { color: var(--text); }
.dm-done__list { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 12px; }
.dm-done__list li { display: flex; gap: 10px; font-size: 14px; color: var(--text-2); }
.dm-done__list .i { color: var(--text-3); margin-top: 2px; flex: none; }
.dm-legal { margin-top: 16px; font-size: 12px; color: var(--text-3); }
.dm-legal .link { color: var(--text-3); }
@media (max-width: 1023px) { .dm-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } .dm-logos { display: none; } }
@media (max-width: 479px) { .dm-two { grid-template-columns: minmax(0, 1fr); } .dm-card { padding: 20px 16px; } }

.dm-tl { position: relative; max-width: 960px; margin: 0 auto; padding: 24px 0; --tl: 0; }
.dm-tl__rail { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; border-radius: 4px; background: var(--fill-3); overflow: hidden; }
.dm-tl__fill { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--tl) * 100%); background: var(--accent); border-radius: inherit; }
.dm-tl__item { position: relative; width: calc(50% - 48px); padding: 40px 0; opacity: .32; transition: opacity 500ms var(--ease-out); }
.dm-tl__item.is-lit { opacity: 1; }
.dm-tl__item--right { margin-left: auto; }
.dm-tl__item--left { text-align: right; }
.dm-tl__dot { position: absolute; top: 52px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 3px var(--fill-5); transition: box-shadow 400ms var(--ease-out); }
.dm-tl__item--left .dm-tl__dot { right: -56px; } .dm-tl__item--right .dm-tl__dot { left: -56px; }
.dm-tl__item.is-lit .dm-tl__dot { box-shadow: inset 0 0 0 3px var(--accent), var(--glow-accent); }
.dm-tl__title { font-size: clamp(26px, 3vw, 40px); }
.dm-tl__text { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--text-3); }
@media (max-width: 767px) {
  .dm-tl__rail { left: 8px; }
  .dm-tl__item, .dm-tl__item--right { width: auto; margin-left: 40px; text-align: left; padding: 28px 0; }
  .dm-tl__item--left .dm-tl__dot, .dm-tl__item--right .dm-tl__dot { left: -40px; right: auto; top: 38px; }
}
.dm-horizon { position: relative; height: 280px; display: grid; place-items: end center; overflow: hidden; }
.dm-horizon::before { content: ""; position: absolute; left: 50%; bottom: -520px; width: 1400px; height: 640px; transform: translateX(-50%); border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255, 203, 92, .55), 0 -30px 80px rgba(255, 176, 32, .25); background: var(--bg-sunken); }
.dm-horizon__line { position: absolute; top: 0; left: 50%; width: 2px; height: 90px; margin-left: -1px; background: var(--accent); -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.dm-horizon__tile { position: relative; margin-bottom: 72px; width: 132px; height: 132px; border-radius: 34px; display: grid; place-items: center; background: #15151B; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 60px rgba(0, 0, 0, .6), 0 0 80px rgba(255, 176, 32, .22); }

/* ---------- Brand kit ---------- */
.bk-banner { padding-top: 16px; }
.bk-banner__panel { position: relative; border-radius: 32px; padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px); background-color: var(--accent); color: var(--on-accent); overflow: hidden; }
.bk-banner__panel::after { content: ""; position: absolute; right: -60px; top: -40px; width: 380px; height: 380px; border-radius: 50%; box-shadow: inset 0 0 0 40px rgba(23, 19, 10, .06), inset 0 0 0 110px rgba(23, 19, 10, .04); pointer-events: none; }
.bk-banner__mark { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: #0E0E12; }
.bk-banner__title { margin-top: 32px; font-size: clamp(48px, 9vw, 140px); line-height: .9; letter-spacing: -0.05em; color: var(--on-accent); }
.bk-banner__lead { margin-top: 24px; max-width: 560px; font: 500 clamp(17px, 1.6vw, 21px)/1.45 var(--font-ui); color: rgba(23, 19, 10, .8); }
.bk-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; padding-top: 56px; padding-bottom: var(--section-y); }
.bk-side { position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; display: flex; flex-direction: column; gap: 24px; }
.bk-nav ol { display: flex; flex-direction: column; }
.bk-nav__link { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); font-size: 14px; font-weight: 600; color: var(--text-2); transition: color var(--dur-2); }
.bk-nav__link:hover { color: var(--text); }
.bk-nav__num { font: 500 12px var(--font-mono); color: var(--text-3); }
.bk-nav__link[aria-current="true"] { color: var(--text); border-bottom-color: var(--accent); }
.bk-nav__link[aria-current="true"] .bk-nav__num { color: var(--accent); }
.bk-content { min-width: 0; display: flex; flex-direction: column; gap: 96px; }
.bk-sec { scroll-margin-top: calc(var(--nav-h) + 24px); }
.bk-sec__num { font: 500 13px var(--font-mono); color: var(--accent-2); letter-spacing: .06em; }
.bk-sec__title { margin-top: 8px; font-size: clamp(32px, 4vw, 52px); }
.bk-sec__lead { margin-top: 14px; max-width: 680px; font-size: 17px; line-height: 1.6; color: var(--text-3); }
.bk-sec__lead--big { font: 500 clamp(20px, 2vw, 26px)/1.4 var(--font-display); letter-spacing: -0.015em; color: var(--text-2); }
.bk-sub { margin-top: 48px; font-size: 22px; }
.bk-p { margin-top: 10px; max-width: 640px; font-size: 15px; line-height: 1.6; color: var(--text-3); }
.bk-note { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; color: var(--text-3); }
.bk-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.bk-logo { position: relative; min-height: 220px; border-radius: var(--r-2xl); display: grid; place-items: center; padding: 24px; box-shadow: var(--ring-card); }
.bk-logo--dark { background: var(--surface); }
.bk-logo--amber { background: var(--accent); color: var(--on-accent); }
.bk-logo--amber .logo__word { color: var(--on-accent); }
.bk-logo--light { background: #F5F5F7; }
.bk-logo--light .logo__word { color: #0E0E12; }
.bk-logo-dl { margin-top: 16px; gap: 8px; }
/* per panel logo downloads, top right, well clear of the caption at the bottom */
.bk-logo__dl { position: absolute; right: 14px; top: 14px; display: flex; gap: 6px; }
.bk-logo__file { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border-radius: var(--r-pill); font: 600 11px var(--font-ui); letter-spacing: .02em; color: var(--text-2); background: var(--fill-2); transition: background-color var(--dur-2), color var(--dur-2); }
.bk-logo__file:hover { color: var(--text); background: var(--fill-3); }
.bk-logo--light .bk-logo__file { color: #2A2A33; background: rgba(14, 14, 18, .08); }
.bk-logo--light .bk-logo__file:hover { color: #0E0E12; background: rgba(14, 14, 18, .14); }
.bk-logo--amber .bk-logo__file { color: var(--on-accent); background: rgba(23, 19, 10, .12); }
.bk-logo__cap { position: absolute; left: 20px; bottom: 16px; font-size: 12px; font-weight: 500; color: var(--text-3); }
.bk-logo--amber .bk-logo__cap { color: rgba(23, 19, 10, .7); } .bk-logo--light .bk-logo__cap { color: #6E6E7C; }
.bk-mono path { fill: #17130A !important; stroke: #17130A !important; }
.bk-marks { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px; margin-top: 24px; }
.bk-mark { display: flex; flex-direction: column; align-items: center; gap: 10px; font: 500 12px var(--font-mono); color: var(--text-3); }
.bk-mark__tile { display: grid; place-items: center; width: calc(var(--s) * 1.6 + 16px); height: calc(var(--s) * 1.6 + 16px); border-radius: 18%; background: var(--surface); box-shadow: var(--ring-card); }
.bk-donts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.bk-dont { display: flex; flex-direction: column; gap: 10px; }
.bk-dont__art { height: 120px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--surface); box-shadow: var(--ring-card); overflow: hidden; }
.bk-dont__art .logo { font-size: 14px; }
.bk-dont__art--busy { background: url('../brand/poster-fallback-640.jpg') center / cover; }
.bk-recolour .logo__word { color: #6AA9FF; }
.bk-recolour .bk-mono path { fill: #C084FC !important; stroke: #C084FC !important; }
.bk-dont__cap { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-3); }
.bk-dont__cap .i { color: var(--danger); }
.bk-clear { margin-top: 32px; padding: 56px 24px; border-radius: var(--r-2xl); background: var(--surface); box-shadow: var(--ring-card); display: grid; place-items: center; }
.bk-clear__box { position: relative; padding: 36px 44px; outline: 1px dashed rgba(255, 176, 32, .6); outline-offset: 0; box-shadow: inset 0 0 0 36px rgba(255, 176, 32, .06); }
.bk-clear__x { position: absolute; font: 600 12px var(--font-mono); color: var(--accent-2); }
.bk-clear__x--t { top: 10px; left: 50%; } .bk-clear__x--b { bottom: 10px; left: 50%; } .bk-clear__x--l { left: 14px; top: 50%; transform: translateY(-50%); } .bk-clear__x--r { right: 14px; top: 50%; transform: translateY(-50%); }
.bk-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 32px; }
.bk-swatch { border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--ring-card); overflow: hidden; }
.bk-swatch__chip { height: 132px; padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; background: var(--sw); color: #F5F5F7; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.bk-swatch.is-light .bk-swatch__chip { color: #0E0E12; }
.bk-swatch__chip b { font-size: 15px; font-weight: 600; }
.bk-swatch__chip span { font-size: 12px; opacity: .78; }
.bk-swatch__vals { padding: 10px 12px; display: flex; flex-direction: column; }
.bk-swatch__vals div { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.bk-swatch__vals dt { font: 500 11px var(--font-mono); color: var(--text-3); }
.bk-copy { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 6px; font: 500 12px var(--font-mono); color: var(--text-2); transition: background-color var(--dur-2), color var(--dur-2); }
.bk-copy .i { opacity: 0; transition: opacity var(--dur-2); }
.bk-copy:hover, .bk-copy:focus-visible { background: var(--fill-2); color: var(--text); }
.bk-copy:hover .i, .bk-copy:focus-visible .i { opacity: 1; }
.bk-gradient { display: flex; justify-content: space-between; align-items: flex-end; height: 160px; margin-top: 20px; padding: 16px 20px; border-radius: var(--r-2xl); background: var(--grad-molten); font: 600 12px var(--font-mono); color: var(--on-accent); }
.bk-fonts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.bk-font { display: flex; gap: 24px; padding: 28px; border-radius: var(--r-2xl); background: var(--surface); box-shadow: var(--ring-card); }
.bk-font__aa { font: 600 88px/1 var(--font-display); letter-spacing: -0.04em; }
.bk-font__aa--ui { font-family: var(--font-ui); font-weight: 600; letter-spacing: -0.03em; }
.bk-font b { display: block; font-size: 18px; }
.bk-font > div > span { display: block; margin-top: 4px; font-size: 13px; color: var(--text-3); }
.bk-font p { margin-top: 14px; font-size: 13px; line-height: 1.6; color: var(--text-2); word-break: break-all; }
.bk-font--display p { font-family: var(--font-display); }
.bk-hier { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); margin-top: 16px; border-radius: var(--r-2xl); background: var(--surface); box-shadow: var(--ring-card); overflow: hidden; }
.bk-hier__demo { padding: 36px; }
.bk-hier__h { font: 600 40px/1.05 var(--font-display); letter-spacing: -0.035em; }
.bk-hier__p { margin-top: 12px; font-size: 16px; color: var(--text-2); }
.bk-hier__btn { margin-top: 20px; height: 40px; padding: 0 18px; font-size: 14px; }
.bk-hier__notes { display: flex; flex-direction: column; justify-content: space-around; padding: 36px 28px; border-left: 1px solid var(--border-subtle); font-size: 13px; font-weight: 600; color: var(--accent-2); }
.bk-hier__notes li { display: flex; align-items: center; gap: 12px; }
.bk-hier__notes i { width: 40px; height: 1px; background: var(--accent-border); }
.bk-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin-top: 32px; }
.bk-icon { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 8px 14px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--ring-card); font: 500 11px var(--font-mono); color: var(--text-3); }
.bk-icon .i { color: var(--text); }
.bk-icon .verified { width: 24px; height: 24px; }
.bk-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.bk-principle { padding: 24px; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--ring-card); }
.bk-pill { display: inline-flex; height: 26px; align-items: center; padding: 0 10px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--accent-border); color: var(--accent-2); font-size: 12px; font-weight: 600; }
.bk-principle p { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--text-3); }
.bk-dodont { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.bk-do, .bk-dont2 { padding: 24px; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--ring-card); display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.bk-do__k { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.bk-do .bk-do__k { color: var(--success); } .bk-dont2 .bk-do__k { color: var(--danger); }
.bk-dont2 p:not(.bk-do__k) { color: var(--text-3); }
.bk-files { display: flex; flex-direction: column; margin-top: 28px; border-radius: var(--r-2xl); background: var(--surface); box-shadow: var(--ring-card); overflow: hidden; }
.bk-file { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--border-subtle); }
.bk-file:last-child { border-bottom: 0; }
.bk-file__ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--fill-2); color: var(--text-2); flex: none; }
.bk-file--all .bk-file__ico { background: var(--accent-soft); color: var(--accent-2); }
.bk-file__txt { flex: 1; display: flex; flex-direction: column; min-width: 0; font-size: 13px; color: var(--text-3); }
.bk-file__txt b { font-size: 15px; color: var(--text); font-weight: 600; }
.bk-updated { margin-top: 24px; font-size: 13px; color: var(--text-3); }
@media (max-width: 1023px) {
  .bk-layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; }
  .bk-side { position: sticky; top: var(--nav-h); z-index: 5; margin: 0 calc(var(--gutter) * -1); padding: 12px var(--gutter); background: var(--bg); border-bottom: 1px solid var(--border-subtle); flex-direction: row; }
  .bk-side { align-items: center; gap: 10px; }
  .bk-side__dl { flex: none; width: 36px; height: 36px; padding: 0; justify-content: center; }
  .bk-side__dl span { display: none; }
  .bk-nav { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .bk-nav ol { flex-direction: row; gap: 6px; }
  .bk-nav__link { white-space: nowrap; padding: 8px 12px; border: 0; border-radius: var(--r-pill); background: var(--fill-2); font-size: 13px; }
  .bk-nav__link[aria-current="true"] { background: var(--accent-soft); color: var(--accent-2); }
  .bk-content { padding-top: 48px; gap: 72px; }
  .bk-logos, .bk-principles, .bk-dodont, .bk-fonts { grid-template-columns: minmax(0, 1fr); }
  .bk-donts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-hier { grid-template-columns: minmax(0, 1fr); }
  .bk-hier__notes { border-left: 0; border-top: 1px solid var(--border-subtle); gap: 10px; }
}
@media (max-width: 479px) { .bk-font { flex-direction: column; gap: 12px; } .bk-file { flex-wrap: wrap; } .bk-file__txt { flex: 1 1 200px; } .bk-file .btn { margin-left: 56px; } .bk-clear__box { padding: 32px 28px; } .bk-clear__box .logo--lg .logo__word { font-size: 18px; } }

/* ---------- Help centre ---------- */
.hc-hero { padding: clamp(56px, 8vw, 96px) 0 48px; text-align: center; background: var(--grad-ember-hero); }
.hc-hero__title { font-size: clamp(40px, 5.4vw, 64px); letter-spacing: -0.04em; }
.hc-hero__lead { margin: 16px auto 0; max-width: 560px; }
.hc-search { margin-top: 32px; }
.hc-search input { height: 56px; font-size: 16px; }
.hc-hero__popular { margin-top: 16px; font-size: 13px; color: var(--text-3); }
.hc-hero__popular a { font-size: 13px; margin-left: 4px; }
.hc-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.hc-cat { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 14px; row-gap: 4px; padding: 20px; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--ring-card); transition: background-color var(--dur-2), box-shadow var(--dur-2); }
.hc-cat:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-strong); }
.hc-cat__ico { grid-row: 1 / span 3; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--fill-2); color: var(--text); }
.hc-cat__t { font: 600 17px var(--font-display); letter-spacing: -0.01em; }
.hc-cat__d { font-size: 13px; line-height: 1.45; color: var(--text-3); }
.hc-cat__n { font-size: 12px; font-weight: 600; color: var(--text-3); margin-top: 6px; }
.hc-list { display: flex; flex-direction: column; gap: 48px; padding-block: 64px var(--section-y); max-width: calc(var(--container-narrow) + 200px + 2 * var(--gutter)); }
.hc-group { scroll-margin-top: calc(var(--nav-h) + 24px); }
.hc-group__title { display: flex; align-items: center; gap: 10px; font-size: 24px; margin-bottom: 12px; }
.hc-group__title .i { color: var(--text-3); }
.hc-rows { border-top: 1px solid var(--border-subtle); }
.hc-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 4px; border-bottom: 1px solid var(--border-subtle); }
.hc-row > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hc-row b { font-size: 16px; font-weight: 600; color: var(--text-2); transition: color var(--dur-2); }
.hc-row > span > span { font-size: 14px; color: var(--text-3); }
.hc-row .i { color: var(--text-4); flex: none; transition: transform var(--dur-3) var(--ease-out), color var(--dur-2); }
.hc-row:hover b { color: var(--text); }
.hc-row:hover .i { color: var(--text); transform: translateX(4px); }
.hc-empty__q { font-size: 13px; color: var(--text-3); margin-bottom: 16px; }
.hc-empty__q b { color: var(--text); }
.hc-contact { padding-bottom: var(--section-y); }
.hc-contact__card { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding: 32px; border-radius: var(--r-2xl); background: var(--grad-ember-card), var(--surface); box-shadow: var(--ring-card); }
.hc-contact__title { font-size: 28px; }
.hc-contact__lead { margin-top: 6px; color: var(--text-3); }
@media (max-width: 1023px) { .hc-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .hc-cats { grid-template-columns: minmax(0, 1fr); } .hc-list { padding-top: 48px; } .hc-contact__card { padding: 24px 20px; } }

.hc-art { padding-block: 32px var(--section-y); }
.hc-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--text-3); }
.hc-crumbs a { color: var(--text-3); transition: color var(--dur-2); }
.hc-crumbs a:hover { color: var(--text); }
.hc-crumbs [aria-current] { color: var(--text-2); }
.hc-art__grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 64px; margin-top: 32px; align-items: start; }
.hc-art__head { padding-bottom: 28px; margin-bottom: 8px; border-bottom: 1px solid var(--border-subtle); }
.hc-art__cat { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--accent-2); }
.hc-art__title { margin-top: 12px; font-size: clamp(32px, 4vw, 48px); letter-spacing: -0.035em; }
.hc-art__lead { margin-top: 14px; }
.hc-art__meta { margin-top: 14px; font-size: 13px; color: var(--text-3); }
.hc-prose { max-width: 72ch; font-size: 16px; }
.hc-prose h2 { scroll-margin-top: calc(var(--nav-h) + 24px); font-size: 24px; margin-top: 40px; }
.hc-prose ol { padding-left: 22px; }
.hc-callout { display: flex; gap: 12px; padding: 16px 18px; border-radius: var(--r-md); background: var(--info-soft); color: var(--text-2); }
.hc-callout .i { color: var(--info); flex: none; margin-top: 3px; }
.hc-callout--warn { background: var(--warn-soft); }
.hc-callout--warn .i { color: var(--warn); }
.hc-table { overflow-x: auto; border-radius: var(--r-lg); box-shadow: var(--ring-card); background: var(--surface); }
.hc-table .table { min-width: 480px; font-size: 14px; }
.hc-table th[scope="row"] { font-weight: 600; color: var(--text); text-align: left; }
.hc-table td, .hc-table th { height: auto; padding: 12px 16px; }
@media (max-width: 639px) {
  .hc-table .table { min-width: 0; }
  .hc-table thead { display: none; }
  .hc-table table, .hc-table tbody, .hc-table tr, .hc-table th, .hc-table td { display: block; width: 100%; }
  .hc-table tr { padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); }
  .hc-table tr:last-child { border-bottom: 0; }
  .hc-table th[scope="row"] { padding: 0 0 8px; border: 0; background: none; height: auto; }
  .hc-table td { padding: 4px 0; border: 0; display: grid; grid-template-columns: minmax(96px, 36%) minmax(0, 1fr); gap: 12px; }
  .hc-table td::before { content: attr(data-label); color: var(--text-3); font-size: 12px; font-weight: 500; padding-top: 2px; }
}
.hc-fb { margin-top: 48px; padding: 20px 24px; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--ring-card); }
.hc-fb__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.hc-fb__q { font-weight: 600; }
.hc-fb__more { gap: 12px; }
.hc-fb__thanks { display: flex; align-items: center; gap: 10px; color: var(--text-2); }
.hc-fb__thanks .i { color: var(--success); }
.hc-still { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 16px; font-size: 14px; color: var(--text-3); }
.hc-still b { color: var(--text); }
.hc-art__side { position: sticky; top: calc(var(--nav-h) + 24px); display: flex; flex-direction: column; gap: 32px; }
.hc-toc__label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.hc-toc ol, .lg-toc ol { display: flex; flex-direction: column; border-left: 1px solid var(--border-subtle); }
.hc-toc a, .lg-toc a { display: flex; gap: 8px; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: 13px; line-height: 1.4; color: var(--text-3); transition: color var(--dur-2), border-color var(--dur-2); }
.hc-toc a:hover, .lg-toc a:hover { color: var(--text); }
.hc-toc a[aria-current="true"], .lg-toc a[aria-current="true"] { color: var(--text); border-left-color: var(--accent); }
.hc-related ul { display: flex; flex-direction: column; gap: 2px; }
.hc-related a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--text-2); background: var(--fill-1); transition: background-color var(--dur-2), color var(--dur-2); }
.hc-related a:hover { background: var(--fill-2); color: var(--text); }
.hc-related .i { color: var(--text-4); flex: none; }
@media (max-width: 1023px) { .hc-art__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } .hc-art__side { position: static; } .hc-toc { display: none; } }

/* ---------- Legal ---------- */
.lg { padding-block: 40px var(--section-y); }
.lg-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.lg-tab { flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: var(--r-pill); background: var(--fill-2); font-size: 14px; font-weight: 500; color: var(--text-3); white-space: nowrap; transition: background-color var(--dur-2), color var(--dur-2); }
.lg-tab:hover { background: var(--fill-4); color: var(--text); }
.lg-tab[aria-current="page"] { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); }
.lg-note { display: flex; gap: 12px; margin-top: 24px; padding: 14px 18px; border-radius: var(--r-md); background: var(--warn-soft); font-size: 14px; line-height: 1.5; color: var(--text-2); }
.lg-note .i { color: var(--warn); flex: none; margin-top: 2px; }
.lg-note b { color: var(--text); }
.lg-head { margin-top: 40px; padding-bottom: 28px; border-bottom: 1px solid var(--border-subtle); }
.lg-title { font-size: clamp(36px, 4.4vw, 56px); letter-spacing: -0.035em; }
.lg-lead { margin-top: 12px; }
.lg-updated { margin-top: 12px; font-size: 13px; color: var(--text-3); }
.lg-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 64px; margin-top: 40px; align-items: start; }
.lg-side { position: sticky; top: calc(var(--nav-h) + 24px); max-height: calc(100vh - var(--nav-h) - 48px); overflow-y: auto; scrollbar-width: thin; }
.lg-toc a span { color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 18px; }
.lg-body { max-width: 72ch; font-size: 16px; }
.lg-sec { scroll-margin-top: calc(var(--nav-h) + 24px); }
.lg-sec + .lg-sec { margin-top: 40px; }
.lg-body .lg-sec h2 { margin-top: 0; font-size: 22px; }
.lg-sec__n { color: var(--text-3); }
.lg-end { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border-subtle); font-size: 14px; color: var(--text-3); }
.lg-help { font-size: inherit; }
@media (max-width: 1023px) { .lg-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .lg-side { position: static; max-height: none; } .lg-toc { padding: 16px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--ring-card); max-height: 300px; overflow-y: auto; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .mk-marquee__track, .mk-cliprow__track, .mk-menu__track, .mk-pillrun__track, .mk-rollt__track { animation: none !important; }
  .mk-step__cursor, .mk-wd__cursor, .mk-botcursor, .mk-mini-btn--primary, .mk-rings span, .mk-stackchip, .mk-bounce span, .mk-floaties .mk-statpill, .mk-caret { animation: none !important; }
  .mk-carousel__item, .mk-typecards__c, .mk-type, .mk-std__card, .mk-fan__card, .dm-tl__item, .mk-panel, .mk-stepper__panel, .mk-wt__panel { transition: none !important; animation: none !important; }
  .mk-bars span { transform: none; transition: none; }
  .mk-scribble svg path { stroke-dashoffset: 0; transition: none; }
  .mk-std__title { filter: none; opacity: 1; }
}
.bk-icon code { background: none; padding: 0; font-size: 11px; color: var(--text-3); }