/* ==========================================================================
   Undertold marketing pages: home, how it works, pricing, about, trust, legal.
   Builds on tokens.css + base.css. Prefix: mk-
   The one bold device is the multitrack "session" (.mk-session): production
   shown as lanes on a timeline, the way a documentary is actually mixed.
   ========================================================================== */

/* ---------- Shared section furniture ---------- */
.mk-kicker { margin-bottom: var(--space-3); }
.mk-title { max-width: 18ch; }
.mk-title--wide { max-width: 24ch; }
.mk-intro { margin-top: var(--space-4); }
.mk-head { display: grid; gap: var(--space-4); margin-bottom: var(--space-7); max-width: var(--w-narrow); }
.mk-head--split { max-width: none; }
@media (min-width: 56rem) {
  .mk-head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--space-8); }
  .mk-head--split .lead { justify-self: end; }
}
.mk-more { margin-top: var(--space-6); }
.mk-note { font-size: var(--fs-sm); color: var(--ink-faint); }
.mk-svg { width: 1.15em; height: 1.15em; flex: none; }

/* Icon play/pause swap used by every play control */
[data-play] .ic-pause, [data-bar-play] .ic-pause { display: none; }
[data-play].is-playing .ic-play, [data-bar-play].is-playing .ic-play { display: none; }
[data-play].is-playing .ic-pause, [data-bar-play].is-playing .ic-pause { display: block; }
[data-play].is-loading .ic-play { opacity: 0.4; }

/* ---------- Hero ---------- */
.mk-hero { min-height: min(92vh, 56rem); padding-bottom: calc(var(--space-9) + var(--space-6)); }
.hero__media picture { display: block; height: 100%; }
.mk-hero .hero__media img { object-position: 60% 40%; }
.mk-hero__title { max-width: 15ch; }
.mk-hero .lead { max-width: 34rem; }
@media (max-width: 40rem) {
  .mk-hero { min-height: 0; padding-top: calc(var(--nav-h) + var(--space-6)); }
  .mk-hero .hero__media img { object-position: 50% 30%; }
}

.mk-prompt { width: 100%; max-width: 44rem; display: grid; gap: var(--space-3); }
.mk-prompt__label { font-family: var(--font-text); font-style: italic; font-size: var(--fs-lg); color: rgba(238, 233, 220, 0.82); }
.mk-prompt__box {
  display: grid; gap: var(--space-2);
  padding: var(--space-2);
  background: rgba(12, 31, 24, 0.72);
  border: 1px solid rgba(238, 233, 220, 0.22);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.mk-prompt__box:focus-within { border-color: var(--accent); box-shadow: var(--shadow-3), 0 0 0 4px var(--accent-soft); }
.mk-prompt__input {
  width: 100%; min-width: 0; min-height: var(--control-h-lg);
  padding: 0.5rem 0.9rem;
  background: transparent; border: 0; color: var(--ink);
  font-family: var(--font-text); font-size: var(--fs-xl); line-height: 1.3;
  font-variation-settings: "opsz" 24;
}
.mk-prompt__input::placeholder { color: rgba(238, 233, 220, 0.5); opacity: 1; transition: opacity var(--dur-3) var(--ease-out); }
.mk-prompt__input.is-swapping::placeholder { opacity: 0; }
.mk-prompt__input:focus-visible { outline: none; }
.mk-prompt__error { color: #f4a08c; font-size: var(--fs-sm); font-weight: 550; }
@media (min-width: 40rem) {
  .mk-prompt__box { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); border-radius: var(--radius-pill); }
  .mk-prompt__input { font-size: var(--fs-2xl); }
}
.mk-examples { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.mk-examples__label { font-size: var(--fs-sm); color: rgba(238, 233, 220, 0.7); margin-right: var(--space-1); }
.mk-examples .chip { background: rgba(12, 31, 24, 0.45); border-color: rgba(238, 233, 220, 0.24); color: #eee9dc; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.mk-examples .chip:hover { background: rgba(30, 61, 51, 0.85); }
@media (max-width: 40rem) { .mk-examples .chip:nth-of-type(n+4) { display: none; } }

/* One page-load moment: the title card settles, then the prompt arrives */
@media (prefers-reduced-motion: no-preference) {
  .mk-hero .hero__content > * { animation: mk-settle var(--dur-4) var(--ease-tape) both; }
  .mk-hero .hero__content > :nth-child(2) { animation-delay: 80ms; }
  .mk-hero .hero__content > :nth-child(3) { animation-delay: 180ms; }
  .mk-hero .hero__content > :nth-child(4) { animation-delay: 280ms; }
  .mk-hero .hero__media img { animation: mk-lamp 1.6s var(--ease-out) both; }
}
@keyframes mk-settle { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes mk-lamp { from { opacity: 0.35; transform: scale(1.04); } to { opacity: 1; transform: none; } }

/* ---------- Listen-now sampler ---------- */
.mk-sampler { position: relative; z-index: 2; margin-top: calc(var(--space-9) * -1); padding-bottom: var(--section-y); }
.mk-sampler__panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3), var(--inner-light);
  padding: var(--space-5) var(--space-4) var(--space-4);
}
@media (min-width: 48rem) { .mk-sampler__panel { padding: var(--space-6) var(--space-6) var(--space-5); } }
.mk-sampler__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-2) var(--space-5); margin-bottom: var(--space-5); }
.mk-sampler__title { font: 700 var(--fs-3xl)/1 var(--font-display); font-stretch: var(--stretch-display); font-variation-settings: "wdth" 68; }
.mk-sampler__sub { color: var(--ink-muted); margin-top: var(--space-2); max-width: 36rem; }
.mk-sampler .shelf { margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); scroll-padding-inline: var(--space-4); }
@media (min-width: 48rem) {
  .mk-sampler .shelf { margin-inline: calc(var(--space-6) * -1); padding-inline: var(--space-6); scroll-padding-inline: var(--space-6); grid-auto-columns: 12.5rem; }
}

