/* The MoveHappy website (homepage, sign-up). It shares the office tokens with the app — Lato, the paper
   shadows, the wafer buttons — and adds the brand's own colours: the logo's magenta and charcoal, and the
   teal sky of the earlier site. */

:root {
  --mk-magenta: #d40f6d;        /* brand magenta, deepened so white text reads at 5:1 */
  --mk-magenta-deep: #b80b5e;
  --mk-magenta-soft: #fde7f1;
  --mk-logo-magenta: #ed127b;
  --mk-charcoal: #2b2c2e;
  --mk-teal: #0e7c8a;           /* teal text and icons, 4.9:1 on white */
  --mk-teal-soft: #e3f5f7;
  --mk-sky-top: #d8f1f5;
  --mk-sky-bottom: #f4fafb;
  --mk-page: #f7f8f8;
  --mk-wrap: 1180px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body.mk {
  margin: 0;
  font-family: var(--mh-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--mh-ink-body);
  background: var(--mk-page) var(--mh-texture-grain);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mk a {
  color: var(--mk-teal);
}

.mk h1,
.mk h2,
.mk h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--mh-ink);
}

.mk-wrap {
  width: min(var(--mk-wrap), calc(100% - 48px));
  margin: 0 auto;
}

.mk-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.mk-skip {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 100;
  padding: 8px 14px;
  color: var(--mh-on-accent);
  background: var(--mk-charcoal);
  border-radius: var(--mh-radius);
}

.mk-skip:focus {
  top: 12px;
}

.mk :focus-visible {
  outline: 2px solid var(--mk-teal);
  outline-offset: 2px;
}

/* ---- The logo ---------------------------------------------------------------------------------------- */

.mk-logo {
  display: block;
  width: 168px;
  height: auto;
}

.mk-logo__mark rect:first-child {
  fill: var(--mk-charcoal);
}

.mk-logo__screen {
  fill: var(--mk-logo-magenta);
}

.mk-logo__speed {
  fill: none;
  stroke: var(--mk-logo-magenta);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.mk-logo text {
  font-family: var(--mh-font);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mk-logo__move { fill: var(--mk-charcoal); }
.mk-logo__happy { fill: var(--mk-logo-magenta); }

/* ---- Buttons: the app's wafers, in brand colours ---------------------------------------------------- */

.mk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font: 700 15px/1.2 var(--mh-font);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--mh-radius);
  cursor: pointer;
  transition: box-shadow var(--mh-rise) var(--mh-ease-rise), transform var(--mh-rise) var(--mh-ease-rise), background-color var(--mh-fast);
}

.mk .mk-btn--primary {
  color: var(--mh-on-accent);
  background: var(--mh-sheen), var(--mk-magenta);
  border-color: var(--mk-magenta-deep);
  box-shadow: var(--mh-bevel-fill), var(--mh-shadow-lift);
}

.mk .mk-btn--light {
  color: var(--mh-ink);
  background: var(--mh-paper) var(--mh-sheen-light);
  border-color: var(--mh-line-strong);
  border-bottom-color: var(--mh-ink-faint);
  box-shadow: var(--mh-bevel), var(--mh-bevel-edge), var(--mh-shadow-lift);
}

.mk-btn:hover {
  transform: translateY(-1px);
}

.mk .mk-btn--primary:hover {
  box-shadow: var(--mh-bevel-fill), var(--mh-shadow-lift-hover);
}

.mk .mk-btn--light:hover {
  box-shadow: var(--mh-bevel), var(--mh-bevel-edge), var(--mh-shadow-lift-hover);
}

.mk-btn:active {
  transform: translateY(1px);
  box-shadow: var(--mh-shadow-press);
  transition-duration: var(--mh-fast);
}

.mk-btn--lg {
  padding: 14px 24px;
  font-size: 16px;
}

.mk-btn--block {
  width: 100%;
}

/* ---- Top bar ------------------------------------------------------------------------------------------ */

.mk-top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--mh-toolbar);
  border-bottom: 1px solid var(--mh-line);
  box-shadow: var(--mh-bevel), var(--mh-shadow-nav);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
}

.mk-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 68px;
}

.mk-brand {
  flex: none;
  display: inline-flex;
}

.mk-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.mk-links a {
  padding: 8px 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--mh-ink-body);
  text-decoration: none;
  border-radius: var(--mh-radius);
  transition: color var(--mh-fast), background-color var(--mh-fast);
}

.mk-links a:hover {
  color: var(--mh-ink);
  background: var(--mh-tint);
}

.mk-menu {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  margin-left: 8px;
  padding: 0 10px;
  background: var(--mh-paper);
  border: 1px solid var(--mh-line-strong);
  border-radius: var(--mh-radius);
  cursor: pointer;
}

.mk-menu span:not(.mk-sr) {
  display: block;
  height: 2px;
  background: var(--mh-ink);
  border-radius: 2px;
}

/* ---- Hero --------------------------------------------------------------------------------------------- */

.mk-hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 96px;
  background: linear-gradient(180deg, var(--mk-sky-top) 0%, var(--mk-sky-bottom) 78%, var(--mk-page) 100%);
}

