/* ========================
   MARKETING — Public page layer (.mk-*), M3 tokens
   Shared section shells, heroes, splits, cards, pricing, CTA bands
   Used by: index, how-it-works, pricing, support
   ======================== */

/* ---- Section shells ---- */
.mk-section {
  padding-block: var(--md-spacing-24);
}

/* Full-bleed band: stretches to the viewport edges even inside .main's
   max-width; margin-inline without an explicit width avoids the
   100vw-includes-scrollbar overflow bug */
.mk-section--band {
  margin-inline: calc(50% - 50vw);
  background-color: var(--md-surface-container-low);
}

/* Compact section (stat bands, strips) */
.mk-section--tight {
  padding-block: var(--md-spacing-16);
}

.mk-section__inner {
  max-width: var(--md-layout-max-width);
  margin-inline: auto;
}

.mk-section--band .mk-section__inner {
  padding-inline: var(--md-spacing-6);
}

/* ---- Section header (eyebrow / title / subtitle) ---- */
.mk-section__header {
  text-align: center;
  margin-bottom: var(--md-spacing-12);
}

.mk-section__header--left {
  text-align: left;
}

.mk-eyebrow {
  display: block;
  font-size: var(--md-label-large-size);
  line-height: var(--md-label-large-line);
  font-weight: var(--md-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--md-primary);
  margin-bottom: var(--md-spacing-3);
}

.mk-section__title {
  font-size: clamp(var(--md-headline-large-size), 4vw, var(--md-display-medium-size));
  line-height: 1.1;
  font-weight: var(--md-weight-heavy);
  letter-spacing: var(--md-display-medium-tracking);
  margin-bottom: var(--md-spacing-4);
}

.mk-section__subtitle {
  font-size: var(--md-title-large-size);
  line-height: var(--md-title-large-line);
  color: var(--md-on-surface-variant);
  max-width: var(--md-content-measure);
  margin-inline: auto;
}

.mk-section__header--left .mk-section__subtitle {
  margin-inline: 0;
}

.mk-accent {
  color: var(--md-primary);
}

/* ---- Subpage hero (pricing / support / how-it-works) ---- */
.mk-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: var(--md-spacing-24) var(--md-spacing-16);
}

/* Full-bleed backdrop echoing the landing hero: soft primary glow + faint
   street-grid lines, fading out toward the content below */
.mk-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  margin-inline: calc(50% - 50vw);
  background:
    radial-gradient(ellipse 70% 65% at 50% 0%, var(--md-primary-glow), transparent 70%),
    repeating-linear-gradient(90deg, var(--md-outline-variant) 0, var(--md-outline-variant) var(--md-divider-thickness), transparent 0, transparent var(--md-spacing-16)),
    repeating-linear-gradient(0deg, var(--md-outline-variant) 0, var(--md-outline-variant) var(--md-divider-thickness), transparent 0, transparent var(--md-spacing-16));
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
  pointer-events: none;
}

.mk-hero__title {
  font-size: clamp(var(--md-display-small-size), 5vw, var(--md-display-large-size));
  line-height: 1.05;
  font-weight: var(--md-weight-heavy);
  letter-spacing: var(--md-display-large-tracking);
  margin-bottom: var(--md-spacing-6);
}

.mk-hero__lead {
  font-size: var(--md-title-large-size);
  line-height: var(--md-title-large-line);
  color: var(--md-on-surface-variant);
  max-width: var(--md-content-measure);
  margin-bottom: var(--md-spacing-8);
}

.mk-hero__actions,
.mk-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--md-spacing-4);
}

/* ---- Split (text + media two-column) ---- */
.mk-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--md-spacing-12);
  align-items: center;
}

.mk-split__content > .mk-section__header,
.mk-split__content > .mk-section__header--left {
  margin-bottom: var(--md-spacing-6);
}

