/* ===========================================================================
   BroadbandSwitch.uk editorial policy page
   Prefix: .ep   Scoped entirely inside <article class="ep">.

   NOTE FOR ANY FUTURE SCOPING PASS
   Do not run a line-based "prefix every selector" regex over this file.
   A line beginning with a comment marker gets treated as a selector and the
   rule silently dies with no console error. Use postcss-prefix-selector if
   scoping is ever needed. Everything here is already inside .ep, so it is not.
   =========================================================================== */


/* The host page may not set a global border-box reset, and this block must not
   depend on one.  Without it, any width:100% element that also has padding
   overflows its container: the mobile call to action was 22px too wide at
   390px for exactly this reason.  Scoped, so it changes nothing outside. */
.ep, .ep *, .ep *::before, .ep *::after{ box-sizing:border-box; }

.ep{
  --ep-ink:#0A0F2C;
  --ep-mute:#4C5480;
  --ep-soft:#6F7794;
  --ep-pink:#C10460;
  --ep-green:#07695C;
  --ep-line:#E6E8F2;
  --ep-wash:#F7F8FC;
  max-width:760px; margin:0 auto; padding:44px 24px 80px;
  font-family:Poppins,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ep-ink);
}

/* ---- headings ----------------------------------------------------------- */
.ep h1{
  font-size:clamp(32px,5vw,44px); line-height:1.12; font-weight:800;
  letter-spacing:-1.3px; margin:0 0 14px;
}
.ep h2{
  font-size:clamp(22px,3vw,28px); line-height:1.2; font-weight:750;
  letter-spacing:-.7px; margin:0 0 16px;
}
.ep h3{ font-size:18px; line-height:1.3; font-weight:700; letter-spacing:-.3px; margin:0 0 3px; }
.ep h3 a{ color:var(--ep-ink); text-decoration:none; }
.ep h3 a:hover{ text-decoration:underline; }

/* ---- body --------------------------------------------------------------- */
.ep p{ font-size:17px; line-height:1.65; color:var(--ep-mute); margin:0 0 16px; }
.ep p:last-child{ margin-bottom:0; }
.ep strong{ color:var(--ep-ink); font-weight:650; }
.ep a{ color:var(--ep-pink); text-decoration:underline; text-underline-offset:2px; }
.ep a:hover{ text-decoration-thickness:2px; }
.ep a:focus-visible{ outline:3px solid var(--ep-pink); outline-offset:3px; border-radius:3px; }

.ep ul, .ep ol{ margin:0 0 20px; padding-left:26px; }
.ep li{ font-size:17px; line-height:1.62; color:var(--ep-mute); margin-bottom:13px; }
.ep li:last-child{ margin-bottom:0; }
.ep li::marker{ color:var(--ep-soft); font-weight:600; }

/* ---- header ------------------------------------------------------------- */
.ep__head{ margin-bottom:34px; padding-bottom:28px; border-bottom:2px solid var(--ep-ink); }
.ep__standfirst{
  font-size:19.5px !important; line-height:1.5; color:var(--ep-mute) !important;
  max-width:56ch; margin-bottom:20px !important;
}
.ep__byline{
  font-size:14.5px !important; line-height:1.75; color:var(--ep-soft) !important;
  margin-bottom:0 !important;
}
.ep__byline a{ color:var(--ep-mute); }
.ep__date, .ep__read{ display:block; }
.ep__read::before{ content:""; }

/* ---- lede --------------------------------------------------------------- */
.ep__lede{
  padding:24px 26px; margin-bottom:44px;
  background:var(--ep-wash); border-radius:14px;
}
.ep__lede p{ font-size:17.5px; }

/* ---- sections ----------------------------------------------------------- */
.ep > section{ margin-bottom:48px; scroll-margin-top:88px; }
.ep > section:last-of-type{ margin-bottom:40px; }

/* ---- the six rules ------------------------------------------------------ */
.ep__rules{ counter-reset:eprule; list-style:none; padding-left:0; }
.ep__rules > li{
  position:relative; padding:0 0 0 44px; margin-bottom:18px;
}
.ep__rules > li::before{
  counter-increment:eprule; content:counter(eprule);
  position:absolute; left:0; top:1px;
  display:grid; place-items:center; width:28px; height:28px;
  border-radius:50%; background:var(--ep-ink); color:#fff;
  font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums;
}

/* ---- figures ------------------------------------------------------------ */
.ep__fig{
  margin:0 0 28px; padding:0;
  background:#fff; border:1px solid var(--ep-line); border-radius:14px; overflow:hidden;
}
.ep__fig img{ display:block; width:100%; height:auto; }
.ep__fig figcaption{
  font-size:14.5px; line-height:1.6; color:var(--ep-soft);
  padding:15px 20px; border-top:1px solid var(--ep-line);
}

/* ---- people ------------------------------------------------------------- */
.ep__people{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-bottom:24px; }
.ep__person{
  display:flex; gap:16px; align-items:flex-start;
  padding:20px; border:1px solid var(--ep-line); border-radius:14px; background:#fff;
}
.ep__person > img{
  flex:none; width:64px; height:64px; border-radius:50%; object-fit:cover;
  border:2px solid var(--ep-line);
}
.ep__person p{ font-size:15px; margin-bottom:0; }
.ep__role{
  font-size:13px !important; font-weight:650; letter-spacing:.3px;
  color:var(--ep-pink) !important; text-transform:uppercase; margin-bottom:8px !important;
}

/* ---- source list -------------------------------------------------------- */
.ep__sources{ list-style:none; padding-left:0; }
.ep__sources > li{
  font-size:15.5px; padding:11px 0 11px 24px; margin-bottom:0;
  border-bottom:1px solid var(--ep-line); position:relative;
}
.ep__sources > li:last-child{ border-bottom:0; }
.ep__sources > li::before{
  content:""; position:absolute; left:2px; top:19px;
  width:7px; height:7px; border-radius:50%; background:var(--ep-green);
}
.ep__sources a{ color:var(--ep-ink); }

/* ---- inline pointers ---------------------------------------------------- */
.ep__see{
  font-size:15.5px !important; color:var(--ep-soft) !important;
  padding-top:4px;
}
.ep__honest{
  font-size:15.5px !important; line-height:1.6;
  padding:16px 20px; border-radius:12px;
  background:#F1F9F6; border:1px solid #BFDDD3; color:var(--ep-mute) !important;
}

/* ---- footer ------------------------------------------------------------- */
.ep__foot{ padding-top:28px; border-top:2px solid var(--ep-ink); }
.ep__related{
  font-size:15px !important; line-height:2; color:var(--ep-soft) !important;
  margin-top:14px;
}
.ep__related a{ color:var(--ep-mute); }

/* ---- responsive --------------------------------------------------------- */
@media (max-width:760px){
  .ep{ padding:32px 18px 64px; }
  .ep__people{ grid-template-columns:1fr; gap:14px; }
  .ep__lede{ padding:20px; margin-bottom:34px; }
  .ep p, .ep li{ font-size:16.5px; }
  .ep__standfirst{ font-size:18px !important; }
  .ep > section{ margin-bottom:40px; }
}
@media (max-width:400px){
  .ep__person{ padding:16px; gap:13px; }
  .ep__person > img{ width:54px; height:54px; }
}


/* Beat leftover .bbs-page heading rules if this article sits on a templated page. */
article.ep h1, article.ep h2, article.ep h3, article.ep h4{
  border-bottom:0; color:inherit;
}