/* Phone layout (max-width 600px), chosen option B: smaller type, short cards, tap for details. The desktop layout is untouched. */
@media (max-width:600px){

  /* smaller type and tighter spacing */
  html[data-m] body{font-size:15px}
  html[data-m] section{padding:48px 0}
  html[data-m] .opening h1{font-size:2.05rem}
  html[data-m] .opening .sub{font-size:1rem}
  html[data-m] .hero{padding:40px 0 44px}
  html[data-m] .hero h1,html[data-m] .about-hero h1,html[data-m] .contact h1{font-size:2rem}
  html[data-m] .hero .sub,html[data-m] .about-hero .sub,html[data-m] .contact .sub{font-size:.98rem}
  html[data-m] .h2{font-size:1.55rem}
  html[data-m] .lead{font-size:.98rem}
  html[data-m] .mono{font-size:.68rem}
  html[data-m] #platform .big-statement{font-size:1.45rem}
  html[data-m] #platform .layer-card,html[data-m] #about .principle{padding:18px 18px 20px}
  html[data-m] #platform .layer-card h3,html[data-m] #about .principle h3{font-size:1.1rem}
  html[data-m] #platform .layer-card p,html[data-m] #about .principle p,html[data-m] #platform .tool p,html[data-m] #solutions .level p{font-size:.9rem}
  html[data-m] #platform .tool{padding:14px 16px}
  html[data-m] #platform .tool h3{font-size:1rem}
  html[data-m] #solutions .level h3{font-size:1.15rem}
  html[data-m] #platform .stackgrid,html[data-m] #platform .tools,html[data-m] #solutions .levels,html[data-m] #about .principles{gap:12px;margin-top:1.6rem}

  /* hide the supporting lines, keep headings and pictures; pictures sit in pairs */
  html[data-m="b"] #platform .layer-card p,
  html[data-m="b"] #platform .tool p,
  html[data-m="b"] #solutions .devices span,
  html[data-m="b"] #about .principle p,
  html[data-m="b"] #platform .ticks li span{display:none}
  html[data-m="b"] #platform .stackgrid,html[data-m="b"] #platform .tools{grid-template-columns:1fr 1fr}
  html[data-m="b"] #platform .layer-card .n{font-size:.62rem}
  html[data-m="b"] #platform .sensor-pair{grid-template-columns:1fr 1fr;gap:12px;margin-top:1.6rem}
  html[data-m="b"] #solutions .domain-pics{grid-template-columns:1fr 1fr 1fr;gap:8px}
  html[data-m="b"] #solutions .domain-pics figcaption{font-size:.62rem}
  html[data-m="b"] .devices div{padding:12px 14px}

}

/* option B: tap a card for its description, tap a picture for full screen */
@media (max-width:600px){
  html[data-m="b"] #platform .layer-card,html[data-m="b"] #platform .tool,html[data-m="b"] #solutions .devices>div,html[data-m="b"] #about .principle{cursor:pointer;position:relative}
  html[data-m="b"] #platform .layer-card::after,html[data-m="b"] #platform .tool::after,html[data-m="b"] #solutions .devices>div::after,html[data-m="b"] #about .principle::after{
    content:"+";position:absolute;right:10px;top:8px;font:500 1rem "IBM Plex Mono",monospace;color:var(--accent);opacity:.8}
  html[data-m="b"] #platform .sensor-pair img,html[data-m="b"] #platform .band img,html[data-m="b"] #solutions .domain-pics img,html[data-m="b"] #solutions .level img,html[data-m="b"] #about .media img{cursor:zoom-in}
}
.mo-lock,.mo-lock body{overflow:hidden}
.mo-overlay{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(5,8,12,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.mo-overlay[hidden]{display:none}
.mo-box{position:relative;background:var(--panel);border:1px solid var(--line);padding:22px 20px 20px;max-width:420px;width:100%;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.mo-box::before{content:"";position:absolute;top:-1px;left:-1px;width:48px;height:3px;background:var(--accent)}
.mo-box h3{font-size:1.15rem;margin:.2em 2rem .45em 0}
.mo-box p{margin:0;color:#c6d0dc;font-size:.95rem}
.mo-n{font:500 .66rem "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.mo-x{position:absolute;right:6px;top:4px;width:40px;height:40px;border:0;background:none;color:var(--text);font-size:1.6rem;line-height:1;cursor:pointer}
.mo-overlay.pic{padding:0;background:rgba(0,0,0,.94)}
.mo-overlay.pic .mo-box{background:none;border:0;box-shadow:none;padding:0;max-width:none}
.mo-overlay.pic .mo-box::before{display:none}
.mo-overlay.pic .mo-x{position:fixed;right:12px;top:12px;width:44px;height:44px;border-radius:50%;background:rgba(10,14,20,.7);border:1px solid rgba(255,255,255,.6);color:#fff;font-size:1.7rem;display:grid;place-items:center;z-index:2}
.mo-overlay.pic img{width:100vw;max-height:88vh;object-fit:contain;margin:0 auto}
.mo-cap{text-align:center;margin-top:10px;font:500 .72rem "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}