

:root { --mk-champagne-rgb: 235 211 163; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html { background: var(--cd-brand-obsidian); }

body.cd {
  position: relative;            
  margin: 0;
  min-block-size: 100%;
  overflow-x: hidden;
}

body.cd::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.2;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'>\
<filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='220' height='220' filter='url(%23g)' opacity='0.038'/></svg>");
}

body.cd::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: min(880px, 96vh);
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(62% 66% at 22% -10%,
      rgb(var(--mk-champagne-rgb) / 0.26) 0%, rgb(var(--mk-champagne-rgb) / 0.085) 38%, transparent 72%),
    radial-gradient(40% 36% at 86% 0%,
      rgb(var(--mk-champagne-rgb) / 0.07) 0%, transparent 70%);
}

:where(body.cd) > * { position: relative; z-index: 1; }

.mk-shell {
  container-type: inline-size;
  container-name: cd;
  inline-size: 100%;
  max-inline-size: 74rem;
  margin-inline: auto;
  padding-inline: var(--cd-space-5);
}
.mk-shell--narrow { max-inline-size: 52rem; }

.mk-skip {
  position: absolute;
  inset-inline-start: var(--cd-space-4);
  inset-block-start: -100%;
  z-index: var(--cd-z-toast);
  padding: var(--cd-space-3) var(--cd-space-4);
  background: var(--cd-surface);
  border: var(--cd-border) solid var(--cd-ink);
  border-radius: var(--cd-radius-sm);
  text-decoration: none;
  color: var(--cd-ink);
}
.mk-skip:focus { inset-block-start: var(--cd-space-4); }

.mk-rise {
  --mk-delay: 0ms;
  animation: mk-rise var(--cd-dur-4) var(--cd-ease) both;
  animation-delay: var(--mk-delay);
}
@keyframes mk-rise {
  from { opacity: 0; translate: 0 calc(14px * var(--cd-motion)); }
  to   { opacity: 1; translate: 0 0; }
}
.mk-rise-1 { --mk-delay:  40ms; }
.mk-rise-2 { --mk-delay: 110ms; }
.mk-rise-3 { --mk-delay: 190ms; }
.mk-rise-4 { --mk-delay: 280ms; }

.mk-masthead {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--cd-z-sticky);
  background: color-mix(in oklab, var(--cd-canvas) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.25);
  border-block-end: var(--cd-hairline) solid var(--cd-line);
}
@supports not (backdrop-filter: blur(1px)) {
  .mk-masthead { background: var(--cd-canvas); }
}

:root { --mk-mast: 116px; }
@media (min-width: 760px) { :root { --mk-mast: 68px; } }

.mk-masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cd-space-2) var(--cd-space-6);
  min-block-size: 68px;
  padding-block: var(--cd-space-2);
}

.mk-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--cd-space-3);
  text-decoration: none;
  color: var(--cd-brand-gold-ink);
  border-radius: var(--cd-radius-xs);
  margin-inline-end: auto;
}
.mk-brand svg { inline-size: 30px; block-size: 30px; flex: none; }
.mk-brand__word {
  font-family: var(--cd-font-display);
  font-size: var(--cd-text-lg);
  letter-spacing: var(--cd-track-tight);
  line-height: var(--cd-leading-flat);
  white-space: nowrap;
}

.mk-brand__word b {
  font-weight: inherit;
  border-block-end: 2px solid currentColor;
  padding-block-end: 1px;
}

.mk-nav {
  order: 3;
  flex-basis: 100%;
  display: flex;
  gap: var(--cd-space-5);
  align-items: center;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--cd-space-5));
  padding-inline: var(--cd-space-5);
  padding-block-start: var(--cd-space-2);
  border-block-start: var(--cd-hairline) solid var(--cd-line);
}
.mk-nav::-webkit-scrollbar { display: none; }

@media (min-width: 760px) {
  .mk-masthead__inner { flex-wrap: nowrap; padding-block: 0; }
  .mk-nav {
    order: 0;
    flex-basis: auto;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    padding-block-start: 0;
    border-block-start: 0;
  }
}

.mk-nav a {
  font-family: var(--cd-font-brand);
  font-size: var(--cd-text-sm);
  color: var(--cd-ink-3);
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--cd-space-2);
  border-block-end: 2px solid transparent;
  border-radius: var(--cd-radius-xs);
  transition: color var(--cd-dur-1) var(--cd-ease), border-color var(--cd-dur-1) var(--cd-ease);
}
.mk-nav a:hover { color: var(--cd-ink); border-block-end-color: var(--cd-line-strong); }

.mk-nav a[aria-current="page"] {
  color: var(--cd-brand-gold-ink);
  border-block-end-color: var(--cd-brand-gold-ink);
}

.mk-masthead .cd-btn { flex: none; }

.mk-signin {
  font-family: var(--cd-font-brand);
  font-size: var(--cd-text-sm);
  color: var(--cd-ink-3);
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--cd-space-2);
  border-block-end: 2px solid transparent;
  border-radius: var(--cd-radius-xs);
  transition: color var(--cd-dur-1) var(--cd-ease), border-color var(--cd-dur-1) var(--cd-ease);
  flex: none;
}
.mk-signin:hover { color: var(--cd-ink); border-block-end-color: var(--cd-line-strong); }

@media (max-width: 759px) {
  .mk-signin { display: none; }
  .mk-masthead__inner { min-block-size: 52px; padding-block: var(--cd-space-1); }
  .mk-nav { padding-block-start: var(--cd-space-1); gap: var(--cd-space-4); }
  .mk-nav a { padding-block: var(--cd-space-1); }
}

.mk-section { padding-block: clamp(var(--cd-space-16), 9vw, var(--cd-space-24)); }
.mk-section--tight { padding-block: clamp(var(--cd-space-10), 6vw, var(--cd-space-16)); }
.mk-section + .mk-section { border-block-start: var(--cd-hairline) solid var(--cd-line); }

.mk-head { max-inline-size: 46rem; margin-block-end: var(--cd-space-10); }
.mk-head__eyebrow {
  display: flex;
  align-items: baseline;
  gap: var(--cd-space-3);
  margin-block-end: var(--cd-space-5);
}
.mk-head .cd-eyebrow {
  font-family: var(--cd-font-brand);
  letter-spacing: var(--cd-track-brand);
  color: var(--cd-brand-gold-ink);
}

.mk-stripe {
  background: var(--cd-brand-obsidian-deep);
  border-block: var(--cd-hairline) solid var(--cd-line-strong);
  padding-block: clamp(var(--cd-space-10), 5vw, var(--cd-space-16));
}

.mk-section + .mk-stripe,
.mk-stripe + .mk-section { border-block-start: 0; }

.mk-stripe__line {
  font-family: var(--cd-font-display);
  font-weight: var(--cd-weight-regular);
  font-size: clamp(1.5rem, 3.2vw, 2.15rem);
  line-height: var(--cd-leading-tight);
  letter-spacing: -0.02em;
  color: var(--cd-ink);
  max-inline-size: 26ch;
  margin: 0;
}
.mk-stripe__line b { color: var(--cd-brand-champagne); font-weight: inherit; }

.mk-stripe__inner { display: grid; gap: var(--cd-space-5); align-items: baseline; }
@media (min-width: 900px) {
  .mk-stripe__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--cd-space-12); }
}
.mk-stripe__note {
  font-size: var(--cd-text-sm);
  line-height: var(--cd-leading-normal);
  color: var(--cd-ink-2);
  margin: 0;
}

.mk-signup { display: grid; gap: var(--cd-space-8); }
@media (min-width: 900px) {
  .mk-signup {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    
    grid-template-rows: auto 1fr;
    column-gap: var(--cd-space-10);
    align-items: start;
  }
  .mk-signup__intro { grid-area: 1 / 1; }
  .mk-signup__next  { grid-area: 2 / 1; }
  
  .mk-signup__form  { grid-area: 1 / 2 / span 2; }
}

.mk-h1 {
  font-family: var(--cd-font-display);
  font-weight: var(--cd-weight-regular);
  font-size: clamp(2.75rem, 7.6vw, 5rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}
.mk-h2 {
  font-family: var(--cd-font-display);
  font-weight: var(--cd-weight-regular);
  font-size: clamp(1.9rem, 4.1vw, 3rem);
  line-height: 1.09;
  letter-spacing: -0.024em;
  text-wrap: balance;
  margin: 0;
}
.mk-h3 {
  font-family: var(--cd-font-display);
  font-weight: var(--cd-weight-regular);
  font-size: var(--cd-text-lg);
  line-height: var(--cd-leading-snug);
  letter-spacing: var(--cd-track-tight);
  margin: 0;
}

.mk-lead {
  font-size: clamp(var(--cd-text-md), 1.6vw, var(--cd-text-lg));
  line-height: var(--cd-leading-normal);
  color: var(--cd-ink-2);
  max-inline-size: 40rem;
  margin: 0;
  text-wrap: pretty;
}
.mk-p { margin: 0; max-inline-size: var(--cd-measure); color: var(--cd-ink-2); text-wrap: pretty; }
.mk-p strong, .mk-p b { color: var(--cd-ink); font-weight: var(--cd-weight-semi); }

.mk-undercut {
  display: block;
  font-style: italic;
  color: var(--cd-brand-gold-ink);
  letter-spacing: -0.018em;
  padding-block-start: var(--cd-space-4);
  margin-block-start: var(--cd-space-4);
  border-block-start: 2px solid var(--cd-ink);
  text-wrap: balance;
}

.mk-undercut--word { font-style: normal; }
.mk-undercut__i    { font-style: italic; }

.mk-hero { padding-block: clamp(var(--cd-space-12), 8vw, var(--cd-space-24)) var(--cd-space-12); }

:root { --mk-peek: 132px; }
@media (min-width: 760px) { :root { --mk-peek: 148px; } }

.mk-hero--banner { padding-block: 0; }

.mk-hero--banner > .mk-shell--narrow {
  min-block-size: max(31rem, calc(100svh - var(--mk-mast) - var(--mk-peek)));
  display: grid;
  grid-template-rows: 1fr auto;
  text-align: center;
  padding-block: var(--cd-space-10);
}
.mk-hero__statement { align-self: center; }

.mk-hero--banner .mk-cta {
  justify-content: center;
  flex-direction: column;
  align-self: end;
  margin-block-start: var(--cd-space-10);
}
.mk-hero--banner .mk-undercut {
  
  border-block-start: 0;
  padding-block-start: var(--cd-space-6);
  margin-block-start: var(--cd-space-5);
  position: relative;
}
.mk-hero--banner .mk-undercut::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: min(58%, 26rem);
  block-size: 2px;
  background: var(--cd-ink);
}