.mk-split__lead {
  font-size: var(--md-body-large-size);
  line-height: var(--md-body-large-line);
  color: var(--md-on-surface-variant);
  margin-bottom: var(--md-spacing-6);
}

.mk-split__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md-spacing-4);
  margin-top: var(--md-spacing-8);
}

.mk-split__media {
  position: relative;
}

.mk-split__media img {
  width: 100%;
  height: auto;
  max-height: var(--md-hero-card-height);
  border-radius: var(--md-shape-large);
  object-fit: cover;
}

/* Media column first on desktop */
@media (min-width: 768px) {
  .mk-split--reverse .mk-split__media { order: -1; }
}

.mk-split__media--center {
  display: flex;
  justify-content: center;
}

/* Icon + title + caption benefit row */
.mk-benefit {
  display: flex;
  align-items: flex-start;
  gap: var(--md-spacing-4);
  margin-top: var(--md-spacing-6);
}

.mk-benefit .material-symbols-outlined {
  font-size: var(--md-icon-size-large);
  color: var(--md-primary);
  flex-shrink: 0;
}

.mk-benefit__title {
  font-size: var(--md-title-medium-size);
  line-height: var(--md-title-medium-line);
  font-weight: var(--md-weight-bold);
  margin-bottom: var(--md-spacing-1);
}

.mk-benefit__body {
  font-size: var(--md-body-large-size);
  line-height: var(--md-body-large-line);
  color: var(--md-on-surface-variant);
  margin: 0;
}

/* Floating chip/callout over a split image */
.mk-media-chip {
  position: absolute;
  bottom: var(--md-spacing-6);
  left: var(--md-spacing-6);
  display: flex;
  align-items: center;
  gap: var(--md-spacing-3);
  background-color: var(--md-surface-container-high);
  border: var(--md-divider-thickness) solid var(--md-outline-variant);
  border-radius: var(--md-shape-medium);
  padding: var(--md-spacing-3) var(--md-spacing-4);
  box-shadow: var(--md-elevation-2);
}

.mk-media-chip .material-symbols-outlined {
  font-size: var(--md-icon-size-medium);
  color: var(--md-primary);
}

.mk-media-chip__label {
  font-size: var(--md-label-large-size);
  line-height: var(--md-label-large-line);
  font-weight: var(--md-weight-bold);
  color: var(--md-on-surface);
  margin: 0;
}

.mk-media-chip__caption {
  font-size: var(--md-body-medium-size);
  line-height: var(--md-body-medium-line);
  color: var(--md-on-surface-variant);
  margin: 0;
}

/* Icon medallion (used where no photo exists, e.g. security section) */
.mk-medallion {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--md-avatar-size-large);
  height: var(--md-avatar-size-large);
  margin-inline: auto;
  border-radius: var(--md-shape-full);
  background-color: var(--md-primary-container);
  border: var(--md-divider-thickness) solid var(--md-outline-variant);
}

.mk-medallion .material-symbols-outlined {
  font-size: var(--md-icon-size-large);
  color: var(--md-primary);
}

/* ---- Card grid + feature card ---- */
.mk-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--md-component-width-small), 1fr));
  gap: var(--md-spacing-6);
  align-items: stretch;
  text-align: left;
}

.mk-feature-card {
  display: flex;
  flex-direction: column;
  background-color: var(--md-surface-container);
  border: var(--md-divider-thickness) solid var(--md-outline-variant);
  border-radius: var(--md-shape-large);
  padding: var(--md-spacing-8);
  transition: box-shadow var(--md-motion-duration-short) var(--md-motion-easing-standard);
}

.mk-feature-card:hover {
  box-shadow: var(--md-elevation-1);
}

.mk-feature-card__icon {
  font-size: var(--md-icon-size-large);
  color: var(--md-primary);
  margin-bottom: var(--md-spacing-4);
}

