/* Page scaffolding: the centred column, the banded sections, the footer. */

.wrap { max-width: 1140px; margin-inline: auto; padding-inline: 24px; }
  .band { border-top: 1px solid var(--line); padding-block: clamp(50px, 6.5vw, 82px); }
  /* nothing may push the page sideways: grid and flex children shrink, wide things scroll inside */
  .rail > *, .grid > *, .sol > *, .flow > *, .maker > *, .demo-out > *, .win-panes > *,
  .task > *, .who > *, .tiers > *, .path > *, .addons > *, .paddons > *, .jump > * { min-width: 0; }
  .band-tint { background: var(--surface); }
  .rail { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 40px; align-items: start; }
  /* footer */
  .foot-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 34px; padding-block: 8px 26px; }
  .foot-brand { display: grid; gap: 10px; align-content: start; max-width: 42ch; }
  .foot-brand .mark { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 800; font-size: 19px; color: var(--ink); }
  .foot-brand .mark-glyph { width: 25px; height: 25px; }
  .foot-brand p { font-size: 13.8px; line-height: 1.55; }
  .foot-spec { font-family: var(--mono); font-size: 11.5px; }
  .foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .foot-cols > div { display: grid; gap: 7px; align-content: start; }
  .foot-cols a { color: var(--muted); text-decoration: none; font-size: 13.8px; }
  .foot-cols a:hover { color: var(--ink); }
  .foot-social { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  /* the channels do not exist yet, so these are marks rather than links — nothing to click, nothing broken */
  .foot-social i { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); }
  .foot-social svg { width: 16px; height: 16px; }
  .foot-soon { font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .foot-legal { font-size: 12.5px; max-width: 62ch; }
  /* generic cells */
  .grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
  .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell { background: var(--raised); padding: 20px; display: grid; gap: 7px; align-content: start; }
  .cell p { color: var(--muted); font-size: 14.5px; }
  /* comparison */
  .table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; background: var(--raised); }
  footer { border-top: 1px solid var(--line); padding-block: 26px 42px; color: var(--muted); font-size: 13.5px; display: grid; gap: 10px; }
  .foot-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .wrap { max-width: 1140px; margin-inline: auto; padding-inline: 24px; }
  .band { border-top: 1px solid var(--line); padding-block: clamp(44px, 5.5vw, 70px); }
  .band-tint { background: var(--surface); }
  footer { border-top: 1px solid var(--line); padding-block: 26px 42px; color: var(--muted); font-size: 13.5px; display: grid; gap: 10px; }
  .foot-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .wrap { max-width: 1140px; margin-inline: auto; padding-inline: 24px; }
  .band { border-top: 1px solid var(--line); padding-block: clamp(46px, 6vw, 74px); }
  .band-tint { background: var(--surface); }
  /* matrix */
  .table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; background: var(--raised); }
  footer { border-top: 1px solid var(--line); padding-block: 26px 42px; color: var(--muted); font-size: 13.5px; display: grid; gap: 10px; }
  .foot-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html { scroll-padding-top: 84px; }