@media (min-width: 64rem) {
  .mk-sampler__layout { display: grid; grid-template-columns: 19rem minmax(0, 1fr); gap: var(--space-7); align-items: start; }
  .mk-sampler__layout .mk-sampler__head { flex-direction: column; align-items: flex-start; gap: var(--space-5); margin: var(--space-2) 0 0; }
  .mk-sampler__layout .shelf { margin-inline: 0 calc(var(--space-6) * -1); padding-inline: 0 var(--space-6); scroll-padding-inline: 0; }
}
.mk-sample { display: grid; gap: var(--space-3); min-width: 0; }
.mk-sample .cover { box-shadow: var(--shadow-2); }
.mk-sample__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.mk-sample__title { font-weight: 600; line-height: 1.25; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mk-sample__title:hover { text-decoration: underline; text-decoration-color: var(--line-strong); }
.mk-sample__meta { font-size: var(--fs-sm); color: var(--ink-muted); font-variant-numeric: tabular-nums; line-height: 1.35; }
.mk-sample__meta span { color: var(--ink); font-weight: 600; }

/* Play control: ink when idle, tungsten only while it is the one playing */
.mk-play {
  display: inline-grid; place-items: center; flex: none;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  transition: background-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), color var(--dur-1);
}
.mk-play svg { width: 1.05rem; height: 1.05rem; }
.mk-play .ic-play { margin-left: 2px; }
.mk-play:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--ink-faint); }
.mk-play:focus-visible { border-radius: 50%; }
.mk-play.is-playing { background: var(--accent); color: var(--accent-ink); box-shadow: var(--accent-glow); }
.mk-play--lg { width: 3.5rem; height: 3.5rem; }
.mk-play--lg svg { width: 1.3rem; height: 1.3rem; }

/* Empty state: Originals still in the studio */
.mk-studio-now { display: grid; gap: var(--space-6); }
@media (min-width: 56rem) { .mk-studio-now { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-7); } }
.mk-inprod { list-style: none; padding: 0; display: grid; border-top: 1px solid var(--line); }
.mk-inprod li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.mk-inprod__title { font-weight: 600; text-decoration: none; }
a.mk-inprod__title:hover { text-decoration: underline; }
.mk-voices { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: var(--space-3); }
.mk-voice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); }
.mk-voice__name { font-weight: 650; }
.mk-voice__desc { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.35; }
.mk-voice .wave { opacity: 0; transition: opacity var(--dur-2); }
.mk-voice:has(.is-playing) { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.mk-voice:has(.is-playing) .wave { opacity: 1; }

/* ---------- Floating player (fills #mini-player-root on marketing pages) ---------- */
.mk-player { animation: ut-rise var(--dur-3) var(--ease-out); }
.mk-player .mini-player__progress { height: 3px; }
.mk-seek {
  position: absolute; left: 0; right: 0; top: -9px; width: 100%; height: 20px; margin: 0;
  appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer;
}
.mk-seek::-webkit-slider-runnable-track { height: 20px; background: transparent; }
.mk-seek::-moz-range-track { height: 20px; background: transparent; }
.mk-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; background: var(--accent); opacity: 0; transition: opacity var(--dur-1); }
.mk-seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--accent); opacity: 0; }
.mk-seek:hover::-webkit-slider-thumb, .mk-seek:focus-visible::-webkit-slider-thumb { opacity: 1; }
.mk-seek:hover::-moz-range-thumb, .mk-seek:focus-visible::-moz-range-thumb { opacity: 1; }
.mk-seek:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
.mk-player .mini-player__cover.cover--plain { display: block; }
.mk-player__close svg, .mk-player__back svg { width: 1.2rem; height: 1.2rem; }

/* ---------- How it works, in short (a real sequence, so numbered) ---------- */
.mk-beats { list-style: none; padding: 0; display: grid; gap: var(--space-6); counter-reset: beat; }
@media (min-width: 48rem) { .mk-beats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }
.mk-beat { display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-4); border-top: 1px solid var(--line-strong); }
.mk-beat::before {
  counter-increment: beat; content: counter(beat);
  font: 700 var(--fs-4xl)/0.9 var(--font-display); font-stretch: var(--stretch-display); font-variation-settings: "wdth" 68;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.mk-beat__title { font: 650 var(--fs-xl)/1.2 var(--font-ui); }
.mk-beat p { color: var(--ink-muted); max-width: 30rem; }
.mk-beat__time { font-size: var(--fs-sm); color: var(--ink-faint); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Production: photo strip ---------- */
.mk-strip { display: grid; gap: var(--space-4); margin-bottom: var(--space-7); }
@media (min-width: 48rem) { .mk-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } }
.mk-strip figure { display: grid; gap: var(--space-3); }
.mk-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); box-shadow: var(--shadow-2); }
.mk-strip figcaption { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.45; max-width: 26rem; }
.mk-strip figcaption strong { color: var(--ink); font-weight: 650; display: block; font-size: var(--fs-md); margin-bottom: 2px; }
@media (max-width: 47.99rem) {
  .mk-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .mk-strip figcaption { display: none; }
  .mk-strip img { aspect-ratio: 3 / 4; }
}

