/* m-nav — mobile/responsive layer.
   Inline styles in index.html win on specificity, so overrides here generally
   need !important. Loaded after checkout-modal.css.

   Layout strategy
   ---------------
   The bar needs ~665px to hold brand (169) + three pills + CTA on one line, so:

     >= 1100px   untouched — every rule below lives in a max-width query
     <= 1080px   tighter gaps / side padding, one row
     <=  900px   one row, 44px touch targets, bar height unchanged at 69px
     <=  664px   PHONE: one 65px row — brand, then a Menu button and Get Started.
                 The three section links become a dropdown panel opened by the
                 button. Brand stays on top, the menu is subordinate to it, and
                 mid-page section jumps keep working everywhere.

   There is deliberately NOTHING scroll-reactive here: no scroll listener, no
   IntersectionObserver, no per-frame math, no transform that depends on scroll
   position. The only JS is the page's tap-to-open/close handler, which toggles
   [data-menu="open"] on the nav.

   Sizing tokens are shared by the nav and by the anchor scroll offset so the two
   can never drift apart. --nav-h is always "how much chrome is stuck to the top
   of the viewport". */

:root {
  --m-nav-pad-y: 10px;   /* breathing room above/below the row */
  --m-nav-row: 44px;     /* minimum touch target */
  --m-nav-gut: 20px;     /* phone side gutter (matches the page) */
  --nav-h: 70px;         /* desktop bar height (informational) */
}

/* focus + press feedback for every nav control, at every width
   (invisible until keyboard focus / touch, so desktop rendering is unchanged) */
.m-nav a:focus-visible,
.m-nav .m-nav-menu:focus-visible {
  outline: 2px solid #15291D;
  outline-offset: 2px;
  border-radius: 999px;
}
.m-nav-cta > a:active {
  background: #4F8A6C !important;
}

/* The inline `transition` on the nav anchors isn't covered by the
   no-preference guards below, so mute it here. */
@media (prefers-reduced-motion: reduce) {
  .m-nav a,
  .m-nav .m-nav-menu,
  .m-nav .m-nav-links {
    transition: none !important;
    animation: none !important;
  }
}

/* ==================== >= 1244px: sit on the page's 1180px rail ====================
   THE ONE INTENTIONAL DESKTOP CHANGE IN THIS FILE. Everything else here lives
   in a max-width query and leaves >=1100px byte-identical; this rule does not,
   deliberately.

   Every other block on the page is a max-width:1180px rail centred inside a
   32px-padded section. Past 1244 (= 1180 + 2*32) that rail stops growing, so
   the page's content edge walks inward while this full-bleed bar stayed pinned
   at 32px: at 1280 the wordmark sat at x=32 against x=50 for the hero eyebrow,
   every section h2 and the footer, and 1248 against 1230 on the right. At
   <=1244 the two agree already, which is why 1024 and 1100 look right.

   This moves the padding, not the box. The bar's translucent fill, its blur and
   its bottom hairline stay full-bleed — boxing the background into the rail
   would read far worse than the misalignment it fixes. max() with 32px keeps
   the expression continuous at the breakpoint and makes the rule a no-op if it
   is ever evaluated below it. */
@media (min-width: 1244px) {
  .m-nav {
    padding-left: max(32px, calc((100% - 1180px) / 2)) !important;
    padding-right: max(32px, calc((100% - 1180px) / 2)) !important;
  }
}

/* ============================ <= 1080px ============================
   Match the page's 32 -> 28 side-padding step. */
@media (max-width: 1080px) {
  .m-nav {
    gap: 20px !important;
    padding: 16px 28px !important;
  }
  .m-nav-links {
    gap: 8px !important;
  }
}

/* ============================ <= 900px =============================
   Still one row; 44px targets without making the bar any taller. */
@media (max-width: 900px) {
  :root {
    --nav-h: 69px;
  }
  .m-nav {
    gap: 14px !important;
    padding: 12px 24px !important;
  }
  .m-nav-links {
    gap: 8px !important;
  }
  .m-nav-brand {
    min-height: var(--m-nav-row);
  }
  .m-nav-links > a,
  .m-nav-cta > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--m-nav-row);
    font-size: 13px !important;
    white-space: nowrap;
  }
  .m-nav-links > a {
    padding: 0 14px !important;
  }
  .m-nav-cta > a {
    padding: 0 18px !important;
  }
  .m-nav-links > a:active {
    background: rgba(21, 41, 29, 0.09) !important;
  }
}

/* ============================ <= 664px =============================
   Phone. 664 rather than 640: between 641 and 664 the single row runs out of
   right gutter and the green pill kisses the screen edge. */