.mk-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mk-cloud {
  position: absolute;
  fill: #ffffff;
  opacity: 0.85;
  filter: drop-shadow(0 6px 10px rgba(14, 124, 138, 0.08));
  animation: mk-drift 38s ease-in-out infinite alternate;
}

.mk-cloud--a { width: 220px; top: 36px; left: 4%; }
.mk-cloud--b { width: 150px; top: 170px; left: 46%; opacity: 0.7; animation-duration: 46s; }
.mk-cloud--c { width: 260px; bottom: 26px; right: 3%; animation-duration: 54s; }

@keyframes mk-drift {
  from { transform: translateX(0); }
  to { transform: translateX(48px); }
}

.mk-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 56px;
  align-items: center;
}

.mk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mk-teal);
  background: var(--mh-paper);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius-pill);
  box-shadow: var(--mh-shadow-xs);
}

.mk-dot {
  width: 8px;
  height: 8px;
  background: var(--mk-logo-magenta);
  border-radius: 50%;
}

.mk-hero h1 {
  font-size: clamp(38px, 5vw, 58px);
  letter-spacing: -0.03em;
}

.mk-lead {
  max-width: 520px;
  margin: 20px 0 28px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--mh-ink-body);
}

.mk-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.mk-assure {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--mh-ink-muted);
}

.mk-assure li::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 8px;
  margin-right: 8px;
  vertical-align: 3px;
  border-left: 2px solid var(--mk-teal);
  border-bottom: 2px solid var(--mk-teal);
  transform: rotate(-45deg);
}

/* The illustrated job calendar */
.mk-hero__visual {
  position: relative;
}

.mk-window {
  overflow: hidden;
  background: var(--mh-paper);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius-xl);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 8px 16px -6px rgba(14, 60, 70, 0.12), 0 36px 60px -24px rgba(14, 60, 70, 0.28);
}

.mk-window__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--mh-ink-muted);
  background: var(--mh-toolbar);
  border-bottom: 1px solid var(--mh-line);
}

.mk-window__bar i {
  width: 10px;
  height: 10px;
  background: var(--mh-line-strong);
  border-radius: 50%;
}

.mk-window__bar span {
  margin-left: 10px;
  padding: 2px 10px;
  background: var(--mh-subtle);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius-pill);
}

.mk-window__body {
  padding: 16px;
  background: var(--mh-canvas) var(--mh-texture-grain);
}

.mk-mock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 15px;
  color: var(--mh-ink);
}

.mk-mock__seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  font-size: 12px;
  background: var(--mh-subtle);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  box-shadow: var(--mh-shadow-pit);
}

.mk-mock__seg b,
.mk-mock__seg em {
  padding: 3px 10px;
  font-style: normal;
  border-radius: var(--mh-radius-sm);
}

.mk-mock__seg b {
  background: var(--mh-paper);
  box-shadow: var(--mh-bevel), var(--mh-shadow-xs), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.mk-mock__seg em {
  color: var(--mh-ink-muted);
}

.mk-mock__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  height: 300px;
}

.mk-mock__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 8px;
  background: var(--mh-paper) repeating-linear-gradient(180deg, transparent 0 37px, var(--mh-line-soft) 37px 38px);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
}

.mk-ribbon {
  margin: -1px -1px 0;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  border-radius: var(--mh-radius) var(--mh-radius) 0 0;
  background-image: var(--mh-sheen);
  box-shadow: var(--mh-bevel-fill);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.mk-ribbon--green { background-color: #5aa874; }
.mk-ribbon--red { background-color: #d9605a; }

.mk-paper {
  display: flex;
  flex-direction: column;
  margin: 0 8px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.35;
  border: 1px solid;
  border-radius: var(--mh-radius-sm);
  background-image: var(--mh-texture-grain);
  box-shadow: var(--mh-shadow-paper);
}

.mk-paper b {
  font-size: 12px;
}

.mk-paper small {
  margin-top: auto;
  font-size: 11px;
  opacity: 0.8;
}

.mk-paper--green { color: var(--mh-success-deep); background-color: var(--mh-success-soft); border-color: var(--mh-success-line); }
.mk-paper--amber { color: var(--mh-warning-ink); background-color: var(--mh-warning-soft); border-color: var(--mh-warning-line); }
.mk-paper--blue { color: var(--mh-blue-deep); background-color: var(--mh-blue-soft); border-color: var(--mh-blue-line); }
.mk-paper--pink { color: var(--mh-accent-deep); background-color: var(--mh-accent-soft); border-color: var(--mh-accent-line); }

.mk-paper--empty {
  flex: 1;
  align-items: center;
  justify-content: center;
  color: var(--mh-ink-soft);
  background: var(--mh-subtle) var(--mh-texture-hatch);
  border: 1px dashed var(--mh-line-strong);
  box-shadow: none;
}

.mk-h-26 { height: 26%; }
.mk-h-30 { height: 30%; }
.mk-h-38 { height: 38%; }
.mk-h-44 { height: 44%; }

.mk-float {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 190px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--mh-ink-muted);
  background: var(--mh-paper);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius-lg);
  box-shadow: var(--mh-shadow-md);
}

.mk-float strong {
  font-size: 22px;
  color: var(--mh-ink);
}

.mk-float__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--mh-tracking-caps);
  text-transform: uppercase;
  color: var(--mk-teal);
}

