/* Mensorix website. Uses only --mx-* tokens from brand/tokens/tokens.css. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--mx-surface); color: var(--mx-ink); font: var(--mx-text-body); }
img, svg { display: block; }
a { color: var(--mx-link); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--mx-focus); outline-offset: 2px; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 80px; }
@media (max-width: 1024px) { .wrap { padding: 0 24px; } }
@media (max-width: 600px) { .wrap { padding: 0 16px; } }

.section { padding: 96px 0; }
@media (max-width: 600px) { .section { padding: 64px 0; } }

.eyebrow { font: var(--mx-text-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mx-teal-ink); margin: 0 0 var(--mx-space-4); }
h1 { font: var(--mx-text-display-xl); letter-spacing: -0.03em; margin: 0 0 var(--mx-space-6); }
h2 { font: var(--mx-text-display-l); letter-spacing: -0.02em; margin: 0 0 var(--mx-space-6); }
h3 { font: var(--mx-text-title); margin: 0 0 var(--mx-space-2); }
@media (max-width: 600px) {
  h1 { font-size: 40px; line-height: 44px; }
  h2 { font-size: 32px; line-height: 38px; }
}
.lead { font: var(--mx-text-body-l); color: var(--mx-ink-muted); margin: 0 0 var(--mx-space-8); max-width: 40ch; }
.muted { color: var(--mx-ink-muted); }

/* Buttons (examples/components.html) */
.mx-btn { font-family: var(--mx-font-sans); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: var(--mx-space-2);
          border-radius: var(--mx-radius-md); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; }
.mx-btn--md { height: 44px; padding: 0 var(--mx-space-4); font-size: 16px; }
.mx-btn--lg { height: 56px; padding: 0 var(--mx-space-6); font-size: 18px; }
.mx-btn--primary { background: var(--mx-primary); color: var(--mx-on-primary); }
.mx-btn--secondary { background: transparent; border-color: var(--mx-ink); color: var(--mx-ink); }
.mx-btn--inverse { background: var(--mx-on-navy); color: var(--mx-navy); }
.row { display: flex; flex-wrap: wrap; gap: var(--mx-space-4); align-items: center; }

/* Header */
.header { padding: var(--mx-space-6) 0; }
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--mx-space-4); }
.header img { height: 32px; width: auto; }

/* Hero */
.hero { padding: var(--mx-space-12) 0 96px; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--mx-space-16); align-items: center; }
@media (max-width: 1024px) { .hero .wrap { grid-template-columns: 1fr; gap: var(--mx-space-12); } }

/* Navy panel with plan grid */
.mx-panel { position: relative; overflow: hidden; border-radius: var(--mx-radius-lg); background: var(--mx-brand-field); color: var(--mx-on-navy);
            background-image: linear-gradient(var(--mx-field-grid) 1px, transparent 1px), linear-gradient(90deg, var(--mx-field-grid) 1px, transparent 1px);
            background-size: 48px 48px; }
.hero-visual { padding: var(--mx-space-12) var(--mx-space-6); display: flex; align-items: center; justify-content: center; min-height: 380px; }

/* Status pill */
.mx-pill { display: inline-flex; align-items: center; height: 26px; padding: 0 var(--mx-space-3); border-radius: var(--mx-radius-pill); font: 600 13px/1 var(--mx-font-sans); }
.mx-pill--open { background: var(--mx-status-open-bg); color: var(--mx-status-open-fg); }
.mx-pill--progress { background: var(--mx-status-progress-bg); color: var(--mx-status-progress-fg); }
.mx-pill--closed { background: var(--mx-status-closed-bg); color: var(--mx-status-closed-fg); }
.mx-pill--soon { background: var(--mx-teal-soft); color: var(--mx-teal-ink); white-space: nowrap; }
.row--tight { gap: var(--mx-space-3); }
@media (max-width: 480px) { .header .mx-pill--soon { display: none; } }
.hero-note { display: flex; align-items: center; gap: var(--mx-space-2); margin: var(--mx-space-4) 0 0; color: var(--mx-ink-muted); }
.hero-note svg { width: 20px; height: 20px; color: var(--mx-teal-ink); flex-shrink: 0; }

/* Finding card */
.mx-card { display: flex; gap: var(--mx-space-4); align-items: center; padding: var(--mx-space-4); background: var(--mx-surface-raised); color: var(--mx-ink);
           border: 1px solid var(--mx-line); border-radius: var(--mx-radius-lg); width: 100%; max-width: 440px; box-shadow: var(--mx-shadow-card); }