.mk-hero__line2 { font-size: 0.94em; }

.mk-hero__prop {
  margin: var(--cd-space-6) auto 0;
  max-inline-size: 52ch;
  font-size: var(--cd-text-md);
  line-height: var(--cd-leading-normal);
  color: var(--cd-ink-2);
}

.mk-cta__pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--cd-space-4);
}

.mk-hero__eyebrow {
  font-family: var(--cd-font-brand);
  font-size: var(--cd-text-2xs);
  font-weight: var(--cd-weight-semi);
  letter-spacing: var(--cd-track-brand);
  text-transform: uppercase;
  color: var(--cd-brand-gold-ink);
  margin: 0 0 var(--cd-space-6);
}

.mk-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cd-space-4); }
.mk-cta__note--who { opacity: 0.85; }
.mk-cta__note--who b { font-weight: inherit; color: var(--cd-brand-gold-ink); }
.mk-cta__note {
  font-size: var(--cd-text-sm);
  color: var(--cd-ink-3);
  max-inline-size: 38ch;
  line-height: var(--cd-leading-snug);
}

.mk-btn-gold {
  --cd-btn-bg: var(--cd-brand-gold-sheen);
  --cd-btn-fg: var(--cd-brand-on-gold);
  --cd-btn-line: transparent;

  
  background-color: var(--cd-brand-champagne);
  --cd-btn-shadow:
      inset 0 1px 0 0 rgb(255 252 244 / 0.45),
      0 6px 22px -8px rgb(var(--mk-champagne-rgb) / 0.5),
      0 2px 6px -2px rgb(0 0 0 / 0.5);

  font-family: var(--cd-font-brand);
  font-weight: var(--cd-weight-semi);
  letter-spacing: 0.004em;
}

.mk-btn-gold:disabled,
.mk-btn-gold[aria-disabled="true"] {
  background-color: var(--cd-disabled-bg);
}
.mk-btn-gold:hover:not(:disabled, [aria-disabled="true"]) {
  --cd-btn-bg: linear-gradient(180deg,
      var(--cd-brand-champagne-lift) 0%,
      var(--cd-brand-champagne-lift) 48%,
      var(--cd-brand-champagne) 100%);
  --cd-btn-shadow:
      inset 0 1px 0 0 rgb(255 252 244 / 0.6),
      0 10px 34px -8px rgb(var(--mk-champagne-rgb) / 0.62),
      0 2px 6px -2px rgb(0 0 0 / 0.5);
}
.mk-btn-gold:active:not(:disabled, [aria-disabled="true"]) {
  --cd-btn-bg: linear-gradient(180deg,
      var(--cd-brand-champagne) 0%,
      var(--cd-brand-champagne-deep) 100%);
  --cd-btn-shadow: 0 2px 10px -6px rgb(var(--mk-champagne-rgb) / 0.5);
}

.mk-btn-gold:disabled,
.mk-btn-gold[aria-disabled="true"] { background-color: var(--cd-disabled-bg); }

.mk-btn-quiet {
  --cd-btn-bg: transparent;
  --cd-btn-fg: var(--cd-ink);
  --cd-btn-line: var(--cd-control-line);
  font-family: var(--cd-font-brand);
}
.mk-btn-quiet:hover:not(:disabled, [aria-disabled="true"]) {
  --cd-btn-bg: var(--cd-surface-2);
  --cd-btn-line: var(--cd-brand-gold-ink);
}

.mk-btn-gold, .mk-btn-quiet {
  transition:
    box-shadow  var(--cd-dur-2) var(--cd-ease),
    color       var(--cd-dur-1) var(--cd-ease),
    border-color var(--cd-dur-1) var(--cd-ease),
    translate   var(--cd-dur-1) var(--cd-ease);
}

.mk-evidence {
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-2xs);
  line-height: 1.7;
  color: var(--cd-ink-3);
  background: var(--cd-surface);
  border: var(--cd-hairline) solid var(--cd-line);
  border-inline-start: 2px solid var(--cd-accent);
  border-radius: var(--cd-radius-sm);
  padding: var(--cd-space-4);
  overflow-x: auto;
}
.mk-evidence b { color: var(--cd-ink); font-weight: var(--cd-weight-semi); }
.mk-evidence__label {
  display: block;
  font-family: var(--cd-font-brand);
  font-size: var(--cd-text-2xs);
  letter-spacing: var(--cd-track-brand);
  text-transform: uppercase;
  color: var(--cd-ink-3);
  margin-block-end: var(--cd-space-2);
}

.mk-split { display: grid; gap: var(--cd-space-8); }
.mk-split > * { min-inline-size: 0; }
@media (min-width: 900px) { .mk-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--cd-space-10); } }

.mk-panel {
  border: var(--cd-border) solid var(--cd-line-strong);
  border-radius: var(--cd-radius-md);
  background: var(--cd-surface);
  padding: var(--cd-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--cd-space-4);
}

.mk-panel--quiet { background: var(--cd-brand-obsidian-deep); border-color: var(--cd-line); }
.mk-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--cd-space-3); }
.mk-panel__title { font-family: var(--cd-font-brand); font-size: var(--cd-text-2xs); letter-spacing: var(--cd-track-brand); text-transform: uppercase; color: var(--cd-ink-3); font-weight: var(--cd-weight-semi); }

.mk-plans { display: grid; gap: var(--cd-space-6); align-items: stretch; }
@media (min-width: 780px) { .mk-plans { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }

.mk-plan {
  display: flex;
  flex-direction: column;
  gap: var(--cd-space-4);
  padding: var(--cd-space-6);
  background: var(--cd-surface);
  border: var(--cd-border) solid var(--cd-line-strong);
  border-radius: var(--cd-radius-md);
}

.mk-plan--featured {
  border-color: var(--cd-brand-gold-ink);
  border-width: var(--cd-border-strong);
  box-shadow: 0 0 44px -20px rgb(var(--mk-champagne-rgb) / 0.35);
}
.mk-plan__name { font-family: var(--cd-font-display); font-size: var(--cd-text-lg); letter-spacing: var(--cd-track-tight); margin: 0; }
.mk-plan__who  { font-size: var(--cd-text-sm); color: var(--cd-ink-3); line-height: var(--cd-leading-snug); min-block-size: 2.6em; }
.mk-plan__price {
  font-family: var(--cd-font-display);
  font-size: var(--cd-text-3xl);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.024em;
}
.mk-plan__price small { font-family: var(--cd-font-body); font-size: var(--cd-text-sm); color: var(--cd-ink-3); letter-spacing: 0; }
.mk-plan__unit { font-size: var(--cd-text-xs); color: var(--cd-ink-3); margin-block-start: var(--cd-space-2); }
.mk-plan ul { display: flex; flex-direction: column; gap: var(--cd-space-2); font-size: var(--cd-text-sm); color: var(--cd-ink-2); flex: 1; }
.mk-plan li { display: grid; grid-template-columns: 1.1em 1fr; gap: var(--cd-space-2); line-height: var(--cd-leading-snug); }
.mk-plan li::before { content: "—"; color: var(--cd-ink-4); }
.mk-plan .cd-btn { margin-block-start: var(--cd-space-2); }

.mk-hp {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mk-faq { border-block-start: var(--cd-hairline) solid var(--cd-line); }
.mk-faq details { border-block-end: var(--cd-hairline) solid var(--cd-line); }
.mk-faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cd-space-4);
  padding-block: var(--cd-space-5);
  min-block-size: var(--cd-tap);
  cursor: pointer;
  list-style: none;
  font-size: var(--cd-text-md);
  font-weight: var(--cd-weight-medium);
  border-radius: var(--cd-radius-xs);
}
.mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq summary::after {
  content: "+";
  font-family: var(--cd-font-mono);
  color: var(--cd-brand-gold-ink);
  font-size: var(--cd-text-lg);
  line-height: 1;
  flex: none;
}
.mk-faq details[open] summary::after { content: "–"; }
.mk-faq summary:hover { color: var(--cd-brand-gold-ink); }
.mk-faq__a { padding-block-end: var(--cd-space-6); color: var(--cd-ink-2); max-inline-size: var(--cd-measure); text-wrap: pretty; }
.mk-faq__a p + p { margin-block-start: var(--cd-space-3); }

