/* Small screens only. Loaded with <link media="(max-width: 860px)">, so desktop never applies
   anything here. Phone fixes go in this file; shared or desktop styles stay in styles.css. */

/* ---- Tablets and phones (<= 860px) ---- */
.nav-links { gap: 22px; font-size: 13px; }
.mission-body, .product-grid { grid-template-columns: 1fr; }
.scroll { display: none; }
.branches text { font-size: 22px; }

/* ---- Phones (<= 600px) ---- */
@media (max-width: 600px) {
  .nav { padding-block: 20px; }
  .brand { gap: 10px; font-size: 18px; }
  .brand svg { width: 22px; }
  .nav-links { gap: 16px; }
  /* Enlarge the "else" drawing and let the branches run off the right edge */
  .branches { overflow: hidden; }
  .branches svg { width: 190%; margin-left: -45%; }
  /* The drawing renders at ~0.6x here, so thicken lines to keep them crisp.
     (Not vector-effect: non-scaling-stroke — that breaks the dash-based draw-on animation.) */
  .trunk, .node { stroke-width: 2.4; }
  .branch { stroke-width: 1.6; }
  .else { stroke-width: 3.2; }
  /* keep "Explore what else" on one line */
  .hero h1 { font-size: 10.2vw; }
}