/* MessyNet — base + layout primitives
   Extracted from the Daylight design prototype. Design tokens live in
   tokens.css, @font-face in fonts.css, breakpoints in responsive.css. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--mn-day);font-family:var(--mn-font-body)}
img,svg{max-width:100%}
a{color:var(--mn-deep);text-decoration:none}
/* Bright teal is 1.97:1 on the paper ground, so hovering a link made it
   harder to read, not easier. Deep teal (8.65:1) carries the light surfaces;
   the dark surfaces keep the bright accent, where it reads at 9:1.
   The footer's links carry an inline colour from the prototype, and an inline
   declaration outranks a plain rule — without !important this one silently
   did nothing. Not applied to the generic a:hover, because the filled CTAs
   also set colour inline and must keep the dark label on their teal pill. */
a:hover{color:var(--mn-deep)}
.mn-nav a:hover,footer a:hover{color:var(--mn-teal)!important}

/* The page wrapper carries the per-page base colour set by the design. */
/* Decorative strands run past the edge and have to be trimmed. `hidden` is
   the wrong tool: an element with one axis hidden gets `overflow-y: auto`
   computed on the other, which quietly turns this wrapper into a scroll
   container and breaks anchor jumps and scrollIntoView. `clip` trims without
   creating a scrollport. */
.mn-page{overflow-x:hidden}
@supports (overflow-x:clip){.mn-page{overflow-x:clip}}

/* Jump targets clear the fixed bar instead of hiding under it. */
[id],.mn-anchors{scroll-margin-top:88px}
/* Zero-size markers that give the pricing deep-links somewhere to land,
   with or without script. */
.mn-anchors{position:relative}
.mn-anchor{display:block;height:0}

/* ── Focus ────────────────────────────────────────────────────────────────
   The prototype set outline:none on its fields and relied on a 1px border
   change, which is not a usable keyboard indicator. One ring, everywhere,
   only for keyboard focus. */
:focus-visible{outline:3px solid var(--mn-teal);outline-offset:2px;border-radius:2px}
.mn-nav :focus-visible{outline-color:var(--mn-volt)}
input:focus-visible,textarea:focus-visible{outline:3px solid var(--mn-deep);outline-offset:1px}
/* The menu checkbox is a 1px box; its ring is drawn on the burger instead. */
.mn-nav__toggle:focus-visible{outline:none}
.mn-skip:focus-visible{outline-color:var(--mn-ink)}

/* Skip link — keyboard users land past the fixed nav. */
.mn-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--mn-teal);
  color:#04211D;font-weight:700;font-size:14px;padding:10px 18px;border-radius:var(--mn-radius-btn)}
.mn-skip:focus{left:12px;top:12px;color:#04211D}

/* ── Navigation ───────────────────────────────────────────────────────────
   Same bar at every width. Below the breakpoint in responsive.css the links
   collapse behind a toggle. The toggle is a checkbox + label, not script, so
   the menu opens with JavaScript disabled. */
.mn-nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;
  gap:36px;padding:0 clamp(18px,4vw,40px);height:64px;background:rgba(11,14,24,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--mn-wire-subtle)}
.mn-nav__brand{display:flex;align-items:center;gap:10px}
.mn-nav__brand img{height:28px;display:block}
.mn-nav__brand span{font-family:var(--mn-font-body);font-weight:700;font-size:17px;
  color:var(--mn-heading);letter-spacing:-.01em}
/* Not rendered above the breakpoint, so it must not be tabbable there
   either — responsive.css turns it back on where the burger appears. */
.mn-nav__toggle{display:none}
.mn-nav__burger{display:none}
.mn-nav__links{display:flex;gap:28px;margin-left:auto;align-items:center;font-size:14px}
.mn-nav__links a{color:var(--mn-ice)}
.mn-nav__links a:hover{color:var(--mn-teal)}
.mn-nav__links a[aria-current="page"]{color:var(--mn-teal)}
/* The CTA keeps its filled treatment on its own page — the aria-current rule
   above would otherwise paint teal text onto the teal pill. */
.mn-nav__links a.mn-nav__cta,
.mn-nav__links a.mn-nav__cta[aria-current="page"]{background:var(--mn-teal);color:#04211D;
  font-weight:700;padding:9px 18px;border-radius:var(--mn-radius-btn);font-size:13.5px;
  white-space:nowrap}
.mn-nav__links a.mn-nav__cta:hover{background:var(--mn-teal-hover);color:#04211D}

/* ── Motion, and its absence ──────────────────────────────────────────────
   Reveal animations start from an inline off-state (opacity/transform) that
   script clears on scroll. Without script nothing would ever clear it, so the
   no-js rule below forces every animated element to its finished state — the
   page reads exactly the same, it just arrives all at once. */
html.no-js [data-anim],
html.no-js .mn-lang{opacity:1!important;transform:none!important;
  stroke-dashoffset:0!important;animation:none!important}
html.no-js .mn-lang{position:static!important}
html.no-js .mn-lang:not(.mn-lang-0){display:none!important}

/* Smooth jumps, unless the visitor asked for less movement. */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}

/* The status line is a live region, so it has to be in the accessibility tree
   before its text arrives — it ships empty and without `hidden` rather than
   being un-hidden in the same turn as the announcement. Empty it is a zero-
   height flex item that would still take the form's 18px gap, so cancel one
   gap while it has no content and give it back the moment it does. The
   !important is load-bearing: the element carries an inline margin:0, and a
   normal declaration here loses to it. Measured — 18px between the button row
   and the line below it, empty or not. */
#mn-contact-status:empty{margin-top:-18px!important}

/* ── Contact: manual send routes ──────────────────────────────────────────
   Shown after submit when there is no backend configured. mailto: fails
   silently on any browser without a mail handler, so these are always
   present rather than offered only on a failure nobody can detect. */
.mn-manual{margin-top:16px;padding:18px 20px;border:1px solid var(--mn-day-line-strong);
  border-radius:var(--mn-radius-sm);background:var(--mn-day-field)}
.mn-manual__lead{margin:0 0 12px;font-size:13px;line-height:1.6;color:var(--mn-ink-soft)}
.mn-manual__text{width:100%;font-family:var(--mn-font-mono);font-size:12px;line-height:1.6;
  padding:10px 12px;border:1px solid var(--mn-day-line);border-radius:var(--mn-radius-sm);
  background:var(--mn-day);color:var(--mn-ink);resize:vertical}
.mn-manual__row{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:12px}
.mn-manual__copy{font-family:var(--mn-font-body);font-weight:700;font-size:13px;
  padding:9px 18px;border:none;border-radius:var(--mn-radius-btn);
  background:var(--mn-ink);color:var(--mn-day);cursor:pointer}
.mn-manual__link{font-size:13px;color:var(--mn-deep);
  border-bottom:1px solid var(--mn-day-line-strong)}