/* ==========================================================================
   Visual Biology Foundation Model page (foundation-model-v2.html).
   Builds on css/home-v2.css (tokens, header, footer, type) and the homepage
   section layout in css/home-sections-v2.css (.hs-*). Page-specific only.
   Visuals: js/fm/*.js.
   ========================================================================== */

/* Same accent as the homepage */
body.page-fm {
  --accent: #ff9d34;
  --accent-hi: #ffd9ad;
  --accent-soft: rgba(255, 157, 52, .14);
  --accent-glow: rgba(255, 157, 52, .5);
  --act-up: #ff9d34;
  --act-down: #7fb3d0;
  --act-same: #666666;
}

.fm-hero { padding-block: var(--s-8) var(--s-8); }
.fm-hero h1 { font-size: clamp(2.3rem, 5.6vw, 4rem); letter-spacing: -0.035em; line-height: 1.04; max-width: 15ch; }
.fm-sub { margin: 0; max-width: 46ch; color: var(--text); font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.45; letter-spacing: -0.015em; }
.fm-body { display: grid; gap: var(--s-3); max-width: 60ch; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.fm-body-last { margin: 0; max-width: 60ch; color: var(--muted); font-size: 1rem; line-height: 1.6; }

.fm-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fm-examples .hs-col p { color: var(--text); }
.fm-note { margin: 0; max-width: 70ch; color: var(--muted); font-size: .95rem; font-style: italic; }

.fm-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); max-width: 60ch; }
.fm-parts li { position: relative; padding-left: var(--s-5); color: var(--muted); line-height: 1.55; }
.fm-parts li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--accent); }
.fm-parts b { color: var(--text); font-weight: 500; }

.fm-runtime { height: 420px; }
.fm-token { aspect-ratio: 3 / 4.6; }
.fm-cols { max-width: none; }
.fm-closing { margin: 0; max-width: 40em; font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.45; letter-spacing: -0.015em; color: var(--text); }

@media (min-width: 640px) {
  .fm-runtime { height: 300px; }
  .fm-token { aspect-ratio: 4 / 3.4; }
}
@media (min-width: 901px) {
  .fm-hero { padding-block: var(--s-9); }
  .fm-hero .hs-split { align-items: start; }
  .fm-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fm-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-8); }
  .fm-runtime { height: 320px; }
}