.mk-float--quote { left: -36px; bottom: -28px; }
.mk-float--goal { right: -24px; top: -26px; }

.mk-meter {
  display: block;
  height: 8px;
  margin: 6px 0 2px;
  overflow: hidden;
  background: var(--mh-tint);
  border-radius: var(--mh-radius-pill);
  box-shadow: var(--mh-shadow-pit);
}

.mk-meter i {
  display: block;
  width: 72%;
  height: 100%;
  background: var(--mk-teal);
  border-radius: inherit;
}

/* ---- Band of claims ----------------------------------------------------------------------------------- */

.mk-band {
  background: var(--mh-paper);
  border-top: 1px solid var(--mh-line);
  border-bottom: 1px solid var(--mh-line);
}

.mk-band__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mk-band p {
  margin: 0;
  padding: 22px 20px;
  font-size: 15px;
  color: var(--mh-ink-muted);
  border-left: 1px solid var(--mh-line-soft);
}

.mk-band p:first-child {
  border-left: 0;
  padding-left: 0;
}

.mk-band strong {
  color: var(--mh-ink);
}

/* ---- Sections ----------------------------------------------------------------------------------------- */

.mk-section {
  padding: 96px 0;
}

.mk-section--paper {
  background: var(--mh-paper);
  border-top: 1px solid var(--mh-line);
  border-bottom: 1px solid var(--mh-line);
}

.mk-head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}

.mk-head--left {
  margin: 0;
  text-align: left;
}

.mk-kicker {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: var(--mh-tracking-caps);
  text-transform: uppercase;
  color: var(--mk-teal);
}

.mk-head h2,
.mk-pricing h2,
.mk-final h2 {
  font-size: clamp(30px, 3.4vw, 40px);
}

.mk-head > p:last-child {
  margin: 16px 0 0;
  font-size: 18px;
  color: var(--mh-ink-muted);
}

/* Feature cards are paper on the page */
.mk-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.mk-card {
  padding: 24px;
  background: var(--mh-paper);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius-xl);
  box-shadow: var(--mh-shadow-sm);
  transition: box-shadow var(--mh-rise) var(--mh-ease-rise), transform var(--mh-rise) var(--mh-ease-rise);
}

.mk-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--mh-shadow-raise);
}

.mk-card h3 {
  margin: 16px 0 8px;
  font-size: 18px;
}

.mk-card p {
  margin: 0;
  font-size: 15px;
  color: var(--mh-ink-muted);
}

.mk-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--mh-radius-lg);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.mk-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mk-icon--blue { color: var(--mh-blue-deep); background: var(--mh-blue-soft); }
.mk-icon--teal { color: var(--mk-teal); background: var(--mk-teal-soft); }
.mk-icon--amber { color: var(--mh-warning-ink); background: var(--mh-warning-soft); }
.mk-icon--green { color: var(--mh-success-deep); background: var(--mh-success-soft); }
.mk-icon--pink { color: var(--mk-magenta-deep); background: var(--mk-magenta-soft); }
.mk-icon--violet { color: #5b45a8; background: #efebfa; }

/* How it works */
.mk-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.mk-steps li {
  position: relative;
  padding: 28px 24px 24px;
  background: var(--mh-subtle);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius-xl);
  box-shadow: var(--mh-shadow-pit);
}

.mk-steps__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 14px;
  font-weight: 700;
  color: var(--mh-on-accent);
  background: var(--mh-sheen), var(--mk-charcoal);
  border-radius: 50%;
  box-shadow: var(--mh-bevel-fill), var(--mh-shadow-lift);
}

.mk-steps h3 {
  margin-bottom: 8px;
  font-size: 19px;
}

.mk-steps p {
  margin: 0;
  color: var(--mh-ink-muted);
}

/* Pricing */
.mk-pricing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 64px;
  align-items: center;
}

.mk-pricing__copy > p:not(.mk-kicker) {
  font-size: 18px;
  color: var(--mh-ink-muted);
}

.mk-checks {
  margin: 24px 0;
  padding: 0;
  list-style: none;
}

.mk-checks li {
  position: relative;
  padding: 8px 0 8px 32px;
  border-bottom: 1px solid var(--mh-line-soft);
}

.mk-checks li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 14px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--mk-teal);
  border-bottom: 2px solid var(--mk-teal);
  transform: rotate(-45deg);
}

.mk-note {
  font-size: 14px !important;
}

.mk-price {
  padding: 32px;
  text-align: center;
  background: var(--mh-paper);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius-xl);
  box-shadow: var(--mh-shadow-md);
}

.mk-price__label {
  display: block;
  margin-bottom: 14px;
  font-weight: 700;
  color: var(--mh-ink);
}

.mk-price__crews {
  display: inline-flex;
  align-items: stretch;
  padding: 3px;
  background: var(--mh-subtle);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius);
  box-shadow: var(--mh-shadow-pit);
}

.mk-price__crews input {
  width: 80px;
  font: 700 22px/1 var(--mh-font);
  text-align: center;
  color: var(--mh-ink);
  background: transparent;
  border: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}

