/* ---------- how it works (the section itself lives in a shadow root, see css/sections/how-it-works.css) ---------- */

/* 1% of the How it works section's width, set inside its shadow root */
@property --fw {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

/* 64px wider than the column, so glows aren't clipped */
@media (min-width: 764px) {
  .how-app {
    width: calc(100% + 64px);
    margin-inline: -32px;
  }
}
/* ...but never past the screen: just over 764px wide the page's side gutter is a hair under 32px, which made the
   page scroll sideways by 1px. clip (not hidden) cuts only the sides and doesn't make the section a scroll box.
   (The balloon lift's wrapper used to do this, until the birthday mix replaced it.) */
#how {
  overflow-x: clip;
}
/* the big bold title, like Visit us and FAQ (.big-title, css/page/02-sections.css) */
#how-h {
  --big: clamp(min(60px, 18.75vw), 15vw, 120px);
}