/* MessPilot public website polish 2026-07-17 */
:root {
  --mp-site-max: 1040px;
  --mp-site-content-max: 980px;
  --mp-site-radius-shell: 24px;
  --mp-site-radius-card: 14px;
  --bg: #f2f5fb;
  --surface: rgba(244, 247, 252, 0.75);
  --surface-solid: rgba(249, 251, 255, 0.96);
  --line: rgba(149, 163, 182, 0.44);
  --text: #141b2f;
  --muted: #5f718a;
  --accent: #4b75d6;
  --accent-deep: #315cb8;
  --success: #24b985;
  --gold: #f2aa44;
  --danger: #e95d5d;
  --page-wave-1: rgba(89, 128, 216, 0.15);
  --page-wave-2: rgba(234, 170, 84, 0.10);
  --page-bg-top: #f6f8fe;
  --shadow: 0 1px 2px rgba(11, 18, 36, 0.02), 0 18px 44px rgba(11, 18, 36, 0.06);
  --mp-site-line: var(--line, rgba(143, 161, 188, 0.42));
  --mp-site-surface: var(--surface, rgba(248, 251, 255, 0.78));
  --mp-site-solid: var(--surface-solid, rgba(255, 255, 255, 0.96));
  --mp-site-text: var(--text, #111a2f);
  --mp-site-muted: var(--muted, #60718b);
  --mp-site-accent: var(--accent, #2478ed);
  --mp-site-accent-deep: var(--accent-deep, #225fbe);
  --mp-site-success: var(--success, var(--ci-green, #24b985));
  --mp-site-shadow: var(--shadow, 0 18px 48px rgba(19, 33, 60, 0.09));
}

:root[data-theme="dark"] {
  --bg: #070e1f;
  --surface: rgba(14, 23, 42, 0.78);
  --surface-solid: #0f1b35;
  --line: rgba(79, 100, 132, 0.44);
  --text: #edf2fb;
  --muted: #a1b1ca;
  --accent: #6f8fe0;
  --accent-deep: #9eb8ff;
  --success: #57d7a7;
  --gold: #ffc96d;
  --danger: #ff8585;
  --page-wave-1: rgba(111, 144, 229, 0.20);
  --page-wave-2: rgba(251, 200, 120, 0.09);
  --page-bg-top: #060f25;
  --shadow: 0 1px 2px rgba(4, 10, 21, 0.45), 0 18px 44px rgba(2, 6, 15, 0.45);
}

body {
  position: relative !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(circle at 12% 10%, var(--page-wave-1), transparent 24%),
    radial-gradient(circle at 86% 12%, var(--page-wave-2), transparent 22%),
    linear-gradient(180deg, var(--page-bg-top), var(--bg)) !important;
}

.page {
  position: relative !important;
  z-index: 1 !important;
  width: min(100%, var(--mp-site-max)) !important;
  margin-inline: auto !important;
  padding-bottom: 28px !important;
}

.site-wave-background {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.topbar {
  width: fit-content !important;
  max-width: calc(100% - 40px) !important;
  min-height: 60px;
  box-sizing: border-box !important;
  justify-content: center !important;
  gap: clamp(22px, 4vw, 58px) !important;
  border: 1px solid var(--mp-site-line) !important;
  border-radius: var(--mp-site-radius-shell) !important;
  background: color-mix(in srgb, var(--mp-site-surface) 82%, transparent) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.06) !important;
  backdrop-filter: blur(18px) saturate(1.06) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), var(--mp-site-shadow) !important;
}

.brand {
  position: relative;
  min-width: max-content;
  gap: 11px !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em !important;
}

.brand img {
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--mp-site-accent) 22%, transparent));
  animation: mpTopbarMarkBreath 5s ease-in-out infinite;
}

.brand::after {
  content: "";
  position: absolute;
  left: 51px;
  right: 1px;
  bottom: -8px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--mp-site-accent), var(--mp-site-success), var(--gold, #f2aa44), transparent);
  opacity: .72;
  transform-origin: left center;
  animation: mpTopbarBrandWave 3.8s ease-in-out infinite;
}

@keyframes mpTopbarMarkBreath {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--mp-site-accent) 18%, transparent)); }
  50% { transform: translateY(-1px) scale(1.035); filter: drop-shadow(0 0 15px color-mix(in srgb, var(--mp-site-accent) 34%, transparent)); }
}