/* ---------- The session: production as lanes on a timeline ---------- */
.mk-session {
  --wf-voice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='24' viewBox='0 0 256 24'%3E%3Cpath d='M1 6v12M5 6v13M9 9v6M13 12v1M17 10v3M21 6v11M25 4v17M29 2v19M33 1v22M37 1v22M41 1v22M45 12v1M49 10v3M53 10v3M57 10v3M61 8v9M65 4v16M69 2v21M73 1v22M77 4v15M81 6v11M85 8v9M89 9v6M93 10v4M97 9v6M101 6v12M105 2v20M109 1v22M113 4v16M117 1v22M121 1v22M125 4v17M129 3v18M133 6v11M137 2v19M141 12v1M145 10v3M149 10v3M153 8v9M157 12v1M161 10v3M165 10v3M169 6v11M173 2v19M177 6v12M181 10v5M185 10v3M189 10v3M193 12v1M197 10v3M201 7v10M205 8v9M209 6v11M213 6v12M217 2v20M221 2v19M225 5v14M229 1v22M233 1v22M237 12v1M241 10v3M245 12v1M249 10v4M253 12v1' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --wf-master: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='24' viewBox='0 0 512 24'%3E%3Cpath d='M1 6v11M5 6v11M9 5v14M13 6v13M17 5v14M21 5v14M25 6v12M29 6v12M33 6v13M37 4v15M41 6v12M45 6v11M49 8v9M53 6v11M57 6v12M61 8v9M65 6v12M69 4v15M73 4v16M77 4v17M81 5v14M85 6v11M89 6v12M93 8v9M97 8v9M101 8v9M105 8v9M109 8v9M113 8v9M117 6v11M121 6v11M125 6v12M129 6v12M133 6v13M137 6v13M141 6v11M145 5v14M149 4v17M153 2v19M157 2v21M161 2v20M165 3v18M169 4v17M173 5v14M177 4v16M181 4v15M185 4v17M189 4v16M193 2v19M197 2v21M201 3v18M205 4v17M209 2v19M213 2v19M217 1v22M221 2v21M225 2v19M229 2v19M233 2v21M237 2v20M241 4v17M245 4v16M249 2v19M253 2v21M257 3v18M261 4v17M265 5v14M269 6v11M273 6v13M277 6v11M281 6v12M285 6v11M289 8v9M293 6v11M297 8v9M301 7v10M305 8v9M309 8v9M313 8v9M317 8v9M321 6v12M325 5v14M329 6v12M333 4v15M337 6v13M341 6v12M345 5v14M349 4v15M353 6v13M357 4v16M361 5v14M365 6v13M369 5v14M373 6v13M377 6v12M381 8v9M385 8v9M389 8v9M393 8v9M397 8v9M401 8v9M405 8v9M409 6v12M413 6v12M417 6v12M421 5v14M425 6v12M429 7v10M433 6v13M437 4v15M441 6v13M445 6v11M449 6v13M453 4v15M457 6v13M461 4v16M465 2v19M469 2v19M473 2v19M477 4v16M481 6v13M485 4v16M489 4v15M493 4v16M497 4v15M501 4v16M505 4v17M509 4v16' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --lane-name: 100%;
  position: relative;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--inner-light), var(--shadow-2);
  overflow: hidden;
}
@media (min-width: 48rem) { .mk-session { --lane-name: 13.5rem; padding: var(--space-5) var(--space-6) var(--space-6); } }
.mk-session__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding-bottom: var(--space-4); margin-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.mk-session__name { font-weight: 650; display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.mk-session__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-session__meta { font-size: var(--fs-sm); color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.mk-lanes { position: relative; list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.mk-ruler { display: grid; grid-template-columns: var(--lane-name) minmax(0, 1fr); gap: var(--space-4); font-size: var(--fs-xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.mk-ruler__ticks { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.mk-ruler__ticks span:nth-child(even) { visibility: hidden; }
@media (min-width: 48rem) { .mk-ruler__ticks span:nth-child(even) { visibility: visible; } }
@media (max-width: 47.99rem) { .mk-ruler > :first-child { display: none; } .mk-ruler { grid-template-columns: minmax(0, 1fr); } }

.mk-lane { display: grid; grid-template-columns: var(--lane-name) minmax(0, 1fr); gap: var(--space-2) var(--space-4); align-items: center; padding-block: var(--space-2); }
.mk-lane + .mk-lane { border-top: 1px solid var(--line); }
@media (max-width: 47.99rem) { .mk-lane { grid-template-columns: minmax(0, 1fr); } }
.mk-lane__label { display: grid; gap: 1px; }
.mk-lane__name { font-weight: 650; font-size: var(--fs-md); display: flex; align-items: baseline; gap: var(--space-2); }
.mk-lane__num { font: 700 var(--fs-md)/1 var(--font-display); font-stretch: var(--stretch-display); font-variation-settings: "wdth" 68; color: var(--ink-faint); font-variant-numeric: tabular-nums; min-width: 1.1em; }
.mk-lane__desc { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.35; padding-left: calc(1.1em + var(--space-2)); }

.mk-track { position: relative; height: 2.5rem; border-radius: var(--radius-xs); background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), var(--line) calc(12.5% - 1px) 12.5%); }
.mk-clip {
  position: absolute; top: 0.3rem; bottom: 0.3rem; left: calc(var(--s) * 1%); width: calc(var(--w) * 1%);
  border-radius: var(--radius-xs);
  background: var(--surface-2); border: 1px solid var(--line-strong);
  display: block; overflow: hidden; text-overflow: ellipsis; line-height: calc(1.9rem - 2px);
  padding: 0 0.4rem; font-size: 0.6875rem; font-weight: 600; font-style: normal; color: var(--ink-muted); white-space: nowrap;
  font-stretch: var(--stretch-tight); font-variation-settings: "wdth" 82;
}
.mk-clip--src { background: var(--surface); border-style: dashed; }
.mk-clip--script { background: repeating-linear-gradient(180deg, transparent 0 5px, var(--line-strong) 5px 6px) 0.4rem 50% / calc(100% - 0.8rem) 70% no-repeat, var(--surface-2); color: transparent; }
.mk-clip--note { top: 0.45rem; bottom: auto; height: auto; line-height: 1.4; padding: 0.15rem 0.4rem; background: var(--bg); color: var(--ink); font-family: var(--font-text); font-style: italic; font-weight: 400; font-size: 0.75rem; border-left: 2px solid var(--ink-faint); border-radius: 0 var(--radius-xs) var(--radius-xs) 0; }
.mk-clip--voice, .mk-clip--quote, .mk-clip--master { color: var(--ink-muted); }
.mk-clip--voice::before, .mk-clip--quote::before, .mk-clip--master::before {
  content: ""; position: absolute; inset: 0.2rem 0.3rem;
  background: currentColor;
  -webkit-mask: var(--wf-voice) 0 50% / auto 100% repeat-x; mask: var(--wf-voice) 0 50% / auto 100% repeat-x;
  opacity: 0.75;
}
.mk-clip--voice:nth-child(2n)::before { -webkit-mask-position: -37px 50%; mask-position: -37px 50%; }
.mk-clip--voice:nth-child(3n)::before { -webkit-mask-position: -91px 50%; mask-position: -91px 50%; }
.mk-clip--quote { color: var(--info); border-color: color-mix(in srgb, var(--info) 45%, transparent); background: var(--info-soft); }
.mk-clip--score { background: linear-gradient(90deg, transparent, var(--surface-3) 18%, var(--surface-3) 70%, transparent), var(--surface); border-color: transparent; }
.mk-clip--amb { top: 0.9rem; bottom: 0.9rem; background: repeating-linear-gradient(90deg, var(--surface-3) 0 3px, var(--surface-2) 3px 7px); border-color: transparent; }
.mk-clip--master { background: var(--surface); }
.mk-clip--master::before { -webkit-mask-image: var(--wf-master); mask-image: var(--wf-master); inset: 0.15rem 0.3rem; }
.mk-clip > b { position: relative; z-index: 1; font-weight: 600; color: var(--ink); }
.mk-clip--voice > b, .mk-clip--quote > b, .mk-clip--score > b { padding: 0.05rem 0.35rem; margin-left: -0.15rem; border-radius: 3px; background: var(--bg-deep); }
.mk-clip--quote > b { color: var(--info); }

/* the playhead: the one tungsten mark */
.mk-playhead { position: absolute; top: 0; bottom: 0; width: 2px; left: var(--ph, 38%); background: var(--accent); box-shadow: 0 0 12px var(--accent); pointer-events: none; z-index: 3; }
.mk-playhead::before { content: ""; position: absolute; top: -5px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.mk-session__tracks { position: relative; }
.mk-session__tracks .mk-playhead { left: calc(var(--lane-name) + var(--space-4) + (100% - var(--lane-name) - var(--space-4)) * 0.38); }
@media (max-width: 47.99rem) { .mk-session__tracks .mk-playhead { display: none; } }
.mk-session__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-muted); }

/* ---------- Read-along demo (paper) ---------- */
.mk-read { display: grid; gap: var(--space-7); }
@media (min-width: 60rem) { .mk-read { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-8); align-items: start; } }
.mk-points { list-style: none; padding: 0; display: grid; gap: var(--space-5); margin-top: var(--space-6); }
.mk-points li { display: grid; gap: var(--space-1); padding-left: var(--space-5); border-left: 2px solid var(--line-strong); }
.mk-points strong { font-weight: 650; font-size: var(--fs-lg); }
.mk-points p { color: var(--ink-muted); }

.mk-transcript {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3), var(--inner-light);
  padding: var(--space-5) var(--space-4);
}
@media (min-width: 48rem) { .mk-transcript { padding: var(--space-6) var(--space-7); } }
.mk-transcript__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); margin-bottom: var(--space-2); }
.mk-transcript__ep { font-weight: 650; font-size: var(--fs-sm); }
.mk-transcript__ch { font-size: var(--fs-sm); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.mk-transcript .readalong { font-size: var(--fs-xl); }
.mk-transcript .readalong p { margin-top: 0.2em; }
.mk-transcript .entity { color: inherit; }
.mk-transcript .entity.is-open { text-decoration-color: var(--accent-text); text-decoration-style: solid; }

.mk-pop {
  margin-top: var(--space-5);
  display: grid; gap: var(--space-2);
  padding: var(--space-4);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  max-width: 26rem;
}
@media (min-width: 60rem) {
  .mk-transcript { padding-bottom: 10.5rem; }
  .mk-pop { position: absolute; right: -1rem; bottom: -3rem; width: 21rem; margin: 0; }
}
.mk-pop__type { font-family: var(--font-text); font-style: italic; color: var(--ink-muted); font-size: var(--fs-sm); }
.mk-pop__name { font-weight: 650; font-size: var(--fs-lg); }
.mk-pop p { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.5; }
.mk-pop__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.mk-sources { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.mk-sources__title { font-weight: 650; font-size: var(--fs-sm); margin-bottom: var(--space-3); }

/* fake chip/button shapes inside illustrations (non-interactive) */
.mk-fake { pointer-events: none; }
.mk-fake-btn {
  display: inline-flex; align-items: center; gap: 0.45em; min-height: 2rem; padding: 0 0.85rem;
  border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
  background: var(--surface-2); color: var(--ink);
}
.mk-fake-btn--ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.mk-fake-btn--primary { background: var(--accent); color: var(--accent-ink); }

/* ---------- Follow-ups and Ask ---------- */
.mk-ask { display: grid; gap: var(--space-6); }
@media (min-width: 56rem) { .mk-ask { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-7); align-items: start; } }
.mk-qa { display: grid; gap: var(--space-4); padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--inner-light); }
.mk-qa__q { justify-self: end; max-width: 85%; padding: var(--space-3) var(--space-4); background: var(--surface-3); border-radius: var(--radius-md) var(--radius-md) var(--radius-xs) var(--radius-md); font-weight: 500; }
.mk-qa__q small { display: block; margin-top: 2px; color: var(--ink-faint); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.mk-qa__a { font-family: var(--font-text); font-size: var(--fs-lg); line-height: 1.55; max-width: 34rem; font-variation-settings: "opsz" 16; }
.mk-qa__src { font-size: var(--fs-sm); color: var(--ink-faint); }
.mk-qa__field { display: flex; align-items: center; gap: var(--space-2); padding: 0.4rem 0.4rem 0.4rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--ink-faint); font-size: var(--fs-sm); }
.mk-qa__field span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-follow { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.mk-follow li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-4); align-items: baseline; padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.mk-follow__kind { font-weight: 650; font-size: var(--fs-lg); }
.mk-follow__ex { grid-column: 1 / -1; font-family: var(--font-text); font-style: italic; color: var(--ink-muted); font-size: var(--fs-md); }