.mk-faq__a b { color: var(--cd-ink); font-weight: var(--cd-weight-semi); }
.mk-faq__a ol { list-style: decimal outside; padding-inline-start: 1.5em; display: flex; flex-direction: column; gap: var(--cd-space-3); }
.mk-faq__a ol li { display: list-item; }
.mk-faq__a ol li::marker { color: var(--cd-brand-gold-ink); font-weight: var(--cd-weight-semi); }
.mk-faq__a ol + p { margin-block-start: var(--cd-space-3); }

.mk-toc {
  display: flex;
  gap: var(--cd-space-5);
  margin-block-start: var(--cd-space-8);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  border-block-start: var(--cd-hairline) solid var(--cd-line);
  padding-block-start: var(--cd-space-4);
}
.mk-toc::-webkit-scrollbar { display: none; }
.mk-toc a {
  font-family: var(--cd-font-brand);
  font-size: var(--cd-text-sm);
  color: var(--cd-ink-3);
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--cd-space-2);
  min-block-size: var(--cd-tap);
  display: inline-flex;
  align-items: center;
  border-block-end: 2px solid transparent;
  border-radius: var(--cd-radius-xs);
  transition: color var(--cd-dur-1) var(--cd-ease), border-color var(--cd-dur-1) var(--cd-ease);
}
.mk-toc a:hover { color: var(--cd-ink); border-block-end-color: var(--cd-line-strong); }
.mk-toc a:focus-visible { box-shadow: var(--cd-ring); outline: none; }

.mk-cta-band {
  border-block-start: var(--cd-border-strong) solid var(--cd-ink);
  padding-block: clamp(var(--cd-space-12), 8vw, var(--cd-space-20));
}
.mk-cta-band__inner { display: grid; gap: var(--cd-space-8); align-items: center; }
@media (min-width: 900px) { .mk-cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--cd-space-12); } }

.mk-footer {
  background: var(--cd-brand-obsidian-deep);
  color: var(--cd-brand-bone-3);
  padding-block: var(--cd-space-12) var(--cd-space-8);
  font-size: var(--cd-text-sm);
  border-block-start: var(--cd-hairline) solid var(--cd-line);
}
.mk-footer a { color: var(--cd-brand-bone-2); text-decoration: none; border-radius: var(--cd-radius-xs); }
.mk-footer a:hover { color: var(--cd-brand-champagne); text-decoration: underline; text-underline-offset: 0.2em; }
.mk-footer__grid { display: grid; gap: var(--cd-space-8); }
@media (min-width: 780px) { .mk-footer__grid { grid-template-columns: 1.6fr repeat(2, minmax(0, 1fr)); gap: var(--cd-space-10); } }
.mk-footer__title {
  font-family: var(--cd-font-brand);
  font-size: var(--cd-text-2xs);
  letter-spacing: var(--cd-track-brand);
  text-transform: uppercase;
  color: var(--cd-brand-bone-3);
  margin-block-end: var(--cd-space-4);
}
.mk-footer ul { display: flex; flex-direction: column; gap: var(--cd-space-3); }
.mk-footer__brand { color: var(--cd-brand-champagne); display: inline-flex; align-items: center; gap: var(--cd-space-3); }
.mk-footer__brand svg { inline-size: 28px; block-size: 28px; }
.mk-footer__note { color: var(--cd-brand-bone-3); max-inline-size: 30rem; line-height: var(--cd-leading-normal); margin-block-start: var(--cd-space-4); }

.mk-footer__base {
  margin-block-start: var(--cd-space-10);
  padding-block-start: var(--cd-space-6);
  border-block-start: var(--cd-hairline) solid var(--cd-line);
  display: flex; flex-wrap: wrap; gap: var(--cd-space-4) var(--cd-space-6);
  justify-content: space-between;
  color: var(--cd-brand-bone-3);
  font-size: var(--cd-text-xs);
}
.mk-footer :is(a, button):focus-visible {
  outline: 2px solid var(--cd-brand-bone);
  outline-offset: 2px;
}

.mk-compose { display: grid; gap: var(--cd-space-10); align-items: center; }
.mk-compose > * { min-inline-size: 0; }
@media (min-width: 1000px) {
  .mk-compose {
    grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
    gap: clamp(var(--cd-space-10), 5vw, var(--cd-space-20));
  }
  
  .mk-compose--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); }
  .mk-compose--flip > :first-child { order: 2; }
}

.mk-compose__copy { display: flex; flex-direction: column; gap: var(--cd-space-5); }
.mk-compose__copy .mk-lead { max-inline-size: 34ch; }
.mk-compose__copy .mk-p    { max-inline-size: 38ch; }

@keyframes mk-reveal {
  from { opacity: 0; translate: 0 20px; }
  to   { opacity: 1; translate: 0 0; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mk-reveal {
      animation: mk-reveal linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 30%;
    }
    
    .mk-reveal--late { animation-range: entry 14% cover 38%; }
  }
}

.mk-device {
  border-radius: var(--cd-radius-lg);
  overflow: hidden;
  
  position: relative;
  background: var(--cd-brand-paper);
  
  box-shadow:
      0 0 0 1px rgb(var(--mk-champagne-rgb) / 0.12),
      0 2px 8px -4px rgb(0 0 0 / 0.8),
      0 40px 80px -32px rgb(0 0 0 / 0.9),
      0 0 90px -30px rgb(var(--mk-champagne-rgb) / 0.16);
}

.mk-device__chrome {
  display: flex;
  align-items: center;
  gap: var(--cd-space-2);
  padding: var(--cd-space-3) var(--cd-space-4);
  background: var(--cd-brand-paper-sunken);
  border-block-end: var(--cd-hairline) solid var(--cd-brand-rule);
}
.mk-device__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--cd-brand-ink-4); flex: none; opacity: .5; }
.mk-device__url {
  flex: 1;
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-2xs);
  color: var(--cd-brand-ink-3);
  background: var(--cd-brand-paper-raised);
  border-radius: var(--cd-radius-pill);
  padding: var(--cd-space-1) var(--cd-space-3);
  margin-inline-start: var(--cd-space-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mk-device__body { --mk-device-pad: clamp(var(--cd-space-5), 3vw, var(--cd-space-8)); padding: var(--mk-device-pad); }

.mk-device__frame {
  --mk-device-pad: clamp(var(--cd-space-5), 3vw, var(--cd-space-8));
  display: block;
  inline-size: calc(100% - 2 * (var(--mk-device-pad) - var(--cd-space-4)));
  margin-inline: auto;
  margin-block-start: calc(var(--mk-device-pad) - var(--cd-space-4));
  min-block-size: 30rem;
  border: 0;
  background: transparent;
  color-scheme: light;                 
}

.mk-firm { display: flex; align-items: center; gap: var(--cd-space-3); }
.mk-firm__mark {
  inline-size: 38px; block-size: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--cd-radius-sm);
  background: var(--cd-accent-solid);
  color: var(--cd-on-accent);
  font-family: var(--cd-font-display);
  font-size: var(--cd-text-md);
  line-height: 1;
}
.mk-firm__name { font-family: var(--cd-font-display); font-size: var(--cd-text-md); letter-spacing: var(--cd-track-tight); }
.mk-firm__meta { font-size: var(--cd-text-xs); color: var(--cd-ink-3); }

@media (prefers-reduced-motion: no-preference) {
  .mk-device--dressing::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    
    background: linear-gradient(180deg, var(--cd-accent-solid) 0%, transparent 62%);
    animation: mk-dress-wash var(--cd-dur-4) var(--cd-ease) both;
  }
}
@keyframes mk-dress-wash {
  from { opacity: 0;   translate: 0 -30%; }
  30%  { opacity: .22; }
  to   { opacity: 0;   translate: 0 100%; }
}

:root { --mk-dock-h: 6rem; }

body:has(.mk-dock) { padding-block-end: calc(var(--mk-dock-h) + var(--cd-space-8)); }

.mk-dock {
  position: fixed;
  inset-block-end: var(--cd-space-4);
  inset-inline: var(--cd-space-4);
  z-index: var(--cd-z-sticky);
  margin-inline: auto;
  
  max-inline-size: var(--mk-demo-column);
  transition: max-inline-size var(--cd-dur-3, 400ms) var(--cd-ease);
  padding: var(--cd-space-4) var(--cd-space-5);
  border: var(--cd-hairline) solid rgb(var(--mk-champagne-rgb) / 0.28);
  border-radius: var(--cd-radius-lg);
  background: rgb(18 17 15 / 0.96);
  box-shadow:
      0 2px 8px -4px rgb(0 0 0 / 0.8),
      0 24px 60px -20px rgb(0 0 0 / 0.9);
}
@supports (backdrop-filter: blur(2px)) {
  
  .mk-dock { background: rgb(18 17 15 / 0.88); backdrop-filter: blur(16px) saturate(1.2); }
}

.mk-dock:has(.mk-tray:not([hidden])) { max-inline-size: 64rem; }

.mk-dock:has(.mk-tray:not([hidden])) .mk-dock__form { display: none; }