.mk-price__crews input::-webkit-inner-spin-button,
.mk-price__crews input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.mk-step {
  width: 44px;
  height: 44px;
  font: 700 22px/1 var(--mh-font);
  color: var(--mh-ink-body);
  background: var(--mh-paper) var(--mh-sheen-light);
  border: 1px solid var(--mh-line-strong);
  border-bottom-color: var(--mh-ink-faint);
  border-radius: var(--mh-radius-sm);
  box-shadow: var(--mh-bevel), var(--mh-shadow-xs);
  cursor: pointer;
}

.mk-step:active {
  box-shadow: var(--mh-shadow-press);
}

.mk-price__total {
  margin: 24px 0 0;
  color: var(--mh-ink-muted);
}

.mk-price__amount {
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--mh-ink);
}

.mk-price__each {
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--mh-ink-muted);
}

.mk-price__fine {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--mh-ink-muted);
}

/* Questions */
.mk-faq {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 48px;
}

.mk-faq__list details {
  border-bottom: 1px solid var(--mh-line);
}

.mk-faq__list summary {
  position: relative;
  padding: 18px 40px 18px 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--mh-ink);
  list-style: none;
  cursor: pointer;
}

.mk-faq__list summary::-webkit-details-marker {
  display: none;
}

.mk-faq__list summary::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 14px;
  font-size: 24px;
  font-weight: 400;
  color: var(--mh-ink-muted);
  transition: transform var(--mh-base) var(--mh-ease);
}

.mk-faq__list details[open] summary::after {
  transform: rotate(45deg);
}

.mk-faq__list p {
  margin: 0 0 20px;
  color: var(--mh-ink-muted);
}

/* Closing call */
.mk-final {
  padding: 80px 0 96px;
}

.mk-final__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 40px 48px;
  background: linear-gradient(120deg, var(--mk-teal-soft), #fbeef4);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius-xl);
  box-shadow: var(--mh-shadow-sm);
}

.mk-final p {
  margin: 10px 0 0;
  color: var(--mh-ink-body);
}

/* Footer */
.mk-footer {
  padding: 48px 0 32px;
  color: rgba(255, 255, 255, 0.72);
  background: var(--mk-charcoal) var(--mh-texture-grain-light);
}

.mk-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.mk-footer p {
  margin: 12px 0 0;
  font-size: 14px;
}

.mk-footer nav {
  display: grid;
  gap: 8px;
}

.mk-footer a {
  color: #ffffff;
  text-decoration: none;
}

.mk-footer a:hover {
  text-decoration: underline;
}

.mk-brand--small .mk-logo {
  width: 150px;
}

.mk-footer .mk-logo__move,
.mk-footer .mk-logo__mark rect:first-child {
  fill: #ffffff;
}

.mk-footer__legal {
  margin-top: 32px !important;
  padding-top: 20px;
  font-size: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* ---- Narrower screens --------------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .mk-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-hero__grid { grid-template-columns: 1fr; gap: 64px; }
  .mk-hero__visual { max-width: 640px; }
  .mk-pricing { grid-template-columns: 1fr; gap: 32px; }
  .mk-price { max-width: 460px; }
}

@media (max-width: 820px) {
  .mk-links {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 8px 16px 16px;
    background: var(--mh-paper);
    border-bottom: 1px solid var(--mh-line);
    box-shadow: var(--mh-shadow-md);
  }

  .mk-links.is-open { display: flex; }
  .mk-menu { display: inline-flex; }
  .mk-nav { gap: 12px; }
  .mk-nav__cta { margin-left: auto; }
  .mk-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-band p:nth-child(3) { border-left: 0; padding-left: 0; }
  .mk-steps { grid-template-columns: 1fr; }
  .mk-faq { grid-template-columns: 1fr; gap: 16px; }
  .mk-final__card { flex-direction: column; align-items: flex-start; padding: 32px; }
  .mk-footer__grid { grid-template-columns: 1fr; }
  .mk-float--quote { left: 8px; }
  .mk-float--goal { right: 8px; }
}

@media (max-width: 560px) {
  .mk-wrap { width: calc(100% - 32px); }
  .mk-features { grid-template-columns: 1fr; }
  .mk-hero { padding: 48px 0 72px; }
  .mk-lead { font-size: 17px; }
  .mk-mock__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 260px; }
  .mk-mock__col:last-child { display: none; }
  .mk-float { display: none; }
  .mk-section { padding: 64px 0; }
  .mk-band__grid { grid-template-columns: 1fr; }
  .mk-band p { border-left: 0; padding: 12px 0; }
  .mk-nav__cta { display: none; }
  .mk-menu { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mk-cloud { animation: none; }
  .mk-btn, .mk-card { transition: none; }
}

/* ---- Platform pages: sign-up, checkout, sign-in, billing and the console ------------------------------ */

.mk-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.mk-page {
  flex: 1;
  padding: 48px 0 72px;
}

.mk-narrow {
  max-width: 520px;
}

.mk-muted { color: var(--mh-ink-muted); }
.mk-center { text-align: center; }

.mk-panel {
  padding: 28px;
  background: var(--mh-paper);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius-xl);
  box-shadow: var(--mh-bevel), var(--mh-shadow-sm);
}