/* ---------- Nearby ---------- */
.mk-nearby { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 56rem) { .mk-nearby { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); } }
.mk-nearby__media { position: relative; }
.mk-nearby__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--shadow-3); }
.mk-pin {
  position: absolute; left: var(--space-4); right: var(--space-4); top: var(--space-4);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center;
  padding: var(--space-3) var(--space-4); max-width: 17rem;
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius-md);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.mk-pin__dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.mk-pin strong { display: block; font-weight: 650; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-pin span { font-size: var(--fs-xs); color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* ---------- Personal: same topic, two documentaries ---------- */
.mk-versions { display: grid; gap: var(--space-4); }
@media (min-width: 56rem) { .mk-versions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } }
.mk-version { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--inner-light); }
.mk-version__who { font-family: var(--font-text); font-style: italic; color: var(--ink-muted); font-size: var(--fs-lg); }
.mk-version__title { font: 450 var(--fs-3xl)/1.05 var(--font-text); font-variation-settings: "opsz" 60; letter-spacing: -0.015em; }
.mk-version__settings { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mk-version .chapters__item { padding: var(--space-2) 0; }
.mk-topic { display: inline-flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-family: var(--font-text); font-size: var(--fs-lg); max-width: 100%; }
.mk-topic__tag { padding: 0.15rem 0.6rem; border-radius: var(--radius-pill); background: var(--surface-2); font: 600 var(--fs-xs)/1.4 var(--font-ui); color: var(--ink-muted); white-space: nowrap; }
.mk-voices-head { margin-top: var(--space-8); margin-bottom: var(--space-4); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-3); }

