/* The site's shell (it-340): header, the phone-width menu, footer.
 *
 * No script (D10): wide windows show the nav inline; under 960px the nav and actions move into a native <details>
 * disclosure, which opens and closes with no JavaScript and is keyboard-operable as it comes.
 */

.mkt-header {
  position: relative;
  z-index: var(--mkt-layer-header);
  background: var(--mkt-surface);
}

.mkt-header__bar {
  max-width: var(--mkt-container);
  margin: 0 auto;
  padding: var(--mkt-space-3-5) var(--mkt-gutter);
  display: flex;
  align-items: center;
  gap: var(--mkt-space-2) var(--mkt-space-9);
}

/* The brand: the dot and the name. */
.mkt-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--mkt-space-2-5);
  min-height: var(--mkt-tap);
  color: var(--mkt-ink);
  text-decoration: none;
}

.mkt-brand:hover {
  color: var(--mkt-ink);
}

.mkt-brand__dot {
  width: var(--mkt-brand-dot);
  height: var(--mkt-brand-dot);
  border-radius: 50%;
  background: var(--mkt-purple);
  flex: none;
}

.mkt-brand__name {
  font-family: var(--mkt-font-display);
  font-weight: var(--mkt-weight-bold);
  font-size: var(--mkt-size-title-sm);
  letter-spacing: var(--mkt-tracking-tight);
  white-space: nowrap;
}

.mkt-brand-group {
  display: flex;
  align-items: center;
  gap: var(--mkt-space-3-5);
}

/* The inline nav (wide windows). */
.mkt-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--mkt-space-7);
  flex: 1 1 auto;
}

.mkt-nav__link {
  padding: var(--mkt-space-3) 0;
  font-size: var(--mkt-size-md);
  font-weight: var(--mkt-weight-medium);
  color: var(--mkt-text-strong);
  text-decoration: none;
}

.mkt-nav__link:hover {
  color: var(--mkt-purple);
}

.mkt-header__actions {
  display: flex;
  align-items: center;
  gap: var(--mkt-space-2);
}

/* The phone-width menu: a disclosure. Hidden on wide windows. */
.mkt-menu {
  display: none;
  margin-left: auto;
}

.mkt-menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--mkt-space-2);
  min-height: var(--mkt-tap);
  padding: 0 var(--mkt-space-4);
  border-radius: var(--mkt-radius-pill);
  background: var(--mkt-tint);
  color: var(--mkt-ink);
  font-weight: var(--mkt-weight-semibold);
  font-size: var(--mkt-size-md);
  cursor: pointer;
  list-style: none;
}

.mkt-menu__toggle::-webkit-details-marker {
  display: none;
}

.mkt-menu__toggle .mkt-icon {
  width: var(--mkt-icon-md);
  height: var(--mkt-icon-md);
}

.mkt-menu[open] .mkt-menu__toggle {
  background: var(--mkt-tint-strong);
}

.mkt-menu__panel {
  position: absolute;
  left: var(--mkt-gutter);
  right: var(--mkt-gutter);
  top: calc(100% - var(--mkt-space-1));
  display: flex;
  flex-direction: column;
  gap: var(--mkt-space-1);
  padding: var(--mkt-space-4);
  background: var(--mkt-surface);
  border-radius: var(--mkt-radius-xl);
  box-shadow: var(--mkt-shadow-lg);
}

.mkt-menu__nav {
  display: flex;
  flex-direction: column;
}

.mkt-menu__panel .mkt-nav__link {
  padding: var(--mkt-space-3) var(--mkt-space-3);
  border-radius: var(--mkt-radius-md);
  font-size: var(--mkt-size-body);
}

.mkt-menu__panel .mkt-nav__link:hover {
  background: var(--mkt-tint);
}

.mkt-menu__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mkt-space-2);
  margin-top: var(--mkt-space-2);
  padding-top: var(--mkt-space-3);
  box-shadow: inset 0 var(--mkt-line) 0 var(--mkt-hairline);
}

/* A narrow phone keeps the brand whole: the toggle drops its word and stays a 44px target. */
@media (max-width: 479px) {
  .mkt-menu__word {
    display: none;
  }

  .mkt-menu__toggle {
    width: var(--mkt-tap);
    padding: 0;
    justify-content: center;
  }
}

@media (max-width: 959px) {
  .mkt-header__bar > .mkt-nav,
  .mkt-header__bar > .mkt-header__actions {
    display: none;
  }

  .mkt-menu {
    display: block;
  }
}

/* ── Footer ──────────────────────────────────────────────────────────────────────────────────────────────────── */

.mkt-footer {
  background: var(--mkt-surface);
  padding: var(--mkt-space-16) 0 var(--mkt-space-10);
}

.mkt-footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mkt-space-10) var(--mkt-space-14);
}

.mkt-footer__about {
  flex: 1 1 var(--mkt-basis-sm);
  min-width: 0;
}

.mkt-footer__about .mkt-brand__dot {
  width: var(--mkt-brand-dot-sm);
  height: var(--mkt-brand-dot-sm);
}

.mkt-footer__tagline {
  margin-top: var(--mkt-space-3-5);
  max-width: var(--mkt-measure-xs);
  font-size: var(--mkt-size-sm);
  line-height: var(--mkt-leading-relaxed);
  color: var(--mkt-muted);
}

.mkt-footer__col {
  flex: 1 1 var(--mkt-basis-2xs);
  display: flex;
  flex-direction: column;
  gap: var(--mkt-space-0-5);
  font-size: var(--mkt-size-sm);
}

.mkt-footer__heading {
  margin-bottom: var(--mkt-space-2);
  font-weight: var(--mkt-weight-bold);
}

.mkt-footer__link {
  padding: var(--mkt-space-1-5) 0;
  color: var(--mkt-text);
  text-decoration: none;
}

.mkt-footer__link:hover {
  color: var(--mkt-purple);
}

.mkt-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--mkt-space-3);
  margin-top: var(--mkt-space-14);
  padding-top: var(--mkt-space-6);
  box-shadow: inset 0 var(--mkt-line) 0 var(--mkt-hairline);
  font-size: var(--mkt-size-xs);
  color: var(--mkt-muted);
}