/* ==========================================================================
   Menovē, mobile refinements
   Loaded last on every page so it wins over the inline <style> blocks.
   The pages already collapse most multi-column grids at 1150px; this file
   handles actual phones (<= 760px) and small phones (<= 400px).
   ========================================================================== */

/* Never let anything push the page sideways. */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, svg, iframe { max-width: 100%; }

/* ==========================================================================
   Hamburger + drawer (built by nav.js). Hidden above 760px.
   ========================================================================== */
.navburger {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  padding: 0; margin: 0;
  background: transparent; border: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.navburger span {
  display: block; width: 21px; height: 1.5px;
  background: var(--ink, #2A2530); border-radius: 2px;
  transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .18s ease;
}
.navburger.on span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.navburger.on span:nth-child(2) { opacity: 0; }
.navburger.on span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.navscrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(42, 37, 48, .42);
  opacity: 0; transition: opacity .3s ease;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.navscrim.on { opacity: 1; }

.navdrawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: min(320px, 84vw);
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.22,1,.36,1);
  background: var(--paper, #FDFCFA);
  box-shadow: -18px 0 50px -24px rgba(42, 37, 48, .5);
  overflow-y: auto;
}
.navdrawer.on { transform: translateX(0); }
.navdrawer-panel {
  display: flex; flex-direction: column;
  padding: 84px 28px 32px;
}
.navdrawer-panel a {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 23px; line-height: 1.2;
  color: var(--ink, #2A2530);
  padding: 17px 0;
  border-bottom: 1px solid var(--line, rgba(42,37,48,.1));
}
.navdrawer-panel a:hover,
.navdrawer-panel a:focus-visible { color: var(--aub, #17091F); }
.navdrawer-panel .navdrawer-cta {
  font-family: 'Switzer', sans-serif;
  font-size: 14.5px; font-weight: 700;
  text-align: center;
  color: #FAF9F6; background: var(--aub, #17091F);
  border: 0; border-radius: 999px;
  padding: 16px 26px; margin-top: 26px;
}
.navdrawer-panel .navdrawer-cta:hover { background: #2A1235; color: #FAF9F6; }

@media (min-width: 761px) {
  .navdrawer, .navscrim { display: none !important; }
}

@media (max-width: 760px) {

  /* ---------- nav: brand left, Join beta + hamburger right ---------- */
  nav {
    /* brand | Join beta | burger  (.lft is display:none so it takes no cell) */
    grid-template-columns: 1fr auto auto;
    align-items: center;
    padding: 14px 16px 14px 20px;
    gap: 8px;
  }
  nav .lft { display: none; }              /* page links live in the drawer */
  nav > a { justify-self: start; }
  nav .rgt { gap: 10px; }
  nav .rgt .navl { display: none; }        /* "Our story" lives in the drawer */
  nav .wm { font-size: 14px; letter-spacing: .05em; }
  nav .btn { padding: 11px 20px !important; font-size: 12.5px !important; }
  .navburger { display: inline-flex; }

  /* ---------- type scale ---------- */
  h1, .hero4 h1 { font-size: 34px !important; line-height: 1.12; }
  h2, .ctaband h2, .problem h2, .founder h2, .clinhero h2 { font-size: 27px !important; line-height: 1.18; }
  h3 { font-size: 19px; }
  .sub, .segnote { font-size: 15.5px; }
  .problem .symptoms { font-size: 19px; line-height: 1.6; }
  .founder .sig { font-size: 18px; }

  /* ---------- horizontal rhythm: one gutter everywhere ---------- */
  main,
  .hero4, .clinhero, .story,
  .band, .problem, .quote, .ctaband, .cairnband,
  .sec, .sec.alt, .hd, .faq, .gloss,
  .how, .clinical, .founder, .statband, .card, .price, .q2l, .q2r {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  main { padding-top: 30px !important; padding-bottom: 56px !important; }
  .hero4 { padding-top: 44px !important; padding-bottom: 52px !important; }
  .problem, .clinical, .how, .founder, .cairnband, .gloss, .statband { padding-top: 64px; padding-bottom: 64px; }
  .ctaband { padding-top: 72px !important; padding-bottom: 72px !important; }
  .sec { padding-top: 64px !important; }
  .q2l, .q2r { padding-top: 64px !important; padding-bottom: 64px !important; }
  .pilotband { margin: 56px 22px 0 !important; padding: 40px 24px !important; }

  /* full-bleed ticker still spans edge to edge */
  .problem .ticker { margin-left: -22px !important; margin-right: -22px !important; }
  .problem .ticker::before, .problem .ticker::after { width: 48px; }

  /* ---------- every remaining multi-column grid goes single ---------- */
  .cards.c2, .cards.c3, .cards.c4,
  .bene, .statband, .rlist, .dvgrid, .gwrap, .wyr, .wfgrid,
  .grid, .cols, .quote2, .how, .clinical, .founder, .story, .clinhero, .hero4 {
    grid-template-columns: 1fr !important;
  }
  .cards.c4::before { display: none; }

  /* footer: two readable columns, brand block full width */
  .fcols { grid-template-columns: 1fr 1fr !important; gap: 30px 20px; }
  .fcols .fc.brand { grid-column: 1 / -1; }
  .legal { flex-direction: column; gap: 8px; text-align: center; line-height: 1.7; }

  /* ---------- media: portrait + phone ----------
     .media carries margin:0 auto, which makes it shrink-to-fit. Any child
     sized with a percentage then resolves against a collapsing parent, so
     the portrait and the phone flattened to a few pixels. Give the column
     a real width and size the children from the viewport instead. */
  .media { flex-direction: column; align-items: center; gap: 22px; width: 100%; }
  .pvbox {
    width: min(330px, 100%);
    height: auto;
    aspect-ratio: 330 / 520;
    flex: none;
  }
  /* The phone is a 330px design scaled to 277px by transform; keep that
     scale intact or the app UI inside overflows its frame. */
  .phscale { width: 277px; height: 520px; max-width: 100%; flex: none; }
  .founder .fph { width: 210px; height: 210px; }

  /* ---------- forms and tap targets ---------- */
  #betaForm { flex-direction: column; align-items: stretch; }
  #betaForm input[type="email"] { width: 100% !important; }
  #betaForm button { width: 100%; }
  .btn { padding: 15px 26px; }
  nav .navl, .fc a { display: inline-block; min-height: 24px; }

  /* ---------- clinical dashboard: stack instead of clipping ----------
     168px sidebar + 1fr left the detail panel ~160px wide, so its contents
     were cut off by the card's overflow:hidden. */
  .dashview { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .dashview aside { border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 0; }
  .dashview main { padding: 16px 18px; }
  .dvgrid { grid-template-columns: 1fr !important; }
  .drow { grid-template-columns: 52px 1fr auto !important; }

  /* ---------- stats stack cleanly ---------- */
  .problem .stat { grid-template-columns: 1fr !important; justify-items: center; row-gap: 12px; }
  .problem .stat b { grid-column: 1 !important; grid-row: 1 !important; }
  .problem .stat .txt { grid-column: 1 !important; grid-row: 2 !important; justify-self: center; text-align: center; }
  .problem .stat:nth-child(1) b { width: min(240px, 86vw); height: 96px; font-size: 42px; }
  .problem .stat:nth-child(2) b { width: min(200px, 76vw); height: 84px; font-size: 36px; }
  .problem .stat:nth-child(3) b { width: min(164px, 64vw); height: 74px; font-size: 32px; }

  /* segmented toggle stays on one line */
  .seg { margin-top: 26px; }
  .seg button { padding: 10px 18px; font-size: 12.5px; }

  /* "Explore her side / the provider side": stack the label above its
     description so the description isn't crushed into a narrow column */
  .enter a {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 4px;
    padding: 16px 2px;
  }
  .enter a .t { flex: 1 1 auto; font-size: 20px; }
  .enter a .ar { flex: 0 0 auto; order: 2; }
  .enter a .d {
    flex: 1 0 100%;
    order: 3;
    text-align: left;
    line-height: 1.5;
  }
}

/* the phone frame at 277px plus gutters overflows a 320px screen, so step
   the transform down and shrink its wrapper to match */
@media (max-width: 360px) {
  .phscale { width: 248px; height: 466px; }
  .clinphone { transform: scale(.7515); }
}

/* ---------- small phones ---------- */
@media (max-width: 400px) {
  h1, .hero4 h1 { font-size: 30px !important; }
  h2, .ctaband h2, .problem h2, .founder h2, .clinhero h2 { font-size: 24px !important; }
  nav .lft { gap: 15px; }
  nav .lft .navl { font-size: 12.5px; }
  nav .rgt .navl { display: none; }   /* "Our story" also lives in the footer */
  .fcols { grid-template-columns: 1fr !important; }
}

/* Visible keyboard focus, brand berry (v2.1) */
a:focus-visible, button:focus-visible, input:focus-visible, [role=button]:focus-visible {
  outline: 2px solid #C4006B; outline-offset: 3px; border-radius: 2px;
}