/**
 * Support / contact page polish.
 * Scoped under .mk-page-head--contact and .mk-contact-section only.
 * Flat: ink #182021, blue #047857, white, hairlines. No card nests.
 */

.mk-page-head--contact {
  position: relative;
  overflow: hidden;
  text-align: left;
  padding-block: clamp(48px, 6vw, 80px);
  background:
    radial-gradient(circle at 14% 24%, rgb(4 120 87 / 0.1), transparent 34%),
    radial-gradient(circle at 88% 78%, rgb(4 120 87 / 0.08), transparent 32%),
    #eefbf6;
  border-bottom: 0;
}

.mk-support-px {
  position: absolute;
  display: block;
  pointer-events: none;
  background: #047857;
}

.mk-page-head--contact .mk-support-px--a { left: 10%; top: 22%; width: 12px; height: 12px; opacity: 0.85; }
.mk-page-head--contact .mk-support-px--b { left: 12%; top: 76%; width: 8px; height: 8px; background: #182021; opacity: 0.28; }
.mk-page-head--contact .mk-support-px--c { right: 14%; top: 18%; width: 10px; height: 10px; opacity: 0.55; }
.mk-page-head--contact .mk-support-px--d { right: 13%; top: 70%; width: 16px; height: 16px; background: transparent; box-shadow: inset 0 0 0 2px #047857; opacity: 0.75; }
.mk-page-head--contact .mk-support-px--e { left: 8%; top: 48%; width: 14px; height: 14px; background: transparent; box-shadow: inset 0 0 0 2px #182021; opacity: 0.22; }
.mk-page-head--contact .mk-support-px--f { right: 8%; top: 42%; width: 7px; height: 7px; opacity: 0.4; }

.mk-page-head--contact .mk-support-id {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  max-width: none;
  margin-inline: auto;
  text-align: left;
}

.mk-page-head--contact .mk-contact-portrait {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex: none;
  border: 3px solid #fff;
  box-shadow: 0 10px 24px rgb(24 32 33 / 0.08);
  display: block;
}

.mk-page-head--contact .mk-support-id-copy {
  min-width: 0;
}

.mk-page-head--contact h1 {
  max-width: none;
  margin: 0;
  color: #182021;
  text-align: left;
  font-size: clamp(1.7rem, 2.5vw, 2.45rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.mk-page-head--contact .mk-support-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  margin: 8px 0 0;
  color: #626968;
  font-size: 0.95rem;
  line-height: 1.4;
}

.mk-page-head--contact .mk-support-meta span + span::before {
  content: "·";
  margin: 0 0.45em;
  color: #b7bebf;
}

.mk-page-head--contact .lx-sub {
  max-width: 36rem;
  margin: 10px 0 0;
  color: #626968;
  font-size: 0.98rem;
  line-height: 1.5;
  text-align: left;
}

/* Support hours: sits in the page header, under the name line */
.mk-page-head--contact .mk-support-pill {
  position: relative;
  display: table;
  max-width: 100%;
  margin: 22px auto 0;
  padding: 8px 16px;
  border: 1px solid rgb(4 120 87 / 0.18);
  border-radius: 999px;
  background: #fff;
  color: #182021;
  font-size: 0.95rem;
  line-height: 1.35;
  text-align: center;
}

/* Since 2026-10-14 the pill sits between the heading and the name line, lined up with the heading. */
.mk-page-head--contact .mk-support-id-copy .mk-support-pill {
  margin: 12px 0 0;
  text-align: left;
}

.mk-page-head--contact .mk-support-pill-label {
  margin-right: 0.3em;
  color: #626968;
  font-weight: 500;
}

.mk-page-head--contact .mk-support-pill-time {
  font-weight: 650;
}

.mk-contact-section {
  padding-block: clamp(32px, 5vw, 56px) clamp(56px, 7vw, 96px);
  background: #FFFFFF;
}

/* One readable column: note, then the form */
.mk-contact-section .mk-contact-wrap {
  max-width: 44rem;
  margin-inline: auto;
}

/* What happens after you send */
.mk-contact-section .mk-contact-note {
  margin: 0 0 28px;
  padding: 14px 18px;
  border-radius: 14px;
  background: #eefbf6;
  color: #182021;
  font-size: 1rem;
  line-height: 1.55;
}

.mk-contact-section .mk-contact-layout,
.mk-contact-section .mk-contact-form-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.mk-contact-section .mk-contact-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  width: 100%;
}

.mk-contact-section .mk-contact-portrait {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex: none;
  border: 1px solid #e6e8ea;
  display: block;
}

.mk-contact-section .mk-contact-intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.mk-contact-section .mk-contact-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0;
  margin: 0;
  color: #626968;
  font-size: 0.98rem;
  line-height: 1.5;
  text-align: left;
}

.mk-contact-section .mk-contact-meta span:not(:last-child)::after {
  content: "·";
  margin: 0 0.55em;
  color: #b7bbba;
}

.mk-contact-section .mk-contact-form-card:hover {
  transform: none;
  box-shadow: none;
}

.mk-contact-section .mk-contact-form-lead {
  margin: 0;
  font-family: var(--font-display, var(--font-body, inherit));
  font-size: 1.2rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: #182021;
}

.mk-contact-section .mk-contact-form-card .mk-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 24px;
  width: 100%;
  max-width: none;
}

.mk-contact-section .mk-contact-form-card .mk-form > * {
  grid-column: 1 / -1;
  min-width: 0;
}

.mk-contact-section .mk-contact-form-card .mk-form > .mk-field:has(input[name="ep_name"]),
.mk-contact-section .mk-contact-form-card .mk-form > .mk-field:has(input[name="ep_email"]) {
  grid-column: auto;
}

.mk-contact-section .mk-field label {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #182021;
}

.mk-contact-section .mk-field input,
.mk-contact-section .mk-field textarea,
.mk-contact-section .mk-field select {
  width: 100%;
  padding: 14px 20px;
  border: 1px solid #e6e8ea;
  border-radius: 999px;
  background: #FFFFFF;
  color: #182021;
  font: inherit;
  font-size: 0.98rem;
  box-shadow: none;
  transition: border-color 0.15s ease;
}

.mk-contact-section .mk-field textarea {
  resize: vertical;
  min-height: 168px;
  border-radius: 16px;
  padding: 16px 18px;
}

.mk-contact-section .mk-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23182021' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  padding-right: 44px;
}