/* ---------- Plans (teaser and pricing) ---------- */
.mk-plans { display: grid; gap: var(--space-4); }
@media (min-width: 48rem) { .mk-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } }
.mk-plan { display: grid; gap: var(--space-5); align-content: start; padding: var(--space-6) var(--space-5); }
@media (min-width: 64rem) { .mk-plan { padding: var(--space-7) var(--space-6); } }
.mk-plan__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.mk-plan__name { font: 650 var(--fs-2xl)/1.1 var(--font-ui); }
.mk-plan__minutes { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; padding-block: var(--space-4); border-block: 1px solid var(--line); }
.mk-plan__big { font: 700 clamp(3.5rem, 2.4rem + 4vw, 5.5rem)/0.85 var(--font-display); font-stretch: var(--stretch-display); font-variation-settings: "wdth" 68; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.mk-plan__unit { color: var(--ink-muted); line-height: 1.3; max-width: 12rem; }
.mk-plan .price__amount { font-size: var(--fs-4xl); }
.mk-plan__cta { margin-top: auto; display: grid; gap: var(--space-2); }
.mk-plan__cta form { display: grid; }
.mk-plan--feature { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--surface)) 0%, var(--surface) 45%); }
.mk-demo { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--ink-muted); padding: var(--space-2) var(--space-3); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); }

/* ---------- FAQ ---------- */
.mk-faq { display: grid; gap: var(--space-6); }
@media (min-width: 60rem) { .mk-faq { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--space-8); align-items: start; } }
.mk-faq__list { border-top: 1px solid var(--line-strong); }
.mk-faq details { border-bottom: 1px solid var(--line-strong); }
.mk-faq summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr) 1.5rem; gap: var(--space-4); align-items: center;
  padding: var(--space-5) 0; font: 650 var(--fs-lg)/1.3 var(--font-ui);
}
.mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq summary::after {
  content: ""; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 0.7rem 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 0.7rem no-repeat;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: transform var(--dur-2) var(--ease-out);
}
.mk-faq details[open] summary::after { transform: rotate(45deg); }
.mk-faq summary:hover { color: var(--ink); }
.mk-faq summary:focus-visible { outline-offset: 2px; }
.mk-faq__a { padding: 0 2.5rem var(--space-5) 0; font-family: var(--font-text); font-size: var(--fs-lg); line-height: var(--lh-text); color: var(--ink-muted); max-width: var(--w-prose); font-variation-settings: "opsz" 16; }
.mk-faq__a > * + * { margin-top: 0.75em; }
.mk-faq__a a { color: var(--accent-text); }
.mk-faq details[open] .mk-faq__a { animation: mk-open var(--dur-3) var(--ease-out); }
@keyframes mk-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Waitlist ---------- */
.mk-wait { display: grid; gap: var(--space-5); padding: var(--space-6) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
@media (min-width: 56rem) { .mk-wait { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-7); padding: var(--space-7); } }
.mk-wait__title { font: 700 var(--fs-3xl)/1 var(--font-display); font-stretch: var(--stretch-display); font-variation-settings: "wdth" 68; }
.mk-wait__form { display: grid; gap: var(--space-2); }
.mk-wait__row { display: grid; gap: var(--space-2); }
@media (min-width: 30rem) { .mk-wait__row { grid-template-columns: minmax(0, 1fr) auto; } }
.mk-wait__status { min-height: 1.4em; font-size: var(--fs-sm); color: var(--ink-muted); }
.mk-wait__status.is-error { color: var(--danger); font-weight: 550; }
.mk-wait__status.is-ok { color: var(--success); font-weight: 600; }

