/* BroadbandSwitch homepage width, 6 October 2026.
   ===============================================================================================
   WHY THIS FILE EXISTS

   The October reading-measure sweep gave 178 pages a measure by constraining the direct children
   of <main> to 1200px.  That is the right rule for a page whose children are blocks of text.  The
   homepage is not that page.  Its fourteen children are full-bleed bands that carry their own
   background, so constraining them boxed every coloured band into a 1200px panel with the cream
   page showing either side, and pushed each band's own inner wrapper out to the band's edge.

   The measure was never the problem.  The level it was applied at was.  So the bands go back to
   spanning the window, and the measure moves one level in, onto the wrapper inside each band that
   actually holds the content.  That is what the well-behaved bands on this page were already doing.

   WHILE WE ARE HERE

   Measured on the live page at a 1585px content width, the content edges down the homepage sat at
   192, 208, 224, 226, 232 and 252 pixels: six different values and a 60px wobble.  They are all at
   232px now, which is the site measure of 1200px plus the 40px gutter .container already used.
   The one deliberate exception is the urgency band pill at the top, whose text is centred, so its
   own narrower inset does not read as a left edge.

   It also fixes one straightforward bug.  .insights-cta carried no horizontal padding at any
   viewport, so on a phone that call to action ran into both screen edges.

   SCOPE AND SAFETY

   Every rule is scoped under main#main, and this file is linked from index.html only.  It cannot
   reach another page, and within the homepage it cannot reach the site header or footer.  Checked
   on the live page at 1600px, 1024px and 375px: no element overflows that did not already, and the
   document never scrolls sideways.
   =============================================================================================== */

/* 1. The bands span the window again.
   The tool that ships this file also removes the October rule from index.html.  This repeats the
   release here so the page stays right if that rule is ever re-injected, by a re-run of the sweep
   or by anything else.  Same selector, later origin, so it wins on order. */
main#main > * {
  max-width: none;
  margin-inline: 0;
}

/* 2. One measure, on the wrapper inside each band that holds the content.
   Ten of these already sat at 1200px and are listed anyway, so the whole set is readable in one
   place rather than split between this file and whatever each band happened to inherit. */
main#main .bsw-hero__inner,
main#main .bsw-strip__in,
main#main .bsw-foot,
main#main .bsw-vid__in,
main#main .bsw-hp__in,
main#main .urgency-band-inner,
main#main .ots-reassurance-inner,
main#main .bbguides-inner,
main#main .video-inner,
main#main .container,
main#main .deals-context,
main#main .stickee-container,
main#main .deals-footer {
  max-width: 1200px;
  margin-inline: auto;
}

/* 3. The speed test band.
   Its inner wrapper carries no padding of its own on a wide screen but does on a narrow one (24px
   at 1024px, 18px on a phone).  Giving it a gutter here would double that up and push it further
   in than everything else, so instead it gets a measure 80px narrower, which lands its content on
   the same 232px edge as the rest and leaves every narrow viewport exactly as it was. */
main#main .bsw-st__in {
  max-width: 1120px;
  margin-inline: auto;
}

/* 4. The insights call to action, which had no horizontal padding at any width. */
main#main .insights-cta {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 40px;
}

@media (max-width: 760px) {
  main#main .insights-cta {
    padding-inline: 16px;
  }
}

/* 5. The five wrappers whose own gutter is narrower than the 40px the rest of the page uses: the
   hero, its reassurance strip, its footnote, the video row and the five how-to blocks.  Only above
   the measure, so every narrow viewport keeps the gutter it was tuned with. */
@media (min-width: 1200px) {
  main#main .bsw-hero__inner,
  main#main .bsw-strip__in,
  main#main .bsw-foot,
  main#main .bsw-vid__in,
  main#main .bsw-hp__in {
    padding-inline: 40px;
  }
}