@media (max-width: 664px) {
  :root {
    /* the whole bar is persistent chrome: padding + row + hairline */
    --nav-h: calc(2 * var(--m-nav-pad-y) + var(--m-nav-row) + 1px);
  }

  .m-nav {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    padding: var(--m-nav-pad-y) var(--m-nav-gut) !important;
    top: 0 !important;
  }

  /* ---- brand: stays first, stays the loudest thing in the bar ----
     0 1 auto, not 1 1 auto: the anchor must not grow past the wordmark, or the
     brand ends in a 54-98px hole at the widths where "| Checkout" is hidden.
     The slack is pushed between brand and menu button instead (margin on the
     button below), which is where it composes. */
  .m-nav-brand {
    flex: 0 1 auto !important;
    min-width: 0;
    min-height: var(--m-nav-row);
    gap: 10px !important;
    /* guard: if the bar is ever narrower than the brand's natural width the
       wordmark clips instead of running under the menu button */
    overflow: hidden;
  }
  .m-nav-brand img {
    height: 20px !important;
    flex: none;
  }
  .m-nav-brand > span {
    font-size: 14px !important;
    padding-left: 10px !important;
    white-space: nowrap;
  }

  /* ---- the menu button: subordinate, quiet, 44x44 ---- */
  .m-nav-menu {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--m-nav-row);
    height: var(--m-nav-row);
    /* all the free space in the bar lands here, between brand and button */
    margin: 0 0 0 auto;
    padding: 0;
    border: 1px solid rgba(21, 41, 29, 0.20);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.45);
    color: #15291D;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .m-nav-menu::before {   /* three hairline bars, no extra markup */
    content: "";
    box-sizing: border-box;
    width: 16px;
    height: 11px;
    border-top: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    background: linear-gradient(currentColor, currentColor) 50% 50% / 100% 1.5px no-repeat;
  }
  .m-nav-menu:active {
    background: rgba(21, 41, 29, 0.10);
  }
  .m-nav[data-menu="open"] .m-nav-menu {
    background: #15291D;
    border-color: #15291D;
    color: #FFFFFF;
  }

  /* ---- the section links: a sheet hung off the bar, closed by default ----

     Surface: the page is #EAE6E0 and the hero checkout card — the single most
     likely thing to sit behind an open menu — is #F4F2EE. A light panel on top
     of that card measures 1.01 contrast: the rows read as rows *inside* the
     card. So the sheet takes a dark ink, #1B3325: 12.14:1 against the card,
     10.92:1 against the page. Bar, button and sheet then read as one piece of
     chrome that plainly is not part of the page.

     #1B3325 is one step off #15291D, and deliberately not #15291D itself.
     #15291D is also the ink of .m-cta, and the bar's own Get Started button
     jumps straight to it: parked there, the sheet's fill and the section behind
     it were the identical bytes, and the two-layer drop shadow — which is
     itself rgba(21,41,29,…) — moved nothing over its own colour (measured:
     (20,41,29)–(21,42,29) directly under the border). The sheet stopped being
     an elevated object and became a 1px-outlined region, so its material
     identity changed with how far down the page you were. A fill one step light
     of that section gives the shadow something to fall on and demotes the
     border to reinforcement instead of the only mechanism. The step is 1.132:1,
     which is small in ratio terms but is a large flat field rather than a
     hairline, and it is plainly visible.

     On the numbers: the only contrast figure here with a real basis is the
     label on the panel — WCAG AA small text, 4.5:1 — and that measures 12.05:1,
     2.7x the floor. Panel-versus-page is not a WCAG criterion; it is visual
     separation, and past a point more of it just forecloses making the sheet a
     distinct material from the section behind it. That trade is why this is
     10.92:1 against the page and not the 12.37:1 an all-#15291D sheet scored.

     Geometry: top:100%, edge to edge. No gap, so no strip of the page shows
     between bar and sheet; and because the sheet spans the full bar width, the
     row labels can sit on the same gutter as the brand instead of floating on
     an arbitrary inset.

     Material: the bar is soft — translucent, blurred, hairlined, and every
     other surface on the page is rounded (hero card 20, buttons 999). A
     0-radius opaque slab was the only square corner anywhere, so it read as a
     different object landing on the page rather than as the bar extending.
     What the sheet can share:
       - the 14px bottom radius the >=481 sheet already had. Top corners stay
         square: it is continuous with the bar, not floating under it.
       - hairlines. The bar is separated from the page by a 1px
         rgba(21,41,29,0.08) rule; the sheet gets that vocabulary inverted, a
         light 1px along its top seam and around its free edges.
       - a softer, layered shadow instead of one hard 34px drop.
     What it deliberately does NOT share is the translucency. The bar's own
     backdrop-filter makes it a backdrop root, so a translucent child gets no
     blur at all (verified: alpha .80 + blur 30px still renders the card's
     "Sign in to complete checkout" perfectly sharp through the sheet). Raw
     see-through text is worse than a solid surface, and going solid also keeps
     the contrast where it is measurable: labels are 12.05:1 on the sheet, and
     the active row's #FFFFFF is 13.58:1.

     The outer border reinforces the fill step, and over .m-cta it is still the
     louder of the two, so it has to be light and *outside* the fill.
     rgba(244,241,236,0.55) resolves to rgb(146,156,146): 4.78:1 against the
     sheet, 5.41:1 against the #15291D of .m-cta on the other side of it, and
     still a soft 2.29:1 against the light page it usually sits on, so the
     common case is unchanged. It goes on the free edges only — no top border,
     where the sheet meets the bar. (The 481–664 card re-declares its top
     border; see that block.) */
  .m-nav-links {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* border-box so the 1px side borders come out of the width; left:0/right:0
       with a content-box border would put the sheet 2px past the viewport. */
    box-sizing: border-box;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 4px 0 8px !important;
    background: #1B3325;
    border: 1px solid rgba(244, 241, 236, 0.55) !important;
    border-top: 0 !important;
    border-radius: 0 0 14px 14px;
    box-shadow:
      inset 0 1px 0 rgba(244, 241, 236, 0.16),
      0 14px 30px rgba(21, 41, 29, 0.22),
      0 2px 6px rgba(21, 41, 29, 0.14);
    /* insurance on short viewports (landscape phones, small desktop windows):
       the sheet can never be taller than the space under the bar. */
    max-height: calc(100vh - var(--nav-h) - 16px);
    max-height: calc(100dvh - var(--nav-h) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .m-nav[data-menu="open"] .m-nav-links {
    display: flex !important;
  }
  .m-nav-links > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    /* same gutter as the bar: labels line up with the brand */
    padding: 0 var(--m-nav-gut) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2;
    color: #F4F1EC !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    white-space: nowrap;
  }
  /* Trailing chevron. The longest label stops ~121px into a 390px sheet; with
     nothing on the right the rows read as a settings list rather than three
     places to go. Pure border triangle — no markup, no motion.
     Rest is 0.55, not 0.42. At 0.42 the chevron was the quietest mark in the
     sheet, so going active (-> #7FC49B) moved two things at once: the mark
     appeared *and* changed hue. At 0.55 it is legibly present at rest, which
     leaves the active state reading as the one change it is meant to be. */
  .m-nav-links > a::after {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin-right: 2px;
    border-top: 1.5px solid rgba(244, 241, 236, 0.55);
    border-right: 1.5px solid rgba(244, 241, 236, 0.55);
    transform: rotate(45deg);
  }
  /* Separators and the top seam were the right instinct at the wrong level:
     0.12 measures 1.42:1 and 0.07 measures 1.22:1, which is the bottom of what
     survives a phone screen in daylight. 0.18 / 0.16 read as 1.70:1 / 1.60:1 —
     still hairlines, no longer theoretical. */
  .m-nav-links > a + a {
    box-shadow: inset 0 1px 0 rgba(244, 241, 236, 0.18);
  }

  /* ---- current section ----
     aria-current is written once, by the open handler, from a single
     synchronous rect read; nothing observes scroll, and a scroll closes the
     panel rather than leaving a stale claim on screen. The rail is an inset
     box-shadow so the label never shifts, and it has to be repeated on the
     `a + a` rule because that is where the row separator lives.
     The tint was 0.07 = 1.22:1, which left the rail carrying the entire
     signal; 0.14 = 1.51:1 is a band you can actually see is a band, while
     staying far below the label contrast so the row still reads as one of a
     list rather than a control. */
  .m-nav-links > a[aria-current] {
    color: #FFFFFF !important;
    background: rgba(244, 241, 236, 0.14) !important;
    box-shadow: inset 3px 0 0 #7FC49B;
  }
  .m-nav-links > a + a[aria-current] {
    box-shadow: inset 3px 0 0 #7FC49B, inset 0 1px 0 rgba(244, 241, 236, 0.18);
  }
  .m-nav-links > a[aria-current]::after {
    border-top-color: #7FC49B;
    border-right-color: #7FC49B;
  }

  .m-nav-links > a:active {
    background: rgba(244, 241, 236, 0.10) !important;
    box-shadow: none;
  }
  .m-nav-links > a:focus-visible {
    outline-color: #F4F1EC;
    outline-offset: -3px;
    border-radius: 0;
  }

  /* ---- Get Started ---- */
  .m-nav-cta {
    flex: 0 0 auto !important;
  }
  .m-nav-cta > a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: var(--m-nav-row);
    padding: 0 18px !important;
    font-size: 14px !important;
  }

  @media (prefers-reduced-motion: no-preference) {
    .m-nav[data-menu="open"] .m-nav-links {
      animation: m-nav-menu-in .16s cubic-bezier(.22, 1, .36, 1);
    }
    .m-nav-menu {
      transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    }
  }
}

