/* Mockup layout for home + contact. Load last. */

:root {
  --mk-ink: #10141c;
  --mk-muted: #5b6472;
  --mk-line: #e6e8ee;
  --mk-paper: #f6f7f9;
  --mk-navy: #121826;
  --mk-mint: #3dcea0;
  --mk-mint-ink: #083528;
}

.is-home .desk-tape,
.page-contact .desk-tape,
body:has(.page-contact) .desk-tape {
  display: none !important;
}

.is-home .nav,
.page-contact .nav,
body:has(.page-contact) .nav {
  background: var(--mk-navy);
  border: 0;
  position: relative;
}

.is-home .nav-inner,
.page-contact .nav-inner,
body:has(.page-contact) .nav-inner {
  width: min(1120px, calc(100% - 40px));
  height: 76px;
}

.is-home .wordmark,
.page-contact .wordmark,
body:has(.page-contact) .wordmark {
  color: #fff;
  font-family: Outfit, system-ui, sans-serif;
}

.is-home .wordmark span,
.page-contact .wordmark span,
body:has(.page-contact) .wordmark span {
  color: var(--mk-mint);
}

.is-home .nav-links a,
.page-contact .nav-links a,
body:has(.page-contact) .nav-links a {
  color: rgba(255, 255, 255, 0.9);
  background: none;
  border-radius: 0;
  padding: 0.4rem 0.2rem;
}

.is-home .nav-links a:hover,
.page-contact .nav-links a:hover {
  background: none;
  color: var(--mk-mint);
}

.is-home .btn,
.page-contact .btn,
.mk .btn,
.mk-close .btn,
.mk-contact .btn {
  border-radius: 8px;
  min-height: 48px;
  font-weight: 700;
  box-shadow: none;
}

.is-home .btn-solid,
.page-contact .btn-solid,
.mk .btn-mint,
.btn-mint {
  background: var(--mk-mint);
  color: var(--mk-mint-ink);
  border: 0;
}

.is-home .btn-solid:hover,
.page-contact .btn-solid:hover,
.btn-mint:hover {
  transform: none;
  filter: brightness(1.05);
}

.btn-navy {
  background: var(--mk-navy);
  color: #fff;
  border: 0;
}

.mk-hero {
  background: var(--mk-navy);
  color: #fff;
  text-align: center;
  padding: 72px 20px 64px;
}

.mk-hero .mk-we {
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--mk-mint);
  margin-bottom: 14px;
}

.mk-hero h1 {
  font-family: Outfit, system-ui, sans-serif;
  font-size: clamp(4.2rem, 12vw, 8.4rem);
  line-height: 0.86;
  letter-spacing: -0.06em;
  font-weight: 800;
  color: #fff;
  max-width: none;
  font-style: normal;
}

.mk-hero h1 i {
  display: inline;
  font-style: normal;
  color: #fff;
}

.mk-hero .mk-sub {
  max-width: 34rem;
  margin: 18px auto 28px;
  font-size: 1.2rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}

.mk-punches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  font-weight: 700;
  font-size: 1.02rem;
}

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

.mk-intro {
  padding: 88px 0 40px;
  text-align: center;
}

.mk-intro h2 {
  font-family: Outfit, system-ui, sans-serif;
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  letter-spacing: -0.04em;
  line-height: 1.12;
  max-width: 16em;
  margin: 0 auto 16px;
  color: var(--mk-ink);
}

.mk-intro h2 i {
  display: inline;
  font-style: italic;
}

.mk-intro p {
  max-width: 40rem;
  margin: 0 auto;
  color: var(--mk-muted);
  font-size: 1.08rem;
}

.mk-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 32px;
  padding: 28px 0 88px;
}

.mk-benefits article {
  background: none;
  border: 0;
  border-top: 2px solid var(--mk-navy);
  border-radius: 0;
  padding: 18px 0 0;
  box-shadow: none;
}

.mk-benefits span {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mk-mint-ink);
  opacity: 0.55;
}

.mk-benefits h3 {
  font-family: Outfit, system-ui, sans-serif;
  font-size: 1.25rem;
  margin: 8px 0;
  letter-spacing: -0.03em;
  color: var(--mk-ink);
}

.mk-benefits p {
  color: var(--mk-muted);
  font-size: 0.98rem;
  margin: 0;
  max-width: none;
}

.mk-band {
  background: var(--mk-paper);
  padding: 88px 0;
}

.mk-band h2 {
  font-family: Outfit, system-ui, sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  letter-spacing: -0.04em;
  color: var(--mk-ink);
}

.mk-band h2 i {
  display: inline;
}

.mk-meta {
  color: var(--mk-muted);
  margin: 8px 0 32px;
}

.mk-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}

.mk-plan {
  background: #fff;
  border: 1px solid var(--mk-line);
  border-radius: 12px;
  padding: 28px 24px;
  display: grid;
  gap: 10px;
  align-content: start;
  box-shadow: none;
  color: var(--mk-ink);
}

.mk-plan.pick,
.mk-plan.featured {
  border: 2px solid var(--mk-navy);
  background: #fff;
  transform: none;
  box-shadow: none;
}

.mk-plan .n {
  font-family: Outfit, system-ui, sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--mk-ink);
}

.mk-plan h3,
.mk-plan.featured h3 {
  font-size: 1.05rem;
  color: var(--mk-ink);
}

.mk-plan b,
.mk-plan.featured .plan-price b,
.mk-plan .plan-price b {
  font-family: Outfit, system-ui, sans-serif;
  font-size: 1.8rem;
  letter-spacing: -0.04em;
  color: var(--mk-ink);
}