/* ---------- Final CTA ---------- */
.mk-cta { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--space-10); background: var(--bg-deep); color: #eee9dc; }
.mk-cta__media { position: absolute; inset: 0; z-index: -2; }
.mk-cta__media img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; opacity: 0.75; }
.mk-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 28, 21, 0.2) 0%, rgba(10, 28, 21, 0.7) 45%, rgba(10, 28, 21, 0.94) 100%); }
.mk-cta__inner { display: grid; gap: var(--space-5); justify-items: start; }
@media (min-width: 56rem) { .mk-cta__inner { margin-left: 45%; } }
.mk-cta .lead { color: rgba(238, 233, 220, 0.82); }
@media (max-width: 55.99rem) { .mk-cta::before { background: linear-gradient(0deg, rgba(10, 28, 21, 0.96) 30%, rgba(10, 28, 21, 0.55) 100%); } }

/* ==========================================================================
   How it works
   ========================================================================== */
.mk-page-head { padding-top: calc(var(--space-9) + var(--space-2)); padding-bottom: var(--space-8); }
.mk-page-head .display { max-width: 14ch; }
.mk-page-head .lead { margin-top: var(--space-5); }
.mk-page-head--media { position: relative; isolation: isolate; overflow: hidden; }
.mk-toc { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }

.mk-flow { list-style: none; padding: 0; counter-reset: flow; }
.mk-step { display: grid; gap: var(--space-6); padding-block: var(--space-8); border-top: 1px solid var(--line); }
.mk-step:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 60rem) {
  .mk-step { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-8); align-items: start; }
  .mk-step__text { position: sticky; top: calc(var(--nav-h) + var(--space-6)); }
}
.mk-step__num { font: 700 var(--fs-6xl)/0.8 var(--font-display); font-stretch: var(--stretch-display); font-variation-settings: "wdth" 68; color: var(--ink-faint); font-variant-numeric: tabular-nums; display: block; margin-bottom: var(--space-4); }
.mk-step__num::before { counter-increment: flow; content: counter(flow); }
.mk-step__text .h2 { max-width: 16ch; }
.mk-step__text .prose { margin-top: var(--space-4); font-size: var(--fs-lg); color: var(--ink-muted); }
.mk-step__text .check-list { margin-top: var(--space-5); color: var(--ink-muted); }
.mk-step__text .check-list li::before { background: var(--ink-faint); }

/* Vignette: a piece of real UI rebuilt in HTML, non-interactive */
.mk-vig {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3), var(--inner-light);
  padding: var(--space-5) var(--space-4);
  overflow: hidden;
  user-select: none;
}
@media (min-width: 48rem) { .mk-vig { padding: var(--space-6); } }
.mk-vig__label { font-size: var(--fs-xs); color: var(--ink-faint); margin-bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-2); }
.mk-vig__label::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--line-strong); }
.mk-vig__field { padding: var(--space-4); border: 1px solid var(--accent); border-radius: var(--radius-md); box-shadow: 0 0 0 3px var(--accent-soft); font-family: var(--font-text); font-size: var(--fs-xl); line-height: 1.4; min-height: 6.5rem; }
.mk-caret { display: inline-block; width: 2px; height: 1.1em; vertical-align: -0.15em; background: var(--accent); margin-left: 1px; animation: mk-blink 1.1s steps(1) infinite; }
@keyframes mk-blink { 50% { opacity: 0; } }
.mk-vig__group { margin-top: var(--space-4); display: grid; gap: var(--space-2); }
.mk-vig__group > span:first-child { font-size: var(--fs-sm); font-weight: 600; }
.mk-vig .chip { pointer-events: none; }
.mk-vig__foot { margin-top: var(--space-5); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--line); }

.mk-proposal__title { font: 450 var(--fs-3xl)/1.05 var(--font-text); font-variation-settings: "opsz" 60; letter-spacing: -0.015em; margin-top: var(--space-2); }
.mk-proposal__logline { color: var(--ink-muted); margin-top: var(--space-2); font-family: var(--font-text); font-size: var(--fs-lg); line-height: 1.45; }
.mk-edit-list { list-style: none; padding: 0; margin-top: var(--space-5); display: grid; gap: var(--space-2); }
.mk-edit { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.mk-edit.is-editing { border-color: var(--line-strong); box-shadow: inset 0 0 0 1px var(--line-strong); }
.mk-edit__n { font: 700 var(--fs-lg)/1 var(--font-display); font-stretch: var(--stretch-display); font-variation-settings: "wdth" 68; color: var(--ink-faint); padding-top: 2px; }
.mk-edit__t { font-weight: 650; display: block; }
.mk-edit__s { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.4; margin-top: 2px; display: block; }
.mk-edit__mood { display: block; margin-top: 2px; font-family: var(--font-text); font-style: italic; color: var(--ink-faint); font-size: var(--fs-sm); }
.mk-feedback { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); font-family: var(--font-text); font-style: italic; color: var(--ink-muted); }