.mk-dock__inner { display: grid; gap: 0; }
.mk-dock__status:not(:empty) { margin-block-start: var(--cd-space-3); }
.mk-tray:not([hidden]) { margin-block-start: var(--cd-space-3); }

.mk-dock__form {
  display: flex;
  align-items: center;
  gap: var(--cd-space-3);
}

.mk-dock__label {
  flex: none;
  font-family: var(--cd-font-brand);
  letter-spacing: var(--cd-track-brand);
  color: var(--cd-brand-gold-ink);
}

.mk-dock__field {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  align-items: center;
  gap: var(--cd-space-2);
  padding-inline: var(--cd-space-4);
  
  background: var(--cd-brand-obsidian-sunken);
  border: var(--cd-hairline) solid rgb(var(--mk-champagne-rgb) / 0.28);
  border-radius: var(--cd-radius-pill);
  transition: border-color var(--cd-dur-1) var(--cd-ease),
              box-shadow   var(--cd-dur-1) var(--cd-ease);
}

.mk-dock__field:focus-within {
  border-color: var(--cd-brand-gold-ink);
  box-shadow: 0 0 0 3px rgb(var(--mk-champagne-rgb) / 0.28);
}
.mk-dock__field svg { flex: none; inline-size: 18px; block-size: 18px; color: var(--cd-brand-bone-3); }

.mk-dock__ok {
  flex: none;
  display: grid; place-items: center;
  inline-size: 20px; block-size: 20px;
  border-radius: var(--cd-radius-pill);
  background: var(--cd-success);
  color: var(--cd-brand-obsidian);
}
.mk-dock__ok[hidden] { display: none; }
.mk-dock__ok svg { inline-size: 12px; block-size: 12px; color: inherit; }

.mk-dock__input {
  flex: 1 1 auto;
  min-inline-size: 0;
  min-block-size: var(--cd-tap);
  padding: 0;
  font: inherit;
  font-size: var(--cd-text-base);
  color: var(--cd-brand-bone);
  background: transparent;
  border: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.mk-dock__input::placeholder { color: var(--cd-brand-bone-3); opacity: 1; }

.cd .mk-dock .mk-dock__field .mk-dock__input:focus,
.cd .mk-dock .mk-dock__field .mk-dock__input:focus-visible { outline: none; box-shadow: none; }

.cd .mk-dock .mk-dock__field .mk-dock__input:-webkit-autofill,
.cd .mk-dock .mk-dock__field .mk-dock__input:-webkit-autofill:hover,
.cd .mk-dock .mk-dock__field .mk-dock__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--cd-brand-bone);
  box-shadow: 0 0 0 40px var(--cd-brand-obsidian-sunken) inset;
  -webkit-box-shadow: 0 0 0 40px var(--cd-brand-obsidian-sunken) inset;
  caret-color: var(--cd-brand-bone);
}

.cd .mk-dock .mk-dock__field .mk-dock__input:autofill,
.cd .mk-dock .mk-dock__field .mk-dock__input:autofill:hover,
.cd .mk-dock .mk-dock__field .mk-dock__input:autofill:focus {
  -webkit-text-fill-color: var(--cd-brand-bone);
  box-shadow: 0 0 0 40px var(--cd-brand-obsidian-sunken) inset;
  caret-color: var(--cd-brand-bone);
}

.mk-dock__go { flex: none; border-radius: var(--cd-radius-pill); }

.mk-dock__status {
  margin: 0;
  font-size: var(--cd-text-sm);
  color: var(--cd-brand-bone-3);
}

.mk-dock__status .mk-fixture { max-inline-size: 100%; white-space: normal; text-align: start; }

.mk-dock__status[hidden] { display: none; }

.mk-dock__note {
  display: block;
  font-size: var(--cd-text-sm);
  line-height: var(--cd-leading-snug);
  color: var(--cd-brand-bone-2);
}

.mk-dock__hide {
  flex: none;
  background: none;
  border: 0;
  padding: var(--cd-space-2);
  font-family: var(--cd-font-brand);
  font-size: var(--cd-text-sm);
  color: var(--cd-brand-bone-3);
  cursor: pointer;
}

.mk-dock__hide:hover { color: var(--cd-brand-bone); }
.mk-dock__restore {
  display: inline-flex;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--cd-font-brand);
  letter-spacing: var(--cd-track-brand);
  font-size: var(--cd-text-sm);
  color: var(--cd-brand-gold-ink);
  cursor: pointer;
  white-space: nowrap;
}
.mk-dock__restore[hidden] { display: none; }
.mk-dock--min { max-inline-size: max-content; margin-inline: auto 0; padding: var(--cd-space-3) var(--cd-space-5); }
.mk-dock--min .mk-dock__inner { display: none; }

.mk-step {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  font-family: var(--cd-font-brand);
}
.mk-step__n {
  font-size: var(--cd-text-2xs);
  font-weight: var(--cd-weight-semi);
  letter-spacing: var(--cd-track-brand);
  text-transform: uppercase;
  color: var(--cd-brand-gold-ink);
}
.mk-step__q {
  font-size: var(--cd-text-sm);
  font-weight: var(--cd-weight-semi);
  line-height: var(--cd-leading-snug);
  color: var(--cd-brand-bone);
}

@media (max-width: 46rem) {
  .mk-tray__head { flex-wrap: wrap; gap: var(--cd-space-3) var(--cd-space-4); }
  .mk-tray__go { flex: 1 1 100%; order: 3; }
  .mk-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
  .mk-cat__icon { display: none; }
}

@media (max-width: 40rem) {
  .mk-dock { inset-inline: var(--cd-space-3); inset-block-end: var(--cd-space-3);
             padding: var(--cd-space-3); }
  .mk-dock__label { display: none; }
  .mk-dock__go .cd-btn__label { position: absolute; inline-size: 1px; block-size: 1px;
                                overflow: hidden; clip-path: inset(50%); }
  .mk-dock__go::after { content: "Go"; }
}

@media print {
  .mk-dock { display: none; }
}

.mk-tray {
  display: grid;
  gap: var(--cd-space-3);
  font-family: var(--cd-font-brand);
  color: var(--cd-brand-bone-3);
}
.mk-tray[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .mk-tray:not([hidden]) { animation: mk-tray-pop 240ms var(--cd-ease, ease-out) both; }
}
@keyframes mk-tray-pop {
  from { opacity: 0; translate: 0 -6px; }
  to   { opacity: 1; translate: 0 0; }
}

.mk-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--cd-space-2);
}

.mk-cat {
  display: flex;
  align-items: center;
  gap: var(--cd-space-3);
  min-block-size: var(--cd-tap);
  padding: var(--cd-space-2) var(--cd-space-3);
  border: var(--cd-hairline) solid var(--cd-brand-onyx-strong);
  border-radius: var(--cd-radius-md);
  background: rgb(255 255 255 / 0.03);
  font: inherit;
  text-align: start;
  color: var(--cd-brand-bone);
  cursor: pointer;
  transition: border-color var(--cd-dur-1) var(--cd-ease),
              background-color var(--cd-dur-1) var(--cd-ease),
              color var(--cd-dur-1) var(--cd-ease);
}
.mk-cat:hover { border-color: var(--cd-brand-gold-ink); }

.mk-cat__icon {
  flex: none;
  display: grid; place-items: center;
  inline-size: 32px; block-size: 32px;
  border-radius: var(--cd-radius-pill);
  background: rgb(255 255 255 / 0.05);
  color: var(--cd-brand-champagne);
  transition: color var(--cd-dur-1) var(--cd-ease),
              background-color var(--cd-dur-1) var(--cd-ease);
}
.mk-cat__icon svg { inline-size: 17px; block-size: 17px; }

.mk-cat__name {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-family: var(--cd-font-brand);
  font-size: var(--cd-text-sm);
  font-weight: var(--cd-weight-semi);
  line-height: var(--cd-leading-snug);
}

.mk-cat__switch {
  flex: none;
  position: relative;
  inline-size: 38px;
  block-size: 22px;
  border-radius: var(--cd-radius-pill);
  background-color: var(--cd-brand-onyx-strong);
  transition: background-color var(--cd-dur-2, 240ms) var(--cd-ease);
}
.mk-cat__switch::after {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  inline-size: 16px;
  block-size: 16px;
  border-radius: var(--cd-radius-pill);
  background: var(--cd-brand-bone-3);
  
  transition: translate var(--cd-dur-2, 240ms) var(--cd-ease),
              background-color var(--cd-dur-2, 240ms) var(--cd-ease);
}
.mk-cat[aria-pressed="true"] .mk-cat__switch {
  background-color: var(--cd-brand-champagne);
  background-image: var(--cd-brand-gold-sheen);
}
.mk-cat[aria-pressed="true"] .mk-cat__switch::after {
  translate: calc(16px * var(--cd-motion)) 0;
  background: var(--cd-brand-on-gold);
}

.mk-cat[aria-pressed="false"] { color: var(--cd-brand-bone-3); background: none; }
.mk-cat[aria-pressed="false"] .mk-cat__icon {
  color: var(--cd-brand-bone-3);
  background: rgb(255 255 255 / 0.03);
}

.mk-tray__head {
  display: flex;
  align-items: center;
  gap: var(--cd-space-5);
}
.mk-tray__go { flex: none; border-radius: var(--cd-radius-pill); }

