/* Mobile uses one visual workspace; desktop retains the approved composition. */
@media (max-width:900px) {
  #systems-biology.mobile-twin-layout {
    height:auto;min-height:0;max-height:none;padding:0;overflow:clip;
    background:#1c3934;scroll-margin-top:0;
  }
  .mobile-twin-layout .systems-transition {display:none}
  .mobile-twin-heading {padding:28px 22px 23px;background:#162e29}
  .mobile-twin-heading .systems-eyebrow {margin:0 0 12px;font-size:11px;line-height:1.3;letter-spacing:.12em;color:#c6dbcf}
  .mobile-twin-heading h2 {margin:0;color:#fff6e6;font-weight:400;font-size:clamp(31px,8.6vw,44px);line-height:1.06;letter-spacing:-.045em}
  .mobile-twin-viewer {position:relative;background:#243f37;isolation:isolate}
  .mobile-twin-stage {position:relative;height:clamp(325px,49svh,460px);overflow:hidden}
  .mobile-twin-layout .mobile-twin-stage .hero-media {position:absolute;inset:0;height:100%;width:100%}
  .mobile-twin-layout .mobile-twin-stage .hero-fallback {left:50%;height:127%}
  .mobile-twin-layout .mobile-twin-stage .twin-toggle {inset:0;width:100%;height:100%;z-index:2}
  .mobile-twin-layout .portrait-invitation {left:65%;top:48%}
  .mobile-twin-layout .portrait-status {top:45%;left:50%;font-size:12px;max-width:90%;white-space:normal;text-align:center}
  .mobile-twin-layout .network-motion {position:absolute;inset:12px 12px auto auto;min-height:44px;padding:8px 12px;font-size:11px;background:#15362cb3;border-color:#ffffff40;z-index:6}
  .mobile-twin-tab-dock {position:absolute;inset:auto 0 0;z-index:7;padding:28px 0 13px;background:linear-gradient(transparent,#183b3294 26%,#193b33ed)}
  .mobile-twin-layout .systems-tabs {display:flex;gap:8px;max-width:none;width:100%;box-sizing:border-box;margin:0;padding:0 20px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:20px;overscroll-behavior-x:contain;border:0;scrollbar-width:none}
  .mobile-twin-layout .systems-tabs button {flex:0 0 auto;min-height:46px;padding:11px 17px;font-size:14px;font-weight:400;line-height:1.2;scroll-snap-align:start;border:1px solid #e0eddd66;border-radius:26px;background:#14362cad;color:#eef3e7;white-space:nowrap;backdrop-filter:blur(12px)}
  .mobile-twin-layout .systems-tabs button[aria-selected="true"] {background:linear-gradient(115deg,#deeee2,#e8ddc6 43%,#dfd8e9 77%,#d0e8dd);color:#15392e;border-color:transparent;box-shadow:0 2px 12px #092c2726}
  .mobile-twin-layout .systems-tabs button[aria-selected="true"]:after {display:none}
  .mobile-twin-layout .systems-tabs button:focus-visible {outline:2px solid #fff4cb;outline-offset:-4px}
  .mobile-twin-pathways {padding:10px 0 4px;background:linear-gradient(#193b33,#234039)}
  .mobile-twin-pathways[hidden],.mobile-twin-domains[hidden] {display:none}
  .mobile-twin-layout .mobile-twin-pathways .pathway-examples-label {margin:0 20px 8px;font-size:12px;line-height:1.3;color:#bfd4c7}
  .mobile-twin-layout .pathway-rail {padding:0 20px;gap:10px;border-radius:0;scroll-padding-left:20px}
  .mobile-twin-layout .pathway-card {flex:0 0 calc(100% - 22px);padding:12px 14px 10px;border-radius:16px;background:linear-gradient(120deg,#e3e7d51c,#b6e4d60c);border-color:#d4e5d342}
  .mobile-twin-layout .pathway-family {font-size:11px;margin-bottom:4px}
  .mobile-twin-layout .pathway-card h3 {font-size:20px;line-height:1.1;letter-spacing:-.02em}
  .mobile-twin-layout .pathway-summary,.mobile-twin-layout .reaction-note {display:none}
  .mobile-twin-layout .pathway-reaction {font-size:13px;padding-top:7px;min-height:22px;gap:4px;grid-template-columns:1fr 22px 1fr}
  .mobile-pathway-reading {margin-top:20px;padding-top:18px;border-top:1px solid #dceadc29}
  .mobile-pathway-reading p {font-size:16px;line-height:1.5;color:#e0eadd;margin:0}
  .mobile-pathway-reading .mobile-pathway-note {margin-top:12px;font-size:13px;color:#b7cbbf}
  .mobile-twin-layout .pathway-navigation {height:44px;margin:3px 20px 0;gap:9px}
  .mobile-twin-layout .pathway-dots {gap:0}
  .mobile-twin-layout .pathway-dots button {min-width:44px;min-height:44px;padding:16px 14px}
  .mobile-twin-layout .pathway-auto,.mobile-twin-layout .pathway-next {height:44px;width:44px;flex-shrink:0}
  .mobile-twin-layout .pathway-count {font-size:10px;white-space:nowrap}
  .mobile-twin-domains {position:relative;padding:12px 0 16px;background:#193b33;min-height:63px}
  .mobile-twin-layout .mobile-twin-domains .simulation-domains {display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-left:20px;padding:0 20px 0 66px;scrollbar-width:none;flex-wrap:nowrap;margin:0;border:0;background:transparent}
  .mobile-twin-layout .mobile-twin-domains .simulation-domains button {flex:0 0 auto;min-height:46px;padding:10px 13px;font-size:13px;scroll-snap-align:start;border:1px solid #d8e5d73d;border-radius:24px;white-space:nowrap}
  .mobile-twin-layout .mobile-twin-domains .intervention-symbol {position:absolute;left:14px;top:15px;margin:0;width:42px;height:42px;display:grid;place-items:center;background:#284b40;border:1px solid #d4e6d540;border-radius:50%;z-index:8}
  .mobile-twin-layout .mobile-twin-domains .intervention-symbol svg {width:26px;height:26px}
  .mobile-twin-layout .systems-copy {position:relative;inset:auto;transform:none;height:auto;min-height:0;padding:23px 22px 34px;background:#1c3934;display:block}
  .mobile-twin-layout .modelling-narrative {margin:0;padding:0;min-height:0}
  .mobile-twin-layout #overview-panel .overview-statement {margin:0 0 16px;font-size:25px}
  .mobile-twin-layout #overview-panel .modelling-lead,.mobile-twin-layout .modelling-lead {font-size:17px;line-height:1.5;margin-right:0}
  .mobile-twin-layout .modelling-detail {font-size:16px;line-height:1.5;margin-right:0}
  .mobile-twin-layout .individual-lead {margin:0 0 18px;font-size:17px;line-height:1.5}
  .mobile-twin-layout .data-sources {margin:0;gap:10px 14px}
  .mobile-twin-layout .source-chip {min-height:44px;font-size:12px}
  .mobile-twin-layout .simulation-card {margin:0;padding:0;border:0;background:none}
  .mobile-twin-layout .intervention-reading {min-height:0}
  .mobile-twin-layout .intervention-input {margin:0 0 12px;font-size:25px}
  .mobile-twin-layout .simulation-description {margin:0;font-size:16px;line-height:1.5}
  .mobile-twin-layout .foundations-open {min-height:44px;margin-top:15px;font-size:13px}
  .mobile-twin-layout .network-caption,.mobile-twin-layout .focus-caption {display:none}
}
@media (max-width:380px) {
  .mobile-twin-layout .mobile-twin-heading {padding:23px 18px 20px}
  .mobile-twin-layout .pathway-card h3 {font-size:18px}
}
@media (prefers-reduced-motion:reduce) {
  .mobile-twin-layout .systems-tabs {scroll-behavior:auto}
}

@media (max-width:340px) {
  .mobile-twin-layout .pathway-count {display:none}
  .mobile-twin-layout .pathway-navigation {gap:4px}
}

/* The portrait, headline and selectors share one uninterrupted gradient scene. */
@media (max-width:900px) {
  #systems-biology.mobile-twin-layout {background:#416a61}
  .mobile-twin-heading {position:absolute;inset:0 0 auto;z-index:7;padding:34px 22px 20px;background:linear-gradient(#172b2b38,transparent);pointer-events:none}
  .mobile-twin-heading .systems-eyebrow {font-size:11px;color:#f1eee1;text-shadow:0 1px 8px #17332c30}
  .mobile-twin-heading h2 {font-size:clamp(33px,8.8vw,45px);color:#fff5e4;text-shadow:0 2px 18px #15322f24}
  .mobile-twin-viewer {background:linear-gradient(110deg,#8a4c3d,#a69273 50%,#579e9e)}
  .mobile-twin-stage {height:92svh;min-height:580px;max-height:940px}
  .mobile-twin-layout .mobile-twin-stage .hero-media {height:100%}
  .mobile-twin-tab-dock {padding-top:28px;bottom:0;background:linear-gradient(transparent,#243e3650 45%,#263f3566)}
  .mobile-twin-layout[data-view="individualisation"] .mobile-twin-tab-dock {bottom:125px}
  .mobile-twin-layout[data-view="simulation"] .mobile-twin-tab-dock {bottom:74px}
  .mobile-twin-pathways {position:absolute;inset:auto 0 0;z-index:8;height:125px;box-sizing:border-box;padding-top:8px;background:linear-gradient(#263f3566,#263f35a6);backdrop-filter:blur(9px)}
  .mobile-twin-layout .mobile-twin-pathways .pathway-card {padding:11px 14px 13px;background:linear-gradient(120deg,#ebe7cd24,#bfe6dc17);border-color:#e3ebd950}
  .mobile-twin-layout .mobile-twin-pathways .pathway-card h3 {font-size:20px}
  .mobile-twin-layout .mobile-twin-pathways .pathway-reaction {display:none}
  .mobile-twin-layout .mobile-twin-pathways .pathway-navigation {margin-top:2px}
  .mobile-twin-layout .mobile-twin-domains {position:absolute;inset:auto 0 0;z-index:8;height:74px;min-height:0;box-sizing:border-box;background:#263f357a;backdrop-filter:blur(9px)}
  .mobile-twin-layout .mobile-twin-domains .intervention-symbol {background:#52756bc9}
  .mobile-twin-layout .systems-copy {background:#416a61;padding-top:27px}
  .mobile-twin-layout .modelling-detail,.mobile-twin-layout .simulation-description {color:#e2ebe0}
  .mobile-twin-layout .pathway-examples-label {margin:18px 0 0;font-size:12px;color:#deeadf}
  .mobile-twin-layout .mobile-pathway-reaction {margin-top:14px;font-size:15px;color:#fff0da}
  .mobile-twin-layout .mobile-pathway-note {color:#d4e3d8}
}
@media(max-width:380px) {
  .mobile-twin-layout .mobile-twin-heading {padding-top:30px}
  .mobile-twin-layout .mobile-twin-pathways .pathway-card h3 {font-size:18px}
}

@media(max-width:900px) {
  .mobile-twin-layout,.mobile-twin-layout * {overflow-anchor:none}
}
.pathway-count{display:none}
@media(max-width:380px) and (max-height:650px){
 .mobile-twin-layout .mobile-twin-stage{min-height:0;height:92svh}
}

/* V20 keeps each pathway explanation inside its own glass card. */
@media(max-width:900px) {
  .mobile-twin-layout .mobile-twin-stage {height:86svh;min-height:600px;max-height:900px}
  .mobile-twin-layout .mobile-twin-tab-dock {padding-top:20px}
  .mobile-twin-layout[data-view="individualisation"] .mobile-twin-tab-dock {bottom:var(--mobile-pathway-height,250px)}
  .mobile-twin-layout .mobile-twin-pathways {height:auto;padding:8px 0 5px;backdrop-filter:blur(6px);background:linear-gradient(#263f3538,#263f358c)}
  .mobile-twin-layout .mobile-twin-pathways .pathway-card {padding:13px 15px 12px;border-color:#edf0e06b;background:linear-gradient(125deg,#e8edda25,#bddfd419);backdrop-filter:blur(15px)}
  .mobile-twin-layout .mobile-twin-pathways .pathway-family {font-size:11px;line-height:1.25;margin-bottom:5px}
  .mobile-twin-layout .mobile-twin-pathways .pathway-card h3 {font-size:20px;line-height:1.12}
  .mobile-twin-layout .mobile-twin-pathways .pathway-summary {display:block;font-size:14px;line-height:1.4;margin:9px 0 10px;color:#f1f3e8}
  .mobile-twin-layout .mobile-twin-pathways .pathway-reaction {display:grid;font-size:13px;line-height:1.3;min-height:24px;padding-top:8px}
  .mobile-twin-layout .mobile-twin-pathways .reaction-note {display:block;font-size:11px;line-height:1.3;margin:6px 0 3px;color:#d7e5d7}
  .mobile-twin-layout .mobile-twin-pathways .pathway-navigation {margin-top:3px}
}
@media(max-width:380px) {
  .mobile-twin-layout .mobile-twin-heading {padding:24px 18px 14px}
  .mobile-twin-layout .mobile-twin-heading h2 {font-size:30px}
  .mobile-twin-layout .mobile-twin-heading .systems-eyebrow {margin-bottom:10px;font-size:10px}
  .mobile-twin-layout .mobile-twin-pathways .pathway-card {padding:11px 13px 10px}
  .mobile-twin-layout .mobile-twin-pathways .pathway-card h3 {font-size:18px}
  .mobile-twin-layout .mobile-twin-pathways .pathway-summary {font-size:14px;line-height:1.32;margin:8px 0}
}

@media(max-width:900px) {
  .mobile-twin-layout .mobile-twin-stage {height:92svh;min-height:600px;max-height:940px}
  .mobile-twin-layout[data-view="overview"] .mobile-twin-tab-dock,
  .mobile-twin-layout[data-view="modelling"] .mobile-twin-tab-dock {bottom:60px}
}
/* Give the neck a little more breathing room without changing card content. */
@media(max-width:900px) {
  .mobile-twin-layout .mobile-twin-stage {height:95svh}
}
@media(max-width:380px) and (max-height:650px) {
  .mobile-twin-layout .mobile-twin-stage {height:93svh}
}