/* Broadband Facts — EMBED build.
   Derived from broadband-labels.css (Jermaine's package) for use on
   index.html, where the label sits inside the main site rather than on a
   page of its own.

   The standalone label pages keep the original stylesheet. This one exists
   because the original sets :root variables and styles html/body globally —
   background #f3f5f7, Arial, --ink #111 — which on the homepage would
   repaint the page grey, swap Inter for Arial, and shift the body text
   colour. Every rule here is scoped to .plan-label-wrap / .broadband-label,
   so nothing escapes the label.

   Keep the two in sync: if the package's label styling changes, mirror it
   here. Rule numbers below refer to the original file. */

.plan-label-wrap{
  /* variables scoped to the wrapper instead of :root */
  --lbl-ink:#111;
  --lbl-paper:#fff;
  --lbl-rule:#111;
  margin:10px 0 4px;
  /* grid and flex children default to min-width:auto, which lets the label's
     content push the plan card wider than its track. Without this the pricing
     grid overflows the page on desktop. */
  min-width:0;
}

/* the body-level typography the label assumes, applied only to the label */
.plan-label-wrap .broadband-label{
  width:100%;
  max-width:640px;
  min-width:0;
  margin:0 auto 2rem;
  background:var(--lbl-paper);
  color:var(--lbl-ink);
  border:4px solid var(--lbl-ink);
  padding:10px 14px 12px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:17px;
  line-height:1.28;
  text-align:left;
}
.plan-label-wrap .broadband-label *{box-sizing:border-box}

/* The label markup contains its own <header> and <footer>. index.html styles
   `footer` bare — background #071628, white text, 48px padding — which
   repaints the bottom of every embedded label dark. Reset both back inside
   the label. */
.plan-label-wrap .broadband-label header,
.plan-label-wrap .broadband-label footer{
  background:none;
  color:var(--lbl-ink);
  padding:0;
  margin:0;
  font-size:inherit;
  display:block;
}

/* index.html sets `a{color:inherit;text-decoration:none}`. Label links must
   stay visibly distinguishable — handoff §15. */
.plan-label-wrap .broadband-label a{
  color:#111;
  text-decoration:underline;
  text-decoration-thickness:1px;
  overflow-wrap:anywhere;
}

.plan-label-wrap .broadband-label__title{
  font-family:Arial,Helvetica,sans-serif;
  /* The standalone pages size this at 10vw, which is fine when the label owns
     the page. Embedded in a plan-card column it is sized against the viewport,
     not the card, so on desktop it demanded ~120px type inside a ~350px card
     and forced the whole pricing grid sideways. Fixed size, allowed to wrap. */
  font-size:2.05rem;
  overflow-wrap:anywhere;
  line-height:.95;
  letter-spacing:-0.055em;
  margin:0;
  border-bottom:3px solid var(--lbl-rule);
  padding-bottom:3px;
  color:var(--lbl-ink);
}
.plan-label-wrap .broadband-label__provider{font-size:1.55rem;font-weight:800;margin:4px 0 0}
.plan-label-wrap .broadband-label__plan{font-size:1.15rem;font-weight:800;margin:3px 0}
.plan-label-wrap .broadband-label__type{font-size:1.05rem;margin:2px 0 8px}

.plan-label-wrap .label-rule-thick{height:15px;background:var(--lbl-rule);margin:8px 0 0}
.plan-label-wrap .label-section{border-top:2px solid var(--lbl-rule);padding-top:5px;margin-top:7px}
.plan-label-wrap .label-section--first{border-top:0;margin-top:0}
.plan-label-wrap .label-section h2,
.plan-label-wrap .label-section h3{
  font-family:Arial,Helvetica,sans-serif;
  margin:0;
  line-height:1.05;
  color:var(--lbl-ink);
  letter-spacing:normal;
  text-transform:none;
}
.plan-label-wrap .label-section h2{font-size:1.45rem}
.plan-label-wrap .label-section h3{font-size:1.28rem}

.plan-label-wrap .label-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:1rem;
  align-items:end;
  padding:3px 0;
}
.plan-label-wrap .label-row--price{
  font-size:1.45rem;
  font-weight:800;
  border-bottom:3px solid var(--lbl-rule);
  padding:5px 0 4px;
}
.plan-label-wrap .label-row__label{min-width:0}
.plan-label-wrap .label-row__value{font-weight:700;text-align:right;white-space:nowrap}
.plan-label-wrap .label-row--indent{padding-left:1.6rem}

.plan-label-wrap .label-copy{margin:5px 0}
.plan-label-wrap .label-subhead{margin:5px 0 1px 1.6rem;font-weight:700}
.plan-label-wrap .label-note{margin:4px 0 4px 1.6rem;color:#222;font-size:.92rem}

.plan-label-wrap .label-link-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:1rem;
  align-items:baseline;
  font-weight:800;
  font-size:1.12rem;
  padding:4px 0;
}
.plan-label-wrap .label-link-row a{text-align:right;font-size:.96rem}

.plan-label-wrap .support-copy{margin:5px 0 0;overflow-wrap:anywhere}
.plan-label-wrap .fcc-copy{margin:7px 0 2px}
.plan-label-wrap .fcc-url{text-align:right;font-weight:700;margin:0}
.plan-label-wrap .upi{margin:12px 0 0;font-size:.82rem;overflow-wrap:anywhere}

@media (max-width:520px){
  .plan-label-wrap .broadband-label{font-size:15px;padding:8px 10px 10px;border-width:3px}
  .plan-label-wrap .broadband-label__title{font-size:1.85rem}
  .plan-label-wrap .broadband-label__provider{font-size:1.3rem}
  .plan-label-wrap .label-section h2{font-size:1.28rem}
  .plan-label-wrap .label-section h3{font-size:1.15rem}
  .plan-label-wrap .label-row{column-gap:.6rem}
  .plan-label-wrap .label-row--indent{padding-left:.8rem}
  .plan-label-wrap .label-subhead,
  .plan-label-wrap .label-note{margin-left:.8rem}
  .plan-label-wrap .label-link-row{grid-template-columns:1fr;gap:0}
  .plan-label-wrap .label-link-row a{text-align:left}
}

@media print{
  .plan-label-wrap .broadband-label{
    width:6.5in;
    max-width:100%;
    margin:0 auto;
    break-inside:avoid;
  }
  .plan-label-wrap .broadband-label a{text-decoration:none}
  .plan-label-wrap .broadband-label a[href]::after{
    content:" (" attr(href) ")";
    font-size:.72em;
    font-weight:400;
  }
}