.mk-contact-section .mk-field input:focus,
.mk-contact-section .mk-field textarea:focus,
.mk-contact-section .mk-field select:focus {
  outline: 2px solid #047857;
  outline-offset: 2px;
  border-color: #047857;
  box-shadow: none;
}

.mk-contact-section .mk-form-note {
  font-size: 0.88rem;
  color: #626968;
  margin: 4px 0 0;
}

.mk-contact-section .mk-form-note a {
  color: #182021;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mk-contact-section .mk-form-note a:hover {
  color: #047857;
}

/* Small helper lines under a field. Higher specificity than the plugin stylesheet, which loads later. */
.mk-contact-section .mk-contact-form-card .mk-field-hint {
  margin: 8px 0 0 4px;
  color: #626968;
  font-size: 0.86rem;
  line-height: 1.45;
}

.mk-contact-section .mk-contact-form-card .mk-field-hint:empty {
  margin: 0;
}

/* The topic line (for example Feature request). Only takes space when it has text. */
.mk-contact-section .mk-contact-form-card .mankai-intake-topic-hint:not(:empty) {
  margin: 10px 0 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: #eefbf6;
  color: #182021;
  font-size: 0.92rem;
  font-weight: 500;
}

.mk-contact-section .mk-field select {
  cursor: pointer;
}

.mk-contact-section .mk-contact-form-card .mk-form button[type="submit"] {
  justify-content: space-between;
  gap: 16px;
}

/* Status: hairline panels, not tinted cards */
.mk-contact-section .mk-contact-status {
  padding: 14px 0;
  border-radius: 0;
  border: 0;
  border-top: 1px solid #e6e8ea;
  border-bottom: 1px solid #e6e8ea;
  background: transparent;
  font-size: 0.98rem;
  line-height: 1.55;
  color: #182021;
}

.mk-contact-section .mk-contact-status p {
  margin: 0;
  color: inherit;
}

.mk-contact-section .mk-contact-status--ok {
  border-top-color: #047857;
}

.mk-contact-section .mk-contact-status--error {
  border-top-color: #182021;
}

.mk-contact-section .mk-contact-status a {
  color: #047857;
  font-weight: 600;
}

.mk-contact-section .mk-contact-status ul {
  margin: 8px 0 0;
  padding-left: 1.2em;
}

