/* marketing_mobile.css — the phone pass shared by every marketing page
   (Landing, Pricing, About, and the four article pages).

   Each page inlines its own copy of the nav CSS, so the one thing they all had
   in common was the one thing that broke: `.nav-links`/`.snav-links` were set
   to display:none at 640px with nothing put in their place, leaving a phone
   visitor with a brand mark, a Get Started button and no way to reach any other
   page. marketing_nav.js clones those same links into a sheet; the styles for
   it live here so all seven pages get it from one place.

   Loaded AFTER each page's own <style>, so it wins without !important where the
   specificity matches. */

.mnav-btn { display: none; }
.mnav-sheet { display: none; }

@media (max-width: 960px) {
  /* Not 640: the five uppercase links measure ~520px, and with the brand mark
     and the Get Started pill the bar needs ~880px of room. Below that they were
     running into each other — visible on both iPads in portrait. The sheet takes
     over as soon as the row stops fitting, not just on phones. */
  .nav-links, .snav-links { display: none !important; }
  .nav-cta, .snav-cta { margin-left: auto !important; }

  .mnav-btn {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-left: 8px; flex-shrink: 0;
    border: 1px solid var(--tmb-border); border-radius: 13px;
    background: var(--tmb-surface); color: var(--tmb-fg-2);
    cursor: pointer; padding: 0; font: inherit;
  }
  .mnav-btn:active { background: var(--tmb-surface-soft); }
  .mnav-btn span { display: block; width: 16px; height: 1.8px; border-radius: 2px; background: currentColor; transition: transform .22s var(--tmb-ease-out), opacity .16s; }
  .mnav-btn span + span { margin-top: 4px; }
  .mnav-open .mnav-btn span:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
  .mnav-open .mnav-btn span:nth-child(2) { opacity: 0; }
  .mnav-open .mnav-btn span:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }

  /* The header is fixed with pointer-events:none (only the pill takes clicks),
     so the sheet has to opt back in. */
  .mnav-sheet {
    display: block; position: absolute; top: calc(100% + 10px); left: 24px; right: 24px;
    max-width: 360px; margin-left: auto;
    pointer-events: auto; background: rgba(255,255,255,.94);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--tmb-border); border-radius: 22px;
    box-shadow: var(--tmb-shadow-xl); padding: 8px;
    opacity: 0; transform: translateY(-8px) scale(.985); transform-origin: 100% 0;
    visibility: hidden; transition: opacity .2s var(--tmb-ease-out), transform .24s var(--tmb-ease-out), visibility .24s;
  }
  .mnav-open .mnav-sheet { opacity: 1; transform: none; visibility: visible; }
  .mnav-sheet a {
    display: flex; align-items: center; min-height: 46px; padding: 0 14px;
    border-radius: 14px; font-size: 14.5px; font-weight: 700;
    letter-spacing: -.01em; text-transform: none; color: var(--tmb-fg-2);
  }
  .mnav-sheet a:active { background: var(--tmb-surface-soft); }
  .mnav-sheet a.active { color: var(--tmb-fg-1); background: var(--tmb-surface-soft); }
}

@media (max-width: 640px) {
  /* 48px of gutter on a 375px screen left 279px of measure; 20px is the
     narrowest that still keeps text off the bezel. */
  .wrap { padding-left: 20px !important; padding-right: 20px !important; }
  header.nav, header.snav { padding-left: 14px !important; padding-right: 14px !important; }
  .nav-inner, .snav-inner { padding: 0 10px 0 14px !important; }
  .brand img { width: 26px !important; height: 26px !important; }
  .brand .name b { font-size: 14px !important; }
  .brand .name s { font-size: 8px !important; letter-spacing: .14em !important; }
  /* The CTA stays in the bar — it is the one thing a first-time visitor is
     here to press — but it gives up some padding to make room. */
  .nav-cta .btn, .snav-btn { height: 38px !important; padding: 0 15px !important; font-size: 12.5px !important; }
  .mnav-sheet { left: 14px; right: 14px; }

  /* Footers. `.sfoot-inner` is not a `.wrap` — it carries its own `padding: 0 48px`,
     so the column switch still left a 5-link row (~342px) inside a 279px box and
     every article page scrolled sideways. Trim the gutter, let the links wrap, and
     give each one a 40px tap row. Order puts the copyright last, where a caption
     belongs, instead of between the mark and the links. */
  .foot-inner, .sfoot-inner { padding-left: 20px !important; padding-right: 20px !important; gap: 18px !important; flex-direction: column !important; text-align: center !important; }
  .foot-brand, .sfoot-brand { order: 1; }
  .foot-links, .sfoot-links { order: 2; flex-wrap: wrap !important; justify-content: center; gap: 0 4px !important; max-width: 320px; margin: -6px auto; }
  .foot-links a, .sfoot-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 9px; border-radius: 11px; }
  .foot-links a:active, .sfoot-links a:active { background: var(--tmb-surface-soft); }
  .foot-copy, .sfoot-copy { order: 3; font-size: 12.5px !important; }
  /* Article ledes: 20px over a 327px measure runs to six lines. */
  .article .lead { font-size: 17.5px; line-height: 1.55; }

  /* The hero card's -6deg tilt makes its painted box ~380px wide — wider than
     the 335px column it sits in, which is what was scrolling Landing sideways.
     Half the angle keeps the tilt and brings it inside a 375px screen. */
  .daycard-shell { transform: rotate(-3deg) !important; }
}

/* The decorative blurred blocks are deliberately placed past the content edge.
   At desktop widths there is margin to absorb them; on a phone they became real
   horizontal scroll. `clip` rather than `hidden` so nothing becomes a scroll
   container and the fixed nav keeps behaving. */
@media (max-width: 760px) {
  html, body { overflow-x: clip; }
}
@media (prefers-reduced-motion: reduce) {
  .mnav-sheet, .mnav-btn span { transition: none !important; }
}