@keyframes mpTopbarBrandWave {
  0%, 100% { transform: scaleX(.22); opacity: .28; }
  45% { transform: scaleX(1); opacity: .78; }
  72% { transform: scaleX(.5); opacity: .44; }
}

.topbar nav {
  gap: 8px !important;
  align-items: center !important;
}

.topbar nav a {
  box-sizing: border-box !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border: 1px solid var(--mp-site-line) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--mp-site-solid) 84%, transparent) !important;
  color: var(--mp-site-text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transform: none !important;
  box-shadow: none !important;
  gap: 7px !important;
}

.topbar nav a svg {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.topbar nav a .nav-label {
  display: inline-flex !important;
  align-items: center !important;
}

.topbar nav a:hover,
.topbar nav a:focus-visible {
  outline: none !important;
  color: var(--mp-site-accent-deep) !important;
  border-color: color-mix(in srgb, var(--mp-site-accent) 50%, var(--mp-site-line)) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mp-site-accent) 12%, transparent) !important;
}

.topbar nav a[aria-current="page"] {
  color: var(--mp-site-accent-deep) !important;
  border-color: color-mix(in srgb, var(--mp-site-accent) 58%, var(--mp-site-line)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--mp-site-accent) 14%, transparent), color-mix(in srgb, var(--mp-site-success) 6%, transparent)),
    color-mix(in srgb, var(--mp-site-solid) 86%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

.topbar nav a[href="/login"] {
  color: color-mix(in srgb, var(--mp-site-success) 74%, var(--mp-site-text)) !important;
  border-color: color-mix(in srgb, var(--mp-site-success) 48%, var(--mp-site-line)) !important;
}

.section,
.hero,
.panel,
.entry,
.roadmap-card,
.home-card,
.pricing-card,
.faq-item,
.services-list,
.footer {
  border-color: color-mix(in srgb, var(--mp-site-line) 92%, transparent) !important;
  box-shadow: var(--mp-site-shadow) !important;
}

.section,
.hero,
.panel,
.footer {
  background: color-mix(in srgb, var(--mp-site-surface) 76%, transparent) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.04) !important;
  backdrop-filter: blur(16px) saturate(1.04) !important;
}

.section,
.hero {
  border-radius: var(--mp-site-radius-shell) !important;
  width: min(100%, var(--mp-site-content-max)) !important;
  margin-inline: auto !important;
  min-height: 0 !important;
}

.home-card,
.pricing-card,
.faq-item,
.services-list,
.roadmap-card,
.entry,
.card,
.tile,
.module,
.flow-item,
.pdf-card,
.visual-card,
.timeline-body,
.proof-item {
  border-radius: var(--mp-site-radius-card) !important;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--mp-site-accent) 3%, transparent), transparent 48%),
    color-mix(in srgb, var(--mp-site-solid) 72%, transparent) !important;
  border-color: color-mix(in srgb, var(--mp-site-accent) 16%, var(--mp-site-line)) !important;
}

h1,
h2,
h3 {
  color: var(--mp-site-text);
}

p,
li,
.micro-note,
.lead,
.sublead {
  color: var(--mp-site-muted);
}

.kicker,
.panel-pill,
.eyebrow {
  border-radius: 999px !important;
  letter-spacing: 0.09em !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--mp-site-accent) 16%, transparent), color-mix(in srgb, var(--mp-site-success) 5%, transparent)) !important;
  border: 1px solid color-mix(in srgb, var(--mp-site-accent) 24%, transparent) !important;
  color: color-mix(in srgb, var(--mp-site-accent) 72%, var(--mp-site-text)) !important;
}

.hero-actions,
.closing-links {
  align-items: center;
}

.button,
.footer-link,
.close-modal,
.wave-toggle {
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

.button:focus-visible,
.footer-link:focus-visible,
.close-modal:focus-visible,
.wave-toggle:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mp-site-accent) 14%, transparent) !important;
}