.mk-contact-section .mk-contact-status li {
  margin: 0 0 4px;
}

@media (max-width: 820px) {
  .mk-page-head--contact .mk-support-id {
    gap: 16px;
  }

  .mk-page-head--contact .mk-contact-portrait {
    width: 96px;
    height: 96px;
  }

  .mk-page-head--contact h1 {
    font-size: 1.35rem;
    white-space: normal;
  }

  .mk-page-head--contact .mk-support-meta span:last-child {
    flex-basis: 100%;
  }

  .mk-page-head--contact .mk-support-meta span:nth-child(2)::before {
    content: "·";
  }

  .mk-page-head--contact .mk-support-meta span:last-child::before {
    content: none;
  }

  .mk-contact-section .mk-contact-form-card {
    gap: 0;
  }

  .mk-contact-section .mk-contact-portrait {
    width: 72px;
    height: 72px;
  }

  .mk-contact-section .mk-contact-meta {
    justify-content: flex-start;
    text-align: left;
  }

  .mk-contact-section .mk-contact-meta span:nth-child(2)::after {
    content: none;
  }

  .mk-contact-section .mk-contact-meta span:last-child {
    flex-basis: 100%;
  }

  .mk-contact-section .mk-contact-form-card .mk-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .mk-contact-section .mk-contact-form-card .mk-form > .mk-field:has(input[name="ep_name"]),
  .mk-contact-section .mk-contact-form-card .mk-form > .mk-field:has(input[name="ep_email"]) {
    grid-column: 1 / -1;
  }

  /* 16px+ prevents iOS focus zoom */
  .mk-contact-section .mk-field input,
  .mk-contact-section .mk-field textarea,
  .mk-contact-section .mk-field select {
    font-size: 16px;
  }

  .mk-page-head--contact .mk-support-pill {
    margin-top: 18px;
    padding: 8px 14px;
    font-size: 0.9rem;
  }

  .mk-contact-section .mk-contact-note {
    padding: 12px 14px;
    font-size: 0.97rem;
  }

  /* Full-width button on phones */
  .mk-contact-section .mk-contact-form-card .mk-form button[type="submit"] {
    width: 100%;
  }
}

/* Phones: the photo and the heading share the first row. The hours pill and the name line then run the full width
   under them, so the pill is one tidy box instead of a three line capsule squeezed beside the photo. Desktop is untouched. */
@media (max-width: 640px) {
  .mk-page-head--contact .mk-support-id {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-content: stretch;
    column-gap: 16px;
    row-gap: 16px;
  }

  .mk-page-head--contact .mk-support-id-copy {
    display: contents;
  }

  .mk-page-head--contact .mk-contact-portrait {
    grid-column: 1;
    grid-row: 1;
    width: 88px;
    height: 88px;
  }

  .mk-page-head--contact h1 {
    grid-column: 2;
    grid-row: 1;
    font-size: 1.55rem;
  }

  .mk-page-head--contact .mk-support-id-copy .mk-support-pill {
    grid-column: 1 / -1;
    grid-row: 2;
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 10px 16px;
    border-radius: 18px;
    font-size: 0.92rem;
    line-height: 1.4;
    text-align: left;
    text-wrap: balance;
  }

  .mk-page-head--contact .mk-support-meta {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 0;
  }

  .mk-page-head--contact .mk-support-id-copy .lx-sub {
    grid-column: 1 / -1;
    grid-row: 4;
    margin: 0;
  }

  /* Four of the little squares would sit on the words at this width. Two stay at the edges. */
  .mk-page-head--contact .mk-support-px--b,
  .mk-page-head--contact .mk-support-px--c,
  .mk-page-head--contact .mk-support-px--d,
  .mk-page-head--contact .mk-support-px--e {
    display: none;
  }
}