.mk-feature-card__title {
  font-size: var(--md-headline-small-size);
  line-height: var(--md-headline-small-line);
  font-weight: var(--md-weight-bold);
  letter-spacing: var(--md-headline-small-tracking);
  margin-bottom: var(--md-spacing-2);
}

.mk-feature-card__body {
  font-size: var(--md-body-large-size);
  line-height: var(--md-body-large-line);
  color: var(--md-on-surface-variant);
  margin-bottom: var(--md-spacing-4);
}

.mk-feature-card__action {
  margin-top: auto;
}

.mk-feature-card__image {
  overflow: hidden;
  border-radius: var(--md-shape-medium);
  border: var(--md-divider-thickness) solid var(--md-outline-variant);
  margin-bottom: var(--md-spacing-6);
}

.mk-feature-card__image img {
  width: 100%;
  height: var(--md-image-placeholder-height);
  object-fit: cover;
}

.mk-feature-card__cta {
  margin-top: auto;
}

.mk-feature-card__cta .btn {
  width: 100%;
}

/* ---- Check list ---- */
.mk-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-3);
  text-align: left;
}

.mk-check-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--md-spacing-3);
  font-size: var(--md-body-large-size);
  line-height: var(--md-body-large-line);
  color: var(--md-on-surface);
}

.mk-check-list__item .material-symbols-outlined {
  font-size: var(--md-icon-size-small);
  line-height: var(--md-body-large-line);
  color: var(--md-primary);
  flex-shrink: 0;
}

/* ---- Steps ---- */
.mk-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--md-component-width-small), 1fr));
  gap: var(--md-spacing-8);
  text-align: left;
}

.mk-step__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--md-fab-size-medium);
  height: var(--md-fab-size-medium);
  background-color: var(--md-primary);
  color: var(--md-on-primary);
  border-radius: var(--md-shape-medium);
  font-size: var(--md-title-large-size);
  font-weight: var(--md-weight-heavy);
  margin-bottom: var(--md-spacing-4);
}

.mk-step__title {
  font-size: var(--md-title-large-size);
  line-height: var(--md-title-large-line);
  font-weight: var(--md-weight-bold);
  margin-bottom: var(--md-spacing-2);
}

.mk-step__body {
  font-size: var(--md-body-large-size);
  line-height: var(--md-body-large-line);
  color: var(--md-on-surface-variant);
}

/* ---- Pricing ---- */
.mk-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--md-component-width-small), 1fr));
  gap: var(--md-spacing-6);
  align-items: stretch;
  text-align: left;
}

.mk-pricing-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--md-surface);
  border: var(--md-divider-thickness) solid var(--md-outline-variant);
  border-radius: var(--md-shape-large);
  padding: var(--md-spacing-8);
}

.mk-pricing-card--featured {
  position: relative;
  border: var(--md-shape-extra-small-half) solid var(--md-primary);
}