.mx-card + .mx-card { margin-top: var(--mx-space-3); }
.mx-card__photo { width: 88px; height: 88px; flex-shrink: 0; border-radius: var(--mx-radius-md); background: var(--mx-surface-sunken); color: var(--mx-ink-muted);
                  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; }
.mx-card__photo svg { width: 28px; height: 28px; }
.mx-card__body { display: flex; flex-direction: column; gap: var(--mx-space-1); min-width: 0; }
.mx-card__meta { display: flex; gap: var(--mx-space-2); align-items: center; }
.mx-card__id { font: var(--mx-text-data); font-size: 13px; color: var(--mx-ink-muted); }
.mx-card__title { margin: 0; font: 600 17px/24px var(--mx-font-sans); }
.mx-card__line { display: flex; gap: 6px; align-items: center; font-size: 14px; line-height: 20px; }
.mx-card__line svg { width: 16px; height: 16px; flex-shrink: 0; }
.cards { width: 100%; max-width: 440px; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mx-space-6); list-style: none; padding: 0; margin: var(--mx-space-8) 0 0; }
@media (max-width: 1024px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--mx-surface-raised); border: 1px solid var(--mx-line); border-radius: var(--mx-radius-lg); padding: var(--mx-space-6); }
.step p { margin: 0; color: var(--mx-ink-muted); }
.mx-icon-tile { width: 56px; height: 56px; border-radius: var(--mx-radius-md); background: var(--mx-teal-soft); color: var(--mx-teal-ink);
                display: flex; align-items: center; justify-content: center; margin-bottom: var(--mx-space-4); }
.mx-icon-tile svg { width: 28px; height: 28px; }
.step-num { font: var(--mx-text-data); color: var(--mx-ink-muted); display: block; margin-bottom: var(--mx-space-1); }

/* Split sections */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mx-space-16); align-items: start; }
@media (max-width: 1024px) { .split { grid-template-columns: 1fr; gap: var(--mx-space-8); } }
.body-l { font: var(--mx-text-body-l); margin: 0 0 var(--mx-space-6); }
.tags { display: flex; flex-wrap: wrap; gap: var(--mx-space-2); list-style: none; padding: 0; margin: 0; }
.tags li { border: 1px solid var(--mx-line); background: var(--mx-surface-raised); border-radius: var(--mx-radius-pill); padding: var(--mx-space-2) var(--mx-space-4); font: var(--mx-text-caption); }
.points { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--mx-space-3); }
.points li { display: flex; gap: var(--mx-space-3); align-items: flex-start; font: var(--mx-text-body-l); }
.points svg { width: 24px; height: 24px; color: var(--mx-teal-ink); flex-shrink: 0; margin-top: 2px; }
.band { background: var(--mx-surface-raised); border-top: 1px solid var(--mx-line); border-bottom: 1px solid var(--mx-line); }

/* Closing call to action */
.cta { padding: var(--mx-space-16) var(--mx-space-12); }
.cta h2 { color: var(--mx-on-navy); }
.cta p { margin: 0 0 var(--mx-space-8); color: var(--mx-on-navy); opacity: 0.86; font: var(--mx-text-body-l); max-width: 48ch; }
@media (max-width: 600px) { .cta { padding: var(--mx-space-12) var(--mx-space-6); } }

/* Footer */
.footer { padding: var(--mx-space-12) 0; border-top: 1px solid var(--mx-line); }
.footer .wrap { display: flex; flex-wrap: wrap; gap: var(--mx-space-6); align-items: center; justify-content: space-between; }
.footer img { height: 28px; width: auto; }
.footer p { margin: 0; color: var(--mx-ink-muted); font-size: 14px; }
.footer nav { display: flex; flex-wrap: wrap; gap: var(--mx-space-6); font-size: 14px; }

/* Long-form text (privacy policy) */
.prose { max-width: 720px; padding: var(--mx-space-12) 0 96px; }
.prose h1 { font: var(--mx-text-display-l); letter-spacing: -0.02em; }
.prose h2 { font: var(--mx-text-heading); letter-spacing: -0.01em; margin: var(--mx-space-8) 0 var(--mx-space-3); }
.prose p, .prose li { margin: 0 0 var(--mx-space-3); }
.prose ul { padding-left: 22px; margin: 0 0 var(--mx-space-3); }
@media (max-width: 600px) { .prose h1 { font-size: 32px; line-height: 38px; } }