@keyframes m-nav-menu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ==================== 481px - 664px: cap the sheet ====================
   Edge to edge is right on a phone. Past ~480 it becomes a 620px-wide bar
   holding three short labels with half a screen of dead space, so the sheet
   becomes a menu card: 320px, hung under the controls, its right edge on the
   same gutter as the Get Started pill. */
@media (min-width: 481px) and (max-width: 664px) {
  .m-nav-links {
    left: auto;
    right: var(--m-nav-gut);
    width: 320px;
    padding: 4px 0 6px !important;
    /* All four corners, not just the bottom two. Square top corners mean "this
       is the bar continuing downwards", and that is true edge-to-edge below
       481 — but here the sheet is a 320px card that touches neither side of
       the screen, so the flat top read as a seam to a bar that isn't there.
       A free-floating card is closed on all four sides, which also means the
       top edge gets its hairline back (the edge-to-edge sheet suppresses it
       because there the bar's own bottom rule already does that job). */
    border-top: 1px solid rgba(244, 241, 236, 0.55) !important;
    border-radius: 14px;
  }
  .m-nav-links > a {
    padding: 0 16px !important;
  }
}

/* ==================== 641px - 664px: match the page gutter ====================
   The page steps its side padding 24 -> 20 at 640, but this nav stays in its
   phone layout up to 664 (see above). Between 641 and 664 a 20px nav gutter
   therefore sits 4px inside #how/#demo/#compare. Step with the page instead. */