.mk-panel > h1 { font-size: 28px; margin-bottom: 8px; }
.mk-panel > h2 { font-size: 18px; margin-bottom: 14px; }
.mk-panel > p { margin: 0 0 16px; }
.mk-page h1 { font-size: clamp(28px, 3vw, 36px); }
.mk-page section > h2 { margin: 36px 0 14px; font-size: 20px; }

.mk-callout {
  margin: 0 0 18px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--mh-sky-ink);
  background: var(--mh-sky-soft);
  border: 1px solid var(--mh-sky-line);
  border-radius: var(--mh-radius);
}

.mk-callout--test {
  color: var(--mh-warning-ink);
  background: var(--mh-warning-soft) var(--mh-texture-hatch);
  border-color: var(--mh-warning-line);
}

.mk-callout--error {
  color: var(--mh-signal-deep);
  background: var(--mh-signal-soft);
  border-color: var(--mh-signal-line);
}

/* Forms */
.mk-form fieldset {
  min-width: 0;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}

.mk-form legend {
  width: 100%;
  margin: 0 0 14px;
  padding: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: var(--mh-tracking-caps);
  text-transform: uppercase;
  color: var(--mh-ink-muted);
  border-bottom: 1px solid var(--mh-line);
}

.mk-field {
  display: grid;
  align-content: start;
  gap: 6px;
  margin: 0 0 16px;
}

.mk-field > span:first-child,
.mk-field > label:first-child {
  font-size: 14px;
  font-weight: 700;
  color: var(--mh-ink);
}

.mk-field em {
  font-style: normal;
  font-weight: 400;
  color: var(--mh-ink-soft);
}

.mk-form input:not([type="checkbox"]):not([type="hidden"]),
.mk-inline input,
.mk-billing__crews input {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  font: 400 15px/1.2 var(--mh-font);
  color: var(--mh-ink);
  background: var(--mh-paper);
  border: 1px solid var(--mh-line-strong);
  border-radius: var(--mh-radius);
  box-shadow: var(--mh-shadow-field);
  transition: border-color var(--mh-fast), box-shadow var(--mh-fast);
}

.mk-form input:focus,
.mk-inline input:focus {
  outline: none;
  border-color: var(--mh-blue);
  box-shadow: var(--mh-shadow-field), 0 0 0 3px var(--mh-blue-line);
}

.mk-form input[aria-invalid="true"] {
  border-color: var(--mh-signal);
}

.mk-address {
  display: flex;
  align-items: stretch;
}

.mk-address input {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.mk-address b {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  font-weight: 400;
  white-space: nowrap;
  color: var(--mh-ink-muted);
  background: var(--mh-subtle);
  border: 1px solid var(--mh-line-strong);
  border-left: 0;
  border-radius: 0 var(--mh-radius) var(--mh-radius) 0;
}

.mk-help {
  margin: 0;
  font-size: 13px;
  color: var(--mh-ink-muted);
}

.mk-help[data-state="ok"] { color: var(--mh-success-deep); }
.mk-help[data-state="ok"]::before { content: "✓ "; font-weight: 700; }
.mk-help[data-state="bad"] { color: var(--mh-signal-deep); }

.mk-error {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--mh-signal-deep);
}

.mk-form > .mk-error { margin-bottom: 16px; }

.mk-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

.mk-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 20px;
  font-size: 14px;
  cursor: pointer;
}

.mk-check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--mk-magenta);
}

.mk-form .mk-btn--block { margin-top: 4px; }
.mk-form .mk-help.mk-center { margin-top: 14px; }

/* Sign-up */
.mk-signup {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 48px;
  align-items: start;
}

.mk-signup__intro {
  position: sticky;
  top: 108px;
}

.mk-signup__intro h1 { margin-bottom: 14px; }
.mk-signup__intro > p { margin: 0 0 24px; }

.mk-mini-steps {
  display: grid;
  gap: 10px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  counter-reset: mk-step;
}

.mk-mini-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  color: var(--mh-ink-muted);
  counter-increment: mk-step;
}

.mk-mini-steps li::before {
  content: counter(mk-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 13px;
  color: var(--mh-ink-muted);
  background: var(--mh-paper);
  border: 1px solid var(--mh-line-strong);
  border-radius: 50%;
  box-shadow: var(--mh-bevel), var(--mh-shadow-xs);
}

.mk-mini-steps li.is-current { color: var(--mh-ink); }

.mk-mini-steps li.is-current::before {
  color: var(--mh-on-accent);
  background: var(--mk-magenta);
  border-color: var(--mk-magenta-deep);
  box-shadow: var(--mh-bevel-fill), var(--mh-shadow-xs);
}

.mk-plan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  background: var(--mh-subtle);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius-lg);
}

.mk-plan__crews {
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--mh-ink);
}