.mk-split-vig { display: grid; gap: var(--space-5); }
@media (min-width: 40rem) { .mk-split-vig { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.mk-srcs { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.mk-srcs li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); font-size: var(--fs-sm); line-height: 1.35; padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.mk-srcs .badge { align-self: start; }
.mk-srcs span span { display: block; color: var(--ink-faint); font-size: var(--fs-xs); }
.mk-script { font-family: var(--font-text); font-size: var(--fs-md); line-height: 1.55; display: grid; gap: var(--space-3); }
.mk-script__seg { display: grid; gap: 2px; }
.mk-script__who { font: 600 var(--fs-xs)/1.3 var(--font-ui); color: var(--ink-muted); }
.mk-script__dir { font-style: italic; color: var(--ink-faint); font-size: var(--fs-sm); }
.mk-script__seg--quote .mk-script__who { color: var(--info); }

.mk-player-vig .chapters { margin-top: var(--space-4); }
.mk-player-vig__now { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.mk-player-vig__now .cover { width: 4.5rem; }
.mk-player-vig__title { font: 450 var(--fs-2xl)/1.1 var(--font-text); font-variation-settings: "opsz" 40; }
.mk-scrub { margin-top: var(--space-5); display: grid; gap: var(--space-2); }
.mk-scrub__bar { position: relative; height: 6px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; display: flex; }
.mk-scrub__bar span { height: 100%; }
.mk-scrub__played { background: var(--accent); width: 14%; }
.mk-scrub__ready { background: var(--line-strong); width: 22%; }
.mk-scrub__times { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.mk-status-line { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--bg); font-size: var(--fs-sm); color: var(--ink-muted); }

.mk-tiles { display: grid; gap: var(--space-4); }
@media (min-width: 48rem) { .mk-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mk-tile { padding: var(--space-5); border-top: 2px solid var(--line-strong); display: grid; gap: var(--space-2); align-content: start; }
.mk-tile h3 { font: 650 var(--fs-xl)/1.2 var(--font-ui); }
.mk-tile p { color: var(--ink-muted); }

/* ==========================================================================
   Pricing
   ========================================================================== */
.mk-topups { display: grid; gap: var(--space-3); }
@media (min-width: 40rem) { .mk-topups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mk-topup { display: grid; gap: var(--space-3); padding: var(--space-5); }
.mk-topup__min { font: 700 var(--fs-4xl)/0.9 var(--font-display); font-stretch: var(--stretch-display); font-variation-settings: "wdth" 68; font-variant-numeric: tabular-nums; }
.mk-topup__min small { font: 500 var(--fs-md)/1 var(--font-ui); color: var(--ink-muted); margin-left: var(--space-2); font-stretch: normal; font-variation-settings: normal; }
.mk-topup__price { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.mk-topup form { display: grid; }

.mk-minutes { display: grid; gap: var(--space-5); counter-reset: none; }
@media (min-width: 48rem) { .mk-minutes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } }
@media (min-width: 64rem) { .mk-minutes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mk-minute { display: grid; gap: var(--space-2); align-content: start; padding-top: var(--space-4); border-top: 2px solid var(--line-strong); }
.mk-minute h3 { font: 650 var(--fs-lg)/1.25 var(--font-ui); }
.mk-minute p { color: var(--ink-muted); }
.mk-minute--charge { border-top-color: var(--accent); }

.mk-table-wrap { overflow-x: auto; contain: inline-size; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.mk-table { width: 100%; min-width: 30rem; font-size: var(--fs-md); }
.mk-table caption { text-align: left; padding: var(--space-4) var(--space-5); font-size: var(--fs-sm); color: var(--ink-muted); }
.mk-table th, .mk-table td { padding: var(--space-3) var(--space-5); text-align: left; border-top: 1px solid var(--line); vertical-align: top; }
.mk-table thead th { font-weight: 650; font-size: var(--fs-lg); border-top: 0; background: var(--bg-deep); }
.mk-table tbody th { font-weight: 500; color: var(--ink); }
.mk-table td { color: var(--ink-muted); font-variant-numeric: tabular-nums; width: 24%; }
.mk-table td.is-yes { color: var(--ink); }
.mk-table .mk-yes { display: inline-block; width: 0.75rem; height: 0.42rem; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg) translateY(-0.15em); }
.mk-table .mk-no { display: inline-block; width: 0.8rem; height: 1.5px; background: var(--ink-faint); vertical-align: 0.3em; }
.mk-table tr.is-group th { font-family: var(--font-text); font-style: italic; font-weight: 400; color: var(--ink-faint); background: var(--bg); font-size: var(--fs-sm); padding-block: var(--space-2); }

/* ==========================================================================
   About and trust
   ========================================================================== */
.mk-media-head { display: grid; gap: var(--space-6); }
@media (min-width: 56rem) { .mk-media-head { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-8); align-items: end; } }
.mk-media-head img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--shadow-3); }

.mk-beliefs { list-style: none; padding: 0; display: grid; gap: var(--space-6); }
@media (min-width: 48rem) { .mk-beliefs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-6); } }
.mk-belief { display: grid; gap: var(--space-3); align-content: start; }
.mk-belief h3 { font: 450 var(--fs-3xl)/1.08 var(--font-text); font-variation-settings: "opsz" 60; letter-spacing: -0.015em; max-width: 18ch; }
.mk-belief p { color: var(--ink-muted); font-family: var(--font-text); font-size: var(--fs-lg); line-height: var(--lh-text); max-width: 32rem; }

.mk-pull { font: 450 clamp(1.75rem, 1.2rem + 2.4vw, 3rem)/1.12 var(--font-text); font-variation-settings: "opsz" 72; letter-spacing: -0.02em; max-width: 24ch; }
.mk-pull-cite { margin-top: var(--space-4); color: var(--ink-muted); font-size: var(--fs-sm); }

.mk-company { display: grid; gap: var(--space-2); padding: var(--space-5); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); }
.mk-company dt { font-size: var(--fs-sm); color: var(--ink-faint); }
.mk-company dd { margin: 0 0 var(--space-3); }

