/* ==========================================================================
   Marketing site chrome — additions only. Brand tokens come from
   madeready-custom.css (which stays a verbatim copy of the theme CSS).
   ========================================================================== */

.mr-site-footer {
  background: var(--brand-bg-alt);
  border-top: 1px solid var(--brand-border);
  padding: 64px 24px;
}
.mr-site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.mr-site-footer__logo {
  height: 40px;
  width: auto;
}
.mr-site-footer__home {
  display: inline-block;
  line-height: 0;
  border-radius: 2px;
}
.mr-site-footer__home:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
}
.mr-site-footer__nav {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: center;
}
.mr-site-footer__nav a {
  color: var(--brand-text);
  font-family: var(--brand-body-font);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: color 150ms ease-out;
}
.mr-site-footer__nav a:hover { color: var(--brand-primary); }
.mr-site-footer__nav a:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
  border-radius: 2px;
}
.mr-site-footer__cta { margin-top: 4px; }
.mr-site-footer__note {
  font-family: var(--brand-body-font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.7;
  margin: 12px 0 0;      /* sits a touch lower than the nav gap alone */
}
/* "MadeReady" and "an app by" — the whisper (deliberately below AA; decorative
   credit only, Decision 054). The opacity lives HERE, not on the parent, so the
   electric-blue brand line below stays full strength. */
.mr-site-footer__note-line {
  display: block;
  color: var(--brand-text-muted);
  opacity: 0.5;
}
/* "Brightlight Agentics" — the signature: italic, normal case, electric blue. */
.mr-site-footer__note-brand {
  display: block;
  margin-top: 2px;
  font-style: italic;
  color: var(--brand-primary);
  opacity: 0.5;          /* softened to match the grey whisper lines */
}
@media (prefers-reduced-motion: reduce) {
  .mr-site-footer__nav a { transition: none; }
}

/* Mobile: the 6-link row wraps into an uneven centred block below ~600px.
   Split it into two balanced columns instead — first three left-justified,
   last three right-justified — with an even vertical rhythm. The max-width
   keeps the two columns a tasteful distance apart rather than stretching to
   the screen edges. Depends on exactly six links in DOM order. */
@media (max-width: 600px) {
  .mr-site-footer__nav {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    row-gap: 14px;
    max-width: 300px;
    width: 100%;
    margin-inline: auto;
  }
  .mr-site-footer__nav a:nth-child(-n + 3) { justify-self: start; }
  .mr-site-footer__nav a:nth-child(n + 4)  { justify-self: end; }
}

/* ==========================================================================
   Site header — centered logo mark over the dark hero, solid on scroll.
   Transparent by default (data-state="top"), floating over each page's dark
   #0F1923 hero. On scroll the JS sets data-state="scrolled": the bar fills to
   brand-dark and compacts. Light content throughout, so no logo swap. The
   cyan "M" mark reads on both the transparent (dark hero) and solid states.
   ========================================================================== */
.mr-skip-link {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 1100;
  background: var(--brand-primary);
  color: #fff;
  font-family: var(--brand-body-font);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--brand-btn-radius);
  text-decoration: none;
  transition: top 150ms ease-out;
}
.mr-skip-link:focus {
  top: 12px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Visually hidden but readable by assistive tech and link-text checkers. Used
   to give the image-only logo home link discernible text so it is never
   surfaced by its href (e.g. reported as "index.html"). */
.mr-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mr-site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 22px 24px;
  background: transparent;
  transition: background 250ms ease-out, padding 250ms ease-out,
              box-shadow 250ms ease-out, border-color 250ms ease-out;
  border-bottom: 1px solid transparent;
}
.mr-site-header[data-state="scrolled"] {
  background: var(--brand-dark);
  padding: 12px 24px;
  box-shadow: 0 6px 24px rgba(15, 25, 35, 0.28);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.mr-site-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
/* The nav is the centred flex row [Partners] [logo] [Contact] and the
   positioning context for the links. It's only the logo's width (the links
   are absolutely positioned on desktop), so hovering it == hovering the logo;
   the revealed links stay open because they're DOM descendants of the nav. */
.mr-site-header__nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mr-site-header__home {
  position: relative;
  z-index: 3;                 /* logo sits above the links so they read as "behind" it */
  display: inline-block;
  line-height: 0;
  border-radius: 8px;
  cursor: pointer;
}
.mr-site-header__home:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 4px;
}
.mr-site-header__logo {
  position: relative;
  display: inline-block;
  height: 46px;
  width: 46px;
  background: url('../assets/mrlogo-square.png') center / contain no-repeat;
  transition: height 250ms ease-out, width 250ms ease-out, transform 300ms ease-out;
}
/* the white "M", layered over the cyan square so it can spin independently */
.mr-site-header__logo-m {
  position: absolute;
  inset: 0;
  background: url('../assets/mrlogo-m.png') center / contain no-repeat;
}
.mr-site-header[data-state="scrolled"] .mr-site-header__logo {
  height: 36px;
  width: 36px;
}