.footer {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: auto !important;
  width: fit-content !important;
  max-width: calc(100% - 20px) !important;
  margin: 24px auto 0 !important;
  min-height: 48px;
  padding: 10px 14px !important;
  border-radius: var(--mp-site-radius-shell) !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--mp-site-accent) 4%, transparent), color-mix(in srgb, var(--mp-site-success) 3%, transparent), color-mix(in srgb, var(--gold, #f2aa44) 4%, transparent)),
    var(--mp-site-surface) !important;
}

.footer nav {
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
}

.seo-copy {
  display: grid !important;
  gap: 14px !important;
  padding: clamp(22px, 3vw, 34px) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--mp-site-success) 5%, transparent), color-mix(in srgb, var(--mp-site-accent) 4%, transparent)),
    color-mix(in srgb, var(--mp-site-surface) 70%, transparent) !important;
}

.seo-copy h2 {
  max-width: 860px !important;
  font-size: clamp(24px, 2.4vw, 34px) !important;
}

.seo-copy p {
  max-width: 880px !important;
  margin: 0 !important;
  font-size: clamp(13px, .95vw, 15px) !important;
  line-height: 1.6 !important;
}

.seo-keywords {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.seo-keywords li {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border: 1px solid color-mix(in srgb, var(--mp-site-accent) 18%, var(--mp-site-line)) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--mp-site-solid) 72%, transparent) !important;
  color: var(--mp-site-muted) !important;
  font-size: 12px !important;
  font-weight: 720 !important;
}

.theme-switch-wrap,
.wave-toggle-wrap {
  margin-left: 8px !important;
}

.user-theme-mode {
  height: 30px !important;
}

.wave-toggle {
  height: 30px !important;
}

.info-modal {
  width: min(780px, calc(100vw - 28px)) !important;
  max-height: min(78vh, 760px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  padding: 18px !important;
}

.info-modal header {
  flex: 0 0 auto !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--mp-site-line) 86%, transparent) !important;
}

.info-modal h3 {
  font-size: clamp(20px, 2vw, 26px) !important;
  line-height: 1.1 !important;
}

.info-modal .close-modal {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
}

