/* M4 marketing pages (SPEC 10.1). Builds on the core tokens; mobile-first; no horizontal scroll at 320 px. */
.mk-hero { display: grid; gap: 1.5rem; align-items: center; padding: 1.5rem 0 1rem; }
@media (min-width: 840px) { .mk-hero { grid-template-columns: 1.3fr 1fr; padding: 2.5rem 0 1.5rem; } }
.mk-hero__title { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.4rem); margin: 0 0 .25rem; letter-spacing: -.02em; }
.mk-hero__title .brand__word { font-size: inherit; }
.mk-hero__descriptor { font-size: 1.2rem; font-weight: 600; margin: 0 0 .75rem; color: var(--ink); }
.mk-hero__buttons, .cta__buttons { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0 .5rem; }
.mk-hero__art { max-width: 26rem; justify-self: center; width: 100%; }
.mk-art { width: 100%; height: auto; display: block; }
.mk-art__field { fill: var(--surface-2); stroke: var(--border); stroke-width: 2; }
.mk-art__lane { fill: none; stroke: var(--primary); stroke-width: 7; stroke-linecap: round; }
.mk-art__sun { fill: var(--accent); opacity: .85; }
.mk-honest { border-top: 1px solid var(--border); margin-top: 1rem; }
.mk-r3 { font-size: 1.05rem; border-left: 6px solid var(--demo-bg); padding: .5rem .9rem; background: var(--surface); border-radius: var(--radius-sm); }
.mk-required { border-left: 6px solid var(--primary); padding: .6rem .9rem; background: var(--surface); border-radius: var(--radius-sm); color: var(--ink); }
.mk-page { padding-bottom: 1rem; }
.mk-page h1 { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.mk-feature .card__title a { text-decoration: none; }
.mk-feature .card__title a:hover, .mk-feature .card__title a:focus-visible { text-decoration: underline; }
.mk-paths .card, .mk-features .card { margin: 0; }
.mk-steps { padding-left: 1.4rem; }
.mk-steps li { margin-bottom: .5rem; }
.mk-dl dt { font-weight: 700; margin-top: .9rem; }
.mk-dl dd { margin: .2rem 0 0; }
.mk-diagram { margin: 1.5rem 0; overflow: hidden; }
.mk-diagram svg { width: 100%; height: auto; max-width: 48rem; display: block; }
.dg-box rect { fill: var(--surface); stroke: var(--primary); stroke-width: 2; }
.dg-box--core rect { fill: var(--surface-2); stroke-width: 3; }
.dg-box text { fill: var(--ink); font: 600 15px var(--font); text-anchor: middle; }
.dg-box text.dg-small { font-weight: 400; font-size: 12px; fill: var(--ink-muted); }
.dg-line path { stroke: var(--ink-muted); stroke-width: 2; fill: none; }
.claims { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .75rem; }
.claim { display: flex; gap: .6rem; align-items: flex-start; padding: .75rem .9rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.claim > .icon { color: var(--success); margin-top: .3rem; }
.claim__body { min-width: 0; }
.claim__text { margin: 0 0 .25rem; font-weight: 600; }
.claim__meta { margin: 0; display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; }
.claim__link { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; font-weight: 600; }
.claim__persona { color: var(--ink-muted); font-size: .95rem; }
.claim__persona a { color: var(--primary); }
.checklist-area { border-top: 1px solid var(--border); padding-top: .5rem; }
.checklist-area__req { max-width: 46rem; }
.toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem 1rem; margin: 1rem 0 1.5rem; }
.toc__title { font-size: 1rem; margin: .5rem 0; }
.toc .link-list { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: 0; }
.crumbs ol { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; font-size: .95rem; }
.crumbs li + li::before { content: "/"; margin-right: .25rem; color: var(--ink-muted); }
.crumbs a { display: inline-flex; min-height: 44px; align-items: center; }
.mk-more { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.cta { margin: 2rem 0 1rem; padding: 1.25rem; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); }
.cta h2 { margin-top: 0; }
.nid-table { width: 100%; border-collapse: collapse; }
.nid-table caption { text-align: left; font-weight: 700; padding: .5rem .75rem; }
.nid-table th, .nid-table td { text-align: left; vertical-align: top; padding: .6rem .75rem; border-top: 1px solid var(--border); }
.nid-table thead th { background: var(--surface); }
.narrow-wide { max-width: 40rem; }
.req-form__trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.req-form .check { min-height: 44px; }
.inbox-message { white-space: pre-wrap; }
@media (prefers-contrast: more) { .claim, .card, .toc, .cta { border-width: 2px; } }
@media print { .cta, .mk-hero__art { display: none; } }
/* Marketing pages have a short menu: keep it visible on small screens instead of collapsing it once core.js runs.
   This avoids the layout shift the collapse causes (Lighthouse CLS, SPEC M4-15) and works the same with or without JS. */
@media (max-width: 959px) {
  html.js body.area-marketing .primary-nav { display: block; }
  html.js body.area-marketing .nav-toggle { display: none; }
}