.mk-plan .mk-price__crews input,
.mk-billing__crews .mk-price__crews input {
  width: 64px;
  height: auto;
  padding: 0;
  font: 700 20px/1 var(--mh-font);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.mk-plan .mk-step,
.mk-billing__crews .mk-step {
  width: 38px;
  height: 38px;
  font-size: 20px;
}

.mk-plan__total {
  display: grid;
  margin: 0;
  text-align: right;
}

.mk-plan__total strong {
  font-size: 30px;
  line-height: 1.1;
  color: var(--mh-ink);
}

.mk-plan__total span {
  font-size: 13px;
  color: var(--mh-ink-muted);
}

/* Checkout summary and lists of facts */
.mk-summary {
  display: grid;
  margin: 0 0 20px;
}

.mk-summary > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--mh-line-soft);
}

.mk-summary > div:last-child { border-bottom: 0; }
.mk-summary dt { color: var(--mh-ink-muted); }
.mk-summary dd { margin: 0; text-align: right; color: var(--mh-ink); overflow-wrap: anywhere; }

/* Done */
.mk-done,
.mk-spinner {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
}

.mk-done {
  background: var(--mh-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 28px no-repeat;
  box-shadow: var(--mh-bevel-fill), var(--mh-shadow-lift);
}

.mk-spinner {
  border: 4px solid var(--mh-line);
  border-top-color: var(--mk-magenta);
  animation: mk-spin 0.9s linear infinite;
}

@keyframes mk-spin { to { transform: rotate(360deg); } }

.mk-big-address {
  margin: 4px 0 16px !important;
  font-size: 22px;
  font-weight: 700;
  color: var(--mh-ink);
  overflow-wrap: anywhere;
}

/* Notices on a company's own address (unknown company, paused, provisioning) */
body.mk-notice {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  background: linear-gradient(var(--mk-sky-top), var(--mk-sky-bottom)) fixed;
}

.mk-notice__card {
  width: min(480px, 100%);
  padding: 36px;
  text-align: center;
  background: var(--mh-paper);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius-xl);
  box-shadow: var(--mh-bevel), var(--mh-shadow-sm);
}

.mk-notice__card .mk-brand { margin-bottom: 20px; }
.mk-notice__card h1 { font-size: 26px; margin-bottom: 10px; }
.mk-notice__card p { margin: 0 0 18px; color: var(--mh-ink-body); }

/* Buttons used only here */
.mk-btn--sm {
  padding: 6px 12px;
  font-size: 13px;
}

.mk .mk-btn--danger {
  color: var(--mh-on-accent);
  background: var(--mh-sheen), var(--mh-signal);
  border-color: var(--mh-signal-deep);
  box-shadow: var(--mh-bevel-fill), var(--mh-shadow-lift);
}

/* Tags for states */
.mk-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--mh-ink-muted);
  background: var(--mh-subtle);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius-xs);
}

.mk-tag--active,
.mk-tag--paid,
.mk-tag--completed { color: var(--mh-success-deep); background: var(--mh-success-soft); border-color: var(--mh-success-line); }
.mk-tag--past_due,
.mk-tag--open,
.mk-tag--started,
.mk-tag--provisioning { color: var(--mh-warning-ink); background: var(--mh-warning-soft); border-color: var(--mh-warning-line); }
.mk-tag--suspended,
.mk-tag--failed { color: var(--mh-signal-deep); background: var(--mh-signal-soft); border-color: var(--mh-signal-line); }

/* Tables (billing, console) */
.mk-table-wrap {
  overflow-x: auto;
  background: var(--mh-paper);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius-lg);
  box-shadow: var(--mh-shadow-xs);
}

.mk-table {
  width: 100%;
  font-size: 14px;
  border-collapse: collapse;
}

.mk-table th {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--mh-tracking-caps);
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mh-ink-muted);
  background: var(--mh-subtle);
  border-bottom: 1px solid var(--mh-line);
}

.mk-table td {
  padding: 10px 14px;
  vertical-align: top;
  border-bottom: 1px solid var(--mh-line-soft);
}

.mk-table tr:last-child td { border-bottom: 0; }
.mk-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.mk-table .mk-empty { padding: 28px; text-align: center; color: var(--mh-ink-muted); }
.mk-table .mk-muted { font-size: 13px; }

/* Billing */
.mk-billing h1 { margin-bottom: 24px; }

.mk-state {
  margin: 0 0 24px;
  padding: 20px 24px;
  border: 1px solid;
  border-radius: var(--mh-radius-lg);
  box-shadow: var(--mh-bevel), var(--mh-shadow-paper);
}

.mk-state h2 { font-size: 18px; margin-bottom: 6px; }
.mk-state p { margin: 0 0 14px; }
.mk-state--warn { background: var(--mh-warning-soft); border-color: var(--mh-warning-line); }
.mk-state--stop { background: var(--mh-signal-soft); border-color: var(--mh-signal-line); }

.mk-billing__grid,
.mk-console__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 8px;
}

.mk-billing__amount {
  margin: 0 0 4px !important;
}

.mk-billing__amount strong {
  font-size: 34px;
  line-height: 1.1;
  color: var(--mh-ink);
}

.mk-billing__crews {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--mh-line-soft);
}

.mk-billing__crews label {
  font-weight: 700;
  color: var(--mh-ink);
}

.mk-billing__cancel {
  margin: 32px 0 16px;
  padding: 14px 18px;
  background: var(--mh-paper);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius-lg);
}