.mk-trust-grid { display: grid; gap: var(--space-7); }
@media (min-width: 60rem) { .mk-trust-grid { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-8); align-items: start; } }
.mk-side-nav { display: none; }
@media (min-width: 60rem) {
  .mk-side-nav { display: grid; gap: var(--space-1); position: sticky; top: calc(var(--nav-h) + var(--space-6)); }
  .mk-side-nav a { display: block; padding: var(--space-2) var(--space-3); border-left: 2px solid var(--line); color: var(--ink-muted); text-decoration: none; font-size: var(--fs-sm); font-weight: 550; }
  .mk-side-nav a:hover { color: var(--ink); border-left-color: var(--ink-faint); }
  .mk-side-nav a.is-current { color: var(--ink); border-left-color: var(--accent); }
}
.mk-chapter { padding-block: var(--space-7); border-top: 1px solid var(--line); }
.mk-chapter:first-child { border-top: 0; padding-top: 0; }
.mk-chapter > .h2 { max-width: 20ch; margin-bottom: var(--space-4); }
.mk-chapter .prose { color: var(--ink-muted); }
.mk-chapter .prose strong { color: var(--ink); }

.mk-ai { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
@media (min-width: 48rem) { .mk-ai { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mk-ai__col { padding: var(--space-5); border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); }
.mk-ai__col h3 { font: 650 var(--fs-lg)/1.25 var(--font-ui); margin-bottom: var(--space-4); }
.mk-ai__col ul { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.mk-ai__col li { display: grid; gap: 2px; }
.mk-ai__col li strong { font-weight: 650; }
.mk-ai__col li span { color: var(--ink-muted); font-size: var(--fs-sm); line-height: 1.45; }
.mk-ai__col--never { background: transparent; border-style: dashed; }

.mk-specimen { margin-top: var(--space-6); padding: var(--space-5); border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); }
.mk-specimen .readalong { font-size: var(--fs-lg); color: var(--ink-muted); }

/* ==========================================================================
   Legal
   ========================================================================== */
.mk-draft {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start;
  padding: var(--space-4) var(--space-5);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); border-radius: var(--radius-md);
  color: var(--ink); margin-block: var(--space-6);
}
.mk-draft__dot { width: 0.6rem; height: 0.6rem; margin-top: 0.45em; border-radius: 50%; background: var(--accent); }
.mk-draft strong { font-weight: 700; }
.mk-draft p { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.5; margin-top: 2px; }
.mk-legal { display: grid; gap: var(--space-7); }
@media (min-width: 60rem) { .mk-legal { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-8); align-items: start; } }
.mk-legal .prose { color: var(--ink-muted); }
.mk-legal .prose h2 { color: var(--ink); scroll-margin-top: calc(var(--nav-h) + var(--space-4)); }
.mk-legal .prose strong { color: var(--ink); }
.mk-legal .prose table { width: 100%; font: var(--fs-sm)/1.45 var(--font-ui); }
.mk-legal .prose th, .mk-legal .prose td { text-align: left; vertical-align: top; padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--line); }
.mk-legal .prose th { color: var(--ink); font-weight: 650; }
.mk-legal__table { overflow-x: auto; contain: inline-size; }
.mk-legal__meta { font-size: var(--fs-sm); color: var(--ink-faint); margin-top: var(--space-4); }
.mk-legal-nav { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* How-it-works vignette variants */
.mk-session--mini { --lane-name: 6rem; margin-top: var(--space-5); padding: var(--space-3) var(--space-4); box-shadow: none; }
.mk-session--mini .mk-lane { grid-template-columns: var(--lane-name) minmax(0, 1fr); }
.mk-session--mini .mk-session__tracks .mk-playhead { display: block; left: calc(var(--lane-name) + var(--space-4) + (100% - var(--lane-name) - var(--space-4)) * 0.62); }
.mk-pop--inline { position: static; width: auto; max-width: none; margin: 0 0 var(--space-5); box-shadow: none; }
.mk-qa--inline { box-shadow: none; background: var(--bg); }
.mk-vig .steps__item { grid-template-columns: 1.75rem minmax(0, 1fr) auto; }
.mk-vig .steps__item .badge { justify-self: end; }
.mk-legal .prose > h2:first-child { margin-top: 0; }
.mk-legal-section { padding-top: var(--space-7); }
.mk-plan__cta .btn, .mk-topup .btn { white-space: normal; text-align: center; line-height: 1.2; padding-block: 0.5em; }
@media (max-width: 40rem) {
  .mk-table { min-width: 0; font-size: var(--fs-sm); }
  .mk-table th, .mk-table td { padding: var(--space-3) var(--space-2); }
  .mk-table th:first-child { padding-left: var(--space-4); }
  .mk-table thead th { font-size: var(--fs-md); }
  .mk-table td { width: 26%; }
}