.mk-pricing-card__badge {
  position: absolute;
  top: calc(-1 * var(--md-spacing-3));
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--md-primary);
  color: var(--md-on-primary);
  padding: var(--md-spacing-1) var(--md-spacing-4);
  border-radius: var(--md-shape-full);
  font-size: var(--md-label-small-size);
  line-height: var(--md-label-small-line);
  font-weight: var(--md-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.mk-pricing-card__icon {
  font-size: var(--md-icon-size-large);
  color: var(--md-primary);
  margin-bottom: var(--md-spacing-4);
}

.mk-pricing-card__name {
  font-size: var(--md-headline-small-size);
  line-height: var(--md-headline-small-line);
  font-weight: var(--md-weight-bold);
  margin-bottom: var(--md-spacing-1);
}

.mk-pricing-card__tagline {
  font-size: var(--md-marketing-small-size);
  line-height: var(--md-marketing-small-line);
  color: var(--md-on-surface-variant);
  margin-bottom: var(--md-spacing-4);
}

.mk-pricing-card__price {
  font-size: var(--md-display-small-size);
  line-height: var(--md-display-small-line);
  font-weight: var(--md-weight-heavy);
  color: var(--md-primary);
  margin-bottom: var(--md-spacing-6);
}

.mk-pricing-card__period {
  font-size: var(--md-body-medium-size);
  line-height: var(--md-body-medium-line);
  font-weight: var(--md-body-medium-weight);
  color: var(--md-on-surface-variant);
}

.mk-pricing-card .mk-check-list {
  margin-bottom: var(--md-spacing-8);
}

.mk-pricing-card__cta {
  margin-top: auto;
}

.mk-pricing-card__cta .btn {
  width: 100%;
}

/* ---- FAQ column ---- */
.mk-faq {
  max-width: calc(var(--md-content-measure) + var(--md-spacing-32));
  margin-inline: auto;
}

/* ---- CTA band ---- */
.mk-cta-band {
  text-align: center;
}

.mk-cta-band .mk-section__header {
  margin-bottom: var(--md-spacing-10);
}

/* Closing CTA reads as a finale, not another gray band: primary-tinted glow
   rising from the bottom edge + a divider so back-to-back bands don't merge */
.mk-section--cta {
  border-top: var(--md-divider-thickness) solid var(--md-outline-variant);
  background:
    radial-gradient(ellipse 80% 90% at 50% 115%, var(--md-primary-glow), transparent 70%),
    var(--md-surface-container-low);
}

/* ---- Trust / risk-reversal note ---- */
.mk-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--md-spacing-2);
  font-size: var(--md-marketing-small-size);
  line-height: var(--md-marketing-small-line);
  color: var(--md-on-surface-variant);
  text-align: center;
  margin-top: var(--md-spacing-8);
}

.mk-note .material-symbols-outlined {
  font-size: var(--md-icon-size-small);
  color: var(--md-primary);
}

/* ---- Contact rows (support page) ---- */
.mk-contact-item {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-4);
  margin-bottom: var(--md-spacing-6);
}

.mk-contact-item .material-symbols-outlined {
  font-size: var(--md-icon-size-medium);
  color: var(--md-primary);
  flex-shrink: 0;
}

.mk-contact-item__label {
  font-size: var(--md-body-medium-size);
  line-height: var(--md-body-medium-line);
  color: var(--md-on-surface-variant);
  margin: 0;
}

.mk-contact-item__value {
  font-size: var(--md-body-large-size);
  line-height: var(--md-body-large-line);
  font-weight: var(--md-title-medium-weight);
  margin: 0;
}

/* ---- Form rows (support ticket form) ---- */
.mk-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--md-spacing-4);
}

.mk-form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-4);
}

.mk-contact-form {
  padding: var(--md-spacing-8);
}

.mk-form-submit {
  width: 100%;
}

/* ---- Marketing type scale overrides ----
   Public pages read at 14-16px minimum; the 12.8px app scale stays untouched */
.mk-section .btn:not(.btn--large),
.mk-hero .btn:not(.btn--large) {
  font-size: var(--md-marketing-small-size);
  line-height: var(--md-marketing-small-line);
}

.mk-faq .accordion__content {
  font-size: var(--md-body-large-size);
  line-height: var(--md-body-large-line);
}

/* ---- Stat band (product-fact tiles) ---- */
.mk-stat-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--md-component-width-xsmall), 1fr));
  gap: var(--md-spacing-6);
  text-align: center;
}

.mk-stat {
  padding: var(--md-spacing-6) var(--md-spacing-4);
  border-left: var(--md-divider-thickness) solid var(--md-outline-variant);
}

.mk-stat:first-child {
  border-left: none;
}

.mk-stat__value {
  font-size: clamp(var(--md-headline-medium-size), 3vw, var(--md-display-small-size));
  line-height: 1.1;
  font-weight: var(--md-weight-heavy);
  color: var(--md-primary);
  margin-bottom: var(--md-spacing-2);
}