.mk-billing__cancel summary {
  font-weight: 700;
  color: var(--mh-ink-body);
  cursor: pointer;
}

.mk-billing__cancel p { margin: 12px 0; }

/* Console */
.mk-console h1 { margin-bottom: 20px; }

.mk-console__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -16px 0 28px;
  padding: 0 0 12px;
  font-size: 14px;
  border-bottom: 1px solid var(--mh-line);
}

/* The console's sections: a row of tabs; the signed-in admin on the right. */
.mk-console__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.mk-console__nav a {
  padding: 7px 12px;
  font-weight: 700;
  color: var(--mh-ink-body);
  text-decoration: none;
  border-radius: var(--mh-radius);
  transition: background-color var(--mh-fast), color var(--mh-fast);
}

.mk-console__nav a:hover { color: var(--mh-ink); background: var(--mh-tint); }

.mk-console__nav a[aria-current="page"] {
  color: var(--mh-ink);
  background: var(--mh-paper);
  box-shadow: var(--mh-bevel), inset 0 0 0 1px var(--mh-line-strong), var(--mh-shadow-xs);
}

.mk-console__who { display: flex; align-items: center; gap: 10px; margin: 0; }
.mk-console__who a { text-decoration: none; }

.mk-console__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.mk-console__title h1 { margin: 0; }
.mk-crumb { margin: 0 0 6px; font-size: 14px; }

.mk-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.mk-stat {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  background: var(--mh-paper);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius-lg);
  box-shadow: var(--mh-bevel), var(--mh-shadow-xs);
}

.mk-stat span { font-size: 13px; color: var(--mh-ink-muted); }
.mk-stat strong { font-size: 24px; line-height: 1.2; color: var(--mh-ink); font-variant-numeric: tabular-nums; }

.mk-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.mk-filter a {
  padding: 5px 12px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  color: var(--mh-ink-body);
  border: 1px solid transparent;
  border-radius: var(--mh-radius);
}

.mk-filter a b { margin-left: 4px; font-weight: 400; color: var(--mh-ink-muted); }
.mk-filter a:hover { background: var(--mh-tint); }
.mk-filter a[aria-current="page"] { background: var(--mh-paper); border-color: var(--mh-line-strong); box-shadow: var(--mh-bevel), var(--mh-shadow-xs); }

.mk-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.mk-inline label { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--mh-ink); }
.mk-inline input { width: 80px; height: 34px; }

.mk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mk-actions form { margin: 0; }
.mk-console > .mk-panel { margin: 24px 0 8px; }

.mk-history {
  margin: 0;
  padding: 0;
  font-size: 14px;
  list-style: none;
}

.mk-history li {
  padding: 8px 0;
  border-bottom: 1px solid var(--mh-line-soft);
}

.mk-history time { margin-right: 8px; color: var(--mh-ink-muted); font-variant-numeric: tabular-nums; }

/* Privacy and other reading pages */
.mk-prose { max-width: 720px; }
.mk-prose h1 { margin-bottom: 6px; }
.mk-prose h2 { margin: 32px 0 10px; font-size: 20px; }
.mk-prose p { margin: 0 0 14px; }

.mk-footer--slim {
  padding: 20px 0;
  font-size: 14px;
}

.mk-footer--slim p { margin: 0 auto; }

@media (max-width: 960px) {
  .mk-signup { grid-template-columns: 1fr; gap: 24px; }
  .mk-signup__intro { position: static; }
  .mk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .mk-links--quiet {
    position: static;
    display: flex;
    flex-direction: row;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .mk-billing__grid,
  .mk-console__grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .mk-page { padding: 28px 0 48px; }
  .mk-panel { padding: 20px; }
  .mk-row { grid-template-columns: 1fr; }
  .mk-plan__total { text-align: left; }
  .mk-links--quiet a { padding: 8px; font-size: 14px; }
  .mk-console__bar { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .mk-spinner { animation-duration: 3s; }
}

/* ---- Console pages: settings rows, lists of services and checks, search ------------------------------ */

.mk-lede { max-width: 760px; margin: -8px 0 24px; color: var(--mh-ink-muted); }
.mk-small { margin-left: 8px; font-size: 14px; font-weight: 400; letter-spacing: 0; }
.mk-console h2 .mk-small { vertical-align: middle; }

.mk-form select,
.mk-form textarea,
.mk-inline select {
  width: 100%;
  min-width: 0;
  padding: 9px 12px;
  font: 400 15px/1.4 var(--mh-font);
  color: var(--mh-ink);
  background: var(--mh-paper);
  border: 1px solid var(--mh-line-strong);
  border-radius: var(--mh-radius);
  box-shadow: var(--mh-shadow-field);
}

.mk-form select { height: 42px; padding-top: 0; padding-bottom: 0; }
.mk-inline select { width: auto; height: 34px; padding: 0 8px; font-size: 14px; }
.mk-form textarea { resize: vertical; }
.mk-form select:focus, .mk-form textarea:focus { outline: none; border-color: var(--mh-blue); box-shadow: var(--mh-shadow-field), 0 0 0 3px var(--mh-blue-line); }
.mk-form :disabled { color: var(--mh-ink-muted); background: var(--mh-subtle); cursor: not-allowed; }

.mk-search {
  display: flex;
  gap: 8px;
  max-width: 560px;
  margin: 0 0 14px;
}

.mk-search input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  font: 400 14px/1 var(--mh-font);
  background: var(--mh-paper);
  border: 1px solid var(--mh-line-strong);
  border-radius: var(--mh-radius);
  box-shadow: var(--mh-shadow-field);
}

.mk-search input:focus { outline: none; border-color: var(--mh-blue); box-shadow: var(--mh-shadow-field), 0 0 0 3px var(--mh-blue-line); }
.mk-filter__gap { width: 16px; }

.mk-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--mh-line);
}