.mk-plan p,
.mk-plan li,
.mk-plan.featured p,
.mk-plan.featured li,
.mk-plan .plan-price span {
  color: var(--mk-muted);
}

.mk-plan ul {
  list-style: none;
  display: grid;
  gap: 6px;
  margin: 8px 0 14px;
}

.mk-plan li {
  padding-left: 0;
  font-size: 0.92rem;
}

.mk-plan li::before {
  display: none;
}

.mk-how {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  padding: 88px 0;
}

.mk-how article {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.mk-how span {
  font-family: Outfit, system-ui, sans-serif;
  color: var(--mk-mint);
  font-weight: 800;
}

.mk-how h3 {
  font-family: Outfit, system-ui, sans-serif;
  margin: 8px 0;
  letter-spacing: -0.03em;
  color: var(--mk-ink);
}

.mk-how p {
  color: var(--mk-muted);
}

.mk-inds {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 88px;
}

.mk-inds a {
  border: 1px solid var(--mk-line);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 650;
  font-size: 0.92rem;
  background: #fff;
  color: var(--mk-ink);
}

.mk-inds a:hover {
  border-color: var(--mk-navy);
  text-decoration: none;
}

.mk-faq {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 48px;
  padding: 0 0 88px;
}

.mk-faq h2 {
  font-family: Outfit, system-ui, sans-serif;
  letter-spacing: -0.04em;
  font-size: 2.2rem;
  color: var(--mk-ink);
  max-width: 12em;
}

.mk-faq .mk-we {
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--mk-mint);
  margin-bottom: 10px;
}

.mk-faq details {
  border-bottom: 1px solid var(--mk-line);
  padding: 16px 0;
}

.mk-faq summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  color: var(--mk-ink);
}

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

.mk-faq details p {
  margin-top: 10px;
  color: var(--mk-muted);
  max-width: 58ch;
}

.mk-close {
  background: var(--mk-navy);
  color: #fff;
  padding: 88px 0;
}

.mk-close .mk-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: start;
}

.mk-close h2 {
  font-family: Outfit, system-ui, sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: #fff;
  max-width: 12em;
}

.mk-close h2 i {
  display: inline;
  color: var(--mk-mint);
}

.mk-close p {
  color: rgba(255, 255, 255, 0.72);
  margin: 14px 0 22px;
  max-width: 36rem;
}

.mk-close form,
.mk-contact form,
form.mk-card,
.mk-close .js-form,
.mk-contact .js-form {
  background: #fff;
  color: var(--mk-ink);
  border-radius: 12px;
  padding: 24px;
  display: grid;
  gap: 12px;
}

.mk-close label,
.mk-contact label {
  display: grid;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--mk-ink);
}

.mk-close input,
.mk-close select,
.mk-close textarea,
.mk-contact input,
.mk-contact select,
.mk-contact textarea {
  width: 100%;
  border: 1px solid var(--mk-line);
  border-radius: 8px;
  padding: 12px;
  font: inherit;
  background: #fff;
  color: var(--mk-ink);
}

.mk-close .hp,
.mk-contact .hp {
  display: none;
}

/* Contact */

body.page-contact,
body.page-template-template-contact,
body:has(> .page-contact) {
  background: var(--mk-paper);
}

.page-contact,
.mk-contact {
  background: var(--mk-paper);
}

.page-contact .contact-hero,
.mk-contact .contact-hero {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 72px 0 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  background: none;
}

.page-contact .contact-hero::after {
  display: none;
}

.page-contact .contact-copy h1,
.mk-contact h1 {
  font-family: Outfit, system-ui, sans-serif;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  letter-spacing: -0.045em;
  line-height: 1.02;
  max-width: 14em;
  color: var(--mk-ink);
}

.page-contact .contact-copy h1 i {
  display: inline;
  font-style: normal;
  color: var(--mk-ink);
}

.page-contact .contact-copy .lede,
.mk-contact .lede {
  color: var(--mk-muted);
  margin: 14px 0 28px;
  max-width: 36rem;
}

.page-contact .contact-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  border-top: 0;
  padding-top: 0;
}

.page-contact .contact-meta span {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--mk-muted);
  margin-bottom: 4px;
  text-transform: none;
  letter-spacing: 0;
}

.page-contact .contact-meta a,
.page-contact .contact-meta b {
  color: var(--mk-ink);
}

.page-contact .contact-panel {
  background: #fff;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  padding: 24px;
}

.page-contact .contact-panel-label {
  display: none;
}

.page-contact .contact-chip {
  border-radius: 8px;
  background: #e8faf3;
  color: var(--mk-ink);
  padding: 0.6rem 0.8rem;
  margin: 0 0 1rem;
}

.page-contact .contact-lanes,
.mk-lanes {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding: 12px 0 80px;
  border-top: 1px solid var(--mk-line);
}

.page-contact .contact-lanes article {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  display: block;
}

.page-contact .contact-lanes span,
.mk-lanes span {
  font-family: Outfit, system-ui, sans-serif;
  color: var(--mk-mint);
  font-weight: 800;
}

.page-contact .contact-lanes h3 {
  font-family: Outfit, system-ui, sans-serif;
  margin: 6px 0;
  color: var(--mk-ink);
}

.page-contact .contact-lanes p {
  color: var(--mk-muted);
}

body.page-contact .footer-mast .js-slot-cta,
body:has(.page-contact) .footer-mast .js-slot-cta {
  display: none;
}

@media (max-width: 900px) {
  .mk-benefits,
  .mk-plans,
  .mk-how,
  .mk-faq,
  .mk-close .mk-grid,
  .page-contact .contact-hero,
  .page-contact .contact-lanes,
  .page-contact .contact-meta,
  .mk-lanes {
    grid-template-columns: 1fr;
  }
}