/* ---------- Contact page, redesigned 2026-10-17 (page-contact.php) ---------- */
.mk-ct-hero {
  position: relative;
  padding: clamp(48px, 6vw, 88px) 0 0;
  background: var(--mk-soft, #F4F5F3);
  text-align: center;
  overflow: hidden;
}
.mk-ct-eyebrow { margin: 0 0 14px; font-size: 0.9375rem; font-weight: 500; color: var(--mk-muted, #626968); }
.mk-ct-hero h1 {
  max-width: 18ch;
  margin: 0 auto 16px;
  font-family: var(--font-display, inherit);
  font-size: clamp(2.4rem, 5vw, 3.7rem);
  font-weight: 750;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.mk-ct-lead { max-width: 560px; margin: 0 auto 28px; font-size: 1.0625rem; line-height: 1.6; color: var(--mk-muted, #626968); }
.mk-ct-person {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 18px;
  padding: 10px 22px 10px 10px;
  border: 1px solid var(--mk-line, #DEDFDB);
  border-radius: 999px;
  background: #FFFFFF;
  text-align: left;
}
.mk-ct-person img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: top; }
.mk-ct-person span { display: grid; line-height: 1.3; }
.mk-ct-person small { font-size: 0.8125rem; color: var(--mk-muted, #626968); }
.mk-ct-hours { padding-left: 18px; border-left: 1px solid var(--mk-line, #DEDFDB); }
.mk-ct-hours b { font-size: 0.9375rem; font-weight: 600; }
.mk-ct-wave { display: block; height: clamp(36px, 5vw, 64px); margin-top: clamp(36px, 5vw, 56px); line-height: 0; }
.mk-ct-wave svg { display: block; width: 100%; height: 100%; }
.mk-ct-wave path { fill: #FFFFFF; }

/* Cards: other places that might answer it faster. */
.mk-ct-help { padding: 24px 0 8px; }
.mk-ct-help h2,
.mk-ct-form > h2 {
  margin: 0 0 18px;
  font-family: var(--font-display, inherit);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.mk-ct-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.mk-ct-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 22px 22px 20px;
  border: 1px solid var(--mk-line, #DEDFDB);
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgb(24 32 33 / 0.04), 0 8px 20px -12px rgb(24 32 33 / 0.18);
  color: inherit;
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.mk-ct-card:hover,
.mk-ct-card:focus-visible { transform: translateY(-3px); border-color: var(--mk-blue, #047857); box-shadow: 0 18px 32px -20px rgb(24 32 33 / 0.38); }
.mk-ct-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 12px; background: var(--mk-blue, #047857); color: #FFFFFF; }
.mk-ct-card strong { font-family: var(--font-display, inherit); font-size: 1.125rem; font-weight: 700; color: var(--mk-ink, #182021); }
.mk-ct-text { flex: 1; font-size: 0.9375rem; line-height: 1.55; color: var(--mk-muted, #626968); }
.mk-ct-go { margin-top: 6px; font-size: 0.9375rem; font-weight: 600; color: var(--mk-blue, #047857); }

/* The form, with the founder and tips beside it. */
.mk-ct-main { padding: clamp(48px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); scroll-margin-top: 120px; }
.mk-ct-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
.mk-ct-note { margin: -8px 0 20px; color: var(--mk-muted, #626968); }
.mk-ct-side { position: sticky; top: calc(var(--util-h, 0px) + 96px); display: grid; gap: 16px; }
.mk-ct-panel { padding: 22px 24px; border: 1px solid var(--mk-line, #DEDFDB); border-radius: 18px; background: #FFFFFF; }
.mk-ct-panel h3 { margin: 0 0 10px; font-family: var(--font-display, inherit); font-size: 1.0625rem; font-weight: 700; }
.mk-ct-panel p { margin: 0 0 12px; font-size: 0.9375rem; line-height: 1.6; color: var(--mk-muted, #626968); }
.mk-ct-panel p b { color: var(--mk-ink, #182021); }
.mk-ct-panel a { font-weight: 600; color: var(--mk-blue, #047857); text-decoration: none; }
.mk-ct-panel--me { background: var(--mk-soft, #F4F5F3); border-color: transparent; }
.mk-ct-panel--me img { display: block; width: 64px; height: 64px; margin-bottom: 14px; border-radius: 50%; object-fit: cover; object-position: top; }
.mk-ct-panel--setup { background: #182021; border-color: #182021; }
.mk-ct-panel--setup h3 { color: #FFFFFF; }
.mk-ct-panel--setup p { color: rgb(255 255 255 / 0.75); }
.mk-ct-panel--setup a { color: #99f4d0; }
.mk-ct-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.mk-ct-list li { position: relative; padding-left: 24px; }
.mk-ct-list li::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--mk-blue, #047857) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}

@media (max-width: 1000px) {
  .mk-ct-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-ct-grid { grid-template-columns: minmax(0, 1fr); }
  .mk-ct-side { position: static; }
}
@media (max-width: 640px) {
  .mk-ct-cards { grid-template-columns: minmax(0, 1fr); }
  .mk-ct-person { border-radius: 18px; }
  .mk-ct-hours { padding-left: 0; border-left: 0; }
}

/* Contact side panels, refined: soft gradients, the founder card holds the name and hours. */
.mk-ct-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-ct-panel {
  border-radius: 20px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8F9FB 100%);
  box-shadow: 0 1px 2px rgb(24 32 33 / 0.04), 0 10px 24px -14px rgb(24 32 33 / 0.18);
}
.mk-ct-panel--me {
  border: 0;
  background: radial-gradient(120% 90% at 100% 0%, #e1faf0 0%, rgb(225 250 240 / 0) 60%), linear-gradient(180deg, #f6fdfa 0%, #ecfdf5 100%);
}
.mk-ct-me { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.mk-ct-panel--me .mk-ct-me img { width: 56px; height: 56px; margin: 0; border: 3px solid #FFFFFF; border-radius: 50%; object-fit: cover; object-position: top; box-shadow: 0 6px 14px -6px rgb(4 120 87 / 0.4); }
.mk-ct-me span { display: grid; line-height: 1.3; }
.mk-ct-me b { color: var(--mk-ink, #182021); }
.mk-ct-me small { font-size: 0.8125rem; color: var(--mk-muted, #626968); }
.mk-ct-panel .mk-ct-hours {
  display: grid;
  gap: 2px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.75);
}
.mk-ct-panel .mk-ct-hours small { font-size: 0.75rem; color: var(--mk-muted, #626968); }
.mk-ct-panel .mk-ct-hours b { font-size: 0.9375rem; color: var(--mk-ink, #182021); }
.mk-ct-panel--setup {
  border: 0;
  background: radial-gradient(120% 100% at 100% 0%, #065f46 0%, rgb(6 95 70 / 0) 60%), #182021;
}
.mk-ct-hero { padding-bottom: 0; }
.mk-ct-lead { margin-bottom: 0; }
@media (max-width: 640px) { .mk-ct-cards { grid-template-columns: minmax(0, 1fr); } }

/* Contact, round 3: hours under the form heading, a short bio, and a setup ad that fills the column. */
.mk-ct-eyebrow.lx-eyebrow { display: block; margin: 0 0 14px; font-size: 12px; font-weight: 450; letter-spacing: 0.01em; }
.mk-ct-hours-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: -6px 0 24px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--mk-pale-blue, #ecfdf5);
  font-size: 0.9375rem;
  color: #3E4547;
}
.mk-ct-hours-line svg { flex: none; color: var(--mk-blue, #047857); }
.mk-ct-hours-line b { color: var(--mk-ink, #182021); }

.mk-ct-grid { align-items: stretch; }
.mk-ct-side { position: static; display: flex; flex-direction: column; gap: 16px; }
.mk-ct-card2 { padding: 22px 24px; border: 1px solid var(--mk-line, #DEDFDB); border-radius: 20px; background: #FFFFFF; }
.mk-ct-card2-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.mk-ct-card2-top img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: top; }
.mk-ct-card2-top span { display: grid; line-height: 1.3; }
.mk-ct-card2-top b { font-family: var(--font-display, inherit); font-size: 1.0625rem; color: var(--mk-ink, #182021); }
.mk-ct-card2-top small { font-size: 0.8125rem; color: var(--mk-muted, #626968); }
.mk-ct-bio { margin: 0 0 14px; font-size: 0.9375rem; line-height: 1.6; color: #3E4547; }
.mk-ct-more { font-size: 0.9375rem; font-weight: 600; color: var(--mk-blue, #047857); text-decoration: none; }
.mk-ct-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The setup ad: dark, a slow moving glow, checks that tick in, a button that lifts. Stretches to the bottom of the form. */
.mk-ct-ad {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  min-height: 300px;
  padding: 26px 24px 24px;
  overflow: hidden;
  border-radius: 20px;
  background: #182021;
  color: #FFFFFF;
  text-decoration: none;
  isolation: isolate;
}
.mk-ct-ad-glow {
  position: absolute;
  inset: -40%;
  z-index: -1;
  background:
    radial-gradient(35% 35% at 30% 30%, rgb(4 120 87 / 0.75), transparent 70%),
    radial-gradient(30% 30% at 75% 70%, rgb(153 244 208 / 0.45), transparent 70%);
  animation: mk-ct-drift 14s ease-in-out infinite alternate;
}
@keyframes mk-ct-drift {
  from { transform: translate(-6%, -4%) rotate(0deg); }
  to { transform: translate(6%, 5%) rotate(25deg); }
}
.mk-ct-ad-kicker { font-size: 12px; font-weight: 450; letter-spacing: 0.01em; color: rgb(255 255 255 / 0.65); }
.mk-ct-ad-head { font-family: var(--font-display, inherit); font-size: 1.6rem; font-weight: 750; line-height: 1.1; letter-spacing: -0.02em; }
.mk-ct-ad-list { display: grid; gap: 10px; }
.mk-ct-ad-list span {
  position: relative;
  padding-left: 28px;
  font-size: 0.9375rem;
  color: rgb(255 255 255 / 0.85);
  animation: mk-ct-in 0.6s ease-out both;
  animation-delay: calc(var(--i) * 0.25s + 0.3s);
}
.mk-ct-ad-list span::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #24A35F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
@keyframes mk-ct-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.mk-ct-ad-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 8px; }
.mk-ct-ad-price { font-family: var(--font-display, inherit); font-size: 1.5rem; font-weight: 750; }
.mk-ct-ad-price small { font-size: 0.8125rem; font-weight: 400; color: rgb(255 255 255 / 0.65); }
.mk-ct-ad-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--mk-ink, #182021);
  font-weight: 600;
  transition: transform 180ms ease;
}
.mk-ct-ad:hover .mk-ct-ad-btn { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .mk-ct-ad-glow,
  .mk-ct-ad-list span { animation: none; }
}

/* Might be quicker: three across on desktop, a swiper with dots on phones. */
.mk-ct-dots { display: none; }
@media (max-width: 760px) {
  .mk-ct-cards {
    grid-template-columns: none;
    grid-auto-columns: 86%;
    grid-auto-flow: column;
    gap: 12px;
    padding: 2px 2px 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .mk-ct-cards::-webkit-scrollbar { display: none; }
  .mk-ct-cards > li { scroll-snap-align: start; }
  .mk-ct-dots { display: flex; justify-content: center; margin-top: 6px; }
  .mk-ct-dots:empty { display: none; }
  .mk-ct-dots button { display: grid; place-items: center; width: 16px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
  .mk-ct-dots button::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--mk-line, #DEDFDB); transition: width 0.25s ease, background 0.25s ease; }
  .mk-ct-dots button[aria-current="true"] { width: 26px; }
  .mk-ct-dots button[aria-current="true"]::before { width: 18px; background: var(--mk-blue, #047857); }
  .mk-ct-help { padding-top: 12px; }
  .mk-ct-main { padding-top: 36px; }
  .mk-ct-ad { min-height: 0; }
  .mk-ct-hours-line { display: flex; align-items: flex-start; }
}

/* Setup ad hover: keep the text white (not the site's link blue); the card lifts, the glow brightens. */
.mk-ct-ad { transition: transform 220ms ease, box-shadow 220ms ease; }
.mk-ct-ad:hover,
.mk-ct-ad:focus-visible { color: #FFFFFF; transform: translateY(-3px); box-shadow: 0 22px 40px -22px rgb(4 120 87 / 0.6); }
.mk-ct-ad-glow { transition: opacity 300ms ease; opacity: 0.85; }
.mk-ct-ad:hover .mk-ct-ad-glow { opacity: 1; }
.mk-ct-ad:hover .mk-ct-ad-btn { background: #ecfdf5; }
.mk-ct-hours-line { display: none; }

/* The thank-you note that replaces the setup card once setup is chosen. */
.mk-ct-ad[hidden] { display: none; }
/* Green, just the thanks: no list, no price, no moving glow. */
.mk-ct-ad--thanks {
  flex: 0 0 auto;
  justify-content: center;
  min-height: 0;
  padding: 28px 24px;
  background: #1E7A45;
  cursor: default;
}
.mk-ct-ad--thanks .mk-ct-ad-head { font-size: 1.5rem; }
.mk-ct-ad--thanks .mk-ct-ad-text { color: rgb(255 255 255 / 0.88); }
.mk-ct-ad-check {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #1E7A45;
}
.mk-ct-ad-text { font-size: 0.9375rem; line-height: 1.55; color: rgb(255 255 255 / 0.8); }