.mk-tabs a {
  margin-bottom: -1px;
  padding: 8px 14px;
  font-weight: 700;
  color: var(--mh-ink-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.mk-tabs a[aria-current="page"] { color: var(--mh-ink); border-bottom-color: var(--mk-magenta); }

/* A panel of settings: a head, rows of label + control, a foot with the save button. */
.mk-settings { margin: 0 0 20px; padding: 0; }
.mk-settings > .mk-field, .mk-settings > .mk-row, .mk-settings > .mk-check, .mk-settings > p { margin-left: 24px; margin-right: 24px; }
.mk-settings > .mk-field:first-of-type { margin-top: 20px; }

.mk-settings__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--mh-line-soft);
}

.mk-settings__head h2 { margin: 0; font-size: 17px; }
.mk-settings__head .mk-help { margin-top: 4px; }

.mk-settings__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  background: var(--mh-subtle);
  border-top: 1px solid var(--mh-line-soft);
  border-radius: 0 0 var(--mh-radius-xl) var(--mh-radius-xl);
}

.mk-settings__foot--sticky {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--mh-toolbar);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius-xl);
  box-shadow: var(--mh-bevel), var(--mh-shadow-md);
}

.mk-setting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 24px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--mh-line-soft);
}

.mk-setting:last-child { border-bottom: 0; }
.mk-setting__label label { font-weight: 700; color: var(--mh-ink); }
.mk-setting__label .mk-help { margin-top: 4px; }
.mk-setting__control { display: grid; gap: 6px; align-content: start; }
.mk-setting__control .mk-check { margin: 8px 0 0; }

.mk-inline-check { display: inline-flex; align-items: center; gap: 4px; font-weight: 400; cursor: pointer; }
.mk-inline-check input { margin: 0; }

/* Rows of things to open (services, checks): name and detail on the left, tags on the right. */
.mk-rows { margin: 0; padding: 0; list-style: none; }

.mk-rows li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--mh-line-soft);
}

.mk-rows li:last-child { border-bottom: 0; }
.mk-rows__main { display: grid; gap: 2px; min-width: 0; color: var(--mh-ink-body); text-decoration: none; }
.mk-rows__main strong { color: var(--mh-ink); }
a.mk-rows__main:hover strong { color: var(--mk-teal); }
.mk-rows__tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.mk-rows__empty { color: var(--mh-ink-muted); }

/* Choosing a provider */
.mk-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin: 0 0 20px;
}

.mk-choice {
  display: grid;
  gap: 4px;
  padding: 18px 20px;
  color: var(--mh-ink-body);
  text-decoration: none;
  background: var(--mh-paper);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius-lg);
  box-shadow: var(--mh-bevel), var(--mh-shadow-xs);
  transition: box-shadow var(--mh-rise) var(--mh-ease-rise), transform var(--mh-rise) var(--mh-ease-rise);
}

.mk-choice strong { color: var(--mh-ink); }
.mk-choice:hover { transform: translateY(-1px); box-shadow: var(--mh-bevel), var(--mh-shadow-lift-hover); }

.mk-reveal { display: inline-block; }
.mk-reveal > summary { list-style: none; }
.mk-reveal > summary::-webkit-details-marker { display: none; }
.mk-reveal[open] > summary { margin-bottom: 8px; }
.mk-reveal input { width: 220px; }
td.mk-actions { flex-wrap: wrap; align-items: flex-start; }
.mk-console > .mk-panel.mk-settings { margin-top: 0; }

@media (max-width: 820px) {
  .mk-setting { grid-template-columns: 1fr; gap: 10px; }
  .mk-console__bar { flex-direction: column; align-items: flex-start; }
}


/* ---- The movers network (for independent movers; docs/movers-network.md) ------------------------------ */
.mk-movers { background: var(--mk-teal-soft); border-top: 1px solid var(--mh-line); border-bottom: 1px solid var(--mh-line); }
.mk-movers__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; }
.mk-movers h2 { margin: 0 0 14px; }
.mk-movers__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 24px 0 0; }
.mk-movers__signin { font-weight: 700; }
.mk-movers__points { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.mk-movers__points li { padding: 16px 18px; color: var(--mh-ink-body); background: var(--mh-paper); border: 1px solid var(--mh-line); border-radius: var(--mh-radius-lg); box-shadow: var(--mh-shadow-xs); }
.mk-movers__points strong { color: var(--mh-ink); }
@media (max-width: 860px) { .mk-movers__grid { grid-template-columns: 1fr; gap: 28px; } }