.info-modal .content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin-top: 12px !important;
  overflow: auto !important;
  padding-right: 6px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.legal-content {
  color: var(--mp-site-muted) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.legal-content h1 {
  margin: 0 0 12px !important;
  max-width: none !important;
  font-size: clamp(24px, 2.5vw, 32px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
}

.legal-content h2 {
  margin: 22px 0 8px !important;
  font-size: clamp(18px, 1.7vw, 22px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.025em !important;
}

.legal-content h3 {
  margin: 18px 0 6px !important;
  font-size: 16px !important;
  line-height: 1.22 !important;
}

.legal-content p,
.legal-content li {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.legal-content p {
  margin: 0 0 10px !important;
}

.legal-content ul,
.legal-content ol {
  margin: 8px 0 14px 20px !important;
  padding: 0 !important;
}

.legal-content li + li {
  margin-top: 5px !important;
}

/* Compact website typography pass 2026-07-17 */
.page {
  font-size: 15px !important;
}

main {
  display: grid !important;
  gap: 20px !important;
}

.hero,
.section,
.panel {
  margin-block: 0 20px !important;
}

.hero,
.section-inner,
.panel {
  padding: clamp(26px, 3.6vw, 46px) !important;
}

.hero > div,
.section > div,
.panel > div {
  max-width: 100% !important;
}

h1 {
  max-width: 11ch;
  font-size: clamp(46px, 6vw, 78px) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.055em !important;
}

h2 {
  font-size: clamp(28px, 3.1vw, 46px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.04em !important;
}

h3 {
  font-size: clamp(18px, 1.55vw, 24px) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.025em !important;
}

.lead {
  max-width: 760px;
  font-size: clamp(18px, 1.75vw, 24px) !important;
  line-height: 1.45 !important;
}

.sublead,
.micro-note,
.section p,
.panel p,
.entry p,
.card p,
.tile p,
.home-card p,
.pricing-card p,
.faq-answer p,
.roadmap-card p,
.service-copy span {
  font-size: clamp(14px, 1vw, 16px) !important;
  line-height: 1.55 !important;
}

.section li,
.panel li,
.entry li,
.pricing-card li {
  font-size: clamp(13px, .95vw, 15px) !important;
  line-height: 1.5 !important;
}

.kicker,
.panel-pill,
.eyebrow {
  min-height: 0 !important;
  padding: 8px 13px !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

.button {
  min-height: 42px !important;
  padding: 0 18px !important;
  font-size: 14px !important;
}

.home-card,
.pricing-card,
.faq-item,
.services-list,
.roadmap-card,
.entry,
.card,
.tile,
.module,
.flow-item,
.pdf-card,
.visual-card,
.timeline-body,
.proof-item {
  padding: clamp(16px, 2vw, 24px) !important;
}

.pricing-card h3,
.faq-question,
.service-copy strong,
.entry-title,
.roadmap-card strong,
.home-card strong,
.card strong,
.tile strong {
  font-size: clamp(16px, 1.25vw, 20px) !important;
  line-height: 1.18 !important;
}

.price strong {
  font-size: clamp(32px, 4vw, 54px) !important;
  line-height: 1 !important;
}

.section-head {
  gap: 8px !important;
  margin-bottom: clamp(18px, 2.4vw, 30px) !important;
}

.hero-actions,
.closing-links {
  gap: 10px !important;
}

@media (min-width: 761px) {
  .topbar {
    position: fixed !important;
    top: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(22px, 4vw, 58px) !important;
    padding: 10px 16px !important;
  }

  .topbar nav {
    display: flex !important;
    justify-content: flex-end !important;
  }
}

@media (max-width: 760px) {
  .page {
    width: 100% !important;
    padding: 10px 10px 28px !important;
  }

  .topbar {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    min-height: auto !important;
    display: grid !important;
    justify-items: center !important;
    gap: 10px !important;
    margin: 0 0 14px !important;
    padding: 10px 12px !important;
    border-radius: 20px !important;
  }

  .brand {
    gap: 10px !important;
    font-size: 14px !important;
    letter-spacing: 0.07em !important;
  }

  .brand img {
    width: 36px !important;
    height: 36px !important;
  }

  .topbar nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .topbar nav a {
    width: 42px !important;
    min-width: 42px !important;
    min-height: 38px !important;
    padding: 0 !important;
    font-size: 12px !important;
  }

  .topbar nav a svg {
    width: 17px !important;
    height: 17px !important;
    flex-basis: 17px !important;
  }

  .topbar nav a .nav-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .hero,
  .section-inner {
    padding: 22px 18px !important;
  }

  h1 {
    max-width: 12ch;
    font-size: clamp(32px, 9vw, 46px) !important;
    line-height: .98 !important;
    letter-spacing: -0.045em !important;
  }

  h2 {
    font-size: clamp(24px, 7vw, 34px) !important;
  }

  h3 {
    font-size: 18px !important;
  }

  .lead {
    font-size: clamp(16px, 4.4vw, 19px) !important;
    line-height: 1.45 !important;
  }

  .sublead,
  .micro-note,
  .section p,
  .panel p,
  .entry p,
  .card p,
  .tile p,
  .home-card p,
  .pricing-card p,
  .faq-answer p,
  .roadmap-card p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .home-card,
  .pricing-card,
  .faq-item,
  .services-list,
  .roadmap-card,
  .entry,
  .card,
  .tile,
  .module,
  .flow-item,
  .pdf-card,
  .visual-card,
  .timeline-body,
  .proof-item {
    padding: 16px !important;
  }

  .kicker,
  .panel-pill,
  .eyebrow {
    padding: 7px 11px !important;
    font-size: 10px !important;
  }

  .button {
    min-height: 40px !important;
    padding: 0 15px !important;
    font-size: 13px !important;
  }

  .footer {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: fit-content !important;
    max-width: calc(100% - 16px) !important;
    margin: 18px auto 0 !important;
  }

  .footer nav {
    width: 100% !important;
    line-height: 1.4 !important;
    row-gap: 6px !important;
  }

  .seo-copy {
    padding: 18px !important;
  }

  .seo-keywords {
    gap: 5px !important;
  }
}