.mk-customise__reset {
  flex: none;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-family: var(--cd-font-brand);
  font-size: var(--cd-text-sm);
  color: var(--cd-brand-gold-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  border-radius: var(--cd-radius-xs);
  white-space: nowrap;
}

.mk-plate { position: relative; container-type: inline-size; container-name: plate; }

.mk-annots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cd-space-3) var(--cd-space-6);
  margin-block-start: var(--cd-space-6);
}

.mk-annot {
  display: flex;
  align-items: baseline;
  gap: var(--cd-space-3);
  margin: 0;
  font-family: var(--cd-font-brand);
  font-size: var(--cd-text-2xs);
  letter-spacing: var(--cd-track-brand);
  text-transform: uppercase;
  color: var(--cd-brand-bone-3);
  line-height: var(--cd-leading-snug);
}

.mk-annot::before {
  content: "";
  flex: none;
  inline-size: var(--cd-space-6);
  block-size: var(--cd-hairline);
  background: var(--cd-brand-gold-ink);
  translate: 0 -0.3em;
}
.mk-annot__t { display: block; }

.mk-annot b {
  display: block;
  font-family: var(--cd-font-mono);
  font-weight: var(--cd-weight-semi);
  font-size: var(--cd-text-xs);
  color: var(--cd-brand-bone);
  letter-spacing: 0.01em;
  text-transform: none;
  margin-block-start: 0.25em;
}

:root { --mk-column: 34rem; --mk-demo-column: 51rem; }
.mk-artwork { max-inline-size: var(--mk-column); margin-inline: auto; }

.mk-section--demo { --mk-column: var(--mk-demo-column); }

@container plate (min-width: 62rem) {
  
  .mk-annots { display: contents; }
  .mk-annot {
    position: absolute;
    inset-block-start: var(--mk-y);
    inline-size: 14rem;
  }
  .mk-annot--right { inset-inline-start: calc(50% + 18rem); }
  
  .mk-annot--left {
    inset-inline-end: calc(50% + 18rem);
    flex-direction: row-reverse;
    text-align: end;
  }
}

.mk-note {
  font-size: var(--cd-text-sm);
  line-height: var(--cd-leading-snug);
  color: var(--cd-ink-2);
  border-inline-start: var(--cd-hairline) solid var(--cd-brand-gold-ink);
  padding-inline-start: var(--cd-space-4);
  max-inline-size: 34ch;
  text-wrap: pretty;
}
.mk-note b { color: var(--cd-ink-2); font-weight: var(--cd-weight-semi); }

.mk-cream {
  background: var(--cd-brand-paper);
  color: var(--cd-brand-ink);
  
  border-block: var(--cd-border-strong) solid var(--cd-brand-bone);
}

.mk-section + .mk-cream { border-block-start: var(--cd-border-strong) solid var(--cd-brand-bone); }
.mk-cream + .mk-section { border-block-start: 0; }

.mk-cream { isolation: isolate; }
.mk-cream .mk-annot { color: var(--cd-brand-ink-3); }
.mk-cream .mk-annot b { color: var(--cd-brand-ink); }
.mk-cream .mk-annot::before,
.mk-cream .mk-note { border-color: var(--cd-brand-brass); }
.mk-cream .mk-annot::before { background: var(--cd-brand-brass); }
.mk-cream .mk-head .cd-eyebrow { color: var(--cd-brand-brass); }

.mk-cream .mk-device {
  box-shadow:
      0 0 0 1px rgb(20 18 15 / 0.06),
      0 2px 6px -3px rgb(20 18 15 / 0.16),
      0 30px 60px -28px rgb(20 18 15 / 0.3);
}

.mk-cal {
  display: grid;
  gap: var(--cd-space-4);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-2xs);
}
.mk-cal__row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--cd-space-4); align-items: center; }
.mk-cal__who { color: var(--cd-ink-3); text-align: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mk-cal__strip {
  position: relative;
  block-size: 26px;
  border-radius: var(--cd-radius-xs);
  background: var(--cd-surface-2);
  border: var(--cd-hairline) solid var(--cd-line);
  overflow: hidden;
}
.mk-cal__busy {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--mk-from);
  inline-size: var(--mk-span);
  background: var(--cd-brand-onyx-strong);
  border-inline: var(--cd-hairline) solid var(--cd-brand-onyx);
}

.mk-cal__free {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--mk-from);
  inline-size: var(--mk-span);
  background: color-mix(in oklab, var(--cd-brand-duckegg) 26%, transparent);
  box-shadow: inset 0 0 0 1px var(--cd-brand-duckegg);
  border-radius: var(--cd-radius-xs);
}
.mk-cal__out {
  display: flex;
  align-items: baseline;
  gap: var(--cd-space-3);
  padding-block-start: var(--cd-space-4);
  border-block-start: var(--cd-hairline) solid var(--cd-line-strong);
}
.mk-cal__time {
  font-family: var(--cd-font-display);
  font-size: var(--cd-text-xl);
  color: var(--cd-brand-duckegg);
  letter-spacing: var(--cd-track-tight);
}
.mk-cal__verdict { color: var(--cd-ink-2); font-family: var(--cd-font-brand); font-size: var(--cd-text-sm); }

@media (max-width: 560px) {
  .mk-cal__row { grid-template-columns: minmax(0, 1fr); gap: var(--cd-space-1); }
  .mk-cal__who { text-align: start; }
}

@supports selector(:has(*)) {
  .mk-demo .mk-step { display: none; }
  .mk-demo .mk-step:target { display: block; }
  .mk-demo:not(:has(.mk-step:target)) .mk-step--1 { display: block; }
}

.mk-step { scroll-margin-block-start: calc(var(--mk-mast) + var(--cd-space-6)); }

.mk-demo { max-inline-size: 44rem; margin-inline: auto; }

.mk-fixture {
  display: inline-flex;
  align-items: center;
  gap: var(--cd-space-2);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-text-2xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cd-brand-bone-3);
  border: var(--cd-hairline) solid var(--cd-line-strong);
  border-radius: var(--cd-radius-pill);
  padding: var(--cd-space-1) var(--cd-space-3);
}
.mk-fixture::before {
  content: "";
  inline-size: 6px; block-size: 6px; border-radius: 50%;
  background: var(--cd-brand-duckegg);
  flex: none;
}