/* Nav links — Partners (left) / Contact (right). Base type here; the
   show/hide interaction differs per breakpoint and lives in the media
   queries below (desktop hover-reveal, mobile tap-cascade). */
.mr-site-header__link {
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--brand-body-font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.mr-site-header__link:hover { color: #fff; }
.mr-site-header__link[aria-current="page"] { color: #fff; font-weight: 600; }
.mr-site-header__link:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---- Desktop: links tuck behind the logo, slide out on hover/focus ---- */
@media (min-width: 601px) {
  /* On load: the whole mark swells then relaxes, and as it relaxes the M
     spins once and settles. (Mobile uses its own 2x swell hint instead.) */
  .mr-site-header__logo {
    height: 92px;
    width: 92px;
    animation: mr-logo-swell 1100ms ease-in-out 400ms 1 both;
  }
  .mr-site-header[data-state="scrolled"] .mr-site-header__logo { height: 72px; width: 72px; }
  .mr-site-header__logo-m { animation: mr-logo-spin 900ms cubic-bezier(0.16, 1, 0.3, 1) 1500ms 1 both; }
  /* Home is mobile-cascade only; the desktop flank is Partners [logo] Contact. */
  .mr-site-header__link--home { display: none; }
  /* Widen the nav's hover/hit zone so it spans the logo AND the revealed links
     (including the gaps between). Without this, moving the cursor from the logo
     to a link crosses a dead zone where nav:hover drops and the link retracts
     before it can be clicked. Symmetric padding keeps the logo centred and the
     absolute links anchored to it (right/left:50%), so the animation is
     unchanged — only the hit area grows. */
  .mr-site-header__nav { padding: 0 80px; }
  .mr-site-header__link {
    position: absolute;
    top: 50%;
    z-index: 1;                 /* behind the logo (z-index:3) */
    font-size: 20px;            /* scaled up to balance the larger logo */
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms ease-out,
                transform 480ms cubic-bezier(0.22, 1, 0.36, 1),
                color 150ms ease-out;
  }
  /* resting (hidden): tucked under the logo's centre, anchored to it */
  .mr-site-header__link--left  { right: 50%; transform: translate(10px, -50%); }
  .mr-site-header__link--right { left: 50%;  transform: translate(-10px, -50%); }

  /* revealed: slide out horizontally to flank the 92px logo (+ gap) */
  .mr-site-header__nav:hover        .mr-site-header__link--left,
  .mr-site-header__nav:focus-within .mr-site-header__link--left {
    opacity: 1; pointer-events: auto;
    transform: translate(-59px, -50%);
  }
  .mr-site-header__nav:hover        .mr-site-header__link--right,
  .mr-site-header__nav:focus-within .mr-site-header__link--right {
    opacity: 1; pointer-events: auto;
    transform: translate(59px, -50%);
  }
  /* logo shrinks to 72px when scrolled — close the gap to match */
  .mr-site-header[data-state="scrolled"] .mr-site-header__nav:hover .mr-site-header__link--left,
  .mr-site-header[data-state="scrolled"] .mr-site-header__nav:focus-within .mr-site-header__link--left {
    transform: translate(-49px, -50%);
  }
  .mr-site-header[data-state="scrolled"] .mr-site-header__nav:hover .mr-site-header__link--right,
  .mr-site-header[data-state="scrolled"] .mr-site-header__nav:focus-within .mr-site-header__link--right {
    transform: translate(49px, -50%);
  }
}

/* ---- Mobile: tap the logo to cascade the links down, centred ---- */
@media (max-width: 600px) {
  .mr-site-header { padding: 16px 18px; }
  .mr-site-header[data-state="scrolled"] { padding: 10px 18px; }
  .mr-site-header__logo { height: 40px; width: 40px; }
  /* stack as a column with the logo on top, so both links cascade DOWN under
     it (DOM order is Partners·logo·Contact for the desktop flank; order:-1
     lifts the logo above both links on mobile) */
  .mr-site-header__nav { flex-direction: column; }
  .mr-site-header__home { order: -1; }

  /* dark panel behind the open menu so the light links stay readable even
     over light page content when the header is scrolled */
  .mr-site-header[data-nav-open] {
    background: var(--brand-dark);
    box-shadow: 0 6px 24px rgba(15, 25, 35, 0.28);
  }

  .mr-site-header__link {
    opacity: 0;
    max-height: 0;
    margin: 0;
    overflow: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 260ms ease-out,
                transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
                max-height 380ms ease-out,
                margin-top 380ms ease-out;
  }
  .mr-site-header[data-nav-open] .mr-site-header__link {
    opacity: 1;
    max-height: 2.6em;
    transform: translateY(0);
    pointer-events: auto;
  }
  /* staggered delays so they cascade in one after the other */
  .mr-site-header[data-nav-open] .mr-site-header__link--home  { margin-top: 14px; transition-delay: 40ms; }
  .mr-site-header[data-nav-open] .mr-site-header__link--left  { margin-top: 12px; transition-delay: 110ms; }
  .mr-site-header[data-nav-open] .mr-site-header__link--right { margin-top: 12px; transition-delay: 180ms; }

  /* swell-then-relax on load to hint the logo is tappable */
  .mr-site-header__logo { animation: mr-logo-swell 1200ms ease-in-out 650ms 2 both; }
}

@keyframes mr-logo-swell {
  0%, 100% { transform: scale(1); }
  45%      { transform: scale(1.2); }
}

@keyframes mr-logo-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .mr-site-header,
  .mr-site-header__logo,
  .mr-site-header__logo-m,
  .mr-skip-link,
  .mr-site-header__link { transition: none; animation: none; }
}

/* Header clearance — the fixed header (~141px desktop / ~116px mobile over the
   hero) overlays the top of the page. The homepage's 100vh centered hero clears
   it on its own; the other pages' heroes have only 64–96px top padding, so their
   eyebrow/heading would sit under the bar. Bump just their top padding (longhand,
   so the hero's other padding is untouched). [data-mode] specificity (0,2,1)
   beats the inline-styled .mrba__/.mrpp__/.changelog- heroes (0,1,0) regardless
   of source order. */
:root { --mr-header-clearance: 184px; }
body[data-mode="marketing"] { margin: 0; }
/* Hide the text-insertion / caret-browsing caret that can blink in the hero
   and other non-editable copy. Real form fields keep their caret. */
body[data-mode="marketing"] { caret-color: transparent; }
body[data-mode="marketing"] input,
body[data-mode="marketing"] textarea { caret-color: auto; }
body[data-mode="marketing"] .madeready-partners-hero,
body[data-mode="marketing"] .mr-status__hero,
body[data-mode="marketing"] .mrba__hero,
body[data-mode="marketing"] .mrpp__hero,
body[data-mode="marketing"] .changelog-hero {
  padding-top: var(--mr-header-clearance);
}
@media (max-width: 600px) {
  :root { --mr-header-clearance: 120px; }
}

/* --------------------------------------------------------------------------
   Mobile grid collapse — cascade correction.
   madeready-custom.css declares its mobile collapse (max-width:900px ->
   grid-template-columns:1fr) BEFORE the base .mr-dash__grid / .mr-support__
   summary / .mr-privacy__grid rules, so source order lets the multi-column
   base rules win; the grids never collapse below ~480px and overflow the
   viewport. site.css loads after the brand CSS, so re-asserting the intended
   single-column collapse here restores responsive behavior without editing
   the byte-locked brand stylesheet. Layout-only (no brand tokens involved).
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .mr-dash__grid,
  .mr-support__summary,
  .mr-privacy__grid,
  .mr-roadmap__item-cols {
    grid-template-columns: 1fr;
  }
  /* roadmap arrow points down once the now/future cells stack vertically */
  .mr-roadmap__item-arrow {
    transform: rotate(90deg);
    padding: 4px 0;
  }
}