/* ============================================================================
   Genopathy marketing homepage styles.
   Ported from the Claude Design import ("Genopathy marketing homepage content")
   into the app. The page markup carries the design's inline styles verbatim;
   this stylesheet supplies self-hosted fonts, the scoped base, responsive
   collapse, and hover/interaction states (which inline styles can't express).
   Everything is scoped under .m-page so it never leaks into the dossier shell.
   Self-hosted IBM Plex (no fonts.googleapis.com / fonts.gstatic.com); the
   design's IBM Plex Serif accents fall back to Georgia (see --m-serif).
   ============================================================================ */

/* ---- Self-hosted fonts (IBM Plex, OFL) ------------------------------------ */
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}

/* ---- Scoped base ---------------------------------------------------------- */
.m-page {
  --m-serif: Georgia, 'Times New Roman', serif; /* stands in for IBM Plex Serif */
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  color: #101418;
  background: #f6f8fa;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.m-page * { box-sizing: border-box; }
.m-page a { color: oklch(0.47 0.15 262); text-decoration: none; }
.m-page a:hover { color: oklch(0.38 0.15 262); }
.m-page ::selection { background: oklch(0.9 0.05 262); }
.m-page h1, .m-page h2, .m-page h3, .m-page p { margin: 0; }
/* Headings inherit their container's colour (the design relies on this: dark
   sections → light text, light sections → ink). Overrides the global main.css
   h2 accent colour, which otherwise turns every heading orange. */
.m-page h1, .m-page h2, .m-page h3 { color: inherit; font-weight: inherit; }
.m-serif { font-family: var(--m-serif); }

/* ---- Hover states (inline styles can't express :hover) -------------------- */
.m-card-h { transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.m-card-h:hover { border-color: #c6cdd8 !important; box-shadow: 0 12px 28px -20px rgba(16,20,24,0.35); }
.m-featured-h { transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.m-featured-h:hover { border-color: oklch(0.6 0.12 262) !important; box-shadow: 0 16px 34px -24px rgba(16,20,24,0.4); }
.m-btn-primary { transition: background 0.15s ease; }
.m-btn-primary:hover { background: oklch(0.4 0.15 262) !important; color: #fff; }
.m-btn-amber { transition: background 0.15s ease; }
.m-btn-amber:hover { background: oklch(0.75 0.16 68) !important; color: #2a1a02; }
.m-btn-submit { transition: background 0.15s ease; }
.m-btn-submit:hover { background: oklch(0.5 0.16 262) !important; }
.m-nav-link { transition: color 0.15s ease; }
.m-nav-link:hover { color: #101418 !important; }

/* ---- The LifeMap logo asset is white (built for dark grounds); recolor to
       brand navy where it sits on a light surface (the nav). ---------------- */
.m-logo--onlight { filter: brightness(0) invert(13%) sepia(30%) saturate(1600%) hue-rotate(178deg); }

/* ---- Form status ---------------------------------------------------------- */
.m-form-status { min-height: 1.1em; }
.m-form-status--ok { color: oklch(0.8 0.13 150); }
.m-form-status--err { color: oklch(0.78 0.16 25); }
.m-hidden { display: none !important; }

/* ---- Responsive collapse (design ships desktop-only grids) ---------------- */
@media (max-width: 960px) {
  .m-page .m-grid-hero,
  .m-page .m-grid-2,
  .m-page .m-grid-access,
  .m-page .m-grid-problem { grid-template-columns: 1fr !important; }
  .m-page .m-grid-hero { gap: 40px !important; }
  .m-page .m-nav-links { display: none !important; }
}
@media (max-width: 720px) {
  .m-page .m-grid-panels { grid-template-columns: 1fr 1fr !important; }
  .m-page .m-grid-stats { grid-template-columns: 1fr !important; }
  .m-page .m-grid-footer { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .m-page .m-hero-h1 { font-size: 38px !important; }
  .m-page .m-section { padding-left: 20px !important; padding-right: 20px !important; }
  .m-page .m-pad { padding: 32px !important; }
}
@media (max-width: 480px) {
  .m-page .m-grid-panels { grid-template-columns: 1fr !important; }
  .m-page .m-grid-footer { grid-template-columns: 1fr !important; }
}

/* ---- Mobile header simplification ----------------------------------------
   The nav links already collapse at 960px. On phones, drop the LifeMap logo,
   reduce "Launch app" to an icon, and tighten the brand so the top bar isn't
   overcrowded. */
.m-page .m-launch-icon { display: none; } /* desktop shows the text label */
@media (max-width: 640px) {
  .m-page .m-nav-inner   { padding-left: 16px !important; padding-right: 16px !important; }
  .m-page .m-brand       { gap: 6px !important; }              /* tighten icon <-> wordmark */
  .m-page .m-nav-lifemap { display: none !important; }         /* drop the LifeMap logo */
  .m-page .m-launch-text { display: none; }                    /* Launch app -> icon only */
  .m-page .m-launch-icon { display: block; }
}

/* ---- Mobile request-access form ------------------------------------------
   The Cloudflare Turnstile widget has a fixed 300px width. On phones the dark
   panel's padding pushed the form width below that, so the widget overflowed
   and got clipped by `.m-page { overflow-x: hidden }`. Slim the panel and
   section padding on small screens so 300px fits, and stack the name/org
   inputs into a single column. */
@media (max-width: 480px) {
  .m-page #access        { padding-left: 10px !important; padding-right: 10px !important; }
  .m-page .m-grid-access.m-pad { padding: 18px !important; }
  .m-page .m-form-2col   { grid-template-columns: 1fr !important; }
}

/* ---- Mobile hero picker --------------------------------------------------
   Drop the "Open" label on phones so the picker's Open button shrinks to just
   the arrow and stops crowding the gene/disorder selects. */
@media (max-width: 640px) {
  .m-page .m-open-text { display: none; }
}