.mk-demo .mk-picks { position: relative; }
.mk-demo .mk-pick {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mk-demo .mk-pick:focus-visible + .mk-pick__face {
  --cd-ring:
      0 0 0 var(--cd-focus-w) var(--cd-focus-inner),
      0 0 0 var(--cd-focus-w-2) var(--cd-focus-outer);
}

.mk-demo .mk-pick:checked + .cd-option {
  background: var(--cd-accent-subtle);
  border-color: var(--cd-accent-line);
}
.mk-demo .mk-pick:checked + .cd-option .cd-option__mark {
  background: var(--cd-accent-solid);
  border-color: var(--cd-accent-solid);
}
.mk-demo .mk-pick:checked + .cd-option .cd-option__mark::after {
  content: "";
  inline-size: 7px; block-size: 7px;
  border-radius: var(--cd-radius-pill);
  background: var(--cd-on-accent);
}

.mk-demo .mk-pick:not(:checked) + .cd-option:hover {
  border-color: var(--cd-accent-line);
  box-shadow: var(--cd-ring), var(--cd-shadow-2);
  translate: 0 calc(-2px * var(--cd-motion));
}

.mk-demo .mk-pick:checked + .cd-segment {
  background: var(--cd-accent-subtle);
  border-color: var(--cd-accent-line);
  font-weight: var(--cd-weight-semi);
}
.mk-demo .mk-pick:checked + .cd-segment::before {
  background: var(--cd-accent-solid);
  border-color: var(--cd-accent-solid);
}
.mk-demo .mk-pick:not(:checked) + .cd-segment:hover {
  border-color: var(--cd-accent-line);
  translate: 0 calc(-1px * var(--cd-motion));
}

.mk-demo .mk-pick:checked + .cd-day {
  background: var(--cd-accent-solid);
  border-color: var(--cd-accent-solid);
  color: var(--cd-on-accent);
}
.mk-demo .mk-pick:checked + .cd-day :is(.cd-day__dow, .cd-day__free) { color: inherit; opacity: 0.85; }
.mk-demo .mk-pick:checked + .cd-day::after {
  content: "";
  position: absolute;
  inset-inline: 12%;
  inset-block-end: -6px;
  block-size: 2px;
  border-radius: 1px;
  background: var(--cd-ink);
}
.mk-demo .mk-pick:not(:checked) + .cd-day:hover {
  border-color: var(--cd-accent-line);
  box-shadow: var(--cd-ring), var(--cd-shadow-1);
  translate: 0 calc(-2px * var(--cd-motion));
}

.mk-demo .mk-pick:checked + .cd-slot {
  background: var(--cd-accent-solid);
  border-color: var(--cd-accent-solid);
  color: var(--cd-on-accent);
  font-weight: var(--cd-weight-semi);
}
.mk-demo .mk-pick:not(:checked) + .cd-slot:hover {
  border-color: var(--cd-accent-line);
  box-shadow: var(--cd-ring), var(--cd-shadow-1);
  translate: 0 calc(-2px * var(--cd-motion));
}

.mk-demo .mk-tally { block-size: 0; counter-reset: mk-mins 0 mk-fee 0; }
.mk-demo .mk-tally > i { display: block; block-size: 0; }

.mk-demo .mk-device__body:has(#d-svc-itr:checked) #t-svc-itr { counter-increment: mk-mins 30 mk-fee 242; }
.mk-demo .mk-device__body:has(#d-svc-ctr:checked) #t-svc-ctr { counter-increment: mk-mins 60 mk-fee 880; }
.mk-demo .mk-device__body:has(#d-svc-bas:checked) #t-svc-bas { counter-increment: mk-mins 20 mk-fee 165; }

.mk-demo .mk-device__body:has(#d-svc-itr:checked):has(#d-add-rental:checked) #t-add-rental { counter-increment: mk-mins 10 mk-fee 120; }
.mk-demo .mk-device__body:has(#d-svc-itr:checked):has(#d-add-sole:checked)   #t-add-sole   { counter-increment: mk-mins 15 mk-fee 300; }
.mk-demo .mk-device__body:has(#d-svc-itr:checked):has(#d-add-cgt:checked)    #t-add-cgt    { counter-increment: mk-mins 15 mk-fee 250; }

.mk-demo .mk-mins::after { content: counter(mk-mins) " min"; }
.mk-demo .mk-fee::after  { content: "$" counter(mk-fee) ".00"; }

.mk-demo .mk-addons { display: none; }
.mk-demo .mk-device__body:has(#d-svc-itr:checked) .mk-addons { display: block; }

.mk-demo .mk-when-rental { display: none; }
.mk-demo .mk-device__body:has(#d-svc-itr:checked):has(#d-add-rental:checked) .mk-when-rental { display: inline; }

.mk-demo .mk-v { display: none; }
.mk-demo .mk-device__body:has(#d-svc-itr:checked)    .mk-v--svc-itr,
.mk-demo .mk-device__body:has(#d-svc-ctr:checked)    .mk-v--svc-ctr,
.mk-demo .mk-device__body:has(#d-svc-bas:checked)    .mk-v--svc-bas,
.mk-demo .mk-device__body:has(#d-day-13:checked)     .mk-v--day-13,
.mk-demo .mk-device__body:has(#d-day-14:checked)     .mk-v--day-14,
.mk-demo .mk-device__body:has(#d-day-15:checked)     .mk-v--day-15,
.mk-demo .mk-device__body:has(#d-day-16:checked)     .mk-v--day-16,
.mk-demo .mk-device__body:has(#d-day-17:checked)     .mk-v--day-17,
.mk-demo .mk-device__body:has(#d-t-0900:checked)     .mk-v--t-0900,
.mk-demo .mk-device__body:has(#d-t-0930:checked)     .mk-v--t-0930,
.mk-demo .mk-device__body:has(#d-t-1030:checked)     .mk-v--t-1030,
.mk-demo .mk-device__body:has(#d-t-1100:checked)     .mk-v--t-1100,
.mk-demo .mk-device__body:has(#d-t-1300:checked)     .mk-v--t-1300,
.mk-demo .mk-device__body:has(#d-t-1330:checked)     .mk-v--t-1330,
.mk-demo .mk-device__body:has(#d-t-1430:checked)     .mk-v--t-1430,
.mk-demo .mk-device__body:has(#d-t-1500:checked)     .mk-v--t-1500,
.mk-demo .mk-device__body:has(#d-mode-office:checked) .mk-v--mode-office,
.mk-demo .mk-device__body:has(#d-mode-phone:checked)  .mk-v--mode-phone,
.mk-demo .mk-device__body:has(#d-mode-video:checked)  .mk-v--mode-video { display: inline; }

@supports not selector(:has(*)) {
  .mk-demo .mk-addons { display: block; }
  .mk-demo .mk-v--svc-itr,
  .mk-demo .mk-v--day-14,
  .mk-demo .mk-v--t-0930,
  .mk-demo .mk-v--mode-office { display: inline; }
  .mk-demo .mk-mins::after { content: "40 min"; }
  .mk-demo .mk-fee::after  { content: "$362.00"; }
}

.mk-inbox {
  border-radius: var(--cd-radius-lg);
  overflow: hidden;
  background: var(--cd-brand-paper);
  box-shadow:
      0 0 0 1px rgb(var(--mk-champagne-rgb) / 0.12),
      0 2px 8px -4px rgb(0 0 0 / 0.8),
      0 40px 80px -32px rgb(0 0 0 / 0.9);
}
.mk-inbox__head {
  padding: var(--cd-space-4) var(--cd-space-5);
  background: var(--cd-brand-paper-sunken);
  border-block-end: var(--cd-hairline) solid var(--cd-brand-rule);
  display: grid;
  gap: var(--cd-space-1);
  font-size: var(--cd-text-sm);
  color: var(--cd-brand-ink-2);
}
.mk-inbox__subject {
  font-family: var(--cd-font-display);
  font-size: var(--cd-text-md);
  color: var(--cd-brand-ink);
  letter-spacing: var(--cd-track-tight);
}
.mk-inbox__meta { font-family: var(--cd-font-mono); font-size: var(--cd-text-2xs); color: var(--cd-brand-ink-3); }

.mk-inbox__body > * { margin: 0; }

.mk-unbuilt {
  padding: var(--cd-space-10) var(--cd-space-6);
  text-align: center;
  text-wrap: pretty;
  font-size: var(--cd-text-sm);
  line-height: var(--cd-leading-normal);
  color: var(--cd-brand-ink-3);
}
.mk-unbuilt code {
  font-family: var(--cd-font-mono);
  font-size: 0.92em;
  color: var(--cd-brand-ink-2);
}

.mk-spec {
  border: var(--cd-border) solid var(--cd-line-strong);
  border-radius: var(--cd-radius-md);
  background: var(--cd-surface);
  overflow: hidden;
}
.mk-spec__row {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr) minmax(0, auto);
  gap: var(--cd-space-3) var(--cd-space-4);
  align-items: baseline;
  padding: var(--cd-space-4) var(--cd-space-5);
  font-size: var(--cd-text-sm);
}
.mk-spec__row + .mk-spec__row { border-block-start: var(--cd-hairline) solid var(--cd-line); }
.mk-spec__icon {
  inline-size: 1.25rem; block-size: 1.25rem;
  color: var(--cd-ink-3);
  flex: none;
  translate: 0 0.2em;                 
}
.mk-spec__label { color: var(--cd-ink-2); }
.mk-spec__value {
  color: var(--cd-ink);
  font-weight: var(--cd-weight-semi);
  text-align: end;
}

.mk-spec__value--yes { color: var(--cd-success); }
.mk-spec__value--no  { color: var(--cd-ink-3); font-weight: var(--cd-weight-medium); }
.mk-spec__note {
  grid-column: 2 / -1;
  margin-block-start: calc(-1 * var(--cd-space-2));
  font-size: var(--cd-text-xs);
  color: var(--cd-ink-3);
  text-align: end;
}
.mk-spec__foot {
  display: flex;
  gap: var(--cd-space-3);
  padding: var(--cd-space-4) var(--cd-space-5);
  background: var(--cd-surface-2);
  border-block-start: var(--cd-hairline) solid var(--cd-line);
  font-size: var(--cd-text-xs);
  color: var(--cd-ink-3);
  line-height: var(--cd-leading-snug);
}
.mk-spec__foot svg { inline-size: 1.1rem; block-size: 1.1rem; flex: none; translate: 0 0.15em; }
.mk-spec__head {
  padding: var(--cd-space-3) var(--cd-space-5);
  background: var(--cd-surface-2);
  border-block-end: var(--cd-hairline) solid var(--cd-line);
  font-family: var(--cd-font-brand);
  font-size: var(--cd-text-2xs);
  letter-spacing: var(--cd-track-brand);
  text-transform: uppercase;
  color: var(--cd-ink-3);
  font-weight: var(--cd-weight-semi);
}

.mk-uses { display: grid; gap: var(--cd-space-8); }
@media (min-width: 760px) { .mk-uses { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cd-space-10); } }

.mk-uses__head {
  display: flex;
  align-items: center;
  gap: var(--cd-space-3);
  padding-block-end: var(--cd-space-4);
  margin-block-end: var(--cd-space-4);
  border-block-end: var(--cd-hairline) solid var(--cd-line-strong);
  font-family: var(--cd-font-brand);
  font-size: var(--cd-text-sm);
  font-weight: var(--cd-weight-semi);
  color: var(--cd-ink);
}
.mk-uses__head svg { inline-size: 1.4rem; block-size: 1.4rem; flex: none; }
.mk-uses--yes .mk-uses__head svg { color: var(--cd-success); }
.mk-uses--no  .mk-uses__head svg { color: var(--cd-ink-3); }

.mk-uses ul { display: flex; flex-direction: column; gap: var(--cd-space-3); }
.mk-uses li {
  position: relative;
  padding-inline-start: 1.4em;
  font-size: var(--cd-text-sm);
  color: var(--cd-ink-2);
  line-height: var(--cd-leading-snug);
}
.mk-uses li::before {
  position: absolute;
  inset-inline-start: 0;
  font-family: var(--cd-font-mono);
}
.mk-uses--yes li::before { content: "+"; color: var(--cd-success); }

.mk-uses--no  li::before { content: "–"; color: var(--cd-ink-4); }

.mk-groups { display: grid; gap: var(--cd-space-8); }
@media (min-width: 820px) { .mk-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cd-space-10); } }

.mk-group__head {
  display: flex;
  align-items: center;
  gap: var(--cd-space-3);
  margin-block-end: var(--cd-space-4);
  font-family: var(--cd-font-brand);
  font-size: var(--cd-text-sm);
  font-weight: var(--cd-weight-semi);
  color: var(--cd-brand-gold-ink);
}
.mk-group__head svg { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }

.mk-group ul { display: flex; flex-direction: column; gap: var(--cd-space-3); }
.mk-group li {
  position: relative;
  padding-inline-start: 1.5em;
  font-size: var(--cd-text-sm);
  color: var(--cd-ink-2);
  line-height: var(--cd-leading-snug);
}
.mk-group li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  color: var(--cd-success);
  font-weight: var(--cd-weight-bold);
}
.mk-group li strong { color: var(--cd-ink); font-weight: var(--cd-weight-semi); }

.mk-points { display: grid; gap: var(--cd-space-8); }
@media (min-width: 760px) { .mk-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cd-space-10); } }
.mk-point__head {
  display: flex;
  align-items: center;
  gap: var(--cd-space-3);
  margin-block-end: var(--cd-space-2);
  font-family: var(--cd-font-brand);
  font-size: var(--cd-text-md);
  font-weight: var(--cd-weight-semi);
  color: var(--cd-ink);
}
.mk-point__head svg { inline-size: 1.5rem; block-size: 1.5rem; flex: none; color: var(--cd-brand-brass); }
.mk-point p { font-size: var(--cd-text-sm); color: var(--cd-ink-2); line-height: var(--cd-leading-snug); margin: 0; }

.mk-mt-4  { margin-block-start: var(--cd-space-4); }
.mk-mt-5  { margin-block-start: var(--cd-space-5); }
.mk-mt-6  { margin-block-start: var(--cd-space-6); }
.mk-mt-8  { margin-block-start: var(--cd-space-8); }
.mk-mt-10 { margin-block-start: var(--cd-space-10); }
.mk-mt-12 { margin-block-start: var(--cd-space-12); }
.mk-mb-5  { margin-block-end: var(--cd-space-5); }
.mk-mb-6  { margin-block-end: var(--cd-space-6); }
.mk-mx-auto { margin-inline: auto; }

.mk-centred { text-align: center; }
.mk-centred-note {
  margin-inline: auto;
  text-align: center;
  max-inline-size: var(--cd-measure);
}

.mk-head--flush   { margin-block-end: 0; }
.mk-head--narrow  { max-inline-size: 30rem; }
.mk-head--centred { max-inline-size: 34rem; margin-inline: auto; text-align: center; }
.mk-head__eyebrow--centred { justify-content: center; }

.mk-w-15ch { max-inline-size: 15ch; }
.mk-w-16ch { max-inline-size: 16ch; }
.mk-w-17ch { max-inline-size: 17ch; }
.mk-w-18ch { max-inline-size: 18ch; }
.mk-w-measure { max-inline-size: var(--cd-measure); }

.mk-undercut--xs { font-size: 0.46em; }
.mk-undercut--sm { font-size: 0.5em; }
.mk-undercut--md { font-size: 0.55em; }
.mk-undercut--lg { font-size: 0.6em; }

.mk-fill-25  { inline-size: 25%; }
.mk-fill-50  { inline-size: 50%; }
.mk-fill-75  { inline-size: 75%; }
.mk-fill-33  { inline-size: 33%; }
.mk-fill-66  { inline-size: 66%; }
.mk-fill-100 { inline-size: 100%; }

.mk-footer__base--only {
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: 0;
}

.mk-device--navy   { --cd-accent: #12294b; }
.mk-device--forest { --cd-accent: #2e5a51; }

.mk-device--unset  { --cd-accent: var(--cd-brand-graphite); }

.mk-y-0{--mk-y:0%} .mk-y-1{--mk-y:1%} .mk-y-2{--mk-y:2%} .mk-y-3{--mk-y:3%} .mk-y-4{--mk-y:4%} .mk-y-5{--mk-y:5%} .mk-y-6{--mk-y:6%} .mk-y-7{--mk-y:7%}
.mk-y-8{--mk-y:8%} .mk-y-9{--mk-y:9%} .mk-y-10{--mk-y:10%} .mk-y-11{--mk-y:11%} .mk-y-12{--mk-y:12%} .mk-y-13{--mk-y:13%} .mk-y-14{--mk-y:14%} .mk-y-15{--mk-y:15%}
.mk-y-16{--mk-y:16%} .mk-y-17{--mk-y:17%} .mk-y-18{--mk-y:18%} .mk-y-19{--mk-y:19%} .mk-y-20{--mk-y:20%} .mk-y-21{--mk-y:21%} .mk-y-22{--mk-y:22%} .mk-y-23{--mk-y:23%}
.mk-y-24{--mk-y:24%} .mk-y-25{--mk-y:25%} .mk-y-26{--mk-y:26%} .mk-y-27{--mk-y:27%} .mk-y-28{--mk-y:28%} .mk-y-29{--mk-y:29%} .mk-y-30{--mk-y:30%} .mk-y-31{--mk-y:31%}
.mk-y-32{--mk-y:32%} .mk-y-33{--mk-y:33%} .mk-y-34{--mk-y:34%} .mk-y-35{--mk-y:35%} .mk-y-36{--mk-y:36%} .mk-y-37{--mk-y:37%} .mk-y-38{--mk-y:38%} .mk-y-39{--mk-y:39%}
.mk-y-40{--mk-y:40%} .mk-y-41{--mk-y:41%} .mk-y-42{--mk-y:42%} .mk-y-43{--mk-y:43%} .mk-y-44{--mk-y:44%} .mk-y-45{--mk-y:45%} .mk-y-46{--mk-y:46%} .mk-y-47{--mk-y:47%}
.mk-y-48{--mk-y:48%} .mk-y-49{--mk-y:49%} .mk-y-50{--mk-y:50%} .mk-y-51{--mk-y:51%} .mk-y-52{--mk-y:52%} .mk-y-53{--mk-y:53%} .mk-y-54{--mk-y:54%} .mk-y-55{--mk-y:55%}
.mk-y-56{--mk-y:56%} .mk-y-57{--mk-y:57%} .mk-y-58{--mk-y:58%} .mk-y-59{--mk-y:59%} .mk-y-60{--mk-y:60%} .mk-y-61{--mk-y:61%} .mk-y-62{--mk-y:62%} .mk-y-63{--mk-y:63%}
.mk-y-64{--mk-y:64%} .mk-y-65{--mk-y:65%} .mk-y-66{--mk-y:66%} .mk-y-67{--mk-y:67%} .mk-y-68{--mk-y:68%} .mk-y-69{--mk-y:69%} .mk-y-70{--mk-y:70%} .mk-y-71{--mk-y:71%}
.mk-y-72{--mk-y:72%} .mk-y-73{--mk-y:73%} .mk-y-74{--mk-y:74%} .mk-y-75{--mk-y:75%} .mk-y-76{--mk-y:76%} .mk-y-77{--mk-y:77%} .mk-y-78{--mk-y:78%} .mk-y-79{--mk-y:79%}
.mk-y-80{--mk-y:80%} .mk-y-81{--mk-y:81%} .mk-y-82{--mk-y:82%} .mk-y-83{--mk-y:83%} .mk-y-84{--mk-y:84%} .mk-y-85{--mk-y:85%} .mk-y-86{--mk-y:86%} .mk-y-87{--mk-y:87%}
.mk-y-88{--mk-y:88%} .mk-y-89{--mk-y:89%} .mk-y-90{--mk-y:90%} .mk-y-91{--mk-y:91%} .mk-y-92{--mk-y:92%} .mk-y-93{--mk-y:93%} .mk-y-94{--mk-y:94%} .mk-y-95{--mk-y:95%}
.mk-y-96{--mk-y:96%} .mk-y-97{--mk-y:97%} .mk-y-98{--mk-y:98%} .mk-y-99{--mk-y:99%} .mk-y-100{--mk-y:100%}

.mk-from-0{--mk-from:0%} .mk-from-1{--mk-from:1%} .mk-from-2{--mk-from:2%} .mk-from-3{--mk-from:3%} .mk-from-4{--mk-from:4%} .mk-from-5{--mk-from:5%} .mk-from-6{--mk-from:6%} .mk-from-7{--mk-from:7%}
.mk-from-8{--mk-from:8%} .mk-from-9{--mk-from:9%} .mk-from-10{--mk-from:10%} .mk-from-11{--mk-from:11%} .mk-from-12{--mk-from:12%} .mk-from-13{--mk-from:13%} .mk-from-14{--mk-from:14%} .mk-from-15{--mk-from:15%}
.mk-from-16{--mk-from:16%} .mk-from-17{--mk-from:17%} .mk-from-18{--mk-from:18%} .mk-from-19{--mk-from:19%} .mk-from-20{--mk-from:20%} .mk-from-21{--mk-from:21%} .mk-from-22{--mk-from:22%} .mk-from-23{--mk-from:23%}
.mk-from-24{--mk-from:24%} .mk-from-25{--mk-from:25%} .mk-from-26{--mk-from:26%} .mk-from-27{--mk-from:27%} .mk-from-28{--mk-from:28%} .mk-from-29{--mk-from:29%} .mk-from-30{--mk-from:30%} .mk-from-31{--mk-from:31%}
.mk-from-32{--mk-from:32%} .mk-from-33{--mk-from:33%} .mk-from-34{--mk-from:34%} .mk-from-35{--mk-from:35%} .mk-from-36{--mk-from:36%} .mk-from-37{--mk-from:37%} .mk-from-38{--mk-from:38%} .mk-from-39{--mk-from:39%}
.mk-from-40{--mk-from:40%} .mk-from-41{--mk-from:41%} .mk-from-42{--mk-from:42%} .mk-from-43{--mk-from:43%} .mk-from-44{--mk-from:44%} .mk-from-45{--mk-from:45%} .mk-from-46{--mk-from:46%} .mk-from-47{--mk-from:47%}
.mk-from-48{--mk-from:48%} .mk-from-49{--mk-from:49%} .mk-from-50{--mk-from:50%} .mk-from-51{--mk-from:51%} .mk-from-52{--mk-from:52%} .mk-from-53{--mk-from:53%} .mk-from-54{--mk-from:54%} .mk-from-55{--mk-from:55%}
.mk-from-56{--mk-from:56%} .mk-from-57{--mk-from:57%} .mk-from-58{--mk-from:58%} .mk-from-59{--mk-from:59%} .mk-from-60{--mk-from:60%} .mk-from-61{--mk-from:61%} .mk-from-62{--mk-from:62%} .mk-from-63{--mk-from:63%}
.mk-from-64{--mk-from:64%} .mk-from-65{--mk-from:65%} .mk-from-66{--mk-from:66%} .mk-from-67{--mk-from:67%} .mk-from-68{--mk-from:68%} .mk-from-69{--mk-from:69%} .mk-from-70{--mk-from:70%} .mk-from-71{--mk-from:71%}
.mk-from-72{--mk-from:72%} .mk-from-73{--mk-from:73%} .mk-from-74{--mk-from:74%} .mk-from-75{--mk-from:75%} .mk-from-76{--mk-from:76%} .mk-from-77{--mk-from:77%} .mk-from-78{--mk-from:78%} .mk-from-79{--mk-from:79%}
.mk-from-80{--mk-from:80%} .mk-from-81{--mk-from:81%} .mk-from-82{--mk-from:82%} .mk-from-83{--mk-from:83%} .mk-from-84{--mk-from:84%} .mk-from-85{--mk-from:85%} .mk-from-86{--mk-from:86%} .mk-from-87{--mk-from:87%}
.mk-from-88{--mk-from:88%} .mk-from-89{--mk-from:89%} .mk-from-90{--mk-from:90%} .mk-from-91{--mk-from:91%} .mk-from-92{--mk-from:92%} .mk-from-93{--mk-from:93%} .mk-from-94{--mk-from:94%} .mk-from-95{--mk-from:95%}
.mk-from-96{--mk-from:96%} .mk-from-97{--mk-from:97%} .mk-from-98{--mk-from:98%} .mk-from-99{--mk-from:99%} .mk-from-100{--mk-from:100%}

.mk-span-1{--mk-span:1%} .mk-span-2{--mk-span:2%} .mk-span-3{--mk-span:3%} .mk-span-4{--mk-span:4%} .mk-span-5{--mk-span:5%} .mk-span-6{--mk-span:6%} .mk-span-7{--mk-span:7%} .mk-span-8{--mk-span:8%}
.mk-span-9{--mk-span:9%} .mk-span-10{--mk-span:10%} .mk-span-11{--mk-span:11%} .mk-span-12{--mk-span:12%} .mk-span-13{--mk-span:13%} .mk-span-14{--mk-span:14%} .mk-span-15{--mk-span:15%} .mk-span-16{--mk-span:16%}
.mk-span-17{--mk-span:17%} .mk-span-18{--mk-span:18%} .mk-span-19{--mk-span:19%} .mk-span-20{--mk-span:20%} .mk-span-21{--mk-span:21%} .mk-span-22{--mk-span:22%} .mk-span-23{--mk-span:23%} .mk-span-24{--mk-span:24%}
.mk-span-25{--mk-span:25%} .mk-span-26{--mk-span:26%} .mk-span-27{--mk-span:27%} .mk-span-28{--mk-span:28%} .mk-span-29{--mk-span:29%} .mk-span-30{--mk-span:30%} .mk-span-31{--mk-span:31%} .mk-span-32{--mk-span:32%}
.mk-span-33{--mk-span:33%} .mk-span-34{--mk-span:34%} .mk-span-35{--mk-span:35%} .mk-span-36{--mk-span:36%} .mk-span-37{--mk-span:37%} .mk-span-38{--mk-span:38%} .mk-span-39{--mk-span:39%} .mk-span-40{--mk-span:40%}
.mk-span-41{--mk-span:41%} .mk-span-42{--mk-span:42%} .mk-span-43{--mk-span:43%} .mk-span-44{--mk-span:44%} .mk-span-45{--mk-span:45%} .mk-span-46{--mk-span:46%} .mk-span-47{--mk-span:47%} .mk-span-48{--mk-span:48%}
.mk-span-49{--mk-span:49%} .mk-span-50{--mk-span:50%}

@media (prefers-contrast: more) {
  .mk-panel, .mk-plan, .mk-evidence { border-color: var(--cd-ink); }
  body.cd::before { display: none; }             
  body.cd::after  { display: none; }             
  .mk-masthead { backdrop-filter: none; background: var(--cd-canvas); }
  
  .mk-btn-gold { --cd-btn-bg: var(--cd-brand-champagne); --cd-btn-shadow: none; }
  .mk-plan--featured { box-shadow: none; }
  .mk-device { box-shadow: 0 0 0 1px var(--cd-ink); }
  
  .mk-annot { color: var(--cd-brand-bone); }
  .mk-cream .mk-annot { color: var(--cd-brand-ink); }
}

@media (forced-colors: active) {
  .mk-footer { background: Canvas; color: CanvasText; }
  
  .mk-stripe { background: Canvas; border-block-color: CanvasText; }
  
  .mk-btn-gold { --cd-btn-bg: ButtonFace; --cd-btn-fg: ButtonText; --cd-btn-line: ButtonText; --cd-btn-shadow: none; }
  body.cd::after { display: none; }
  .mk-device { box-shadow: none; border: 1px solid CanvasText; }
  .mk-annot::before { background: CanvasText; }
  
  .mk-cal__busy { background: CanvasText; }
  .mk-cal__free { background: Canvas; box-shadow: none; outline: 2px solid Highlight; }
  .mk-cal__time { color: Highlight; }
}

@media print {
  
  body.cd {
    
    --cd-canvas:    #fff;
    --cd-surface:   #fff;
    --cd-surface-2: #fff;

    --cd-ink:   var(--cd-brand-ink);
    --cd-ink-2: var(--cd-brand-ink-2);
    --cd-ink-3: var(--cd-brand-ink-3);
    --cd-ink-4: var(--cd-brand-ink-4);

    
    --cd-line:         var(--cd-brand-ink-4);
    --cd-line-strong:  var(--cd-brand-ink-3);
    --cd-control-line: var(--cd-brand-ink-3);

    
    --cd-brand-bone:      var(--cd-brand-ink);
    --cd-brand-bone-2:    var(--cd-brand-ink-2);
    --cd-brand-bone-3:    var(--cd-brand-ink-3);
    --cd-brand-bone-4:    var(--cd-brand-ink-4);
    --cd-brand-champagne: var(--cd-brand-brass);
    --cd-brand-gold-ink:  var(--cd-brand-brass);
    --cd-brand-duckegg:   var(--cd-brand-duckegg-ink);

    
    --cd-accent:              var(--cd-brand-brass);
    --cd-accent-solid:        var(--cd-brand-brass);
    --cd-accent-ink:          var(--cd-brand-brass);
    --cd-accent-line:         var(--cd-brand-brass);
    --cd-on-accent:           #fff;
    --cd-accent-subtle:       #fff;
    --cd-accent-subtle-hover: #fff;

    --cd-success: var(--cd-brand-success);
    --cd-warning: var(--cd-brand-warning);
    --cd-danger:  var(--cd-brand-danger);
    --cd-info:    var(--cd-brand-duckegg-ink);
    --cd-success-subtle: #fff;
    --cd-warning-subtle: #fff;
    --cd-danger-subtle:  #fff;
    --cd-info-subtle:    #fff;

    --cd-disabled-bg:  #fff;
    --cd-disabled-ink: var(--cd-brand-ink-3);

    --cd-shadow-strength: 0;
  }

  .mk-masthead, .mk-cta-band { display: none; }
  body.cd::before, body.cd::after { display: none; }
  
  .mk-footer, .mk-panel--quiet { background: #fff; }
  
  .mk-cream { border-block-color: var(--cd-brand-ink-4); }
  .mk-section { padding-block: 1.5rem; break-inside: avoid; }
  
  .mk-hero--banner > .mk-shell--narrow { min-block-size: 0; }
  .mk-faq details { display: block; }
  .mk-faq details > *:not(summary) { display: block !important; }
  
  .mk-reveal { animation: none !important; opacity: 1 !important; translate: none !important; }
  
  .mk-plate .mk-annots { display: flex !important; }
  .mk-plate .mk-annot { position: static !important; max-inline-size: none; }
  .mk-device { box-shadow: none; border: 1px solid #ccc; }
  .mk-compose { display: block; }
  .mk-compose > * + * { margin-block-start: 1rem; }
}