@media (min-width: 641px) and (max-width: 664px) {
  :root {
    --m-nav-gut: 24px;
  }
}

/* ==================== short viewports ====================
   Landscape phones, and narrow desktop windows people actually use. At
   500x400 the bar (65) plus the sheet (153) was 218px = 55% of the screen:
   an open menu owned more of the viewport than the page did. Nothing here
   goes below the 44px touch target — the savings come out of the sheet's own
   padding and the 4px of slack each row had above the minimum, which is all
   there is to give with three rows. 218 -> 197px (49%). The max-height on the
   sheet itself is the hard stop if a fourth row is ever added. */
@media (max-width: 664px) and (max-height: 520px) {
  .m-nav-links {
    padding: 2px 0 4px !important;
  }
  .m-nav-links > a {
    min-height: var(--m-nav-row);
  }
}

/* ===== anchor landing offset =====
   Derived from --nav-h so it can never drift from the real bar height.
   m-sections.css loads after this file, so an owner-set value still wins. */
@media (max-width: 900px) {
  #how, #demo, #compare, #cta {
    scroll-margin-top: calc(var(--nav-h) + 14px) !important;
  }
}

/* ============================ <= 400px ============================= */
@media (max-width: 400px) {
  :root {
    --m-nav-gut: 16px;
  }
  /* NB: no `gap` override here. The bar's 10px gap is the whole separation
     between two adjacent 44px tap targets (menu button / Get Started); 8px was
     the bare minimum and at 320 they visibly nearly touch. There is 31-70px of
     slack between brand and button at these widths, so 10px is free. */
  .m-nav-cta > a {
    padding: 0 16px !important;
  }
}

/* ============================ <= 360px =============================
   Last-resort tightening; labels stay >= 13px. */
@media (max-width: 360px) {
  .m-nav-brand {
    gap: 8px !important;
  }
  .m-nav-brand img {
    height: 19px !important;
  }
  .m-nav-brand > span {
    font-size: 13px !important;
    padding-left: 9px !important;
  }
  .m-nav-cta > a {
    padding: 0 13px !important;
    font-size: 13px !important;
  }
}

/* ============================ <= 348px =============================
   Below this the mark + "Checkout" + menu + CTA cannot share one line without
   the wordmark running under the menu button. The MOSS mark carries the
   identity on its own; everything else keeps its full 44px target. */
@media (max-width: 348px) {
  .m-nav-brand {
    gap: 0 !important;
  }
  .m-nav-brand > span {
    display: none !important;
  }
}