.mk-stat__label {
  font-size: var(--md-marketing-small-size);
  line-height: var(--md-marketing-small-line);
  color: var(--md-on-surface-variant);
  margin: 0;
}

/* ---- Trust strip (icon chips, pricing page) ---- */
.mk-trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--md-spacing-3);
  margin-top: var(--md-spacing-10);
}

.mk-trust-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--md-spacing-2);
  padding: var(--md-spacing-2) var(--md-spacing-4);
  border: var(--md-divider-thickness) solid var(--md-outline-variant);
  border-radius: var(--md-shape-full);
  background-color: var(--md-surface-container);
  font-size: var(--md-marketing-small-size);
  line-height: var(--md-marketing-small-line);
  color: var(--md-on-surface-variant);
}

.mk-trust-chip .material-symbols-outlined {
  font-size: var(--md-icon-size-small);
  color: var(--md-primary);
}

/* ---- Browser frame (client portal screenshots) ---- */
.mk-browser-frame {
  border: var(--md-divider-thickness) solid var(--md-outline-variant);
  border-radius: var(--md-shape-large);
  background-color: var(--md-surface-container);
  box-shadow: var(--md-elevation-3);
  overflow: hidden;
}

.mk-browser-frame__bar {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-4);
  padding: var(--md-spacing-3) var(--md-spacing-4);
  background-color: var(--md-surface-container-high);
  border-bottom: var(--md-divider-thickness) solid var(--md-outline-variant);
}

.mk-browser-frame__dots {
  display: flex;
  gap: var(--md-spacing-2);
  flex-shrink: 0;
}

.mk-browser-frame__dot {
  width: var(--md-indicator-size-medium);
  height: var(--md-indicator-size-medium);
  border-radius: var(--md-shape-full);
  background-color: var(--md-outline);
  opacity: 0.5;
}

.mk-browser-frame__url {
  flex: 1;
  max-width: var(--md-component-width-medium);
  padding: var(--md-spacing-1) var(--md-spacing-4);
  border-radius: var(--md-shape-full);
  background-color: var(--md-surface);
  font-size: var(--md-label-medium-size);
  line-height: var(--md-label-medium-line);
  color: var(--md-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mk-browser-frame__body {
  position: relative;
}

.mk-browser-frame__body img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* CSS placeholder shown until a real screenshot lands in the frame */
.mk-browser-frame__skeleton {
  display: grid;
  grid-template-columns: 1fr 4fr;
  gap: var(--md-spacing-4);
  padding: var(--md-spacing-4);
  aspect-ratio: 16 / 10;
}

.mk-browser-frame__skeleton-rail,
.mk-browser-frame__skeleton-card {
  border-radius: var(--md-shape-small);
  background-color: var(--md-surface-container-highest);
}

.mk-browser-frame__skeleton-main {
  display: grid;
  grid-template-rows: 2fr 3fr;
  gap: var(--md-spacing-4);
}

.mk-browser-frame__skeleton-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--md-spacing-4);
}

.mk-browser-frame__skeleton-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--md-marketing-small-size);
  color: var(--md-on-surface-variant);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-line,
  .mk-feature-card,
  .mk-browser-frame {
    transition: none;
    animation: none;
  }
}

@media (max-width: 767px) {
  .mk-section {
    padding-block: var(--md-spacing-16);
  }

  .mk-hero {
    padding-block: var(--md-spacing-16) var(--md-spacing-12);
  }

  .mk-split {
    grid-template-columns: 1fr;
    gap: var(--md-spacing-8);
  }

  /* On mobile media always renders after the text, even for --reverse */
  .mk-split--reverse .mk-split__media { order: 0; }

  .mk-section__header {
    margin-bottom: var(--md-spacing-8);
  }

  .mk-form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .mk-section {
    padding-block: var(--md-spacing-12);
  }

  .mk-hero__actions .btn,
  .mk-cta-band__actions .btn,
  .mk-split__actions .btn {
    width: 100%;
  }
}