/* Page-level styles for the website. Design tokens and base type come from design-system/styles.css. */
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-page)}
.dl-flow-note{display:none}

/* Narrow screens: the layouts are written as fixed multi-column grids, so collapse them here. */
@media (max-width:900px){
  .dl-stack{grid-template-columns:1fr !important}
  .dl-team{grid-template-columns:repeat(2,1fr) !important;row-gap:var(--space-5) !important}
  .dl-aside{position:static !important}
  .dl-fields{grid-template-columns:repeat(2,1fr) !important}
  /* How It Works: stack the three blocks, point the arrows down, drop the drawn return path. */
  .dl-flow{grid-template-columns:1fr !important}
  .dl-flow-arrow{padding:var(--space-1) 0;transform:rotate(90deg)}
  .dl-flow-loop{display:none !important}
  .dl-flow-note{display:flex}
}
@media (max-width:600px){
  .dl-fields{grid-template-columns:1fr !important}
}
@media (max-width:720px){
  .dl-nav a{display:none !important}
  h1{font-size:36px !important}
  h2{font-size:24px !important}
}
@media (max-width:460px){
  .dl-team{grid-template-columns:1fr !important}
}