/* Put the browser's own defaults back, inside HBE markup only.
   ================================================================
   The static build is styled against a bare browser: index.html ships no CSS
   reset, so anything its stylesheet does not set — heading sizes and weights,
   paragraph and list margins, how an inline <svg> sits on the text baseline —
   comes from the browser's default stylesheet.

   Odoo's frontend bundle includes Bootstrap Reboot, which overrides exactly
   those defaults. Loading the HBE stylesheet after Bootstrap is not enough:
   for a property the HBE stylesheet never mentions, Bootstrap's value is the
   only author-level declaration and it wins by default. That is what made the
   section headings render at weight 500 instead of bold and lose ~33px of
   margin down the page.

   So this file restores the browser defaults for the properties Reboot claims,
   and loads BEFORE theme.css so the theme still wins wherever it has an
   opinion of its own.

   The selectors are deliberately bare, with no scoping class in front of them.
   A browser default carries element specificity, and anything emulating one
   has to as well. Scoping them to a .hbe-site wrapper was tried and it broke
   the hero: `.hbe-site figure` (0,1,1) outranks the theme's own `.hx-shot`
   (0,1,0), which put a 40px UA margin back onto figures the theme had
   deliberately zeroed and squeezed the hero stage 80px narrower. Bare
   selectors lose to every class rule in theme.css, which is exactly how the
   static build behaves against the real browser defaults.

   Nothing leaks to the rest of the database: this file lives in the
   hbe_website.assets_site bundle, which only HBE pages ever load.

   Only properties the HBE stylesheet leaves alone are listed. Nothing here
   sets line-height on headings, for instance, because theme.css does. */

/* --- headings ---
   Odoo's rule is:
     h1..h6, .h1..h6 { margin-top: 0; margin-bottom: .5rem;
                       font-family: "Inter Tight", ...; font-weight: 500;
                       line-height: 1.2; color: var(--heading-color); }
   Three of those — font-family, line-height and color — are properties a
   heading inherits from its parent by default, and the HBE stylesheet counts
   on that inheritance for every heading it does not style by class. Declaring
   them on the element breaks the inheritance, which is why headings came out
   in Inter Tight instead of the body's system stack and measured a few pixels
   narrower per line.

   line-height is `inherit`, not `normal`: no browser default stylesheet sets
   line-height on a heading, so a heading takes the body's — 1.62 here. Setting
   `normal` instead cost the footer column headings ~5px of height each.
   theme.css re-declares 1.08 for h1-h3 further down and wins, being later at
   the same specificity. */
h1 { font-size: 2em;    font-weight: bold; margin: 0.67em 0; }
h2 { font-size: 1.5em;  font-weight: bold; margin: 0.83em 0; }
h3 { font-size: 1.17em; font-weight: bold; margin: 1em 0; }
h4 { font-size: 1em;    font-weight: bold; margin: 1.33em 0; }
h5 { font-size: 0.83em; font-weight: bold; margin: 1.67em 0; }
h6 { font-size: 0.67em; font-weight: bold; margin: 2.33em 0; }
h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  color: inherit;
  line-height: inherit;
}

/* --- flow content: Reboot zeroes margin-top and uses margin-bottom 1rem --- */
p,
dl,
ol,
ul,
pre { margin: 1em 0; }
ol, ul { padding-left: 40px; }
ol ol, ul ul,
ol ul, ul ol { margin: 0; }
dd { margin-left: 40px; }
blockquote { margin: 1em 40px; }
figure { margin: 1em 40px; }

/* --- inline: Reboot sets b/strong to bolder, which is not the default --- */
b, strong { font-weight: bold; }
small { font-size: smaller; }

/* --- the one that quietly moves every icon ---
   Reboot sets `svg { vertical-align: middle }`. The page is built on inline
   SVG icons sitting on the text baseline, so this shifts them all. */
svg { vertical-align: baseline; }

/* --- rules and tables --- */
hr {
  margin: 0.5em auto;
  border: 1px inset;
  color: inherit;
  background-color: initial;
  opacity: 1;
  height: initial;
}
table { border-collapse: separate; border-spacing: 2px; }
th { font-weight: bold; text-align: center; }
th, td { padding: 1px; }
/* caption-side lives on `table` in Reboot (`table{caption-side:bottom}`)
   and is inherited, so the caption itself has to declare it back: a
   direct declaration beats an inherited one whatever the order. Without
   it every spec table printed its title underneath the rows — the model
   name read as the last line of the table instead of its heading. Seven
   page stylesheets set this themselves and looked right; the other 42
   did not. */
caption { text-align: center; padding: 0; color: inherit; caption-side: top; }

/* --- form controls: Reboot makes them inherit the page font --- */
/* line-height too, not just margin. Reboot sets line-height:inherit on form
   controls, so the tab buttons picked up the body's 1.62 — 15px x 1.62 =
   24.3px against the browser default of `normal`. That made every tab strip
   62px tall instead of 56px and pushed the whole page below it down by 6px. */
button,
input,
optgroup,
select,
textarea { margin: 0; line-height: normal; }
label { display: inline; margin-bottom: 0; }
legend {
  float: none;
  width: auto;
  padding: 0 2px;
  margin-bottom: 0;
  font-size: initial;
  line-height: inherit;
}
fieldset { margin: 0 2px; padding: 0.35em 0.75em 0.625em; border: 2px groove; min-width: min-content; }

/* --- .row is the site's own class, not Bootstrap's grid ---------------
   The static build uses class="row" to mean "a flex row" — a card footer
   holding a price and a small View product pill, on switches.html and
   all-prime-surge.html. Bootstrap claims the same name for its grid and
   gives every child `width: 100%; flex-shrink: 0` plus gutter padding, and
   the row itself negative side margins. That stretched the pill to the full
   width of the card and wrapped it onto its own line under the price.

   Scoped to .hbe-site so Odoo's own chrome keeps a working Bootstrap grid;
   these declarations only give the site's markup back the plain flex row it
   was written against. Placed before the page stylesheets, so a page that
   has an opinion about its own .row still wins. */
.hbe-site .row { margin-left: 0; margin-right: 0; margin-top: 0; }
.hbe-site .row > * {
  flex-shrink: 1;
  width: auto;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin-top: 0;
}

/* --- mega menu above the sticky tab strip ------------------------------
   header.site is position:sticky with z-index:40, which makes it a stacking
   context: every z-index inside it, including the mega panel's 50, is
   resolved *within* that context and can never beat .ptabs-bar sitting
   outside it. So on a tabbed page the pinned tab strip drew straight through
   the open dropdown.

   Raising the header only while the menu is actually open leaves the normal
   order untouched - scrolled and not hovering, the tab strip still sits on
   top and still parks flush at the viewport edge. .open is the class the page
   script toggles; :hover and :focus-within cover keyboard and pointer before
   the script runs.

   This number has to stay above .ptabs-bar's, further down this file. It was
   70 against a strip on 60; the strip was later raised to 80 for its own
   reasons and quietly took the overlap back, which is the whole of the bug
   reported on 2026-10-08 - the strip covered the top 54px of every open
   panel, so elementFromPoint 20px into the menu returned a tab button, hover
   dropped, and the menu shut before the pointer ever reached it. The ceiling
   is .acct-menu at 120, which has to stay clear of the header.

   Raising the header cannot oscillate the way the 2026-10-07 attempt did:
   it makes the panel hittable, so it sustains the :hover it depends on
   instead of destroying it. */
.hbe-site header.site:has(.has-mega:hover),
.hbe-site header.site:has(.has-mega:focus-within),
.hbe-site header.site:has(.has-mega.open) {
  z-index: 90;
}

/* --- mobile navigation panel -------------------------------------------
   Below 1010px the page's own CSS hides nav.main and shows .menu-toggle,
   but nothing ever wired the two together: the button exists on 70 pages
   and has no handler in the static build either, so a phone could see the
   site and not move around it.

   Everything here is inside that same 1010px query, so the desktop header
   is untouched. It re-uses the existing markup and the page's own tokens
   rather than introducing a second visual language: the section labels are
   the .has-mega triggers already in the header, and an opened section shows
   the .mega panel the desktop menu already carries, laid out in one column
   instead of floating. */
@media (max-width: 1010px) {
  .hbe-site header.site nav.main.is-open {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-height: calc(100vh - 66px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 10px;
    background: var(--bg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .10);
  }

  .hbe-site header.site nav.main.is-open > a,
  .hbe-site header.site nav.main.is-open > .has-mega { display: block; }

  .hbe-site header.site nav.main.is-open > a,
  .hbe-site header.site nav.main.is-open > .has-mega > a {
    display: block;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line-soft, var(--line));
  }

  /* the desktop panel, brought inline and closed until its label is tapped */
  .hbe-site header.site nav.main.is-open .mega {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    margin: 0;
    padding: 4px 0 10px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--surface, var(--bg));
  }
  .hbe-site header.site nav.main.is-open .has-mega.is-expanded > .mega { display: block; }

  /* one column on a phone, and drop the desktop-only art rails */
  .hbe-site header.site nav.main.is-open .mega .mega-grid {
    display: block;
    padding: 0;
  }
  .hbe-site header.site nav.main.is-open .mega .mm-rail,
  .hbe-site header.site nav.main.is-open .mega .promo { display: none; }
  .hbe-site header.site nav.main.is-open .mega .col a,
  .hbe-site header.site nav.main.is-open .mega .mm-item,
  .hbe-site header.site nav.main.is-open .mega .col > h4 {
    padding-left: 30px;
    padding-right: 18px;
  }

  /* the header already ships an <svg class="caret"> in each trigger; turn
     that one over rather than drawing a second arrow of my own */
  .hbe-site header.site nav.main.is-open > .has-mega.is-expanded > a .caret {
    transform: rotate(180deg);
  }
}

/* --- the homepage headline on a narrow phone ---------------------------
   "Noise" ran off the edge on Android but not on iPhone, and the font stack
   is why: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
   "Times New Roman", Georgia, serif. iOS has Palatino, so an iPhone gets the
   narrow face the design was drawn around. Android has none of them and falls
   through to generic serif - Noto Serif - which sets the same words wider.
   .hero.mag h1 is clamp(40px, 4.6vw, 66px), so the floor stays at 40px however
   narrow the screen is, and .hl-line is white-space: nowrap, so the line
   cannot break: the extra width had nowhere to go and was clipped away by
   .hbe-site's overflow-x: clip.

   Letting it wrap did stop the clipping, but it split the headline onto a
   third line and that is not the design. So the line stays unbreakable and
   the type is sized to the widest fallback instead: 8.6vw puts "Without the
   Noise" at about 238px inside 308px of room on a 360px phone, which leaves
   Noto Serif real headroom rather than the single pixel it had before.
   min() caps it at the original 40px, so from 465px upward - every tablet and
   desktop - the value is exactly what it always was. */
@media (max-width: 480px) {
  .hbe-site .hero.mag h1 { font-size: min(40px, 8.6vw); }
}

/* --- the hero eyebrow pill on a phone -----------------------------------
   The longest eyebrow in the catalogue is "5G Accessories · Installation
   Accessories" - 41 characters - and at the usual 15px it sets 459px wide
   against 308px of column on a 360px phone, so it broke onto a second line
   inside the pill.

   Measured against that worst case: the text runs about 30.6px wide per
   pixel of font-size, the pill adds 22px of padding, and the column is the
   viewport less 52px. 2.5vw stays inside that at every phone width - 8px at
   320, 9px at 360, 10.3px at 412 - so nowrap is safe rather than a new way
   to overflow. min() caps it at the original 15px, and the query stops at
   600px because from there the full string already fits unaided. */
@media (max-width: 600px) {
  /* The class is repeated deliberately. Some pages style this as
     ".phero .sec-eyebrow", which carries the same weight as a single
     ".hbe-site .sec-eyebrow" and, loading after this file, would win the tie
     and keep its own 12.5px - that is why gen-psu still overflowed while
     grip-clip scaled. Repeating the class outranks both without reaching for
     !important.

     2.4vw, not 2.5: measured against the real pill, the text runs 31.6px per
     pixel of font-size rather than the 30.6 estimated, which left the longest
     eyebrow 7px over the column at 320px. */
  .hbe-site .sec-eyebrow.sec-eyebrow {
    font-size: min(15px, 2.4vw);
    white-space: nowrap;
  }
}

/* The same pill above 600px. Only the .cpe-hero family needs it: measured at
   1280px, where the copy column is at its narrowest 656px, every other page
   clears by 70-270px, while the longest eyebrow wants 660px and loses by four.
   At 1440px it matches the column exactly - one line with nothing to spare, so
   any difference in font rendering tips it over, which is why it wrapped on a
   laptop and not here.

   22px to 21px is about two percent, invisible next to the heading, and it
   buys 30px of clearance. The vw term carries the value down through the
   middle widths where the column narrows faster than the viewport does, so
   nowrap never becomes a way to overflow instead. The .phero pages set this
   text at 12.5px and are left alone - scoping matters, since a min() written
   for the 22px family would have enlarged theirs. */
@media (min-width: 601px) {
  .hbe-site .cpe-hero .sec-eyebrow.sec-eyebrow {
    font-size: min(21px, 2.4vw);
    white-space: nowrap;
  }
}

/* The utility row on a phone.
   ==========================================================================
   It was designed for a logo and Contact Us. It has since gained an account
   button and a cart, and on a 360px screen the row runs to x=407 — 47px past
   the edge, with the Contact Us label sliced through. Measured on a Galaxy
   S10 viewport at 360x760 and reproduced on every page of the site.

   This file rather than theme.css: theme.css is the homepage's stylesheet,
   and every other page loads its own page-<name>.css instead, so a header fix
   left in theme.css reaches exactly one page. The header is on all of them.

   On a phone the envelope carries Contact Us and the word comes off. All
   three controls stay reachable, which is the part that matters — the
   alternative is dropping one. title and aria-label are untouched, so nothing
   changes for a screen reader, and the desktop header is not in this query. */
@media (max-width: 560px) {
  .hbe-site .util .wrap { gap: 10px; }
  .hbe-site .util-right { gap: 10px; min-width: 0; }
  .hbe-site .contact-us span { display: none; }
  .hbe-site .contact-us { gap: 0; flex: none; }
  .hbe-site .logo { min-width: 0; }
  .hbe-site .logo img { max-width: 132px; height: auto; }
}


/* The Panamax mega menu, now that it has two product columns rather than three.
   ==========================================================================
   shop.css sizes this grid as five tracks — image rail, About Panamax, Surge
   Protection, Power Management, image rail. Power Management has been folded
   into Surge Protection, so there are four children for five tracks and the
   last one sits empty: a blank third of the panel to the right of the
   MOD-UTP5E card.

   Four tracks, with the same widths the remaining four had, so nothing that
   stayed changes size.

   :not(.prime-menu) matters. The Prime Surge panel reuses .pnx-menu and adds
   .prime-menu for its own six-track rule, which still has three product
   columns; without the exclusion this would fight it at equal specificity and
   the winner would depend on which stylesheet the page happened to load last.

   No media query: the narrower rules in shop.css stack the panel at small
   widths and should continue to. */
.hbe-site .mega.pnx-menu:not(.prime-menu) .mega-grid {
  grid-template-columns: 0.7fr 0.9fr 1.1fr 0.7fr;
}


/* Add to Cart, under Buy Now in the "At a glance" rail.
   ==========================================================================
   buy-now.js injects the second button beside the first. In the wide hero row
   the two sit side by side and the row's own spacing is right. In the narrow
   rail they stack, and there the page's own sheet still applies the 10px left
   margin meant for the side-by-side case - so the lower button started 10px
   right of the one above it and overhung the card on the right.

   Fixed here rather than in the script: the script has to measure the page to
   know which case it is in, and the measurement is only true once the hero
   images have sized, which is too late and too fragile. The rail is always
   the stacked case, so it can simply be stated.

   !important because the injected element carries inline styles from that
   earlier measuring attempt, and inline beats a plain rule. */
.hbe-site .p-glance a.buybtn.hbe-add {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  box-sizing: border-box;
}


/* Add to Cart has to be legible before anyone hovers it.
   ==========================================================================
   The injected button computes to background: rgba(0,0,0,0) on every product
   page - transparent, not the white the design calls for. Its own stylesheet
   asks for #fff and says why: several heroes sit this row over a photograph,
   and blue text on a photo of a desk cannot be read. Something later in the
   cascade is winning on background, so the button only became visible on
   hover, when the hover rule paints it solid.

   Stated again here, at the end of the site-wide sheet and with !important,
   because the competing rule is inside each page's own generated stylesheet
   and there are thirty-seven of them.

   :not([aria-disabled]) keeps the "Added" state as it was - that one is meant
   to go solid blue, and this must not undo it. */
.hbe-site a.buybtn.hbe-add:not([aria-disabled]) {
  background: #fff !important;
  color: var(--blue, #0076af) !important;
  box-shadow: inset 0 0 0 1.5px var(--blue, #0076af) !important;
}

.hbe-site a.buybtn.hbe-add:not([aria-disabled]):hover {
  background: var(--blue, #0076af) !important;
  color: #fff !important;
}


/* A hero that gained a Buy Now it was never designed around.
   ==========================================================================
   The softphone page is a service page. Its hero offered two actions — talk
   to sales, or jump to the demo — and its stylesheet styles the .btn-primary
   and .btn-ghost it was drawn with, never a.buybtn. Adding Buy Now and Add to
   Cart to that row left four pills side by side, all the same size, all the
   same distance apart, in four different colours. Nothing said which came
   first and the row read as a list of four things to choose between.

   The row is now three objects, not four, at three weights:

     1  Buy Now and Add to Cart are ONE segmented control - a single bordered
        pill split down the middle by a hairline. They are not two buttons
        that happen to sit together; they are one decision, buy, offered two
        ways, and joining them is the thing that stops the row reading as a
        list. It is also the only filled object left in the row, so it is
        unambiguously the primary action.
     2  Talk to HBE Yakabit stays a pill and keeps the brand magenta, but
        outlined rather than filled - the alternative to buying, not a rival
        to it.
     3  See it in use is a link, because that is what it does: scrolls to a
        panel further down this same page.

   Spacing carries the grouping now that the weights do the hierarchy: nothing
   inside the control, 28px after it, 18px between the two that follow. An
   earlier version put a hairline rule after the control as well; next to the
   control's own border that read as two lines three pixels apart, and the
   graded gaps say the same thing without the clutter.

   Scoped to .cta-split, which import_products.py puts on this row alone.
   .cd-hero-actions is on fifteen pages and the other fourteen keep the
   two-button row they were designed with.

   Stated here rather than in page-hbe-yakabit-softphone.css because that file
   is regenerated from the prototype on every port and would lose it. */

.hbe-site .cd-hero-actions.cta-split {
  gap: 18px;
}

/* ---- 1. the segmented primary control ---------------------------------- */

/* The border and the 1.5px gap are what make two anchors look like one
   control: the container's own background shows through the gap as the
   divider, so the hairline is correct in every state - including while Add
   to Cart is hovered and both halves are blue - without either child having
   to draw a border that would double up against the other's.

   overflow: hidden clips the children to the pill's radius, which is why the
   drop shadow sits on the container: on a child it would be clipped away. */
.hbe-site .cta-split .buy-pair {
  display: inline-flex;
  align-items: center;
  gap: 1.5px;
  height: 30px;
  margin-right: 10px;
  box-sizing: border-box;
  border: 1.5px solid var(--blue, #0076af);
  border-radius: 40px;
  overflow: hidden;
  /* The divider's colour, seen through the 1.5px gap. --blue-deep rather than
     --blue so it stays visible in every state: against Buy Now at rest, and
     against Add to Cart once that half fills in. With --blue here, hovering
     Add to Cart turned the whole control into one solid blue pill with no
     seam, and you could not see which half you were on. */
  background: var(--blue-deep, #005e87);
  box-shadow: 0 8px 20px -10px var(--blue, #0076af);
}

/* Square inside the group - the container's radius and overflow give the
   outer corners, and a radius on the halves would round the divider too.
   No lift on hover either: a transform on one half would shear the control
   in two. */
.hbe-site .cta-split .buy-pair a.buybtn {
  height: 100%;
  border-radius: 0;
  margin: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.hbe-site .cta-split a.buybtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  color: #fff;
  background: var(--blue, #0076af);
  border: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background .14s, color .14s;
}

/* !important on the colour, and it is not optional. port_page.py ends every
   generated page stylesheet with a catch-all `a:hover { color: inherit
   !important }` to undo a rule of Odoo's, and alongside it an explicit
   restore for each link the page styles. The softphone page never styled
   a.buybtn - it had no Buy Now - so it got the catch-all and no restore, and
   the label inherited the hero's --ink: near-black text on dark blue, which
   is what hovering it looked like. */
.hbe-site .cta-split a.buybtn:hover,
.hbe-site .cta-split a.buybtn:focus,
.hbe-site .cta-split a.buybtn:active {
  background: var(--blue-deep, #005e87);
  color: #fff !important;
  text-decoration: none !important;
}

.hbe-site .cta-split a.buybtn svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The quieter half: white ground, blue label, no ring of its own — the
   control's border is already around it. The !important answers the
   site-wide legibility rule further up this file, which states the ring for
   the thirty-six rows where Add to Cart stands on its own. */
.hbe-site .cta-split .buy-pair a.buybtn.hbe-add:not([aria-disabled]) {
  background: #fff !important;
  color: var(--blue, #0076af) !important;
  box-shadow: none !important;
}

/* --blue, not the --blue-deep the other half darkens to: that is the divider's
   colour, and this half filling with it would swallow the seam. */
.hbe-site .cta-split .buy-pair a.buybtn.hbe-add:not([aria-disabled]):hover,
.hbe-site .cta-split .buy-pair a.buybtn.hbe-add:not([aria-disabled]):focus-visible {
  background: var(--blue, #0076af) !important;
  color: #fff !important;
}

/* Mid-add and just-added, as everywhere else on the site. */
.hbe-site .cta-split .buy-pair a.buybtn.hbe-add[aria-disabled] {
  background: var(--blue, #0076af) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* ---- 2. the secondary pill --------------------------------------------- */

/* Outlined, not filled. The fill is what made it compete with Buy Now; the
   colour is the brand's and stays. A 1.25px ring rather than the control's
   1.5px, so it sits a step below it even at a glance. */
.hbe-site .cta-split .btn-primary {
  background: transparent !important;
  color: var(--magenta-ink, #b3006b) !important;
  box-shadow: inset 0 0 0 1.25px currentColor;
  border: 0;
  font-weight: 600;
  transition: background .14s, color .14s;
}

.hbe-site .cta-split .btn-primary:hover,
.hbe-site .cta-split .btn-primary:focus-visible {
  background: var(--magenta, #eb008b) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1.25px var(--magenta, #eb008b);
}

/* ---- 3. the link ------------------------------------------------------- */

/* On the same line as the buttons: putting it underneath was tried and looked
   worse - the link sat alone in a band of empty space and read as an orphan
   rather than as the quietest item in the row. */
.hbe-site .cta-split .btn-ghost {
  background: transparent !important;
  border: 0;
  box-shadow: none;
  padding: 0;
  height: auto;
  /* 10px on top of the row's 18px gap, so the link sits 28px from the pill
     before it - the same distance the control keeps from that pill. The two
     buttons are then a pair with equal air either side, and the link reads as
     separate from both rather than tacked onto the magenta one. */
  margin-left: 10px;
  /* A step quieter than the buttons: 500 against their 600/700, and a hair
     smaller. The colour stays --ink-soft - lightening it as well took it
     under 4.5:1 on this cream ground, and a link still has to be readable. */
  color: var(--ink-soft, #4d565e) !important;
  font-weight: 500;
  font-size: 12.5px;
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft, #f0ebe3);
  border-radius: 0;
  transition: color .14s, border-color .14s;
}

.hbe-site .cta-split .btn-ghost:hover,
.hbe-site .cta-split .btn-ghost:focus-visible {
  color: var(--ink, #1d2328) !important;
  border-bottom-color: currentColor;
}

/* ---- narrow screens ---------------------------------------------------- */

/* The control stays whole when the row wraps - it is one object and must
   never break across two lines. */
@media (max-width: 560px) {
  .hbe-site .cta-split .buy-pair {
    margin-right: 0;
  }
}


/* Four products to a row on a desktop shop listing.
   ==========================================================================
   page-shop.css sets the grid to repeat(auto-fit, minmax(320px, 1fr)). The
   listing is 1348px wide at 1600px of viewport, so with a 28px gap a fourth
   320px track cannot fit and auto-fit settles on three.

   Stated as an explicit four rather than by lowering the 320px floor, so the
   count is the thing being specified and does not drift with the gap or the
   page padding. Below the breakpoint the original auto-fit rule is left alone
   and still steps down to three, two and one.

   The gap closes to 20px in four-up: at 28px a card is 316px wide, and the
   price and Add to Cart sit on one row with very little between them.

   Here rather than in page-shop.css because that file is regenerated from the
   prototype on every port. Two classes beat the single-class rule it has to
   win against, which is also loaded after this file. */
/* [data-shop-grid] rather than .sw-list: the category pages use the same class
   for their own grids, and only the Shop listing was asked for. */
@media (min-width: 1200px) {
  .hbe-site .sw-list[data-shop-grid] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }

  /* The card keeps its proportions at the narrower width: a little less
     padding, and a shot area that is shorter to match. */
  .hbe-site .sw-list[data-shop-grid] .sw-card {
    padding: 18px;
  }

  .hbe-site .sw-list[data-shop-grid] .sw-card .shot {
    height: 168px;
  }
}


/* The product tab bar and the site header both stuck to the top.
   ==========================================================================
   header.site is sticky at top:0 with z-index 40; .ptabs-bar is sticky at
   top:0 with z-index 60. Scroll a product page far enough and both occupy the
   same 60-odd pixels, with the tab bar painting over the header because it
   has the higher z-index. The nav was unreachable - elementFromPoint on the
   "Home" link returned a tab button - so the mega menus could not be opened,
   and where a menu did open it fought the tabs for the same strip.

   The two are stacked instead of overlapping: the tab bar stops 66px down,
   which is the header's height at every width, and drops below the header in
   the stacking order so a mega menu opens over the tabs rather than behind
   them. Nothing about either element's own behaviour changes - both still
   stick, and the tabs still switch.

   66px is stated rather than measured because the header is exactly that tall
   from 360px to 1920px; it is set by the nav's own line-height and padding,
   neither of which is in a media query. */
.hbe-site .ptabs-bar {
  top: 66px;
  /* Above the header, so an open mega menu paints behind the tab strip rather
     than over it. header.site computes to z-index 70 and is a stacking
     context, so the panel's own 50 is contained within it — the bar has to
     clear 70, not 50. It never covers the nav because top:66px puts it below
     the header rather than over it.

     Static CSS on purpose. The first attempt closed the menu with a script on
     scroll, and because the rule that hid the panel depended on :hover —
     which hiding it destroyed — the two fought each other about ten times a
     second. Nothing here can oscillate.

     80 only holds while no mega menu is open. The rule further up this file
     that raises header.site when one is open has to stay above this number;
     raise this one and that one together or the strip starts drawing through
     the panel again. */
  z-index: 80;
}

/* The price, moved out of the T85W hero and into the body.
   ==========================================================================
   import_products.py lifts the block out of heroes that are a single
   full-bleed photograph, where the copy sits over the product shot. It lands
   in a band of its own directly under the hero. The band needs room above and
   below it; .band's own padding is page-sized and far too much for one line. */
.hbe-site .band.pricing-band {
  padding: clamp(22px, 2.6vw, 34px) 0 clamp(14px, 1.6vw, 22px);
}


/* ALL Prime Surge, four to a row.
   ==========================================================================
   The page uses the same .sw-list grid as the Shop, which steps down from an
   auto-fit minmax(320px) floor and settles on three. The Shop's four-up rule
   is tied to its own [data-shop-grid] marker so the category pages were not
   dragged along with it; this page carries .prime-all for the same reason —
   it is named, not caught by a class every listing shares.

   Same numbers as the Shop so the two listings match: 20px gap, 18px card
   padding, a shorter shot area. Below the breakpoint the original rule is
   untouched and still goes three, two, one. */
@media (min-width: 1200px) {
  .hbe-site .sw-list.prime-all,
  .hbe-site .sw-list.cat-all-prime-surge {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }

  .hbe-site .sw-list.prime-all .sw-card,
  .hbe-site .sw-list.cat-all-prime-surge .sw-card {
    padding: 18px;
  }

  .hbe-site .sw-list.prime-all .sw-card .shot,
  .hbe-site .sw-list.cat-all-prime-surge .sw-card .shot {
    height: 168px;
  }
}


/* A pink eyebrow carrying a full sentence.
   ==========================================================================
   .sec-eyebrow is a pill: 22px, uppercase, 0.11em of letter-spacing, sized
   for two or three words ("Why Panamax"). The Panamax page now states the
   dealer line there instead, which is a hundred characters, and at that size
   in capitals it ran the width of the page and could not be read.

   The pill is kept — magenta ink on a 12% magenta ground, same radius, same
   padding — and only what the longer text actually needs is changed: it wraps
   rather than sitting on one line, it is capped at a comfortable measure, and
   it is set in the sentence case it was written in instead of capitals.

   .is-long, so the eyebrows on every other page are untouched. */
.hbe-site .sec-eyebrow.is-long {
  display: inline-block;
  max-width: 54ch;
  text-transform: none;
  letter-spacing: .005em;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.45;
  text-wrap: balance;
  padding: 10px 18px;
  border-radius: 18px;
}

@media (max-width: 560px) {
  .hbe-site .sec-eyebrow.is-long {
    font-size: 14px;
    padding: 9px 14px;
  }
}


/* The video library, two to a row.
   ==========================================================================
   Each collection on /videos held its two videos in one column, and each card
   put its write-up on the left with the poster on the right. Eight videos
   that way is a very long page, and the poster — the thing someone is
   actually scanning for — sat in the second column where the eye reaches it
   last.

   Two equal columns per collection instead, and inside each card the poster
   goes on top with its own write-up directly beneath it, so a video and its
   text read as one block and the two blocks sit side by side.

   The stacking is stated with grid-row rather than `order`, because the page
   already assigns .vfeat-copy to column 1 and .vfeat-media to column 2 and
   those have to be overridden explicitly, not nudged.

   .vlist-2col, added to this page's four lists only: .vlist is also the
   markup on About Us, The Team, HBE Internet, Unified Communications, the
   MIMO antenna page and the homepage, and none of those were asked for.

   Here rather than in page-videos.css because that file is regenerated from
   the prototype on every port and would lose it. */

/* Poster first, write-up under it — at every width, so a phone sees the same
   order as a desktop. */
.hbe-site .vlist-2col > .vfeat {
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(16px, 1.8vw, 24px);
  align-items: start;
}

.hbe-site .vlist-2col > .vfeat > .vfeat-media {
  grid-column: 1;
  grid-row: 1;
}

.hbe-site .vlist-2col > .vfeat > .vfeat-copy {
  grid-column: 1;
  grid-row: 2;
}

/* Two columns once there is room for them. 980px is the page's own stacking
   breakpoint, so the two-column layout starts exactly where the cards stop
   being cramped.

   The pair shares one height. This was align-items: start, which let a card
   with a shorter write-up stop above its neighbour — on the 5G pair that left
   one card 29px short of the other and the row looked misaligned, which the
   client reported on 2026-10-08. Stretch only changes the card's own box: the
   poster and the write-up inside it are still placed from the top by .vfeat's
   align-content, so the extra height falls below the text rather than being
   shared out between the rows. */
@media (min-width: 981px) {
  .hbe-site .vlist-2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 2.2vw, 32px);
    align-items: stretch;
  }

  /* Needed because the card is itself a grid: stretched, its two auto-height
     rows would otherwise be spread down the taller box. */
  .hbe-site .vlist-2col > .vfeat {
    align-content: start;
  }
}

/* The section head over each pair, as the client laid it out: the head takes
   the same two columns as the videos beneath it. The eyebrow and headline
   sit on the left edge of the left video, the headline on ONE line; the lead
   is justified across the width of the right video.
   Same breakpoint and column gap as .vlist-2col above, and each column inset
   by the card's padding + border, so the head is exactly as wide as the video
   image under it. A headline wider than that is stepped down a pixel at a
   time by fitVheads() in page-videos.js. Keyed to .vlist-2col with :has() so
   no other page's .vhead changes. Mirrors pages/videos.html. */
@media (min-width: 981px) {
  .hbe-site .vhead:has(+ .vlist-2col) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(20px, 2.2vw, 32px);
    row-gap: 0;
    align-items: end;
  }

  .hbe-site .vhead:has(+ .vlist-2col) > .vhead-copy,
  .hbe-site .vhead:has(+ .vlist-2col) > .vhead-lead {
    padding-left: calc(clamp(22px, 2.4vw, 34px) + 1px);
    padding-right: calc(clamp(22px, 2.4vw, 34px) + 1px);
  }

  .hbe-site .vhead:has(+ .vlist-2col) > .vhead-copy {
    text-align: left;
  }

  .hbe-site .vhead:has(+ .vlist-2col) h2 {
    max-width: none;
    white-space: nowrap;
    text-align: left;
  }

  .hbe-site .vhead:has(+ .vlist-2col) h2.is-wrapped {
    white-space: normal;
  }

  .hbe-site .vhead:has(+ .vlist-2col) > .vhead-lead {
    align-self: end;
    margin-top: 0;
    border-left: 0;
  }

  .hbe-site .vhead:has(+ .vlist-2col) > .vhead-lead p {
    max-width: none;
    margin: 0;
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}


/* Air above the T-Mobile network video.
   ==========================================================================
   #partner-video is a .cd-band — a full-bleed section whose dark gradient is
   a background image, not a colour. Dropped at the end of the Network tab it
   starts the instant the three cards above it end, so the dark field butts
   straight against the bottom of the last card with nothing between them.

   A margin, not padding: the band already carries 87px of padding inside it,
   and more of that would only push the heading further down the dark field.
   A margin lets the panel's own cream ground show through, which is what
   separates the two blocks.

   Keyed to this one placement. #partner-video also exists on the AT&T and
   Verizon pages and on the six zzp- variants, but only the T-Mobile page
   nests it inside #panel-network — on the rest it is a top-level section with
   its own spacing already, and none of those were asked for. */
#panel-network #partner-video {
  margin-top: clamp(30px, 3.6vw, 58px);
}


/* "5G Service Package must be purchased", in each router's Overview.
   ==========================================================================
   The notice is in the prototype's own page markup and comes across with the
   hero on import. Its styling does not: it lives in the inline <style> of
   pages/hbe-5g-*-router.html, and page-hbe-5g-*-router.css was generated
   before the notice existed, so the paragraph arrived unstyled.

   Copied verbatim from the prototype — the magenta of the Overview it sits
   in, so the requirement reads as part of that section rather than as a
   warning bolted on. Stated here rather than in the two page stylesheets
   because those are regenerated from the prototype on every port. */
.ov .svc-req {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  padding: 10px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--magenta) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--magenta) 28%, transparent);
  color: var(--magenta-ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .01em;
}

.ov .svc-req svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* The 5G service-package picker on a router page.
   ==========================================================================
   The markup comes across with the hero on import, because the prototype has
   it in the page. Its styling does not: the prototype links it from
   assets/css/service-package.css, which no Odoo page loads, so the picker
   arrived as a bare browser <select> with its label running alongside it.

   The .svc-pick rules are copied here verbatim. The file's other two blocks,
   .svc-block (the cart's stop) and .svc-monthly (the monthly line under the
   order total), are left out: there is no markup for them on this site yet.

   NOTE: this is appearance only. Nothing in Odoo enforces the requirement —
   the eight service packages do not exist as Odoo products, and the scripts
   that would gate Buy Now and the cart live in hbe_product, which is a module
   on disk rather than something that can be pushed over RPC. The picker is
   currently inert. */
.svc-pick {
  margin-top: 26px;
  max-width: 520px;}

.svc-pick label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 7px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);}

.svc-pick .req {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--magenta-ink);}

.svc-pick select,
.svc-block select {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background-color: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 34px 11px 12px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a949c' stroke-width='3' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  cursor: pointer;
  transition: border-color .14s, box-shadow .14s;}

.svc-pick select:hover,
.svc-block select:hover {
  border-color: color-mix(in srgb, var(--blue) 45%, var(--line));}

.svc-pick select:focus,
.svc-block select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);}

.svc-pick.is-missing select {
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--magenta) 16%, transparent);}

.svc-pick-msg {
  margin: 8px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--magenta-ink);}

.svc-pick-msg[hidden] {
  display: none;}

.svc-pick-compare {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ink-faint);}

.svc-pick-compare a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;}

.svc-pick-compare a:hover {
  text-decoration: underline;}

.svc-pick + .buy-row {
  margin-top: 16px;}


/* The cart's 5G service-package block.
   ==========================================================================
   The cart renders this server-side when it holds a router and no package.
   Its markup and class names are the prototype's, so these rules are that
   file's .svc-block section copied across unchanged.

   Here rather than in hbe_product's own CSS because the cart already loads
   reboot-undo.css and this keeps the service styling — picker and block — in
   one place. */
service-package.css — a 5G router is sold only with a 5G Service Package.

   Linked by scripts/service-package.py on the two 5G router pages and on the
   cart, checkout and confirmation screens. Three pieces:

     .svc-pick      the package picker on a router page, above Buy Now
     .svc-block     the cart's (and checkout's) stop when a router has no
                    package, with the same choice so it can be settled there
     .svc-monthly   the package's monthly figure under the order total

   Field styling is the site's own .qfield select (shop.css), restated here
   because the product pages do not load shop.css. Magenta, like the
   "5G Service Package must be purchased" line in each router's Overview, so
   the requirement and the place to meet it read as one thing.
   ========================================================================= */

/* ---- the picker on a router page --------------------------------------- */
.svc-pick {
  margin-top: 26px;
  max-width: 520px;}

.svc-pick select,
.svc-block select {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background-color: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 34px 11px 12px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a949c' stroke-width='3' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  cursor: pointer;
  transition: border-color .14s, box-shadow .14s;}

.svc-pick select:hover,
.svc-block select:hover {
  border-color: color-mix(in srgb, var(--blue) 45%, var(--line));}

.svc-pick select:focus,
.svc-block select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);}

/* ---- the cart's stop ----------------------------------------------------- */
.svc-block {
  margin: 0 0 18px;
  padding: 18px 20px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--magenta) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--magenta) 30%, transparent);}

.svc-block[hidden] {
  display: none;}

.svc-block-h {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--magenta-ink);}

.svc-block-t {
  margin: 4px 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);}

.svc-block-row {
  display: flex;
  gap: 10px;
  align-items: center;}

.svc-block-row select {
  flex: 1;
  min-width: 0;}

.svc-block-row .buybtn {
  flex: none;
  height: 44px;}

.svc-block-err {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--magenta-ink);}

.svc-block-err[hidden] {
  display: none;}

/* The block sits in the cart's order-summary column, which is 360px wide and
   styles every .buybtn in it at width:100%. That beats the prototype's
   `flex: none` — flex-basis stays auto, auto resolves to the full 360px, and
   the <select> beside it was squeezed to 48px. The button is sized to its own
   text here so the row divides as the prototype intends, and the row is
   allowed to wrap for the narrowest screens. */
.svc-block-row {
  flex-wrap: wrap;
}

.svc-block-row .buybtn {
  width: auto;
}

.svc-block-row select {
  min-width: 180px;
}




/* The Team's four shortcuts were landing too low.
   ==========================================================================
   Clicking Founder & Story, Company Evolution, Leadership or Field &
   Administration stopped with the section's *box* 80px down — correctly clear
   of the 66px header. But a .tm-sec opens with its own top padding, so the
   first thing anyone can see, the eyebrow, sat 96px further down again at
   176px. That left about 110px of empty cream under the header before a word
   appeared, which is what the client meant by "it needs to come up higher".

   The allowance has to be made against the visible content, not the box. The
   padding is responsive — clamp(56px, 6.4vw, 104px) — so the offset is
   expressed against the same clamp rather than as a fixed number, and the
   first line lands 90px from the top at every width: 24px of air under a
   66px header. At wide viewports that works out negative, which is correct
   and valid — the box starts just under the top edge and its own padding
   supplies the spacing.

   .tm-sec is on this page only, so nothing else moves. */
.hbe-site .tm-sec {
  scroll-margin-top: calc(90px - clamp(56px, 6.4vw, 104px));
}


/* The Panamax listing, in the same card as every other listing page.
   ==========================================================================
   "Our Panamax Products" showed its three products as bare text links — a SKU
   in bold and a sentence — while Prime Surge showed cards with the product's
   photo. The client asked for the two to match, so category_page now renders
   the same card markup on both.

   The design has to be stated here because a listing's styling lives in its
   own page stylesheet: page-all-prime-surge.css carries .sw-card, and
   page-why-panamax.css never had it. These values are read off the rendered
   Prime cards, so the two are the same card and not an approximation. That
   file is regenerated from the prototype on every port, which is the other
   reason this is here.

   Scoped to this one grid. The Shop and Prime Surge pages bring their own
   .sw-card rules and must not be touched by these. */
.hbe-site .sw-list.cat-why-panamax {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 20px;
  margin-top: clamp(26px, 3vw, 38px);
}

.hbe-site .sw-list.cat-why-panamax .sw-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--line, #e6e0d6);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(20, 30, 40, .05), 0 3px 12px rgba(20, 30, 40, .05);
  transition: transform .14s, box-shadow .14s;
}

.hbe-site .sw-list.cat-why-panamax .sw-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(20, 30, 40, .06), 0 14px 30px -12px rgba(20, 30, 40, .18);
}

.hbe-site .sw-list.cat-why-panamax .sw-card .shot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 168px;
  background: #fff;
  border: 1px solid var(--line-soft, #f0ebe3);
  border-radius: 14px;
  padding: 10px;
}

.hbe-site .sw-list.cat-why-panamax .sw-card .shot a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.hbe-site .sw-list.cat-why-panamax .sw-card .shot img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.hbe-site .sw-list.cat-why-panamax .sw-card .cat {
  display: block;
  margin-top: 14px;
  font-size: 14px;
  color: var(--ink, #1d2328);
}

.hbe-site .sw-list.cat-why-panamax .sw-card h3 {
  margin: 8px 0 6px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

.hbe-site .sw-list.cat-why-panamax .sw-card h3 a {
  color: inherit;
  text-decoration: none;
}

.hbe-site .sw-list.cat-why-panamax .sw-card p {
  margin: 0 0 14px;
  font-size: 14.8px;
  line-height: 1.6;
  color: var(--ink-soft, #4d565e);
}

/* margin-top:auto pins the button row to the bottom so the rules line up
   across a row whatever length the titles run to. Stated with the class
   doubled because `row` is also a Bootstrap grid class and Odoo's frontend
   bundle is on this page — the same collision shop-card.css documents. */
.hbe-site .sw-list.cat-why-panamax .sw-card .row.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft, #f0ebe3);
}

/* The page sets `.viewbtn { padding: 0 }` to line its action buttons up with
   the header pill, which on a card leaves the label wider than the pill behind
   it. Restated at the Prime listing's own measurements, so the button on the
   two pages is the same button. */
.hbe-site .sw-list.cat-why-panamax .sw-card .viewbtn {
  height: 25px;
  padding: 0 13px;
  font-size: 11.5px;
  border-radius: 8px;
  white-space: nowrap;
}

/* The price, beside the button as on the Prime listing. That page's own
   stylesheet carries .sw-price and this one does not, so it is stated here at
   the same weight and colour; the 22px size comes inline from the template,
   as it does there. */
.hbe-site .sw-list.cat-why-panamax .sw-card .sw-price {
  font-weight: 800;
  color: var(--blue, #1f6fa8);
  letter-spacing: -.01em;
  line-height: 1;
}

/* The purchase group under the description heading.
   ==========================================================================
   The T85W hero is one full-bleed photograph with the copy centred over it,
   so the price sat on top of the picture of the phone and the client asked
   for the price, Buy Now and Add to Cart to sit together under the
   description instead - where every other Business Phone page already has
   them, beside its copy rather than over its photo.

   import_products.py moves the markup; these four rules are what the page
   never had to state, because the group has never stood in a text column
   before. Everything else about the blocks is their own CSS, untouched.

   Scoped to .desc-grid so the hero keeps its centred row wherever a hero
   still has one. */
.hbe-site .desc-grid .buy-group {
  margin-top: 28px;
}
.hbe-site .desc-grid .buy-group .pricing {
  margin: 0 0 14px;
}
.hbe-site .desc-grid .buy-group .pcta {
  /* The hero centres this row under centred copy; in a text column it starts
     where the text starts. 28px is what the EXP55 page puts above its own
     button row, which is the block this one was asked to match; it collapses
     with .pricing's 14px rather than adding to it. */
  justify-content: flex-start;
  margin-top: 28px;
}
.hbe-site .desc-grid .buy-group .us-badge {
  margin-top: 14px;
}

/* Dead space between the tab strip and the panel below it.
   ==========================================================================
   Each product page sets its bands to `padding: clamp(64px, 8vw, 108px) 0`,
   which is the rhythm BETWEEN sections and reads correctly there. The first
   band inside a tab panel is not between anything: the tab strip directly
   above it already draws the boundary, so its full top padding lands as 108px
   of empty background under the strip before the heading starts. Reported on
   the T85W page on 2026-10-08; measured 108px there and 100px on W73P, so it
   is the pattern rather than one page.

   Only the first band in a panel, and only its top. Every following band
   keeps the page's own spacing, so the rhythm further down is untouched, and
   so is the band's bottom padding where it meets the next section. */
.hbe-site .ppanel > .yband:first-child {
  padding-top: clamp(34px, 3.4vw, 48px);
}

/* The rate-box footnote, on one line.
   ==========================================================================
   The carrier pricing pages cap .price-note at 78ch, which was right for the
   notes they used to carry. The wording the client settled on is longer and
   wrapped just before the end, leaving "physical location." alone on a second
   line under the tiers. The static build already states this; it is here so
   the two sites read the same. */
.hbe-site .price-note {
  max-width: none;
}

/* 2026-10-20 (HBE): menu overlap fix. The menu has 11 top-level items now (Shop was added) but its size steps
   were tuned for 10, so from 1011px up to ~1900px the last items ran under the Sales Request button.
   Here the item size follows the room the menu actually has (container units of nav.main), capped at the
   site's own full size, so wide screens look as before and narrower ones shrink just enough to fit. */
@media (min-width: 1011px) {
  html body header.site nav.main {
    container-type: inline-size;
  }
  html body header.site nav.main > a,
  html body header.site nav.main .has-mega > a {
    font-size: min(14.5px, 1.25cqi);
    padding: 0 min(12px, .74cqi);
    gap: min(6px, .36cqi);
  }
  html body header.site nav.main .caret {
    width: min(10px, .84cqi);
  }
}

/* 2026-10-20 (HBE) menu size v2: on 1011-1919px screens the menu row also uses the 170px it kept empty on its left
   (under the logo), so the items get bigger; below 1200px the 'Home' item is hidden (the logo links home). */
@media (min-width: 1011px) and (max-width: 1919px) {
  html body header.site nav.main {
    margin-left: 0;
    flex: 1 1 auto;
    min-width: 0;
  }
}
@media (min-width: 1011px) and (max-width: 1199px) {
  html body header.site nav.main > a[href="/"] {
    display: none;
  }
  html body header.site nav.main > a,
  html body header.site nav.main .has-mega > a {
    font-size: min(14.5px, 1.34cqi);
  }
}
/* Column headings that link to a category page (added 2026-10-20) look exactly like the plain headings. */
html body header.site nav.main .mega h4 > a {
  display: inline;
  padding: 0;
  margin: 0;
  gap: 0;
  height: auto;
  min-height: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: none;
  border: 0;
  box-shadow: none;
}
html body header.site nav.main .mega h4 > a:hover {
  text-decoration: underline;
}

/* === 2026-10-22 main menu on the page centre line (Randall) =====================================================
   Wide screens only: there the menu text is at full size and stops growing, so it sat left with an empty gap before
   Sales Request. The menu spans the full row and centres its links; Sales Request is pinned to the right edge and
   the menu keeps equal room on both sides for it, so the links sit on the page centre line however many there are.
   (nav.main sizes its text from its own width - container query - so it cannot be sized to its content.)
   Below 1500 px the menu already fills the row from the left edge to Sales Request. */
@media (min-width: 1500px) {
  html body header.site .wrap:has(> nav.main) { position: relative; max-width: none; }
  html body header.site .wrap:has(> nav.main) > nav.main { flex: 1 1 auto; margin: 0; padding-left: 190px; padding-right: 190px; justify-content: center; }
  html body header.site .wrap:has(> nav.main) > .cta-btn.desktop { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); }
  /* the big drop-down panels keep their usual page width, centred, instead of stretching across the full row */
  html body header.site .wrap:has(> nav.main) .mega:not(.mega-sm) { width: min(1376px, calc(100% - 24px)); margin-left: auto; margin-right: auto; }
}

/* === 2026-10-22 menu has 12 top-level items (VoIP PBX added after Shop): the container-unit sizes above were
   tuned for 11 and ran the last items under Sales Request from 1011 to ~1600px. Scaled by 11/12; wide screens
   still reach the 14.5px cap. If another top-level item is added, scale these again (x n/(n+1)). === */
@media (min-width: 1011px) {
  html body header.site nav.main > a,
  html body header.site nav.main .has-mega > a {
    font-size: min(14.5px, 1.14cqi);
    padding: 0 min(12px, .68cqi);
  }
}
@media (min-width: 1011px) and (max-width: 1199px) {
  html body header.site nav.main > a,
  html body header.site nav.main .has-mega > a {
    font-size: min(14.5px, 1.23cqi);
  }
}

/* === 2026-10-22 FAQ links in the 5G menu (Randall): pink like the column headings; the dot turns green/blue on
   hover instead of pink. Class mm-faq on the link (5G Carrier FAQs, HBE-5G Product FAQs). === */
.mega .col a.mm-faq,
.hbe-site header.site nav.main.is-open .mega .col a.mm-faq {
  color: var(--magenta);
}

.mega .col a.mm-faq::before {
  background: color-mix(in srgb, var(--magenta) 45%, var(--line));
}

/* the site's link-state rules use !important (reboot-undo), so these do too, one class stronger */
.mega .col a.mm-faq:hover:hover,
.mega .col a.mm-faq:hover:active,
.mega .col a.mm-faq:hover:focus,
.mega .col a.mm-faq:active,
.mega .col a.mm-faq:focus {
  color: var(--magenta-deep) !important;
}

.mega .col a.mm-faq:hover::before {
  background: #12a39a;
}

/* === 2026-10-22 FAQs top menu item (Randall): a small two-column mega menu after Home, FAQ links left and the
   picture right (About Us pattern, mirrored). It sits near the left edge, so the panel opens from the trigger's
   left instead of centring on it. === */
@media (min-width: 1011px) {
  html body header.site nav.main .has-mega.ab.fq .mega.ab-menu.fq-menu {
    left: 0;
    width: min(470px, calc(100vw - 32px));
    transform: translateY(-8px);
  }

  html body header.site nav.main .has-mega.ab.fq:hover .fq-menu,
  html body header.site nav.main .has-mega.ab.fq:focus-within .fq-menu,
  html body header.site nav.main .has-mega.ab.fq.open .fq-menu {
    transform: none;
  }
}

html body header.site nav.main .fq-grid {
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: center;
}

html body header.site nav.main .fq-shot {
  min-height: 0;
}

html body header.site nav.main .fq-shot img {
  position: static;
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 560px) {
  html body header.site nav.main .fq-grid {
    grid-template-columns: 1fr;
  }

  html body header.site nav.main .fq-shot {
    display: none;
  }
}

/* 13 top-level items now (FAQs added, the "New" badge on 5G removed): the item spacing is trimmed (.68 -> .60cqi)
   so the last item keeps a clear gap before Sales Request; the text size stays the same. */
@media (min-width: 1011px) {
  html body header.site nav.main > a,
  html body header.site nav.main .has-mega > a {
    padding: 0 min(12px, .60cqi);
  }
}

/* hovering a link nudged it right with padding, which re-wrapped its description and changed the panel height, so
   the picture moved. In this menu the nudge is a transform instead: nothing re-wraps, nothing moves. */
html body header.site nav.main .fq-menu .ab-links a:hover {
  padding-left: 0;
}

html body header.site nav.main .fq-menu .ab-links a b,
html body header.site nav.main .fq-menu .ab-links a span {
  transition: transform .14s, color .14s;
}

html body header.site nav.main .fq-menu .ab-links a:hover b,
html body header.site nav.main .fq-menu .ab-links a:hover span {
  transform: translateX(6px);
}

/* the FAQs item itself is pink, like the FAQ links in the 5G menu (the nav's state rules use !important) */
html body header.site nav.main .has-mega.ab.fq > a,
html body header.site nav.main .has-mega.ab.fq > a:hover,
html body header.site nav.main .has-mega.ab.fq > a:focus,
html body header.site nav.main .has-mega.ab.fq > a:active,
html body header.site nav.main .has-mega.ab.fq:hover > a {
  color: var(--magenta) !important;
}

/* === 2026-10-22 HBE Internet mega menu tidy (Randall: the logo panel was far too big for the logo, too much empty
   space): the logo panel is sized to the logo, not to the logo file's inline 500x312, and the panel is only as tall
   as its three links. === */
html body header.site nav.main .has-mega.hbei .ab-grid {
  grid-template-columns: 180px max-content;
  gap: 18px;
  align-items: center;
}

html body header.site nav.main .has-mega.hbei .ab-shot {
  min-height: 0;
  padding: 16px 14px;
}

html body header.site nav.main .has-mega.hbei .ab-shot img {
  position: relative;
  width: 100% !important;
  height: auto !important;
  max-width: none;
  max-height: none;
}

html body header.site nav.main .has-mega.hbei .mega.ab-menu {
  width: max-content; /* as wide as the logo and the longest link, no empty space at the right */
  max-width: calc(100vw - 32px);
  padding: 16px 16px 16px 18px;
}

html body header.site nav.main .has-mega.hbei .ab-links a {
  padding-top: 8px;
  padding-right: 18px; /* room for the hover arrow only */
  padding-bottom: 8px;
}

@media (max-width: 560px) {
  html body header.site nav.main .has-mega.hbei .ab-grid {
    grid-template-columns: 1fr;
  }

  html body header.site nav.main .has-mega.hbei .ab-shot {
    display: none;
  }
}

/* === 2026-10-22 no breadcrumbs (Randall): the "Home > ..." line at the top left is removed on every page; the menu
   above already shows where you are. Hidden here once instead of page by page (product pages come from hbe_product). === */
html body nav.crumb {
  display: none !important;
}

/* === 2026-10-22 no section labels (Randall): the small pink labels above section headings (.sec-eyebrow, and the
   Quote Request page's .qh-eyebrow) only repeat what the heading or the cards below already say, so they are hidden
   on every page. Kept: the home page (its labels sit on the heading line by design) and the labels that ARE a page's
   title (classes ending in -title: Shop, VoIP Residential, Switches & Routers, 5G & Internet; and on the compact
   category pages, .hbe-compact, where the big heading is hidden and the label starts the intro line). === */
html body main:not(:has(#hero.mag)) .sec-eyebrow:not([class*="-title"]):not(.hbe-compact .sec-eyebrow),
html body main .qh-eyebrow {
  display: none !important;
}

/* === 2026-10-22 VoIP PBX mega menu (Randall): the page's tabs on the left, the VoIP PBX banner picture on the right
   (same build as the FAQs menu). Opens from its trigger's left, like FAQs, since it sits near the left edge. === */
@media (min-width: 1011px) {
  html body header.site nav.main .has-mega.ab.vpm .mega.ab-menu.vpm-menu {
    left: 0;
    width: min(620px, calc(100vw - 32px));
    transform: translateY(-8px);
  }

  html body header.site nav.main .has-mega.ab.vpm:hover .vpm-menu,
  html body header.site nav.main .has-mega.ab.vpm:focus-within .vpm-menu,
  html body header.site nav.main .has-mega.ab.vpm.open .vpm-menu {
    transform: none;
  }
}

html body header.site nav.main .vpm-grid {
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: center;
}

/* the banner picture is wide, so it sits on a light panel the height of the links, centred */
html body header.site nav.main .vpm-shot {
  min-height: 0;
  height: 100%;
  padding: 10px;
  background: radial-gradient(closest-side, #ffffff, #e6eff6);
}

html body header.site nav.main .vpm-shot::after {
  display: none;
}

html body header.site nav.main .vpm-shot img {
  position: static;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* same steady hover as the FAQs menu: the nudge is a transform, so nothing re-wraps */
html body header.site nav.main .vpm-menu .ab-links a:hover {
  padding-left: 0;
}

html body header.site nav.main .vpm-menu .ab-links a b,
html body header.site nav.main .vpm-menu .ab-links a span {
  transition: transform .14s, color .14s;
}

html body header.site nav.main .vpm-menu .ab-links a:hover b,
html body header.site nav.main .vpm-menu .ab-links a:hover span {
  transform: translateX(6px);
}

@media (max-width: 560px) {
  html body header.site nav.main .vpm-grid {
    grid-template-columns: 1fr;
  }

  html body header.site nav.main .vpm-shot {
    display: none;
  }
}

/* the VoIP PBX item now carries a dropdown arrow: item spacing trimmed again (.60 -> .55cqi) to keep the usual gap
   before Sales Request; text size unchanged */
@media (min-width: 1011px) {
  html body header.site nav.main > a,
  html body header.site nav.main .has-mega > a {
    padding: 0 min(12px, .55cqi);
  }
}

/* === 2026-10-22 home section heads, run-in (Randall): for "Everything You Need — One Provider", "Run the whole floor —
   from anywhere" and "HBE's Own — 5G Equipment" the pink label is dropped and the heading, a little smaller, leads
   straight into the intro text, the two together on two centred lines === */
section#why-hbe > .wrap > .center > .sec-eyebrow,
section#softphones > .wrap > .center > .sec-eyebrow,
section#\35 g-hardware > .wrap > .center > .sec-eyebrow {
  display: none !important;
}

section#why-hbe > .wrap > .center,
section#softphones > .wrap > .center,
section#\35 g-hardware > .wrap > .center {
  max-width: 980px;
  margin-inline: auto;
  text-wrap: balance;
}

html body section#why-hbe > .wrap > .center > h2,
html body section#softphones > .wrap > .center > h2,
html body section#\35 g-hardware > .wrap > .center > h2 {
  display: inline;
  margin: 0 .35em 0 0;
  vertical-align: baseline !important; /* the site centres h2 "middle", which lifted the small text off the heading line */
  font-size: clamp(21px, 1.75vw, 25px);
  line-height: 1.5;
}

html body section#why-hbe > .wrap > .center > .intro,
html body section#softphones > .wrap > .center > .intro,
html body section#\35 g-hardware > .wrap > .center > .intro {
  display: inline;
  margin: 0;
  line-height: 1.75;
}

/* Randall: the other big home section headings use the same size as the three run-in ones */
html body main:has(#hero.mag) section#why-switch h2,
html body main:has(#hero.mag) section#phones h2,
html body main:has(#hero.mag) section#videos h2,
html body main:has(#hero.mag) section#sales-request h2 {
  font-size: clamp(21px, 1.75vw, 25px) !important;
  line-height: 1.3 !important;
}

/* Randall 15:58: the 5G carriers band heading and the two Softphones sub-headings take the same look as the section
   headings (serif, extra bold, same size); the band heading stays white on its dark blue; "on video" made as bold */
html body main:has(#hero.mag) section[id="5g-products"] h2,
html body main:has(#hero.mag) section#softphones h3 {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", Georgia, serif !important;
  font-weight: 800 !important;
  font-size: clamp(21px, 1.75vw, 25px) !important;
  letter-spacing: -.015em !important;
  line-height: 1.3 !important;
}
html body main:has(#hero.mag) section#softphones h3 em { color: rgb(179, 0, 107) !important; }
html body main:has(#hero.mag) section#videos h2 { font-weight: 800 !important; }
/* === 2026-10-22 shop grid tighter (Randall): "38 products" count removed; more products to a row with smaller cards,
   so the Shop scrolls less: 5 across from 1340px, 4 from 1110px, 3 from 850px, 2 below (phones). The steps are where a
   card is still wide enough for MSRP, price and Add to Cart on one line. Main Shop listing only
   ([data-shop-grid]); the category pages keep their own grids === */
html body main:has(.sw-list[data-shop-grid]) .shop-count { display: none !important; }

html body .hbe-site .sw-list[data-shop-grid] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 18px !important;
}
@media (min-width: 850px) { html body .hbe-site .sw-list[data-shop-grid] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; } }
@media (min-width: 1110px) { html body .hbe-site .sw-list[data-shop-grid] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (min-width: 1340px) { html body .hbe-site .sw-list[data-shop-grid] { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 16px !important; } }

html body .hbe-site .sw-list[data-shop-grid] .sw-card { padding: 14px !important; border-radius: 16px !important; }
html body .hbe-site .sw-list[data-shop-grid] .sw-card .shot { height: 132px !important; margin-bottom: 10px !important; padding: 8px !important; border-radius: 12px !important; }
html body .hbe-site .sw-list[data-shop-grid] .sw-card .cat { font-size: 13px !important; }
html body .hbe-site .sw-list[data-shop-grid] .sw-card h3 { margin: 4px 0 4px !important; font-size: 16px !important; line-height: 1.28 !important; }
html body .hbe-site .sw-list[data-shop-grid] .sw-card .sku { font-size: 10.5px !important; }
html body .hbe-site .sw-list[data-shop-grid] .sw-card > p { margin: 4px 0 10px !important; font-size: 13.5px !important; line-height: 1.5 !important; min-height: calc(2 * 1.5 * 13.5px) !important; }
html body .hbe-site .sw-list[data-shop-grid] .sw-card > .row { gap: 8px !important; padding-top: 10px !important; flex-wrap: wrap !important; }
html body .hbe-site .sw-list[data-shop-grid] .sw-card .card-price .price { font-size: 17px !important; letter-spacing: -.02em !important; }
html body .hbe-site .sw-list[data-shop-grid] .sw-card .act.viewbtn,
html body .hbe-site .sw-list[data-shop-grid] .sw-card .act.quotebtn { padding: 6px 9px !important; font-size: 11.5px !important; min-width: 0 !important; flex: none !important; white-space: nowrap !important; }

/* phones: two narrow cards, so the price sits above a full-width button */
@media (max-width: 849px) {
  html body .hbe-site .sw-list[data-shop-grid] .sw-card { padding: 10px !important; }
  html body .hbe-site .sw-list[data-shop-grid] .sw-card .shot { height: 110px !important; }
  html body .hbe-site .sw-list[data-shop-grid] .sw-card h3 { font-size: 14.5px !important; }
  html body .hbe-site .sw-list[data-shop-grid] .sw-card > p { font-size: 12.5px !important; min-height: calc(2 * 1.5 * 12.5px) !important; }
  html body .hbe-site .sw-list[data-shop-grid] .sw-card .act.viewbtn,
  html body .hbe-site .sw-list[data-shop-grid] .sw-card .act.quotebtn { flex: 1 1 100% !important; justify-content: center !important; min-width: 0 !important; }
}
/* === 2026-10-22 MSRP on the price line (Randall): the MSRP moves up beside the price instead of taking a line of its
   own, on the product cards (Shop and category grids) and in the product page price block === */

/* product cards: MSRP, price and Add to Cart on one line; sizes come down a little to fit the narrower cards */
html body .sw-card .card-price.has-msrp {
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 10px !important; /* Randall: a little more room between the MSRP and the price */
  white-space: nowrap !important;
  min-width: 0 !important;
}
html body .sw-card .card-price.has-msrp .pricing-msrp {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1px !important;
  margin: 0 !important;
  line-height: 1 !important;
}
html body .sw-card .card-price.has-msrp .pricing-msrp-badge {
  margin: 0 !important;
  padding: 2px 4px !important;
  border-radius: 3px !important;
  font-size: 8px !important;
  letter-spacing: .08em !important;
  vertical-align: 0 !important;
}
html body .sw-card .card-price.has-msrp .pricing-msrp-value { font-size: 10.5px !important; }
html body .sw-card .card-price.has-msrp .price { font-size: 17px !important; letter-spacing: -.02em !important; }
html body .sw-card .card-price.has-msrp { flex: 0 0 auto !important; }
html body .hbe-site .sw-list .sw-card > .row:has(.card-price.has-msrp) { flex-wrap: nowrap !important; gap: 6px !important; }
html body .hbe-site .sw-list .sw-card > .row:has(.card-price.has-msrp) .act { flex: none !important; white-space: nowrap !important; min-width: 0 !important; padding: 6px 9px !important; font-size: 11.5px !important; }
@media (max-width: 849px) {
  html body .hbe-site .sw-list .sw-card > .row:has(.card-price.has-msrp) { flex-wrap: wrap !important; }
  html body .hbe-site .sw-list .sw-card > .row:has(.card-price.has-msrp) .act { flex: 1 1 100% !important; }
}

/* product pages: [MSRP $299.00]  HBE YAKABIT PRICE $279.00 on one line; on a phone the MSRP keeps a short line above */
html body .pricing:has(.pricing-msrp) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  column-gap: 16px !important;
  row-gap: 6px !important;
}
html body .pricing:has(.pricing-msrp) .pricing-msrp { display: inline-block !important; margin: 0 14px 0 0 !important; white-space: nowrap !important; } /* 30px to the price group */
html body .pricing:has(.pricing-msrp) .pricing-msrp-value { font-size: 19px !important; }
html body .pricing:has(.pricing-msrp) .pricing-label { display: inline-block !important; margin: 0 -8px 0 0 !important; }
html body .pricing:has(.pricing-msrp) .pricing-now { display: inline-block !important; }
@media (max-width: 600px) {
  html body .pricing:has(.pricing-msrp) .pricing-msrp { flex-basis: 100% !important; }
  html body .pricing:has(.pricing-msrp) .pricing-msrp-value { font-size: 17px !important; }
}
/* === 2026-10-22 category grids like the Shop (Randall): /business-phone shows its products 5 across like the Shop —
   same steps (5 >=1340px, 4 >=1110, 3 >=850, 2 below), same card sizes, description held to two lines === */
html body .hbe-site .sw-list.cat-business-phone {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 18px !important;
}
@media (min-width: 850px) { html body .hbe-site .sw-list.cat-business-phone { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; } }
@media (min-width: 1110px) { html body .hbe-site .sw-list.cat-business-phone { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (min-width: 1340px) { html body .hbe-site .sw-list.cat-business-phone { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 16px !important; } }

html body .hbe-site .sw-list.cat-business-phone .sw-card { padding: 14px !important; border-radius: 16px !important; }
html body .hbe-site .sw-list.cat-business-phone .sw-card .shot { height: 132px !important; margin-bottom: 10px !important; padding: 8px !important; border-radius: 12px !important; }
html body .hbe-site .sw-list.cat-business-phone .sw-card .cat { font-size: 13px !important; }
html body .hbe-site .sw-list.cat-business-phone .sw-card h3 { margin: 4px 0 4px !important; font-size: 16px !important; line-height: 1.28 !important; }
html body .hbe-site .sw-list.cat-business-phone .sw-card .sku { font-size: 10.5px !important; }
html body .hbe-site .sw-list.cat-business-phone .sw-card > p { margin: 4px 0 10px !important; font-size: 13.5px !important; line-height: 1.5 !important; min-height: calc(2 * 1.5 * 13.5px) !important; }
html body .hbe-site .sw-list.cat-business-phone .sw-card > .row { gap: 8px !important; padding-top: 10px !important; flex-wrap: wrap !important; }
html body .hbe-site .sw-list.cat-business-phone .sw-card .card-price .price { font-size: 17px !important; letter-spacing: -.02em !important; }
html body .hbe-site .sw-list.cat-business-phone .sw-card .act.viewbtn,
html body .hbe-site .sw-list.cat-business-phone .sw-card .act.quotebtn { padding: 6px 9px !important; font-size: 11.5px !important; min-width: 0 !important; flex: none !important; white-space: nowrap !important; }

/* phones: two narrow cards, so the price sits above a full-width button */
@media (max-width: 849px) {
  html body .hbe-site .sw-list.cat-business-phone .sw-card { padding: 10px !important; }
  html body .hbe-site .sw-list.cat-business-phone .sw-card .shot { height: 110px !important; }
  html body .hbe-site .sw-list.cat-business-phone .sw-card h3 { font-size: 14.5px !important; }
  html body .hbe-site .sw-list.cat-business-phone .sw-card > p { font-size: 12.5px !important; min-height: calc(2 * 1.5 * 12.5px) !important; }
  html body .hbe-site .sw-list.cat-business-phone .sw-card .act.viewbtn,
  html body .hbe-site .sw-list.cat-business-phone .sw-card .act.quotebtn { flex: 1 1 100% !important; justify-content: center !important; min-width: 0 !important; }
}

/* this page's cards carry their own price span (inline 22px) and a "View product" link instead of Add to Cart */
html body .hbe-site .sw-list.cat-business-phone .sw-card .sw-price { font-size: 17px !important; letter-spacing: -.02em !important; white-space: nowrap !important; }
html body .hbe-site .sw-list.cat-business-phone .sw-card .viewbtn { flex: none !important; white-space: nowrap !important; }
html body .hbe-site .sw-list.cat-business-phone .sw-card > p {
  display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
}
html body .hbe-site .sw-list.cat-business-phone .sw-card > .row { margin-top: auto !important; }
@media (max-width: 849px) {
  html body .hbe-site .sw-list.cat-business-phone .sw-card .viewbtn { flex: 1 1 100% !important; justify-content: center !important; }
}
/* === 2026-10-22 T85W office picture, write-up height (Randall): on /t85w-ultra-business-phone the last picture (the man
   on the phone) is exactly as tall as the "Yealink SIP Phone T85W" write-up beside it. The write-up sets the row height,
   the picture fills it at its own proportions (about 530px wide), and the pair is centred. One column below 1101px, as
   before === */
@media (min-width: 1101px) {
  html body main:has(img[src*="/t85w/office.jpg"]) .sum-grid {
    grid-template-columns: minmax(0, 530px) minmax(0, 520px) !important;
    align-items: stretch !important;
  }
  html body main:has(img[src*="/t85w/office.jpg"]) .sum-grid > img {
    height: 0 !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 40% !important;
  }
  html body main:has(img[src*="/t85w/office.jpg"]) .sum-grid > .sum-copy { align-self: center !important; }
}

/* Randall: less space under the first section (desk phone picture) and above/below the second (office picture): both
   now use the first section's own top spacing, 48px on a desktop, stepping down with the screen as before */
html body main:has(img[src*="/t85w/office.jpg"]) .yband:has(> .desc-grid) { padding-bottom: clamp(32px, 3.4vw, 48px) !important; }
html body main:has(img[src*="/t85w/office.jpg"]) .yband:has(> .sum-grid) { padding-top: clamp(32px, 3.4vw, 48px) !important; padding-bottom: clamp(32px, 3.4vw, 48px) !important; }
/* === 2026-10-22 T85W tabs tightened (Randall): Key Features, Specifications and Data Sheet on /t85w-ultra-business-phone
   had a lot of dead space. Bands get the Description tab's 48px top/bottom (less on smaller screens), the big gaps between
   headings, pictures and grids come down, and the spec table rows are tighter with long lists in two columns === */
html body main:has(img[src*="/t85w/office.jpg"]) :is(#panel-features, #panel-specs, #panel-datasheet) .yband {
  padding-top: clamp(32px, 3.4vw, 48px) !important;
  padding-bottom: clamp(32px, 3.4vw, 48px) !important;
}

/* Key Features */
html body main:has(img[src*="/t85w/office.jpg"]) #panel-features .kf-list { margin-top: 24px !important; }
html body main:has(img[src*="/t85w/office.jpg"]) #panel-features .yart { margin-top: 28px !important; }
html body main:has(img[src*="/t85w/office.jpg"]) #panel-features .sec-intro { gap: 32px !important; }
html body main:has(img[src*="/t85w/office.jpg"]) #panel-features .rings-head { margin: 40px 0 26px !important; }
html body main:has(img[src*="/t85w/office.jpg"]) #panel-features .ring-grid { gap: 32px !important; }
html body main:has(img[src*="/t85w/office.jpg"]) #panel-features .clean-grid { margin-top: 32px !important; gap: 44px !important; }
html body main:has(img[src*="/t85w/office.jpg"]) #panel-features .benefit-grid { margin-top: 28px !important; row-gap: 28px !important; }

/* Specifications */
html body main:has(img[src*="/t85w/office.jpg"]) #panel-specs .spec-wrap { margin-top: 20px !important; }
html body main:has(img[src*="/t85w/office.jpg"]) #panel-specs table.spec caption { padding: 12px 16px !important; }
html body main:has(img[src*="/t85w/office.jpg"]) #panel-specs table.spec th,
html body main:has(img[src*="/t85w/office.jpg"]) #panel-specs table.spec td { padding: 10px 16px !important; }
html body main:has(img[src*="/t85w/office.jpg"]) #panel-specs .speclist li { margin: 1px 0 !important; }
@media (min-width: 1000px) {
  html body main:has(img[src*="/t85w/office.jpg"]) #panel-specs td > .speclist { columns: 2 !important; column-gap: 40px !important; }
  html body main:has(img[src*="/t85w/office.jpg"]) #panel-specs td > .speclist > li { break-inside: avoid !important; }
}

/* Data Sheet */
html body main:has(img[src*="/t85w/office.jpg"]) #panel-datasheet .ds-actions { margin: 14px 0 16px !important; }
/* Randall: no empty space under the file box — it ends under its own text and download button (was 860px tall) */
html body main:has(img[src*="/t85w/office.jpg"]) #panel-datasheet .ds-frame { height: auto !important; min-height: 0 !important; }
html body main:has(img[src*="/t85w/office.jpg"]) #panel-datasheet .ds-frame object { height: auto !important; min-height: 0 !important; display: block !important; }
/* === 2026-10-22 EXP55 page layout + data sheet tabs (Randall) ===
   EXP55 only (main:has an /img/exp55/ picture): 1) top section narrower so the picture sits beside the text without the
   empty band around it; 2) Description: the "Key Features and Benefits" box under the picture is removed and the space it
   left goes, minimum padding at the bottom; 3) Key Features: "Key features and benefits" beside the picture at the top;
   4) the three feature boxes in one row, three across.
   All product pages: 5/6) the data sheet box ends under its own text and download button (it was 860px tall and empty),
   and the Data Sheet / Downloads / Resources tabs keep only minimum padding at the bottom. */

/* 1 — top section */
@media (min-width: 900px) {
  html body main:has(img[src*="/img/exp55/"]) .phero .phero-grid {
    max-width: 1180px !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px) !important;
    gap: 48px !important;
    align-items: center !important;
  }
}
html body main:has(img[src*="/img/exp55/"]) .phero { padding-top: clamp(32px, 3.4vw, 48px) !important; padding-bottom: clamp(32px, 3.4vw, 48px) !important; }

/* 2 — Description tab */
html body main:has(img[src*="/img/exp55/"]) #panel-description .desc-grid .benefits { display: none !important; }
html body main:has(img[src*="/img/exp55/"]) #panel-description .yband { padding-bottom: 32px !important; }

/* 3, 4 — Key Features tab */
html body main:has(img[src*="/img/exp55/"]) #panel-features .yband { padding-bottom: 32px !important; }
@media (min-width: 900px) {
  html body main:has(img[src*="/img/exp55/"]) #panel-features .yband > .wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas: "head head" "shot box" "bands bands" !important;
    column-gap: 40px !important;
    align-items: center !important;
  }
  html body main:has(img[src*="/img/exp55/"]) #panel-features .yhead { grid-area: head !important; justify-self: center !important; }
  html body main:has(img[src*="/img/exp55/"]) #panel-features .featshot { grid-area: shot !important; margin-top: 28px !important; }
  html body main:has(img[src*="/img/exp55/"]) #panel-features .compat-box { grid-area: box !important; margin-top: 28px !important; }
  html body main:has(img[src*="/img/exp55/"]) #panel-features .fband-grid {
    grid-area: bands !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
    margin-top: 32px !important;
    align-items: stretch !important;
  }
}
html body main:has(img[src*="/img/exp55/"]) #panel-features .fband { padding: 22px !important; }

/* 5, 6 — data sheet box and the bottom of the data tabs, every product page */
html body .ppanel#panel-datasheet .ds-frame { height: auto !important; min-height: 0 !important; }
html body .ppanel#panel-datasheet .ds-frame object { height: auto !important; min-height: 0 !important; display: block !important; }
html body .ppanel:is(#panel-datasheet, #panel-downloads, #panel-resources) > .yband:last-child,
html body .ppanel:is(#panel-datasheet, #panel-downloads, #panel-resources) > section:last-child { padding-bottom: clamp(32px, 3.4vw, 48px) !important; }
/* === 2026-10-22 phone product headings like the home page (Randall) === on the phone and phone-accessory product pages
   (T85W, EXP55, W73P, W73H, W77P, Softphone, WF50, WF40, GEN-PSU, YEA-PS5V600US, BH74) every section heading takes the
   home page's heading: the bold serif at 25px (21px on small screens). Where a heading has one write-up under it, the
   heading runs straight into it, as on the home page; the Description tab's headings, followed by several paragraphs, keep
   their own line. One or two words per heading are in the two colours of the chatting heads in the logo: pink #eb008b italic (<em>) or
   blue #0076af (.hb). The product
   title at the top is not changed. */
html body main:has(:is([data-tmpl-id="7"], img[src*="/t85w/office.jpg"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"], [data-tmpl-id="11"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"], [data-tmpl-id="17"])) :is(.ppanel, section:not(.phero):not(.cpe-hero)) h2 {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", Georgia, serif !important;
  font-weight: 800 !important;
  font-size: clamp(21px, 1.75vw, 25px) !important;
  line-height: 1.35 !important;
  letter-spacing: -.015em !important;
  text-transform: none !important;
}
html body main:has(:is([data-tmpl-id="7"], img[src*="/t85w/office.jpg"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"], [data-tmpl-id="11"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"], [data-tmpl-id="17"])) :is(.ppanel, section:not(.phero):not(.cpe-hero)) h2 em {
  color: #eb008b !important; font-style: italic !important;
}
html body main:has(:is([data-tmpl-id="7"], img[src*="/t85w/office.jpg"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"], [data-tmpl-id="11"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"], [data-tmpl-id="17"])) :is(.ppanel, section:not(.phero):not(.cpe-hero)) h2 .hb {
  color: #0076af !important;
}
html body main:has(:is([data-tmpl-id="7"], img[src*="/t85w/office.jpg"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"], [data-tmpl-id="11"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"], [data-tmpl-id="17"])) .dark h2 em { color: #eb008b !important; }
html body main:has(:is([data-tmpl-id="7"], img[src*="/t85w/office.jpg"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"], [data-tmpl-id="11"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"], [data-tmpl-id="17"])) .dark h2 .hb { color: #0076af !important; }

/* run-in: a heading with exactly one paragraph after it (not on the Description tab) */
html body main:has(:is([data-tmpl-id="7"], img[src*="/t85w/office.jpg"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"], [data-tmpl-id="11"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"], [data-tmpl-id="17"])) :is(.ppanel:not(#panel-description), section:not(.phero):not(.cpe-hero)) h2:has(+ p):not(:has(+ p + p)):not(#panel-description h2) {
  display: inline !important;
  margin: 0 .35em 0 0 !important;
  vertical-align: baseline !important;
}
html body main:has(:is([data-tmpl-id="7"], img[src*="/t85w/office.jpg"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"], [data-tmpl-id="11"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"], [data-tmpl-id="17"])) :is(.ppanel:not(#panel-description), section:not(.phero):not(.cpe-hero)) h2:has(+ p):not(:has(+ p + p)):not(#panel-description h2) + p {
  display: inline !important;
  margin: 0 !important;
  line-height: 1.75 !important;
}
html body main:has(:is([data-tmpl-id="7"], img[src*="/t85w/office.jpg"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"], [data-tmpl-id="11"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"], [data-tmpl-id="17"])) :is(.ppanel:not(#panel-description), section:not(.phero):not(.cpe-hero)) :has(> h2 + p) {
  text-wrap: balance;
}
/* the Softphone page's closing band is the logo blue itself: its heading stays all white there, so it reads */
html body main:has([data-tmpl-id="12"]) section.cd-cta.cd-cta h2 :is(em, .hb) { color: inherit !important; }
/* === 2026-10-22 Home Phone top section (Randall) === /home-phone: heading in the business-phone style — "VoIP
   Residential" in the bold serif with "home phone from HBE Yakabit" running on in smaller text; one write-up; the price
   card compact with no dead space; the section narrower and shorter, with less padding all round === */
html body .hphero { padding-top: clamp(24px, 2.6vw, 36px) !important; padding-bottom: clamp(24px, 2.6vw, 36px) !important; }
html body .hphero .hphero-grid {
  max-width: 1060px !important;
  margin-inline: auto !important;
  grid-template-columns: minmax(0, 1fr) 330px !important;
  gap: 40px !important;
  align-items: center !important;
}
html body .hphero .hp-headline { display: block !important; text-wrap: balance; }
html body .hphero .hp-headline h1.hphero-title {
  display: inline !important;
  max-width: none !important;
  margin: 0 .35em 0 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", Georgia, serif !important;
  font-weight: 800 !important;
  font-size: clamp(21px, 1.75vw, 25px) !important;
  line-height: 1.35 !important;
  letter-spacing: -.015em !important;
  text-transform: none !important;
  color: var(--ink) !important;
  vertical-align: baseline !important;
}
html body .hphero .hp-headline h1.hphero-title::before { content: none !important; display: none !important; }
html body .hphero .hp-headline h1.hphero-title em { color: #eb008b !important; font-style: italic !important; }
html body .hphero .hp-headline .kicker {
  display: inline !important;
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink-soft) !important;
}
html body .hphero .hp-headline + p { margin: 10px 0 0 !important; max-width: none !important; font-size: 17px !important; line-height: 1.65 !important; }

/* price card: no dead space */
html body .hphero .price-card { padding: 16px 20px !important; border-radius: 16px !important; align-self: center !important; }
html body .hphero .price-card .from { font-size: 11px !important; }
html body .hphero .price-card .amt { margin: 4px 0 2px !important; font-size: 40px !important; }
html body .hphero .price-card .per { font-size: 13.5px !important; line-height: 1.4 !important; display: block !important; }
html body .hphero .price-card hr { margin: 10px 0 !important; }
html body .hphero .price-card .alt-amt { font-size: 20px !important; }
html body .hphero .price-card .note { margin: 2px 0 0 !important; font-size: 12.5px !important; line-height: 1.45 !important; }
@media (max-width: 1100px) {
  html body .hphero .hphero-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  html body .hphero .price-card { justify-self: center !important; width: 100% !important; max-width: 340px !important; }
}
/* === 2026-10-22 Home Phone plan section (Randall) === "What's in the plan": the heading runs into its line of text, as
   the standard section heading; eight equal boxes, 4 across in 2 rows (2 across on tablets, 1 on phones); less padding */
html body #plan.band { padding-top: clamp(28px, 3vw, 44px) !important; padding-bottom: clamp(28px, 3vw, 44px) !important; }
html body #plan .band-head { max-width: none !important; }
html body #plan .band-head h2 {
  display: inline !important;
  margin: 0 .35em 0 0 !important;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", Georgia, serif !important;
  font-weight: 800 !important;
  font-size: clamp(21px, 1.75vw, 25px) !important;
  line-height: 1.35 !important;
  letter-spacing: -.015em !important;
  vertical-align: baseline !important;
}
html body #plan .band-head h2 em { color: #eb008b !important; font-style: italic !important; }
html body #plan .band-head h2 + p { display: inline !important; margin: 0 !important; line-height: 1.75 !important; }
html body #plan ul.plan-points {
  margin-top: 20px !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
html body #plan ul.plan-points { grid-auto-rows: 1fr !important; }  /* every box the same height */
/* the icon sits beside the title and the text uses the whole box width, so the boxes stay short */
html body #plan ul.plan-points li {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-content: start !important;
  align-items: center !important;
  gap: 8px 10px !important;
  padding: 14px 12px !important;
  border-radius: 14px !important;
}
html body #plan ul.plan-points li > div { display: contents !important; }
html body #plan ul.plan-points li p { grid-column: 1 / -1 !important; }
html body #plan .pp-ico { width: 26px !important; height: 26px !important; border-radius: 8px !important; }
html body #plan .pp-ico svg { width: 15px !important; height: 15px !important; }
html body #plan ul.plan-points b.pp-title { margin: 0 !important; font-size: 14px !important; }  /* Randall: shorter boxes */
html body #plan ul.plan-points p { font-size: 14px !important; line-height: 1.55 !important; }
@media (max-width: 1100px) { html body #plan ul.plan-points { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) { html body #plan ul.plan-points { grid-template-columns: 1fr !important; grid-auto-rows: auto !important; } }
/* === 2026-10-22 Home Phone phones section (Randall) === "The phones": heading runs into its line, as the standard
   section heading; each phone card has a white picture panel down its left side with the phone centred and larger,
   the details beside it, both cards the same height; less padding all round === */
html body #phones.band { padding-top: clamp(28px, 3vw, 44px) !important; padding-bottom: 20px !important; }  /* Randall: no dead space at the bottom */
html body #phones .band-head { max-width: none !important; }
html body #phones .band-head h2 {
  display: inline !important;
  margin: 0 .35em 0 0 !important;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", Georgia, serif !important;
  font-weight: 800 !important;
  font-size: clamp(21px, 1.75vw, 25px) !important;
  line-height: 1.35 !important;
  letter-spacing: -.015em !important;
  vertical-align: baseline !important;
}
html body #phones .band-head h2 em { color: #eb008b !important; font-style: italic !important; }
html body #phones .band-head h2 + p { display: inline !important; margin: 0 !important; line-height: 1.75 !important; }

html body #phones .phone-grid { margin-top: 20px !important; gap: 20px !important; align-items: stretch !important; }
html body #phones .phone-card {
  grid-template-columns: 300px minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  align-items: stretch !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}
html body #phones .phone-shot {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  box-sizing: border-box !important;
  padding: 14px 12px !important;  /* even both sides: the phone sits in the middle of its area */
  background: transparent !important;  /* Randall: see-through pictures, no white panel */
  border: 0 !important;
  border-radius: 0 !important;
}
html body #phones .phone-shot img { width: auto !important; max-width: 100% !important; height: auto !important; max-height: 320px !important; object-fit: contain !important; }
html body #phones .phone-body { padding: 18px 22px !important; display: flex !important; flex-direction: column !important; }
html body #phones .phone-body h3 { margin: 4px 0 6px !important; font-size: 20px !important; }
html body #phones .phone-body > p { margin: 0 0 8px !important; font-size: 14.5px !important; line-height: 1.55 !important; }
html body #phones .phone-body ul { font-size: 14px !important; line-height: 1.55 !important; }
html body #phones .phone-cta { margin-top: auto !important; padding-top: 12px !important; }
html body #phones .srcline { margin-top: 12px !important; padding-top: 8px !important; }
@media (max-width: 620px) {
  html body #phones .phone-card { grid-template-columns: 1fr !important; }
  html body #phones .phone-shot { max-width: none !important; height: 240px !important; padding: 14px !important; }
  html body #phones .phone-shot img { max-height: 220px !important; }
}
/* === 2026-10-22 Home Phone menu pictures (Randall) === the Home Phone mega menu shows the W73P and W73H as Yealink
   cut-outs, larger and sharp (they were small blurry thumbnails) === */
html body header.site .has-mega.hp .mega .mm-thumb { width: 128px !important; padding: 8px 8px 10px !important; gap: 6px !important; background: #fff !important; }
html body header.site .has-mega.hp .mega .mm-thumb img { max-height: 112px !important; height: 112px !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; mix-blend-mode: normal !important; }
/* === 2026-10-22 W73P Key Features (Randall) === the W73P and W73H pages (Business Phone and Home Phone) show only
   their top Key Features list (13 / 6), each with the green round check bullet used on the FAQ pages; minimum space under them === */
html body main:has(:is([data-tmpl-id="9"], [data-tmpl-id="10"])) #panel-features .kf-list svg {
  box-sizing: border-box !important;
  width: 22px !important;
  height: 22px !important;
  flex: none !important;
  margin-top: 1px !important;
  padding: 4px !important;
  border-radius: 50% !important;
  color: var(--good-ink, #11683f) !important;
  background: color-mix(in srgb, var(--good, #1f9d55) 20%, transparent) !important;
  stroke-width: 3 !important;
}
html body main:has(:is([data-tmpl-id="9"], [data-tmpl-id="10"])) #panel-features .kf-list li { gap: 10px !important; align-items: flex-start !important; }
html body main:has(:is([data-tmpl-id="9"], [data-tmpl-id="10"])) #panel-features > .yband:last-child { padding-bottom: clamp(32px, 3.4vw, 48px) !important; }
/* === 2026-10-23 5G outdoor router hero (Randall): 8 thumbnails under the big picture, the 6 feature chips on one line,
   bigger "Choose your 5G Service Package" (not bold; Required stays bold), "Continental U.S. Only" on the Buy Now line === */
main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero ul.gal-thumbs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; overflow: visible; padding-bottom: 0; }
main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero ul.gal-thumbs li { flex: none; min-width: 0; }
main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero ul.gal-thumbs button { padding: 2px; border-radius: 9px; }
main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero ul.gal-thumbs img { border-radius: 7px; }
main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .chips { flex-wrap: nowrap; gap: 5px; }
main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .chips li { padding: 6px 9px; font-size: 12px; white-space: nowrap; }
main:has(.buybtn[data-tmpl-id="19"]) .svc-pick label { font-size: 17px; font-weight: 400; }
main:has(.buybtn[data-tmpl-id="19"]) .svc-pick .req { font-size: 13px; font-weight: 800; }
main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .buy-row { display: inline-flex; vertical-align: middle; }
main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .us-badge { display: inline-flex; vertical-align: middle; margin: 16px 0 0 14px; }
@media (min-width: 1025px) and (max-width: 1340px) {
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .chips { gap: 4px; }
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .chips li { padding: 5px 7px; font-size: 11px; }
}
@media (min-width: 1025px) and (max-width: 1200px) {
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .chips li { padding: 5px 5px; font-size: 10.5px; }
}
@media (max-width: 640px) {
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero ul.gal-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .chips { flex-wrap: wrap; }
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .buy-row { align-items: center; }
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .buy-row .hbe-add { margin-top: 0; }
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .us-badge { margin-left: 0; }
}
/* page title "HBE-5G Dual SIM Router": a little smaller, SIM pink italic (logo pink) */
main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero h1.r5g-title { font-size: 32px; }
main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero h1.r5g-title em { font-style: italic; color: #eb008b; }
@media (max-width: 640px) { main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero h1.r5g-title { font-size: 26px; } }
/* write-up column tightened to the height of the picture + thumbnails (desktop): only the gaps between items */
@media (min-width: 1025px) {
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .cpe-copy .model { margin-top: 8px; }
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .cpe-copy .pricing { margin-top: 10px; margin-bottom: 0; }
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .cpe-copy .ov { margin-top: 14px; }
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .cpe-copy .ov h2 { margin-bottom: 8px; }
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .cpe-copy .ov p { margin-bottom: 8px; }
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .cpe-copy .ov p:last-child { margin-bottom: 0; }
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .cpe-copy .chips { margin-top: 12px; }
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .cpe-copy .svc-pick { margin-top: 12px; }
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .cpe-copy .svc-pick label { margin-bottom: 5px; }
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .cpe-copy .svc-pick select { padding-top: 9px; padding-bottom: 9px; }
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .cpe-copy .svc-pick-compare { margin-top: 6px; }
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .cpe-copy .buy-row,
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .cpe-copy .us-badge { margin-top: 10px; }
}
/* when the write-up is shorter than picture + thumbnails (other fonts / screens), share the leftover space evenly between
   the items so Buy Now / Add to Cart / Continental U.S. Only always end level with the thumbnails */
@media (min-width: 1025px) {
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .cpe-copy { display: grid; grid-template-columns: auto 1fr; align-content: space-between; }
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .cpe-copy > * { grid-column: 1 / -1; min-width: 0; }
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .cpe-copy > .buy-row { grid-column: 1; }
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .cpe-copy > .us-badge { grid-column: 2; justify-self: start; align-self: end; }
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .cpe-copy > .model { justify-self: start; }
}
/* === 2026-10-23 5G outdoor router At a glance tab (Randall): heading one line 32px with HBE-5G blue, section headings blue,
   wider "At a glance" box (no wrapped lines on desktop), write-up and box the same height === */
main:has(.buybtn[data-tmpl-id="19"]) .ppanel .band-head { max-width: none; }
main:has(.buybtn[data-tmpl-id="19"]) .ppanel .band-head h2 { font-size: 32px; white-space: nowrap; }
main:has(.buybtn[data-tmpl-id="19"]) .ppanel .band-head h2 .nowrap { color: #0076af; }
main:has(.buybtn[data-tmpl-id="19"]) .p-desc .prose h3 { color: #0076af; }
/* tight gaps on both sides; both sides end on the same line: the shorter side shares out the difference
   (between the 3 sections on the left, between the rows in the box) - widths chosen so the difference is small */
main:has(.buybtn[data-tmpl-id="19"]) .p-desc .prose { align-self: stretch; display: flex; flex-direction: column; }
main:has(.buybtn[data-tmpl-id="19"]) .p-desc .prose p { margin-bottom: 0; }
main:has(.buybtn[data-tmpl-id="19"]) .p-desc .prose h3:not(:first-child) { margin-top: auto; padding-top: 16px; }
main:has(.buybtn[data-tmpl-id="19"]) .p-desc .p-glance { align-self: stretch; display: flex; flex-direction: column; padding: 20px 26px 22px; }
main:has(.buybtn[data-tmpl-id="19"]) .p-glance h3 { margin-bottom: 10px; }
main:has(.buybtn[data-tmpl-id="19"]) .p-glance dl { flex: 1 1 auto; display: flex; flex-direction: column; }
main:has(.buybtn[data-tmpl-id="19"]) .p-glance dl > div { flex: 1 1 auto; align-items: center; padding: 5px 0; }
main:has(.buybtn[data-tmpl-id="19"]) .p-glance dl > div:first-child { padding-top: 0; }
main:has(.buybtn[data-tmpl-id="19"]) .p-glance dl > div:last-child { padding-bottom: 0; }
@media (min-width: 1240px) {
  main:has(.buybtn[data-tmpl-id="19"]) .p-desc { grid-template-columns: minmax(0, 1fr) 620px; }
  main:has(.buybtn[data-tmpl-id="19"]) .p-glance dd { white-space: nowrap; }
  main:has(.buybtn[data-tmpl-id="19"]) .p-glance dl > div:nth-child(4) dd { white-space: normal; }
}
@media (min-width: 1340px) {
  main:has(.buybtn[data-tmpl-id="19"]) .p-desc { grid-template-columns: minmax(0, 1fr) 700px; }
}
@media (min-width: 861px) and (max-width: 1239px) {
  main:has(.buybtn[data-tmpl-id="19"]) .p-desc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  main:has(.buybtn[data-tmpl-id="19"]) .ppanel .band-head h2 { font-size: 26px; white-space: normal; }
}
/* less space under the top section, under the tab row, and at the top/bottom of the tab card (all tabs) */
main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero { padding-bottom: 28px; }
main:has(.buybtn[data-tmpl-id="19"]) .ppanel .yband { padding-top: 16px; }
main:has(.buybtn[data-tmpl-id="19"]) .ppanel .pcard { padding-top: 30px; padding-bottom: 30px; }
@media (max-width: 640px) {
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero { padding-bottom: 20px; }
  main:has(.buybtn[data-tmpl-id="19"]) .ppanel .yband { padding-top: 14px; }
  main:has(.buybtn[data-tmpl-id="19"]) .ppanel .pcard { padding-top: 20px; padding-bottom: 20px; }
}
/* coloured words in headings are always italic (Randall); "features" in Customer / Tech features blue italic */
main:has(.buybtn[data-tmpl-id="19"]) .ppanel .band-head h2 .nowrap,
main:has(.buybtn[data-tmpl-id="19"]) .ppanel h2 em.r5g-blue { color: #0076af; font-style: italic; }
/* price smaller (was 40px, bigger than the page title) */
main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .pricing-now { font-size: 28px; }
@media (max-width: 640px) { main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .pricing-now { font-size: 24px; } }
/* "Optional add-ons" under the service package picker: one compact line per antenna */
main:has(.buybtn[data-tmpl-id="19"]) .r5g-addons { margin-top: 10px; border: 1px solid var(--line, #e3dfd6); border-radius: 12px; background: #fff; padding: 8px 12px; }
main:has(.buybtn[data-tmpl-id="19"]) .r5g-addons-title { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #0076af; }
main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 14px; }
main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon + .r5g-addon { border-top: 1px solid var(--line, #e3dfd6); }
main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon input[type="checkbox"] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: #0076af; cursor: pointer; }
main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon img { width: 30px; height: 30px; object-fit: contain; flex: none; border-radius: 6px; background: #fff; }
main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon-name { font-weight: 700; color: #1d2328; cursor: pointer; margin: 0; white-space: nowrap; }
main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon-name span { font-weight: 400; color: #5b646c; }
main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon-more { font-size: 12.5px; color: #0076af; white-space: nowrap; }
main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon-qty { margin-left: auto; font-size: 13px; color: #5b646c; white-space: nowrap; }
main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon-qty select { margin-left: 4px; padding: 2px 4px; font-size: 13px; border: 1px solid var(--line, #d6d1c6); border-radius: 6px; background: #fff; }
main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon-price { font-weight: 800; color: #0076af; white-space: nowrap; min-width: 112px; text-align: right; }
main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon-qty + .r5g-addon-price { margin-left: 0; }
main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon-more + .r5g-addon-price { margin-left: auto; }
main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon-price span { font-weight: 400; font-size: 12px; color: #5b646c; }
@media (max-width: 640px) {
  main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon { flex-wrap: wrap; row-gap: 2px; }
  main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon-price { min-width: 0; }
}
/* with the add-ons the write-up is taller: compact add-ons box; on desktop the picture side is wider (bigger picture) and
   the white picture frame takes up any small difference, so the thumbnails still end level with the buttons */
main:has(.buybtn[data-tmpl-id="19"]) .r5g-addons { margin-top: 8px; padding: 5px 12px; }
main:has(.buybtn[data-tmpl-id="19"]) .r5g-addons-title { margin: 0; font-size: 11px; line-height: 16px; }
main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon { padding: 2px 0; }
main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon img { width: 26px; height: 26px; }
@media (min-width: 1340px) {
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .gallery { align-self: stretch; }
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .gal-main { flex: 1 0 auto; }
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .gal-main img { height: 100%; }
}
/* chips and add-on lines scale with the width of the write-up column so they always stay on one line inside it */
@media (min-width: 1025px) {
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .cpe-copy { container-type: inline-size; }
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .chips { gap: min(5px, .8cqi); }
  main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .chips li { font-size: min(12px, 2cqi); padding: 6px min(9px, 1.2cqi); }
  main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon { font-size: min(14px, 2.45cqi); gap: min(10px, 1.6cqi); }
  main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon-more,
  main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon-qty,
  main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon-qty select { font-size: min(13px, 2.25cqi); }
  main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon-price { min-width: min(112px, 19cqi); }
}
@media (max-width: 1239px) { main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon { flex-wrap: wrap; row-gap: 2px; } }
/* Overview: the opening words of each paragraph blue italic */
main:has(.buybtn[data-tmpl-id="19"]) .cpe-hero .ov em.r5g-blue { color: #0076af; font-style: italic; }
/* "Choose your 5G Service Package" blue, not italic (Required keeps its own colour) */
main:has(.buybtn[data-tmpl-id="19"]) .svc-pick label { color: #0076af; font-style: normal; }
/* less empty space under the tab card, before the footer (84 -> 32px, like the 4x4 MIMO page) */
main:has(.buybtn[data-tmpl-id="19"]) .ppanel .yband { padding-bottom: 32px; }

/* === 2026-10-23 main menu "5G" pink like FAQs (Randall) === */
html body header.site nav.main > .has-mega > a[href="/5g-internet"],
html body header.site nav.main > .has-mega > a[href="/5g-internet"]:hover,
html body header.site nav.main > .has-mega > a[href="/5g-internet"]:focus,
html body header.site nav.main > .has-mega > a[href="/5g-internet"]:active,
html body header.site nav.main > .has-mega:hover > a[href="/5g-internet"] {
  color: var(--magenta) !important;
}
/* === 2026-10-23 5G indoor router page (Randall): same as the outdoor router page (copied, tmpl 20, no antenna add-ons): 8 thumbnails under the big picture, the 6 feature chips on one line,
   bigger "Choose your 5G Service Package" (not bold; Required stays bold), "Continental U.S. Only" on the Buy Now line === */
main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero ul.gal-thumbs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; overflow: visible; padding-bottom: 0; }
main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero ul.gal-thumbs li { flex: none; min-width: 0; }
main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero ul.gal-thumbs button { padding: 2px; border-radius: 9px; }
main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero ul.gal-thumbs img { border-radius: 7px; }
main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .chips { flex-wrap: nowrap; gap: 5px; }
main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .chips li { padding: 6px 9px; font-size: 12px; white-space: nowrap; }
main:has(.buybtn[data-tmpl-id="20"]) .svc-pick label { font-size: 17px; font-weight: 400; }
main:has(.buybtn[data-tmpl-id="20"]) .svc-pick .req { font-size: 13px; font-weight: 800; }
main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .buy-row { display: inline-flex; vertical-align: middle; }
main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .us-badge { display: inline-flex; vertical-align: middle; margin: 16px 0 0 14px; }
@media (min-width: 1025px) and (max-width: 1340px) {
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .chips { gap: 4px; }
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .chips li { padding: 5px 7px; font-size: 11px; }
}
@media (min-width: 1025px) and (max-width: 1200px) {
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .chips li { padding: 5px 5px; font-size: 10.5px; }
}
@media (max-width: 640px) {
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero ul.gal-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .chips { flex-wrap: wrap; }
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .buy-row { align-items: center; }
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .buy-row .hbe-add { margin-top: 0; }
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .us-badge { margin-left: 0; }
}
/* page title "HBE-5G Dual SIM Router": a little smaller, SIM pink italic (logo pink) */
main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero h1.r5g-title { font-size: 32px; }
main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero h1.r5g-title em { font-style: italic; color: #eb008b; }
@media (max-width: 640px) { main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero h1.r5g-title { font-size: 26px; } }
/* write-up column tightened to the height of the picture + thumbnails (desktop): only the gaps between items */
@media (min-width: 1025px) {
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .cpe-copy .model { margin-top: 8px; }
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .cpe-copy .pricing { margin-top: 10px; margin-bottom: 0; }
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .cpe-copy .ov { margin-top: 14px; }
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .cpe-copy .ov h2 { margin-bottom: 8px; }
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .cpe-copy .ov p { margin-bottom: 8px; }
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .cpe-copy .ov p:last-child { margin-bottom: 0; }
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .cpe-copy .chips { margin-top: 12px; }
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .cpe-copy .svc-pick { margin-top: 12px; }
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .cpe-copy .svc-pick label { margin-bottom: 5px; }
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .cpe-copy .svc-pick select { padding-top: 9px; padding-bottom: 9px; }
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .cpe-copy .svc-pick-compare { margin-top: 6px; }
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .cpe-copy .buy-row,
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .cpe-copy .us-badge { margin-top: 10px; }
}
/* when the write-up is shorter than picture + thumbnails (other fonts / screens), share the leftover space evenly between
   the items so Buy Now / Add to Cart / Continental U.S. Only always end level with the thumbnails */
@media (min-width: 1025px) {
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .cpe-copy { display: grid; grid-template-columns: auto 1fr; align-content: space-between; }
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .cpe-copy > * { grid-column: 1 / -1; min-width: 0; }
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .cpe-copy > .buy-row { grid-column: 1; }
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .cpe-copy > .us-badge { grid-column: 2; justify-self: start; align-self: end; }
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .cpe-copy > .model { justify-self: start; }
}
/* === 2026-10-23 5G outdoor router At a glance tab (Randall): heading one line 32px with HBE-5G blue, section headings blue,
   wider "At a glance" box (no wrapped lines on desktop), write-up and box the same height === */
main:has(.buybtn[data-tmpl-id="20"]) .ppanel .band-head { max-width: none; }
main:has(.buybtn[data-tmpl-id="20"]) .ppanel .band-head h2 { font-size: 32px; white-space: nowrap; }
main:has(.buybtn[data-tmpl-id="20"]) .ppanel .band-head h2 .nowrap { color: #0076af; }
main:has(.buybtn[data-tmpl-id="20"]) .p-desc .prose h3 { color: #0076af; }
/* tight gaps on both sides; both sides end on the same line: the shorter side shares out the difference
   (between the 3 sections on the left, between the rows in the box) - widths chosen so the difference is small */
main:has(.buybtn[data-tmpl-id="20"]) .p-desc .prose { align-self: stretch; display: flex; flex-direction: column; }
main:has(.buybtn[data-tmpl-id="20"]) .p-desc .prose p { margin-bottom: 0; }
main:has(.buybtn[data-tmpl-id="20"]) .p-desc .prose h3:not(:first-child) { margin-top: auto; padding-top: 16px; }
main:has(.buybtn[data-tmpl-id="20"]) .p-desc .p-glance { align-self: stretch; display: flex; flex-direction: column; padding: 20px 26px 22px; }
main:has(.buybtn[data-tmpl-id="20"]) .p-glance h3 { margin-bottom: 10px; }
main:has(.buybtn[data-tmpl-id="20"]) .p-glance dl { flex: 1 1 auto; display: flex; flex-direction: column; }
main:has(.buybtn[data-tmpl-id="20"]) .p-glance dl > div { flex: 1 1 auto; align-items: center; padding: 5px 0; }
main:has(.buybtn[data-tmpl-id="20"]) .p-glance dl > div:first-child { padding-top: 0; }
main:has(.buybtn[data-tmpl-id="20"]) .p-glance dl > div:last-child { padding-bottom: 0; }
@media (min-width: 1240px) {
  main:has(.buybtn[data-tmpl-id="20"]) .p-desc { grid-template-columns: minmax(0, 1fr) 620px; }
  main:has(.buybtn[data-tmpl-id="20"]) .p-glance dd { white-space: nowrap; }
  main:has(.buybtn[data-tmpl-id="20"]) .p-glance dl > div:nth-child(4) dd { white-space: normal; }
}
@media (min-width: 1340px) {
  main:has(.buybtn[data-tmpl-id="20"]) .p-desc { grid-template-columns: minmax(0, 1fr) 700px; }
}
@media (min-width: 861px) and (max-width: 1239px) {
  main:has(.buybtn[data-tmpl-id="20"]) .p-desc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  main:has(.buybtn[data-tmpl-id="20"]) .ppanel .band-head h2 { font-size: 26px; white-space: normal; }
}
/* less space under the top section, under the tab row, and at the top/bottom of the tab card (all tabs) */
main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero { padding-bottom: 28px; }
main:has(.buybtn[data-tmpl-id="20"]) .ppanel .yband { padding-top: 16px; }
main:has(.buybtn[data-tmpl-id="20"]) .ppanel .pcard { padding-top: 30px; padding-bottom: 30px; }
@media (max-width: 640px) {
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero { padding-bottom: 20px; }
  main:has(.buybtn[data-tmpl-id="20"]) .ppanel .yband { padding-top: 14px; }
  main:has(.buybtn[data-tmpl-id="20"]) .ppanel .pcard { padding-top: 20px; padding-bottom: 20px; }
}
/* coloured words in headings are always italic (Randall); "features" in Customer / Tech features blue italic */
main:has(.buybtn[data-tmpl-id="20"]) .ppanel .band-head h2 .nowrap,
main:has(.buybtn[data-tmpl-id="20"]) .ppanel h2 em.r5g-blue { color: #0076af; font-style: italic; }
/* price smaller (was 40px, bigger than the page title) */
main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .pricing-now { font-size: 28px; }
@media (max-width: 640px) { main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .pricing-now { font-size: 24px; } }
/* "Optional add-ons" under the service package picker: one compact line per antenna */
@media (max-width: 640px) {
}
/* with the add-ons the write-up is taller: compact add-ons box; on desktop the picture side is wider (bigger picture) and
   the white picture frame takes up any small difference, so the thumbnails still end level with the buttons */
@media (min-width: 1340px) {
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }  /* indoor: no add-ons, so a slightly narrower picture side balances it */
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .gallery { align-self: stretch; }
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .gal-main { flex: 1 0 auto; }
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .gal-main img { height: 100%; }
}
/* chips and add-on lines scale with the width of the write-up column so they always stay on one line inside it */
@media (min-width: 1025px) {
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .cpe-copy { container-type: inline-size; }
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .chips { gap: min(5px, .8cqi); }
  main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .chips li { font-size: min(12px, 2cqi); padding: 6px min(9px, 1.2cqi); }
}
/* Overview: the opening words of each paragraph blue italic */
main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .ov em.r5g-blue { color: #0076af; font-style: italic; }

/* indoor: the longer title stays on one line (scales with the column) */
main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero h1.r5g-title { white-space: nowrap; }
@media (min-width: 1025px) { main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero h1.r5g-title { font-size: min(32px, 5.4cqi); } }
@media (max-width: 1024px) { main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero h1.r5g-title { font-size: min(32px, calc((100vw - 52px) / 18)); } }
/* "MESH networking" back on the last chip: chips a little smaller on mid-size laptops so all 6 stay on one line */
@media (min-width: 1025px) and (max-width: 1339px) { main:has(.buybtn[data-tmpl-id="20"]) .cpe-hero .chips li { font-size: min(12px, 1.8cqi); padding: 6px min(9px, 1.1cqi); } }
/* "Choose your 5G Service Package" blue, not italic (Required keeps its own colour) */
main:has(.buybtn[data-tmpl-id="20"]) .svc-pick label { color: #0076af; font-style: normal; }
/* less empty space under the tab card, before the footer (84 -> 32px, like the 4x4 MIMO page) */
main:has(.buybtn[data-tmpl-id="20"]) .ppanel .yband { padding-bottom: 32px; }
/* === 2026-10-23 4x4 MIMO antenna page (Randall "fly solo"): same look as the router pages (copied from the indoor block, tmpl 21; 5 thumbnails, tabs): 8 thumbnails under the big picture, the 6 feature chips on one line,
   bigger "Choose your 5G Service Package" (not bold; Required stays bold), "Continental U.S. Only" on the Buy Now line === */
main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero ul.gal-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; overflow: visible; padding-bottom: 0; }
main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero ul.gal-thumbs li { flex: none; min-width: 0; }
main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero ul.gal-thumbs button { padding: 2px; border-radius: 9px; }
main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero ul.gal-thumbs img { border-radius: 7px; }
main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .chips { flex-wrap: nowrap; gap: 5px; }
main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .chips li { padding: 6px 9px; font-size: 12px; white-space: nowrap; }
main:has(.buybtn[data-tmpl-id="21"]) .svc-pick label { font-size: 17px; font-weight: 400; }
main:has(.buybtn[data-tmpl-id="21"]) .svc-pick .req { font-size: 13px; font-weight: 800; }
main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .buy-row { display: inline-flex; vertical-align: middle; }
main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .us-badge { display: inline-flex; vertical-align: middle; margin: 16px 0 0 14px; }
@media (min-width: 1025px) and (max-width: 1340px) {
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .chips { gap: 4px; }
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .chips li { padding: 5px 7px; font-size: 11px; }
}
@media (min-width: 1025px) and (max-width: 1200px) {
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .chips li { padding: 5px 5px; font-size: 10.5px; }
}
@media (max-width: 640px) {
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero ul.gal-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .chips { flex-wrap: wrap; }
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .buy-row { align-items: center; }
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .buy-row .hbe-add { margin-top: 0; }
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .us-badge { margin-left: 0; }
}
/* page title "HBE-5G Dual SIM Router": a little smaller, SIM pink italic (logo pink) */
main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero h1.r5g-title { font-size: 32px; }
main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero h1.r5g-title em { font-style: italic; color: #eb008b; }
@media (max-width: 640px) { main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero h1.r5g-title { font-size: 26px; } }
/* write-up column tightened to the height of the picture + thumbnails (desktop): only the gaps between items */
@media (min-width: 1025px) {
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .cpe-copy .model { margin-top: 8px; }
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .cpe-copy .pricing { margin-top: 10px; margin-bottom: 0; }
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .cpe-copy .ov { margin-top: 14px; }
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .cpe-copy .ov h2 { margin-bottom: 8px; }
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .cpe-copy .ov p { margin-bottom: 8px; }
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .cpe-copy .ov p:last-child { margin-bottom: 0; }
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .cpe-copy .chips { margin-top: 12px; }
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .cpe-copy .svc-pick { margin-top: 12px; }
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .cpe-copy .svc-pick label { margin-bottom: 5px; }
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .cpe-copy .svc-pick select { padding-top: 9px; padding-bottom: 9px; }
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .cpe-copy .svc-pick-compare { margin-top: 6px; }
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .cpe-copy .buy-row,
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .cpe-copy .us-badge { margin-top: 10px; }
}
/* when the write-up is shorter than picture + thumbnails (other fonts / screens), share the leftover space evenly between
   the items so Buy Now / Add to Cart / Continental U.S. Only always end level with the thumbnails */
@media (min-width: 1025px) {
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .cpe-copy { display: grid; grid-template-columns: auto 1fr; align-content: space-between; }
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .cpe-copy > * { grid-column: 1 / -1; min-width: 0; }
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .cpe-copy > .buy-row { grid-column: 1; }
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .cpe-copy > .us-badge { grid-column: 2; justify-self: start; align-self: end; }
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .cpe-copy > .model { justify-self: start; }
}
/* === 2026-10-23 5G outdoor router At a glance tab (Randall): heading one line 32px with HBE-5G blue, section headings blue,
   wider "At a glance" box (no wrapped lines on desktop), write-up and box the same height === */
main:has(.buybtn[data-tmpl-id="21"]) .ppanel .band-head { max-width: none; }
main:has(.buybtn[data-tmpl-id="21"]) .ppanel .band-head h2 { font-size: 32px; white-space: nowrap; }
main:has(.buybtn[data-tmpl-id="21"]) .ppanel .band-head h2 .nowrap { color: #0076af; }
main:has(.buybtn[data-tmpl-id="21"]) .p-desc .prose h3 { color: #0076af; }
/* tight gaps on both sides; both sides end on the same line: the shorter side shares out the difference
   (between the 3 sections on the left, between the rows in the box) - widths chosen so the difference is small */
main:has(.buybtn[data-tmpl-id="21"]) .p-desc .prose { align-self: stretch; display: flex; flex-direction: column; }
main:has(.buybtn[data-tmpl-id="21"]) .p-desc .prose p { margin-bottom: 0; }
main:has(.buybtn[data-tmpl-id="21"]) .p-desc .prose h3:not(:first-child) { margin-top: auto; padding-top: 16px; }
main:has(.buybtn[data-tmpl-id="21"]) .p-desc .p-glance { align-self: stretch; display: flex; flex-direction: column; padding: 20px 26px 22px; }
main:has(.buybtn[data-tmpl-id="21"]) .p-glance h3 { margin-bottom: 10px; }
main:has(.buybtn[data-tmpl-id="21"]) .p-glance dl { flex: 1 1 auto; display: flex; flex-direction: column; }
main:has(.buybtn[data-tmpl-id="21"]) .p-glance dl > div { flex: 1 1 auto; align-items: center; padding: 5px 0; }
main:has(.buybtn[data-tmpl-id="21"]) .p-glance dl > div:first-child { padding-top: 0; }
main:has(.buybtn[data-tmpl-id="21"]) .p-glance dl > div:last-child { padding-bottom: 0; }
@media (min-width: 1240px) {
  main:has(.buybtn[data-tmpl-id="21"]) .p-desc { grid-template-columns: minmax(0, 1fr) 620px; }
  main:has(.buybtn[data-tmpl-id="21"]) .p-glance dd { white-space: nowrap; }
  main:has(.buybtn[data-tmpl-id="21"]) .p-glance dl > div:nth-child(4) dd { white-space: normal; }
}
@media (min-width: 1340px) {
  main:has(.buybtn[data-tmpl-id="21"]) .p-desc { grid-template-columns: minmax(0, 1fr) 700px; }
}
@media (min-width: 861px) and (max-width: 1239px) {
  main:has(.buybtn[data-tmpl-id="21"]) .p-desc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  main:has(.buybtn[data-tmpl-id="21"]) .ppanel .band-head h2 { font-size: 26px; white-space: normal; }
}
/* less space under the top section, under the tab row, and at the top/bottom of the tab card (all tabs) */
main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero { padding-bottom: 28px; }
main:has(.buybtn[data-tmpl-id="21"]) .ppanel .yband { padding-top: 16px; }
main:has(.buybtn[data-tmpl-id="21"]) .ppanel .pcard { padding-top: 30px; padding-bottom: 30px; }
@media (max-width: 640px) {
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero { padding-bottom: 20px; }
  main:has(.buybtn[data-tmpl-id="21"]) .ppanel .yband { padding-top: 14px; }
  main:has(.buybtn[data-tmpl-id="21"]) .ppanel .pcard { padding-top: 20px; padding-bottom: 20px; }
}
/* coloured words in headings are always italic (Randall); "features" in Customer / Tech features blue italic */
main:has(.buybtn[data-tmpl-id="21"]) .ppanel .band-head h2 .nowrap,
main:has(.buybtn[data-tmpl-id="21"]) .ppanel h2 em.r5g-blue { color: #0076af; font-style: italic; }
/* price smaller (was 40px, bigger than the page title) */
main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .pricing-now { font-size: 28px; }
@media (max-width: 640px) { main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .pricing-now { font-size: 24px; } }
/* "Optional add-ons" under the service package picker: one compact line per antenna */
@media (max-width: 640px) {
}
/* with the add-ons the write-up is taller: compact add-ons box; on desktop the picture side is wider (bigger picture) and
   the white picture frame takes up any small difference, so the thumbnails still end level with the buttons */
@media (min-width: 1340px) {
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }  /* indoor: no add-ons, so a slightly narrower picture side balances it */
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .gallery { align-self: stretch; }
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .gal-main { flex: 1 0 auto; }
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .gal-main img { height: 100%; }
}
/* chips and add-on lines scale with the width of the write-up column so they always stay on one line inside it */
@media (min-width: 1025px) {
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .cpe-copy { container-type: inline-size; }
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .chips { gap: min(5px, .8cqi); }
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .chips li { font-size: min(12px, 2cqi); padding: 6px min(9px, 1.2cqi); }
}
/* Overview: the opening words of each paragraph blue italic */
main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .ov em.r5g-blue { color: #0076af; font-style: italic; }

/* indoor: the longer title stays on one line (scales with the column) */
main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero h1.r5g-title { white-space: nowrap; }
@media (min-width: 1025px) { main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero h1.r5g-title { font-size: min(32px, 5.4cqi); } }
@media (max-width: 1024px) { main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero h1.r5g-title { font-size: min(32px, calc((100vw - 52px) / 18)); } }
/* "MESH networking" back on the last chip: chips a little smaller on mid-size laptops so all 6 stay on one line */
@media (min-width: 1025px) and (max-width: 1339px) { main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .chips li { font-size: min(12px, 1.8cqi); padding: 6px min(9px, 1.1cqi); } }
/* "Choose your 5G Service Package" blue, not italic (Required keeps its own colour) */
main:has(.buybtn[data-tmpl-id="21"]) .svc-pick label { color: #0076af; font-style: normal; }

/* tab headings like the router pages (the page's own style sets them in the big serif) */
main:has(.buybtn[data-tmpl-id="21"]) .ppanel .band-head h2 { font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-weight: 700; letter-spacing: -.45px; line-height: 1.2; margin-bottom: 18px; }
main:has(.buybtn[data-tmpl-id="21"]) .ppanel .band-head h2 em.r5g-blue { color: #0076af; font-style: italic; }
main:has(.buybtn[data-tmpl-id="21"]) .ppanel .band-head { margin-bottom: 0; }
/* the highlight colours and card backgrounds the old sections gave (they were tied to .band / .band.alt) */
main:has(.buybtn[data-tmpl-id="21"]) .ppanel .hl { color: var(--blue-ink); font-weight: 700; }
main:has(.buybtn[data-tmpl-id="21"]) .ppanel .hl-brand { color: var(--magenta-ink); font-weight: 800; }
main:has(.buybtn[data-tmpl-id="21"]) .ppanel .ft,
main:has(.buybtn[data-tmpl-id="21"]) .ppanel .diff li { background: var(--bg); }
main:has(.buybtn[data-tmpl-id="21"]) .ppanel .ft.ft-wide { background: linear-gradient(150deg, color-mix(in srgb, var(--blue) 7%, var(--bg)) 0%, var(--bg) 60%); }
main:has(.buybtn[data-tmpl-id="21"]) .ppanel .diff .d-feature { background: linear-gradient(150deg, color-mix(in srgb, var(--blue) 7%, var(--bg)) 0%, var(--bg) 62%); }
main:has(.buybtn[data-tmpl-id="21"]) .ppanel .ft-num { color: color-mix(in srgb, var(--ink-faint) 15%, transparent); }
/* with the two new Overview paragraphs: picture side .6 (about 480px on a 23") so both columns end level on all desktops;
   the picture frame / the write-up take up any small difference */
@media (min-width: 1025px) {
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, .6fr) minmax(0, 1fr); }
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .gallery { align-self: stretch; }
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .gal-main { flex: 1 0 auto; }
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .gal-main img { height: 100%; }
}
@media (min-width: 1025px) {
  /* the write-up fills the row (this page's grid sets its items to the top), so any small difference is shared out */
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .cpe-copy { align-self: stretch; }
  /* the six chips on one line in the narrower write-up column */
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .chips { gap: min(5px, .7cqi); }
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .chips li { font-size: min(12px, 1.68cqi); padding: 6px min(9px, 1.1cqi); }
}
/* Features tab: the 5 cards smaller, in one row (icon above the title in each card) */
@media (min-width: 1025px) {
  main:has(.buybtn[data-tmpl-id="21"]) .ppanel .ft-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  main:has(.buybtn[data-tmpl-id="21"]) .ppanel .ft { grid-column: auto; grid-template-columns: minmax(0, 1fr); padding: 16px 16px 18px; row-gap: 0; }
  main:has(.buybtn[data-tmpl-id="21"]) .ppanel .ft > * { grid-column: 1; grid-row: auto; align-self: start; }
  main:has(.buybtn[data-tmpl-id="21"]) .ppanel .ft { align-content: start; grid-template-rows: none; grid-template-areas: none; }
  main:has(.buybtn[data-tmpl-id="21"]) .ppanel .ft > * { grid-area: auto; }
  main:has(.buybtn[data-tmpl-id="21"]) .ppanel .ft .ft-head { width: auto; height: auto; margin-bottom: 10px; }
  main:has(.buybtn[data-tmpl-id="21"]) .ppanel .ft .ft-ico { width: 32px; height: 32px; }
  main:has(.buybtn[data-tmpl-id="21"]) .ppanel .ft .ft-num { font-size: 44px; }
  main:has(.buybtn[data-tmpl-id="21"]) .ppanel .ft h3 { font-size: 16px; line-height: 1.3; width: auto; }
  main:has(.buybtn[data-tmpl-id="21"]) .ppanel .ft p { font-size: 13.2px; line-height: 1.6; width: auto; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  main:has(.buybtn[data-tmpl-id="21"]) .ppanel .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main:has(.buybtn[data-tmpl-id="21"]) .ppanel .ft { grid-column: auto; }
}
/* top section centred as one block: the write-up column is capped at 660px, so the two columns are sized to it and the
   block sits in the middle of the page instead of leaving a wide margin on the right */
@media (min-width: 1025px) {
  main:has(.buybtn[data-tmpl-id="21"]) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 480fr) minmax(0, 660fr); max-width: 1212px; margin-inline: auto; }
}
/* dead space inside the tabs (Randall): less space under each tab heading and under the card; shorter photo frames on
   A Closer Look; the Specs drawing box centred beside the table */
main:has(.buybtn[data-tmpl-id="21"]) .ppanel .band-head + * { margin-top: 18px; }
main:has(.buybtn[data-tmpl-id="21"]) .ppanel .yband { padding-bottom: 32px; }
main:has(.buybtn[data-tmpl-id="21"]) .ppanel .shot-card img { aspect-ratio: 5 / 4; }
main:has(.buybtn[data-tmpl-id="21"]) .ppanel .spec-split figure.dims { align-self: center; }
/* === 2026-10-23 8dBi Omni antenna page (Randall "do your thing"): same look as the 4x4 MIMO page (copied; scoped by .cpe-hero.omni8, the product id differs between test and live): 8 thumbnails under the big picture, the 6 feature chips on one line,
   bigger "Choose your 5G Service Package" (not bold; Required stays bold), "Continental U.S. Only" on the Buy Now line === */
main:has(.cpe-hero.omni8) .cpe-hero ul.gal-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; overflow: visible; padding-bottom: 0; }
main:has(.cpe-hero.omni8) .cpe-hero ul.gal-thumbs li { flex: none; min-width: 0; }
main:has(.cpe-hero.omni8) .cpe-hero ul.gal-thumbs button { padding: 2px; border-radius: 9px; }
main:has(.cpe-hero.omni8) .cpe-hero ul.gal-thumbs img { border-radius: 7px; }
main:has(.cpe-hero.omni8) .cpe-hero .chips { flex-wrap: nowrap; gap: 5px; }
main:has(.cpe-hero.omni8) .cpe-hero .chips li { padding: 6px 9px; font-size: 12px; white-space: nowrap; }
main:has(.cpe-hero.omni8) .svc-pick label { font-size: 17px; font-weight: 400; }
main:has(.cpe-hero.omni8) .svc-pick .req { font-size: 13px; font-weight: 800; }
main:has(.cpe-hero.omni8) .cpe-hero .buy-row { display: inline-flex; vertical-align: middle; }
main:has(.cpe-hero.omni8) .cpe-hero .us-badge { display: inline-flex; vertical-align: middle; margin: 16px 0 0 14px; }
@media (min-width: 1025px) and (max-width: 1340px) {
  main:has(.cpe-hero.omni8) .cpe-hero .chips { gap: 4px; }
  main:has(.cpe-hero.omni8) .cpe-hero .chips li { padding: 5px 7px; font-size: 11px; }
}
@media (min-width: 1025px) and (max-width: 1200px) {
  main:has(.cpe-hero.omni8) .cpe-hero .chips li { padding: 5px 5px; font-size: 10.5px; }
}
@media (max-width: 640px) {
  main:has(.cpe-hero.omni8) .cpe-hero ul.gal-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  main:has(.cpe-hero.omni8) .cpe-hero .chips { flex-wrap: wrap; }
  main:has(.cpe-hero.omni8) .cpe-hero .buy-row { align-items: center; }
  main:has(.cpe-hero.omni8) .cpe-hero .buy-row .hbe-add { margin-top: 0; }
  main:has(.cpe-hero.omni8) .cpe-hero .us-badge { margin-left: 0; }
}
/* page title "HBE-5G Dual SIM Router": a little smaller, SIM pink italic (logo pink) */
main:has(.cpe-hero.omni8) .cpe-hero h1.r5g-title { font-size: 32px; }
main:has(.cpe-hero.omni8) .cpe-hero h1.r5g-title em { font-style: italic; color: #eb008b; }
@media (max-width: 640px) { main:has(.cpe-hero.omni8) .cpe-hero h1.r5g-title { font-size: min(26px, calc((100vw - 52px) / 11.5)); } }
/* write-up column tightened to the height of the picture + thumbnails (desktop): only the gaps between items */
@media (min-width: 1025px) {
  main:has(.cpe-hero.omni8) .cpe-hero .cpe-copy .model { margin-top: 8px; }
  main:has(.cpe-hero.omni8) .cpe-hero .cpe-copy .pricing { margin-top: 10px; margin-bottom: 0; }
  main:has(.cpe-hero.omni8) .cpe-hero .cpe-copy .ov { margin-top: 14px; }
  main:has(.cpe-hero.omni8) .cpe-hero .cpe-copy .ov h2 { margin-bottom: 8px; }
  main:has(.cpe-hero.omni8) .cpe-hero .cpe-copy .ov p { margin-bottom: 8px; }
  main:has(.cpe-hero.omni8) .cpe-hero .cpe-copy .ov p:last-child { margin-bottom: 0; }
  main:has(.cpe-hero.omni8) .cpe-hero .cpe-copy .chips { margin-top: 12px; }
  main:has(.cpe-hero.omni8) .cpe-hero .cpe-copy .svc-pick { margin-top: 12px; }
  main:has(.cpe-hero.omni8) .cpe-hero .cpe-copy .svc-pick label { margin-bottom: 5px; }
  main:has(.cpe-hero.omni8) .cpe-hero .cpe-copy .svc-pick select { padding-top: 9px; padding-bottom: 9px; }
  main:has(.cpe-hero.omni8) .cpe-hero .cpe-copy .svc-pick-compare { margin-top: 6px; }
  main:has(.cpe-hero.omni8) .cpe-hero .cpe-copy .buy-row,
  main:has(.cpe-hero.omni8) .cpe-hero .cpe-copy .us-badge { margin-top: 10px; }
}
/* when the write-up is shorter than picture + thumbnails (other fonts / screens), share the leftover space evenly between
   the items so Buy Now / Add to Cart / Continental U.S. Only always end level with the thumbnails */
@media (min-width: 1025px) {
  main:has(.cpe-hero.omni8) .cpe-hero .cpe-copy { display: grid; grid-template-columns: auto 1fr; align-content: space-between; }
  main:has(.cpe-hero.omni8) .cpe-hero .cpe-copy > * { grid-column: 1 / -1; min-width: 0; }
  main:has(.cpe-hero.omni8) .cpe-hero .cpe-copy > .buy-row { grid-column: 1; }
  main:has(.cpe-hero.omni8) .cpe-hero .cpe-copy > .us-badge { grid-column: 2; justify-self: start; align-self: end; }
  main:has(.cpe-hero.omni8) .cpe-hero .cpe-copy > .model { justify-self: start; }
}
/* === 2026-10-23 5G outdoor router At a glance tab (Randall): heading one line 32px with HBE-5G blue, section headings blue,
   wider "At a glance" box (no wrapped lines on desktop), write-up and box the same height === */
main:has(.cpe-hero.omni8) .ppanel .band-head { max-width: none; }
main:has(.cpe-hero.omni8) .ppanel .band-head h2 { font-size: 32px; white-space: nowrap; }
main:has(.cpe-hero.omni8) .ppanel .band-head h2 .nowrap { color: #0076af; }
main:has(.cpe-hero.omni8) .p-desc .prose h3 { color: #0076af; }
/* tight gaps on both sides; both sides end on the same line: the shorter side shares out the difference
   (between the 3 sections on the left, between the rows in the box) - widths chosen so the difference is small */
main:has(.cpe-hero.omni8) .p-desc .prose { align-self: stretch; display: flex; flex-direction: column; }
main:has(.cpe-hero.omni8) .p-desc .prose p { margin-bottom: 0; }
main:has(.cpe-hero.omni8) .p-desc .prose h3:not(:first-child) { margin-top: auto; padding-top: 16px; }
main:has(.cpe-hero.omni8) .p-desc .p-glance { align-self: stretch; display: flex; flex-direction: column; padding: 20px 26px 22px; }
main:has(.cpe-hero.omni8) .p-glance h3 { margin-bottom: 10px; }
main:has(.cpe-hero.omni8) .p-glance dl { flex: 1 1 auto; display: flex; flex-direction: column; }
main:has(.cpe-hero.omni8) .p-glance dl > div { flex: 1 1 auto; align-items: center; padding: 5px 0; }
main:has(.cpe-hero.omni8) .p-glance dl > div:first-child { padding-top: 0; }
main:has(.cpe-hero.omni8) .p-glance dl > div:last-child { padding-bottom: 0; }
@media (min-width: 1240px) {
  main:has(.cpe-hero.omni8) .p-desc { grid-template-columns: minmax(0, 1fr) 620px; }
  main:has(.cpe-hero.omni8) .p-glance dd { white-space: nowrap; }
  main:has(.cpe-hero.omni8) .p-glance dl > div:nth-child(4) dd { white-space: normal; }
}
@media (min-width: 1340px) {
  main:has(.cpe-hero.omni8) .p-desc { grid-template-columns: minmax(0, 1fr) 700px; }
}
@media (min-width: 861px) and (max-width: 1239px) {
  main:has(.cpe-hero.omni8) .p-desc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  main:has(.cpe-hero.omni8) .ppanel .band-head h2 { font-size: 26px; white-space: normal; }
}
/* less space under the top section, under the tab row, and at the top/bottom of the tab card (all tabs) */
main:has(.cpe-hero.omni8) .cpe-hero { padding-bottom: 28px; }
main:has(.cpe-hero.omni8) .ppanel .yband { padding-top: 16px; }
main:has(.cpe-hero.omni8) .ppanel .pcard { padding-top: 30px; padding-bottom: 30px; }
@media (max-width: 640px) {
  main:has(.cpe-hero.omni8) .cpe-hero { padding-bottom: 20px; }
  main:has(.cpe-hero.omni8) .ppanel .yband { padding-top: 14px; }
  main:has(.cpe-hero.omni8) .ppanel .pcard { padding-top: 20px; padding-bottom: 20px; }
}
/* coloured words in headings are always italic (Randall); "features" in Customer / Tech features blue italic */
main:has(.cpe-hero.omni8) .ppanel .band-head h2 .nowrap,
main:has(.cpe-hero.omni8) .ppanel h2 em.r5g-blue { color: #0076af; font-style: italic; }
/* price smaller (was 40px, bigger than the page title) */
main:has(.cpe-hero.omni8) .cpe-hero .pricing-now { font-size: 28px; }
@media (max-width: 640px) { main:has(.cpe-hero.omni8) .cpe-hero .pricing-now { font-size: 24px; } }
/* "Optional add-ons" under the service package picker: one compact line per antenna */
@media (max-width: 640px) {
}
/* with the add-ons the write-up is taller: compact add-ons box; on desktop the picture side is wider (bigger picture) and
   the white picture frame takes up any small difference, so the thumbnails still end level with the buttons */
@media (min-width: 1340px) {
  main:has(.cpe-hero.omni8) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }  /* indoor: no add-ons, so a slightly narrower picture side balances it */
  main:has(.cpe-hero.omni8) .cpe-hero .gallery { align-self: stretch; }
  main:has(.cpe-hero.omni8) .cpe-hero .gal-main { flex: 1 0 auto; }
  main:has(.cpe-hero.omni8) .cpe-hero .gal-main img { height: 100%; }
}
/* chips and add-on lines scale with the width of the write-up column so they always stay on one line inside it */
@media (min-width: 1025px) {
  main:has(.cpe-hero.omni8) .cpe-hero .cpe-copy { container-type: inline-size; }
  main:has(.cpe-hero.omni8) .cpe-hero .chips { gap: min(5px, .8cqi); }
  main:has(.cpe-hero.omni8) .cpe-hero .chips li { font-size: min(12px, 2cqi); padding: 6px min(9px, 1.2cqi); }
}
/* Overview: the opening words of each paragraph blue italic */
main:has(.cpe-hero.omni8) .cpe-hero .ov em.r5g-blue { color: #0076af; font-style: italic; }

/* indoor: the longer title stays on one line (scales with the column) */
main:has(.cpe-hero.omni8) .cpe-hero h1.r5g-title { white-space: nowrap; }
@media (min-width: 1025px) { main:has(.cpe-hero.omni8) .cpe-hero h1.r5g-title { font-size: min(32px, 5.4cqi); } }
@media (max-width: 1024px) { main:has(.cpe-hero.omni8) .cpe-hero h1.r5g-title { font-size: min(32px, calc((100vw - 52px) / 18)); } }
/* "MESH networking" back on the last chip: chips a little smaller on mid-size laptops so all 6 stay on one line */
@media (min-width: 1025px) and (max-width: 1339px) { main:has(.cpe-hero.omni8) .cpe-hero .chips li { font-size: min(12px, 1.8cqi); padding: 6px min(9px, 1.1cqi); } }
/* "Choose your 5G Service Package" blue, not italic (Required keeps its own colour) */
main:has(.cpe-hero.omni8) .svc-pick label { color: #0076af; font-style: normal; }

/* tab headings like the router pages (the page's own style sets them in the big serif) */
main:has(.cpe-hero.omni8) .ppanel .band-head h2 { font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-weight: 700; letter-spacing: -.45px; line-height: 1.2; margin-bottom: 18px; }
main:has(.cpe-hero.omni8) .ppanel .band-head h2 em.r5g-blue { color: #0076af; font-style: italic; }
main:has(.cpe-hero.omni8) .ppanel .band-head { margin-bottom: 0; }
/* the highlight colours and card backgrounds the old sections gave (they were tied to .band / .band.alt) */
main:has(.cpe-hero.omni8) .ppanel .hl { color: var(--blue-ink); font-weight: 700; }
main:has(.cpe-hero.omni8) .ppanel .hl-brand { color: var(--magenta-ink); font-weight: 800; }
main:has(.cpe-hero.omni8) .ppanel .ft,
main:has(.cpe-hero.omni8) .ppanel .diff li { background: var(--bg); }
main:has(.cpe-hero.omni8) .ppanel .ft.ft-wide { background: linear-gradient(150deg, color-mix(in srgb, var(--blue) 7%, var(--bg)) 0%, var(--bg) 60%); }
main:has(.cpe-hero.omni8) .ppanel .diff .d-feature { background: linear-gradient(150deg, color-mix(in srgb, var(--blue) 7%, var(--bg)) 0%, var(--bg) 62%); }
main:has(.cpe-hero.omni8) .ppanel .ft-num { color: color-mix(in srgb, var(--ink-faint) 15%, transparent); }
/* with the two new Overview paragraphs: picture side .6 (about 480px on a 23") so both columns end level on all desktops;
   the picture frame / the write-up take up any small difference */
@media (min-width: 1025px) {
  main:has(.cpe-hero.omni8) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, .6fr) minmax(0, 1fr); }
  main:has(.cpe-hero.omni8) .cpe-hero .gallery { align-self: stretch; }
  main:has(.cpe-hero.omni8) .cpe-hero .gal-main { flex: 1 0 auto; }
  main:has(.cpe-hero.omni8) .cpe-hero .gal-main img { height: 100%; }
}
@media (min-width: 1025px) {
  /* the write-up fills the row (this page's grid sets its items to the top), so any small difference is shared out */
  main:has(.cpe-hero.omni8) .cpe-hero .cpe-copy { align-self: stretch; }
  /* the six chips on one line in the narrower write-up column */
  main:has(.cpe-hero.omni8) .cpe-hero .chips { gap: min(5px, .7cqi); }
  main:has(.cpe-hero.omni8) .cpe-hero .chips li { font-size: min(12px, 1.68cqi); padding: 6px min(9px, 1.1cqi); }
}
/* Features tab: the 5 cards smaller, in one row (icon above the title in each card) */
@media (min-width: 1025px) {
  main:has(.cpe-hero.omni8) .ppanel .ft-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  main:has(.cpe-hero.omni8) .ppanel .ft { grid-column: auto; grid-template-columns: minmax(0, 1fr); padding: 16px 16px 18px; row-gap: 0; }
  main:has(.cpe-hero.omni8) .ppanel .ft > * { grid-column: 1; grid-row: auto; align-self: start; }
  main:has(.cpe-hero.omni8) .ppanel .ft { align-content: start; grid-template-rows: none; grid-template-areas: none; }
  main:has(.cpe-hero.omni8) .ppanel .ft > * { grid-area: auto; }
  main:has(.cpe-hero.omni8) .ppanel .ft .ft-head { width: auto; height: auto; margin-bottom: 10px; }
  main:has(.cpe-hero.omni8) .ppanel .ft .ft-ico { width: 32px; height: 32px; }
  main:has(.cpe-hero.omni8) .ppanel .ft .ft-num { font-size: 44px; }
  main:has(.cpe-hero.omni8) .ppanel .ft h3 { font-size: 16px; line-height: 1.3; width: auto; }
  main:has(.cpe-hero.omni8) .ppanel .ft p { font-size: 13.2px; line-height: 1.6; width: auto; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  main:has(.cpe-hero.omni8) .ppanel .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main:has(.cpe-hero.omni8) .ppanel .ft { grid-column: auto; }
}
/* top section centred as one block: the write-up column is capped at 660px, so the two columns are sized to it and the
   block sits in the middle of the page instead of leaving a wide margin on the right */
@media (min-width: 1025px) {
  main:has(.cpe-hero.omni8) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 480fr) minmax(0, 660fr); max-width: 1212px; margin-inline: auto; }
}
/* dead space inside the tabs (Randall): less space under each tab heading and under the card; shorter photo frames on
   A Closer Look; the Specs drawing box centred beside the table */
main:has(.cpe-hero.omni8) .ppanel .band-head + * { margin-top: 18px; }
main:has(.cpe-hero.omni8) .ppanel .yband { padding-bottom: 32px; }
main:has(.cpe-hero.omni8) .ppanel .shot-card img { aspect-ratio: 5 / 4; }
main:has(.cpe-hero.omni8) .ppanel .spec-split figure.dims { align-self: center; }

/* Omni: the page shows the tall uncropped photo (site file omni-antenna-8dbi.jpg, 842x2000; the shop card keeps the square
   product image) in a frame of the same shape, so the hover zoom can reach every edge; narrow picture column, block centred */
main:has(.cpe-hero.omni8) .cpe-hero .gal-main { aspect-ratio: 842 / 2000; background: #fff; }
main:has(.cpe-hero.omni8) .cpe-hero .gal-main img { width: 100%; height: 100%; }
/* the "Hover to zoom · click to enlarge" label does not fit the narrow frame; zoom and enlarge still work */
main:has(.cpe-hero.omni8) .cpe-hero .gal-main .pg-hint { display: none; }
main:has(.cpe-hero.omni8) .cpe-hero { padding-bottom: 32px; }
@media (min-width: 1025px) {
  /* photo column sized so the photo is as tall as the write-up (about 375px): no spread-out gaps, block centred */
  main:has(.cpe-hero.omni8) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 158fr) minmax(0, 660fr); max-width: 882px; margin-inline: auto; }
  /* (the copied rules let the photo frame fill the row, so photo and buttons always end level) */
}
@media (max-width: 1024px) {
  main:has(.cpe-hero.omni8) .cpe-hero .gallery { max-width: 200px; margin-inline: auto; width: 100%; }
}
/* short title: normal phone/tablet size (the copied rule shrinks long router titles) */
@media (max-width: 1024px) { main:has(.cpe-hero.omni8) .cpe-hero h1.r5g-title { font-size: 32px; } }
@media (max-width: 640px) { main:has(.cpe-hero.omni8) .cpe-hero h1.r5g-title { font-size: min(26px, calc((100vw - 52px) / 11.5)); } }
/* === 2026-10-23 8dBi Omni antenna page (Randall "do your thing"): same look as the 4x4 MIMO page (copied; scoped by .cpe-hero.jarm18, the product id differs between test and live): 8 thumbnails under the big picture, the 6 feature chips on one line,
   bigger "Choose your 5G Service Package" (not bold; Required stays bold), "Continental U.S. Only" on the Buy Now line === */
main:has(.cpe-hero.jarm18) .cpe-hero ul.gal-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; overflow: visible; padding-bottom: 0; }
main:has(.cpe-hero.jarm18) .cpe-hero ul.gal-thumbs li { flex: none; min-width: 0; }
main:has(.cpe-hero.jarm18) .cpe-hero ul.gal-thumbs button { padding: 2px; border-radius: 9px; }
main:has(.cpe-hero.jarm18) .cpe-hero ul.gal-thumbs img { border-radius: 7px; }
main:has(.cpe-hero.jarm18) .cpe-hero .chips { flex-wrap: nowrap; gap: 5px; }
main:has(.cpe-hero.jarm18) .cpe-hero .chips li { padding: 6px 9px; font-size: 12px; white-space: nowrap; }
main:has(.cpe-hero.jarm18) .svc-pick label { font-size: 17px; font-weight: 400; }
main:has(.cpe-hero.jarm18) .svc-pick .req { font-size: 13px; font-weight: 800; }
main:has(.cpe-hero.jarm18) .cpe-hero .buy-row { display: inline-flex; vertical-align: middle; }
main:has(.cpe-hero.jarm18) .cpe-hero .us-badge { display: inline-flex; vertical-align: middle; margin: 16px 0 0 14px; }
@media (min-width: 1025px) and (max-width: 1340px) {
  main:has(.cpe-hero.jarm18) .cpe-hero .chips { gap: 4px; }
  main:has(.cpe-hero.jarm18) .cpe-hero .chips li { padding: 5px 7px; font-size: 11px; }
}
@media (min-width: 1025px) and (max-width: 1200px) {
  main:has(.cpe-hero.jarm18) .cpe-hero .chips li { padding: 5px 5px; font-size: 10.5px; }
}
@media (max-width: 640px) {
  main:has(.cpe-hero.jarm18) .cpe-hero ul.gal-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  main:has(.cpe-hero.jarm18) .cpe-hero .chips { flex-wrap: wrap; }
  main:has(.cpe-hero.jarm18) .cpe-hero .buy-row { align-items: center; }
  main:has(.cpe-hero.jarm18) .cpe-hero .buy-row .hbe-add { margin-top: 0; }
  main:has(.cpe-hero.jarm18) .cpe-hero .us-badge { margin-left: 0; }
}
/* page title "HBE-5G Dual SIM Router": a little smaller, SIM pink italic (logo pink) */
main:has(.cpe-hero.jarm18) .cpe-hero h1.r5g-title { font-size: 32px; }
main:has(.cpe-hero.jarm18) .cpe-hero h1.r5g-title em { font-style: italic; color: #eb008b; }
@media (max-width: 640px) { main:has(.cpe-hero.jarm18) .cpe-hero h1.r5g-title { font-size: min(26px, calc((100vw - 52px) / 11.5)); } }
/* write-up column tightened to the height of the picture + thumbnails (desktop): only the gaps between items */
@media (min-width: 1025px) {
  main:has(.cpe-hero.jarm18) .cpe-hero .cpe-copy .model { margin-top: 8px; }
  main:has(.cpe-hero.jarm18) .cpe-hero .cpe-copy .pricing { margin-top: 10px; margin-bottom: 0; }
  main:has(.cpe-hero.jarm18) .cpe-hero .cpe-copy .ov { margin-top: 14px; }
  main:has(.cpe-hero.jarm18) .cpe-hero .cpe-copy .ov h2 { margin-bottom: 8px; }
  main:has(.cpe-hero.jarm18) .cpe-hero .cpe-copy .ov p { margin-bottom: 8px; }
  main:has(.cpe-hero.jarm18) .cpe-hero .cpe-copy .ov p:last-child { margin-bottom: 0; }
  main:has(.cpe-hero.jarm18) .cpe-hero .cpe-copy .chips { margin-top: 12px; }
  main:has(.cpe-hero.jarm18) .cpe-hero .cpe-copy .svc-pick { margin-top: 12px; }
  main:has(.cpe-hero.jarm18) .cpe-hero .cpe-copy .svc-pick label { margin-bottom: 5px; }
  main:has(.cpe-hero.jarm18) .cpe-hero .cpe-copy .svc-pick select { padding-top: 9px; padding-bottom: 9px; }
  main:has(.cpe-hero.jarm18) .cpe-hero .cpe-copy .svc-pick-compare { margin-top: 6px; }
  main:has(.cpe-hero.jarm18) .cpe-hero .cpe-copy .buy-row,
  main:has(.cpe-hero.jarm18) .cpe-hero .cpe-copy .us-badge { margin-top: 10px; }
}
/* when the write-up is shorter than picture + thumbnails (other fonts / screens), share the leftover space evenly between
   the items so Buy Now / Add to Cart / Continental U.S. Only always end level with the thumbnails */
@media (min-width: 1025px) {
  main:has(.cpe-hero.jarm18) .cpe-hero .cpe-copy { display: grid; grid-template-columns: auto 1fr; align-content: space-between; }
  main:has(.cpe-hero.jarm18) .cpe-hero .cpe-copy > * { grid-column: 1 / -1; min-width: 0; }
  main:has(.cpe-hero.jarm18) .cpe-hero .cpe-copy > .buy-row { grid-column: 1; }
  main:has(.cpe-hero.jarm18) .cpe-hero .cpe-copy > .us-badge { grid-column: 2; justify-self: start; align-self: end; }
  main:has(.cpe-hero.jarm18) .cpe-hero .cpe-copy > .model { justify-self: start; }
}
/* === 2026-10-23 5G outdoor router At a glance tab (Randall): heading one line 32px with HBE-5G blue, section headings blue,
   wider "At a glance" box (no wrapped lines on desktop), write-up and box the same height === */
main:has(.cpe-hero.jarm18) .ppanel .band-head { max-width: none; }
main:has(.cpe-hero.jarm18) .ppanel .band-head h2 { font-size: 32px; white-space: nowrap; }
main:has(.cpe-hero.jarm18) .ppanel .band-head h2 .nowrap { color: #0076af; }
main:has(.cpe-hero.jarm18) .p-desc .prose h3 { color: #0076af; }
/* tight gaps on both sides; both sides end on the same line: the shorter side shares out the difference
   (between the 3 sections on the left, between the rows in the box) - widths chosen so the difference is small */
main:has(.cpe-hero.jarm18) .p-desc .prose { align-self: stretch; display: flex; flex-direction: column; }
main:has(.cpe-hero.jarm18) .p-desc .prose p { margin-bottom: 0; }
main:has(.cpe-hero.jarm18) .p-desc .prose h3:not(:first-child) { margin-top: auto; padding-top: 16px; }
main:has(.cpe-hero.jarm18) .p-desc .p-glance { align-self: stretch; display: flex; flex-direction: column; padding: 20px 26px 22px; }
main:has(.cpe-hero.jarm18) .p-glance h3 { margin-bottom: 10px; }
main:has(.cpe-hero.jarm18) .p-glance dl { flex: 1 1 auto; display: flex; flex-direction: column; }
main:has(.cpe-hero.jarm18) .p-glance dl > div { flex: 1 1 auto; align-items: center; padding: 5px 0; }
main:has(.cpe-hero.jarm18) .p-glance dl > div:first-child { padding-top: 0; }
main:has(.cpe-hero.jarm18) .p-glance dl > div:last-child { padding-bottom: 0; }
@media (min-width: 1240px) {
  main:has(.cpe-hero.jarm18) .p-desc { grid-template-columns: minmax(0, 1fr) 620px; }
  main:has(.cpe-hero.jarm18) .p-glance dd { white-space: nowrap; }
  main:has(.cpe-hero.jarm18) .p-glance dl > div:nth-child(4) dd { white-space: normal; }
}
@media (min-width: 1340px) {
  main:has(.cpe-hero.jarm18) .p-desc { grid-template-columns: minmax(0, 1fr) 700px; }
}
@media (min-width: 861px) and (max-width: 1239px) {
  main:has(.cpe-hero.jarm18) .p-desc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  main:has(.cpe-hero.jarm18) .ppanel .band-head h2 { font-size: 26px; white-space: normal; }
}
/* less space under the top section, under the tab row, and at the top/bottom of the tab card (all tabs) */
main:has(.cpe-hero.jarm18) .cpe-hero { padding-bottom: 28px; }
main:has(.cpe-hero.jarm18) .ppanel .yband { padding-top: 16px; }
main:has(.cpe-hero.jarm18) .ppanel .pcard { padding-top: 30px; padding-bottom: 30px; }
@media (max-width: 640px) {
  main:has(.cpe-hero.jarm18) .cpe-hero { padding-bottom: 20px; }
  main:has(.cpe-hero.jarm18) .ppanel .yband { padding-top: 14px; }
  main:has(.cpe-hero.jarm18) .ppanel .pcard { padding-top: 20px; padding-bottom: 20px; }
}
/* coloured words in headings are always italic (Randall); "features" in Customer / Tech features blue italic */
main:has(.cpe-hero.jarm18) .ppanel .band-head h2 .nowrap,
main:has(.cpe-hero.jarm18) .ppanel h2 em.r5g-blue { color: #0076af; font-style: italic; }
/* price smaller (was 40px, bigger than the page title) */
main:has(.cpe-hero.jarm18) .cpe-hero .pricing-now { font-size: 28px; }
@media (max-width: 640px) { main:has(.cpe-hero.jarm18) .cpe-hero .pricing-now { font-size: 24px; } }
/* "Optional add-ons" under the service package picker: one compact line per antenna */
@media (max-width: 640px) {
}
/* with the add-ons the write-up is taller: compact add-ons box; on desktop the picture side is wider (bigger picture) and
   the white picture frame takes up any small difference, so the thumbnails still end level with the buttons */
@media (min-width: 1340px) {
  main:has(.cpe-hero.jarm18) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }  /* indoor: no add-ons, so a slightly narrower picture side balances it */
  main:has(.cpe-hero.jarm18) .cpe-hero .gallery { align-self: stretch; }
  main:has(.cpe-hero.jarm18) .cpe-hero .gal-main { flex: 1 0 auto; }
  main:has(.cpe-hero.jarm18) .cpe-hero .gal-main img { height: 100%; }
}
/* chips and add-on lines scale with the width of the write-up column so they always stay on one line inside it */
@media (min-width: 1025px) {
  main:has(.cpe-hero.jarm18) .cpe-hero .cpe-copy { container-type: inline-size; }
  main:has(.cpe-hero.jarm18) .cpe-hero .chips { gap: min(5px, .8cqi); }
  main:has(.cpe-hero.jarm18) .cpe-hero .chips li { font-size: min(12px, 2cqi); padding: 6px min(9px, 1.2cqi); }
}
/* Overview: the opening words of each paragraph blue italic */
main:has(.cpe-hero.jarm18) .cpe-hero .ov em.r5g-blue { color: #0076af; font-style: italic; }

/* indoor: the longer title stays on one line (scales with the column) */
main:has(.cpe-hero.jarm18) .cpe-hero h1.r5g-title { white-space: nowrap; }
@media (min-width: 1025px) { main:has(.cpe-hero.jarm18) .cpe-hero h1.r5g-title { font-size: min(32px, 5.4cqi); } }
@media (max-width: 1024px) { main:has(.cpe-hero.jarm18) .cpe-hero h1.r5g-title { font-size: min(32px, calc((100vw - 52px) / 18)); } }
/* "MESH networking" back on the last chip: chips a little smaller on mid-size laptops so all 6 stay on one line */
@media (min-width: 1025px) and (max-width: 1339px) { main:has(.cpe-hero.jarm18) .cpe-hero .chips li { font-size: min(12px, 1.8cqi); padding: 6px min(9px, 1.1cqi); } }
/* "Choose your 5G Service Package" blue, not italic (Required keeps its own colour) */
main:has(.cpe-hero.jarm18) .svc-pick label { color: #0076af; font-style: normal; }

/* tab headings like the router pages (the page's own style sets them in the big serif) */
main:has(.cpe-hero.jarm18) .ppanel .band-head h2 { font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-weight: 700; letter-spacing: -.45px; line-height: 1.2; margin-bottom: 18px; }
main:has(.cpe-hero.jarm18) .ppanel .band-head h2 em.r5g-blue { color: #0076af; font-style: italic; }
main:has(.cpe-hero.jarm18) .ppanel .band-head { margin-bottom: 0; }
/* the highlight colours and card backgrounds the old sections gave (they were tied to .band / .band.alt) */
main:has(.cpe-hero.jarm18) .ppanel .hl { color: var(--blue-ink); font-weight: 700; }
main:has(.cpe-hero.jarm18) .ppanel .hl-brand { color: var(--magenta-ink); font-weight: 800; }
main:has(.cpe-hero.jarm18) .ppanel .ft,
main:has(.cpe-hero.jarm18) .ppanel .diff li { background: var(--bg); }
main:has(.cpe-hero.jarm18) .ppanel .ft.ft-wide { background: linear-gradient(150deg, color-mix(in srgb, var(--blue) 7%, var(--bg)) 0%, var(--bg) 60%); }
main:has(.cpe-hero.jarm18) .ppanel .diff .d-feature { background: linear-gradient(150deg, color-mix(in srgb, var(--blue) 7%, var(--bg)) 0%, var(--bg) 62%); }
main:has(.cpe-hero.jarm18) .ppanel .ft-num { color: color-mix(in srgb, var(--ink-faint) 15%, transparent); }
/* with the two new Overview paragraphs: picture side .6 (about 480px on a 23") so both columns end level on all desktops;
   the picture frame / the write-up take up any small difference */
@media (min-width: 1025px) {
  main:has(.cpe-hero.jarm18) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, .6fr) minmax(0, 1fr); }
  main:has(.cpe-hero.jarm18) .cpe-hero .gallery { align-self: stretch; }
  main:has(.cpe-hero.jarm18) .cpe-hero .gal-main { flex: 1 0 auto; }
  main:has(.cpe-hero.jarm18) .cpe-hero .gal-main img { height: 100%; }
}
@media (min-width: 1025px) {
  /* the write-up fills the row (this page's grid sets its items to the top), so any small difference is shared out */
  main:has(.cpe-hero.jarm18) .cpe-hero .cpe-copy { align-self: stretch; }
  /* the six chips on one line in the narrower write-up column */
  main:has(.cpe-hero.jarm18) .cpe-hero .chips { gap: min(5px, .7cqi); }
  main:has(.cpe-hero.jarm18) .cpe-hero .chips li { font-size: min(12px, 1.68cqi); padding: 6px min(9px, 1.1cqi); }
}
/* Features tab: the 5 cards smaller, in one row (icon above the title in each card) */
@media (min-width: 1025px) {
  main:has(.cpe-hero.jarm18) .ppanel .ft-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  main:has(.cpe-hero.jarm18) .ppanel .ft { grid-column: auto; grid-template-columns: minmax(0, 1fr); padding: 16px 16px 18px; row-gap: 0; }
  main:has(.cpe-hero.jarm18) .ppanel .ft > * { grid-column: 1; grid-row: auto; align-self: start; }
  main:has(.cpe-hero.jarm18) .ppanel .ft { align-content: start; grid-template-rows: none; grid-template-areas: none; }
  main:has(.cpe-hero.jarm18) .ppanel .ft > * { grid-area: auto; }
  main:has(.cpe-hero.jarm18) .ppanel .ft .ft-head { width: auto; height: auto; margin-bottom: 10px; }
  main:has(.cpe-hero.jarm18) .ppanel .ft .ft-ico { width: 32px; height: 32px; }
  main:has(.cpe-hero.jarm18) .ppanel .ft .ft-num { font-size: 44px; }
  main:has(.cpe-hero.jarm18) .ppanel .ft h3 { font-size: 16px; line-height: 1.3; width: auto; }
  main:has(.cpe-hero.jarm18) .ppanel .ft p { font-size: 13.2px; line-height: 1.6; width: auto; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  main:has(.cpe-hero.jarm18) .ppanel .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main:has(.cpe-hero.jarm18) .ppanel .ft { grid-column: auto; }
}
/* top section centred as one block: the write-up column is capped at 660px, so the two columns are sized to it and the
   block sits in the middle of the page instead of leaving a wide margin on the right */
@media (min-width: 1025px) {
  main:has(.cpe-hero.jarm18) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 480fr) minmax(0, 660fr); max-width: 1212px; margin-inline: auto; }
}
/* dead space inside the tabs (Randall): less space under each tab heading and under the card; shorter photo frames on
   A Closer Look; the Specs drawing box centred beside the table */
main:has(.cpe-hero.jarm18) .ppanel .band-head + * { margin-top: 18px; }
main:has(.cpe-hero.jarm18) .ppanel .yband { padding-bottom: 32px; }
main:has(.cpe-hero.jarm18) .ppanel .shot-card img { aspect-ratio: 5 / 4; }
main:has(.cpe-hero.jarm18) .ppanel .spec-split figure.dims { align-self: center; }

/* J-Arm: 4 thumbnails; the tab cards hold Randall's lists: the site's check-mark bullets in two columns (one on phones),
   the second level a small pink chevron */
main:has(.cpe-hero.jarm18) .cpe-hero ul.gal-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
main:has(.cpe-hero.jarm18) .ppanel .jl-list li strong { color: var(--ink, #1d2328); font-weight: 700; }
main:has(.cpe-hero.jarm18) .ppanel .jl-list li > span,
main:has(.cpe-hero.jarm18) .ppanel .jl-list li > div { color: #4d565e; line-height: 1.6; }
main:has(.cpe-hero.jarm18) .ppanel .jl-list .jl-sub { position: relative; margin: 6px 0 0; padding-left: 16px; }
main:has(.cpe-hero.jarm18) .ppanel .jl-list .jl-sub::before { content: ""; position: absolute; left: 1px; top: .62em; width: 5px; height: 5px;
  border-top: 2px solid #eb008b; border-right: 2px solid #eb008b; transform: rotate(45deg); opacity: .75; }
main:has(.cpe-hero.jarm18) .ppanel .jl-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 860px) { main:has(.cpe-hero.jarm18) .ppanel .jl-list { grid-template-columns: minmax(0, 1fr); } }
/* the longer title and the 7 chips stay inside the write-up column (they scale with it); picture side a little narrower
   so the write-up's natural height matches the picture + thumbnails (small, even gaps); block stays centred */
@media (min-width: 1025px) {
  main:has(.cpe-hero.jarm18) .cpe-hero h1.r5g-title { font-size: min(32px, 4.5cqi); }
  main:has(.cpe-hero.jarm18) .cpe-hero .chips li { font-size: min(12px, 1.5cqi); padding: 6px min(9px, .95cqi); }
  main:has(.cpe-hero.jarm18) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 430fr) minmax(0, 660fr); max-width: 1162px; }
}
/* tablets and phones: chips may wrap; on phones the title wraps at the normal size instead of shrinking to one line */
@media (max-width: 1024px) { main:has(.cpe-hero.jarm18) .cpe-hero .chips { flex-wrap: wrap; } }
@media (max-width: 640px) { main:has(.cpe-hero.jarm18) .cpe-hero h1.r5g-title { white-space: normal; font-size: 26px; } }
@media (min-width: 1025px) and (max-width: 1199px) { main:has(.cpe-hero.jarm18) .cpe-hero .chips li { font-size: min(12px, 1.5cqi); padding: 6px min(9px, .95cqi); } }
/* === 2026-10-24 J-Arm M/Duty page (Randall "take the lead"): uses the H/Duty styling (.jarm18) plus these: 5 thumbnails
   in one row, a wider picture side (this write-up has a longer Overview) so both columns end level, bigger chips (short words),
   Key Specs tab text across the whole card with "What's in the box" in 3 columns === */
main:has(.cpe-hero.jarm18md) .cpe-hero ul.gal-thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (min-width: 1025px) {
  main:has(.cpe-hero.jarm18md) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 495fr) minmax(0, 660fr); max-width: 1227px; }
  main:has(.cpe-hero.jarm18md) .cpe-hero .chips li { font-size: min(12px, 1.8cqi); padding: 6px min(9px, 1.15cqi); }
}
main:has(.cpe-hero.jarm18md) .ppanel .jl-prose { max-width: none; }
main:has(.cpe-hero.jarm18md) .ppanel .jl-prose > p { margin: 0 0 12px; }
main:has(.cpe-hero.jarm18md) .ppanel .jl-prose h3 { margin: 18px 0 4px; }
main:has(.cpe-hero.jarm18md) .ppanel .jl-box { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 44px; }
@media (max-width: 860px) { main:has(.cpe-hero.jarm18md) .ppanel .jl-box { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } }
@media (max-width: 480px) { main:has(.cpe-hero.jarm18md) .ppanel .jl-box { grid-template-columns: minmax(0, 1fr); } }
/* Key Specs: 2 columns in 1 row (Randall) - write-up left (wider), "What's in the box" right in a box; both end level
   (the box rows share out any difference) */
main:has(.cpe-hero.jarm18md) .ppanel .jl-split { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 40px; align-items: stretch; }
main:has(.cpe-hero.jarm18md) .ppanel .jl-split .jl-prose > p:last-child { margin-bottom: 0; }
main:has(.cpe-hero.jarm18md) .ppanel .jl-boxcol { display: flex; flex-direction: column; border: 1px solid #ece6dc; border-radius: 14px; padding: 18px 24px 8px; background: #fdfbf8; }
main:has(.cpe-hero.jarm18md) .ppanel .jl-boxcol h3 { margin: 0 0 4px; }
main:has(.cpe-hero.jarm18md) .ppanel .jl-boxcol .jl-box { flex: 1 1 auto; display: flex; flex-direction: column; }
main:has(.cpe-hero.jarm18md) .ppanel .jl-boxcol .jl-box li { flex: 1 1 auto; align-items: center; padding: 6px 0; }
main:has(.cpe-hero.jarm18md) .ppanel .jl-boxcol .jl-box li:last-child { border-bottom: 0; }
@media (max-width: 860px) {
  main:has(.cpe-hero.jarm18md) .ppanel .jl-split { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
/* Key Specs (Randall): the box only as wide as its text; heading + the two columns sit as one block in the middle of the card */
main:has(.cpe-hero.jarm18md) #panel-keyspecs .band-head,
main:has(.cpe-hero.jarm18md) #panel-keyspecs .jl-split { max-width: 1100px; margin-inline: auto; }
main:has(.cpe-hero.jarm18md) .ppanel .jl-split { grid-template-columns: minmax(0, 1fr) max-content; }
main:has(.cpe-hero.jarm18md) .ppanel .jl-boxcol .jl-box li { white-space: nowrap; }
@media (max-width: 860px) {
  main:has(.cpe-hero.jarm18md) .ppanel .jl-split { grid-template-columns: minmax(0, 1fr); }
  main:has(.cpe-hero.jarm18md) .ppanel .jl-boxcol { justify-self: start; }
}
/* === 2026-10-23 8dBi Omni antenna page (Randall "do your thing"): same look as the 4x4 MIMO page (copied; scoped by .cpe-hero.cat6pg, the product id differs between test and live): 8 thumbnails under the big picture, the 6 feature chips on one line,
   bigger "Choose your 5G Service Package" (not bold; Required stays bold), "Continental U.S. Only" on the Buy Now line === */
main:has(.cpe-hero.cat6pg) .cpe-hero ul.gal-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; overflow: visible; padding-bottom: 0; }
main:has(.cpe-hero.cat6pg) .cpe-hero ul.gal-thumbs li { flex: none; min-width: 0; }
main:has(.cpe-hero.cat6pg) .cpe-hero ul.gal-thumbs button { padding: 2px; border-radius: 9px; }
main:has(.cpe-hero.cat6pg) .cpe-hero ul.gal-thumbs img { border-radius: 7px; }
main:has(.cpe-hero.cat6pg) .cpe-hero .chips { flex-wrap: nowrap; gap: 5px; }
main:has(.cpe-hero.cat6pg) .cpe-hero .chips li { padding: 6px 9px; font-size: 12px; white-space: nowrap; }
main:has(.cpe-hero.cat6pg) .svc-pick label { font-size: 17px; font-weight: 400; }
main:has(.cpe-hero.cat6pg) .svc-pick .req { font-size: 13px; font-weight: 800; }
main:has(.cpe-hero.cat6pg) .cpe-hero .buy-row { display: inline-flex; vertical-align: middle; }
main:has(.cpe-hero.cat6pg) .cpe-hero .us-badge { display: inline-flex; vertical-align: middle; margin: 16px 0 0 14px; }
@media (min-width: 1025px) and (max-width: 1340px) {
  main:has(.cpe-hero.cat6pg) .cpe-hero .chips { gap: 4px; }
  main:has(.cpe-hero.cat6pg) .cpe-hero .chips li { padding: 5px 7px; font-size: 11px; }
}
@media (min-width: 1025px) and (max-width: 1200px) {
  main:has(.cpe-hero.cat6pg) .cpe-hero .chips li { padding: 5px 5px; font-size: 10.5px; }
}
@media (max-width: 640px) {
  main:has(.cpe-hero.cat6pg) .cpe-hero ul.gal-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  main:has(.cpe-hero.cat6pg) .cpe-hero .chips { flex-wrap: wrap; }
  main:has(.cpe-hero.cat6pg) .cpe-hero .buy-row { align-items: center; }
  main:has(.cpe-hero.cat6pg) .cpe-hero .buy-row .hbe-add { margin-top: 0; }
  main:has(.cpe-hero.cat6pg) .cpe-hero .us-badge { margin-left: 0; }
}
/* page title "HBE-5G Dual SIM Router": a little smaller, SIM pink italic (logo pink) */
main:has(.cpe-hero.cat6pg) .cpe-hero h1.r5g-title { font-size: 32px; }
main:has(.cpe-hero.cat6pg) .cpe-hero h1.r5g-title em { font-style: italic; color: #eb008b; }
@media (max-width: 640px) { main:has(.cpe-hero.cat6pg) .cpe-hero h1.r5g-title { font-size: min(26px, calc((100vw - 52px) / 11.5)); } }
/* write-up column tightened to the height of the picture + thumbnails (desktop): only the gaps between items */
@media (min-width: 1025px) {
  main:has(.cpe-hero.cat6pg) .cpe-hero .cpe-copy .model { margin-top: 8px; }
  main:has(.cpe-hero.cat6pg) .cpe-hero .cpe-copy .pricing { margin-top: 10px; margin-bottom: 0; }
  main:has(.cpe-hero.cat6pg) .cpe-hero .cpe-copy .ov { margin-top: 14px; }
  main:has(.cpe-hero.cat6pg) .cpe-hero .cpe-copy .ov h2 { margin-bottom: 8px; }
  main:has(.cpe-hero.cat6pg) .cpe-hero .cpe-copy .ov p { margin-bottom: 8px; }
  main:has(.cpe-hero.cat6pg) .cpe-hero .cpe-copy .ov p:last-child { margin-bottom: 0; }
  main:has(.cpe-hero.cat6pg) .cpe-hero .cpe-copy .chips { margin-top: 12px; }
  main:has(.cpe-hero.cat6pg) .cpe-hero .cpe-copy .svc-pick { margin-top: 12px; }
  main:has(.cpe-hero.cat6pg) .cpe-hero .cpe-copy .svc-pick label { margin-bottom: 5px; }
  main:has(.cpe-hero.cat6pg) .cpe-hero .cpe-copy .svc-pick select { padding-top: 9px; padding-bottom: 9px; }
  main:has(.cpe-hero.cat6pg) .cpe-hero .cpe-copy .svc-pick-compare { margin-top: 6px; }
  main:has(.cpe-hero.cat6pg) .cpe-hero .cpe-copy .buy-row,
  main:has(.cpe-hero.cat6pg) .cpe-hero .cpe-copy .us-badge { margin-top: 10px; }
}
/* when the write-up is shorter than picture + thumbnails (other fonts / screens), share the leftover space evenly between
   the items so Buy Now / Add to Cart / Continental U.S. Only always end level with the thumbnails */
@media (min-width: 1025px) {
  main:has(.cpe-hero.cat6pg) .cpe-hero .cpe-copy { display: grid; grid-template-columns: auto 1fr; align-content: space-between; }
  main:has(.cpe-hero.cat6pg) .cpe-hero .cpe-copy > * { grid-column: 1 / -1; min-width: 0; }
  main:has(.cpe-hero.cat6pg) .cpe-hero .cpe-copy > .buy-row { grid-column: 1; }
  main:has(.cpe-hero.cat6pg) .cpe-hero .cpe-copy > .us-badge { grid-column: 2; justify-self: start; align-self: end; }
  main:has(.cpe-hero.cat6pg) .cpe-hero .cpe-copy > .model { justify-self: start; }
}
/* === 2026-10-23 5G outdoor router At a glance tab (Randall): heading one line 32px with HBE-5G blue, section headings blue,
   wider "At a glance" box (no wrapped lines on desktop), write-up and box the same height === */
main:has(.cpe-hero.cat6pg) .ppanel .band-head { max-width: none; }
main:has(.cpe-hero.cat6pg) .ppanel .band-head h2 { font-size: 32px; white-space: nowrap; }
main:has(.cpe-hero.cat6pg) .ppanel .band-head h2 .nowrap { color: #0076af; }
main:has(.cpe-hero.cat6pg) .p-desc .prose h3 { color: #0076af; }
/* tight gaps on both sides; both sides end on the same line: the shorter side shares out the difference
   (between the 3 sections on the left, between the rows in the box) - widths chosen so the difference is small */
main:has(.cpe-hero.cat6pg) .p-desc .prose { align-self: stretch; display: flex; flex-direction: column; }
main:has(.cpe-hero.cat6pg) .p-desc .prose p { margin-bottom: 0; }
main:has(.cpe-hero.cat6pg) .p-desc .prose h3:not(:first-child) { margin-top: auto; padding-top: 16px; }
main:has(.cpe-hero.cat6pg) .p-desc .p-glance { align-self: stretch; display: flex; flex-direction: column; padding: 20px 26px 22px; }
main:has(.cpe-hero.cat6pg) .p-glance h3 { margin-bottom: 10px; }
main:has(.cpe-hero.cat6pg) .p-glance dl { flex: 1 1 auto; display: flex; flex-direction: column; }
main:has(.cpe-hero.cat6pg) .p-glance dl > div { flex: 1 1 auto; align-items: center; padding: 5px 0; }
main:has(.cpe-hero.cat6pg) .p-glance dl > div:first-child { padding-top: 0; }
main:has(.cpe-hero.cat6pg) .p-glance dl > div:last-child { padding-bottom: 0; }
@media (min-width: 1240px) {
  main:has(.cpe-hero.cat6pg) .p-desc { grid-template-columns: minmax(0, 1fr) 620px; }
  main:has(.cpe-hero.cat6pg) .p-glance dd { white-space: nowrap; }
  main:has(.cpe-hero.cat6pg) .p-glance dl > div:nth-child(4) dd { white-space: normal; }
}
@media (min-width: 1340px) {
  main:has(.cpe-hero.cat6pg) .p-desc { grid-template-columns: minmax(0, 1fr) 700px; }
}
@media (min-width: 861px) and (max-width: 1239px) {
  main:has(.cpe-hero.cat6pg) .p-desc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  main:has(.cpe-hero.cat6pg) .ppanel .band-head h2 { font-size: 26px; white-space: normal; }
}
/* less space under the top section, under the tab row, and at the top/bottom of the tab card (all tabs) */
main:has(.cpe-hero.cat6pg) .cpe-hero { padding-bottom: 28px; }
main:has(.cpe-hero.cat6pg) .ppanel .yband { padding-top: 16px; }
main:has(.cpe-hero.cat6pg) .ppanel .pcard { padding-top: 30px; padding-bottom: 30px; }
@media (max-width: 640px) {
  main:has(.cpe-hero.cat6pg) .cpe-hero { padding-bottom: 20px; }
  main:has(.cpe-hero.cat6pg) .ppanel .yband { padding-top: 14px; }
  main:has(.cpe-hero.cat6pg) .ppanel .pcard { padding-top: 20px; padding-bottom: 20px; }
}
/* coloured words in headings are always italic (Randall); "features" in Customer / Tech features blue italic */
main:has(.cpe-hero.cat6pg) .ppanel .band-head h2 .nowrap,
main:has(.cpe-hero.cat6pg) .ppanel h2 em.r5g-blue { color: #0076af; font-style: italic; }
/* price smaller (was 40px, bigger than the page title) */
main:has(.cpe-hero.cat6pg) .cpe-hero .pricing-now { font-size: 28px; }
@media (max-width: 640px) { main:has(.cpe-hero.cat6pg) .cpe-hero .pricing-now { font-size: 24px; } }
/* "Optional add-ons" under the service package picker: one compact line per antenna */
@media (max-width: 640px) {
}
/* with the add-ons the write-up is taller: compact add-ons box; on desktop the picture side is wider (bigger picture) and
   the white picture frame takes up any small difference, so the thumbnails still end level with the buttons */
@media (min-width: 1340px) {
  main:has(.cpe-hero.cat6pg) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }  /* indoor: no add-ons, so a slightly narrower picture side balances it */
  main:has(.cpe-hero.cat6pg) .cpe-hero .gallery { align-self: stretch; }
  main:has(.cpe-hero.cat6pg) .cpe-hero .gal-main { flex: 1 0 auto; }
  main:has(.cpe-hero.cat6pg) .cpe-hero .gal-main img { height: 100%; }
}
/* chips and add-on lines scale with the width of the write-up column so they always stay on one line inside it */
@media (min-width: 1025px) {
  main:has(.cpe-hero.cat6pg) .cpe-hero .cpe-copy { container-type: inline-size; }
  main:has(.cpe-hero.cat6pg) .cpe-hero .chips { gap: min(5px, .8cqi); }
  main:has(.cpe-hero.cat6pg) .cpe-hero .chips li { font-size: min(12px, 2cqi); padding: 6px min(9px, 1.2cqi); }
}
/* Overview: the opening words of each paragraph blue italic */
main:has(.cpe-hero.cat6pg) .cpe-hero .ov em.r5g-blue { color: #0076af; font-style: italic; }

/* indoor: the longer title stays on one line (scales with the column) */
main:has(.cpe-hero.cat6pg) .cpe-hero h1.r5g-title { white-space: nowrap; }
@media (min-width: 1025px) { main:has(.cpe-hero.cat6pg) .cpe-hero h1.r5g-title { font-size: min(32px, 5.4cqi); } }
@media (max-width: 1024px) { main:has(.cpe-hero.cat6pg) .cpe-hero h1.r5g-title { font-size: min(32px, calc((100vw - 52px) / 18)); } }
/* "MESH networking" back on the last chip: chips a little smaller on mid-size laptops so all 6 stay on one line */
@media (min-width: 1025px) and (max-width: 1339px) { main:has(.cpe-hero.cat6pg) .cpe-hero .chips li { font-size: min(12px, 1.8cqi); padding: 6px min(9px, 1.1cqi); } }
/* "Choose your 5G Service Package" blue, not italic (Required keeps its own colour) */
main:has(.cpe-hero.cat6pg) .svc-pick label { color: #0076af; font-style: normal; }

/* tab headings like the router pages (the page's own style sets them in the big serif) */
main:has(.cpe-hero.cat6pg) .ppanel .band-head h2 { font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-weight: 700; letter-spacing: -.45px; line-height: 1.2; margin-bottom: 18px; }
main:has(.cpe-hero.cat6pg) .ppanel .band-head h2 em.r5g-blue { color: #0076af; font-style: italic; }
main:has(.cpe-hero.cat6pg) .ppanel .band-head { margin-bottom: 0; }
/* the highlight colours and card backgrounds the old sections gave (they were tied to .band / .band.alt) */
main:has(.cpe-hero.cat6pg) .ppanel .hl { color: var(--blue-ink); font-weight: 700; }
main:has(.cpe-hero.cat6pg) .ppanel .hl-brand { color: var(--magenta-ink); font-weight: 800; }
main:has(.cpe-hero.cat6pg) .ppanel .ft,
main:has(.cpe-hero.cat6pg) .ppanel .diff li { background: var(--bg); }
main:has(.cpe-hero.cat6pg) .ppanel .ft.ft-wide { background: linear-gradient(150deg, color-mix(in srgb, var(--blue) 7%, var(--bg)) 0%, var(--bg) 60%); }
main:has(.cpe-hero.cat6pg) .ppanel .diff .d-feature { background: linear-gradient(150deg, color-mix(in srgb, var(--blue) 7%, var(--bg)) 0%, var(--bg) 62%); }
main:has(.cpe-hero.cat6pg) .ppanel .ft-num { color: color-mix(in srgb, var(--ink-faint) 15%, transparent); }
/* with the two new Overview paragraphs: picture side .6 (about 480px on a 23") so both columns end level on all desktops;
   the picture frame / the write-up take up any small difference */
@media (min-width: 1025px) {
  main:has(.cpe-hero.cat6pg) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, .6fr) minmax(0, 1fr); }
  main:has(.cpe-hero.cat6pg) .cpe-hero .gallery { align-self: stretch; }
  main:has(.cpe-hero.cat6pg) .cpe-hero .gal-main { flex: 1 0 auto; }
  main:has(.cpe-hero.cat6pg) .cpe-hero .gal-main img { height: 100%; }
}
@media (min-width: 1025px) {
  /* the write-up fills the row (this page's grid sets its items to the top), so any small difference is shared out */
  main:has(.cpe-hero.cat6pg) .cpe-hero .cpe-copy { align-self: stretch; }
  /* the six chips on one line in the narrower write-up column */
  main:has(.cpe-hero.cat6pg) .cpe-hero .chips { gap: min(5px, .7cqi); }
  main:has(.cpe-hero.cat6pg) .cpe-hero .chips li { font-size: min(12px, 1.68cqi); padding: 6px min(9px, 1.1cqi); }
}
/* Features tab: the 5 cards smaller, in one row (icon above the title in each card) */
@media (min-width: 1025px) {
  main:has(.cpe-hero.cat6pg) .ppanel .ft-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  main:has(.cpe-hero.cat6pg) .ppanel .ft { grid-column: auto; grid-template-columns: minmax(0, 1fr); padding: 16px 16px 18px; row-gap: 0; }
  main:has(.cpe-hero.cat6pg) .ppanel .ft > * { grid-column: 1; grid-row: auto; align-self: start; }
  main:has(.cpe-hero.cat6pg) .ppanel .ft { align-content: start; grid-template-rows: none; grid-template-areas: none; }
  main:has(.cpe-hero.cat6pg) .ppanel .ft > * { grid-area: auto; }
  main:has(.cpe-hero.cat6pg) .ppanel .ft .ft-head { width: auto; height: auto; margin-bottom: 10px; }
  main:has(.cpe-hero.cat6pg) .ppanel .ft .ft-ico { width: 32px; height: 32px; }
  main:has(.cpe-hero.cat6pg) .ppanel .ft .ft-num { font-size: 44px; }
  main:has(.cpe-hero.cat6pg) .ppanel .ft h3 { font-size: 16px; line-height: 1.3; width: auto; }
  main:has(.cpe-hero.cat6pg) .ppanel .ft p { font-size: 13.2px; line-height: 1.6; width: auto; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  main:has(.cpe-hero.cat6pg) .ppanel .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main:has(.cpe-hero.cat6pg) .ppanel .ft { grid-column: auto; }
}
/* top section centred as one block: the write-up column is capped at 660px, so the two columns are sized to it and the
   block sits in the middle of the page instead of leaving a wide margin on the right */
@media (min-width: 1025px) {
  main:has(.cpe-hero.cat6pg) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 480fr) minmax(0, 660fr); max-width: 1212px; margin-inline: auto; }
}
/* dead space inside the tabs (Randall): less space under each tab heading and under the card; shorter photo frames on
   A Closer Look; the Specs drawing box centred beside the table */
main:has(.cpe-hero.cat6pg) .ppanel .band-head + * { margin-top: 18px; }
main:has(.cpe-hero.cat6pg) .ppanel .yband { padding-bottom: 32px; }
main:has(.cpe-hero.cat6pg) .ppanel .shot-card img { aspect-ratio: 5 / 4; }
main:has(.cpe-hero.cat6pg) .ppanel .spec-split figure.dims { align-self: center; }

/* J-Arm: 4 thumbnails; the tab cards hold Randall's lists: the site's check-mark bullets in two columns (one on phones),
   the second level a small pink chevron */
main:has(.cpe-hero.cat6pg) .cpe-hero ul.gal-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
main:has(.cpe-hero.cat6pg) .ppanel .jl-list li strong { color: var(--ink, #1d2328); font-weight: 700; }
main:has(.cpe-hero.cat6pg) .ppanel .jl-list li > span,
main:has(.cpe-hero.cat6pg) .ppanel .jl-list li > div { color: #4d565e; line-height: 1.6; }
main:has(.cpe-hero.cat6pg) .ppanel .jl-list .jl-sub { position: relative; margin: 6px 0 0; padding-left: 16px; }
main:has(.cpe-hero.cat6pg) .ppanel .jl-list .jl-sub::before { content: ""; position: absolute; left: 1px; top: .62em; width: 5px; height: 5px;
  border-top: 2px solid #eb008b; border-right: 2px solid #eb008b; transform: rotate(45deg); opacity: .75; }
main:has(.cpe-hero.cat6pg) .ppanel .jl-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 860px) { main:has(.cpe-hero.cat6pg) .ppanel .jl-list { grid-template-columns: minmax(0, 1fr); } }
/* the longer title and the 7 chips stay inside the write-up column (they scale with it); picture side a little narrower
   so the write-up's natural height matches the picture + thumbnails (small, even gaps); block stays centred */
@media (min-width: 1025px) {
  main:has(.cpe-hero.cat6pg) .cpe-hero h1.r5g-title { font-size: min(32px, 4.5cqi); }
  main:has(.cpe-hero.cat6pg) .cpe-hero .chips li { font-size: min(12px, 1.5cqi); padding: 6px min(9px, .95cqi); }
  main:has(.cpe-hero.cat6pg) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 430fr) minmax(0, 660fr); max-width: 1162px; }
}
/* tablets and phones: chips may wrap; on phones the title wraps at the normal size instead of shrinking to one line */
@media (max-width: 1024px) { main:has(.cpe-hero.cat6pg) .cpe-hero .chips { flex-wrap: wrap; } }
@media (max-width: 640px) { main:has(.cpe-hero.cat6pg) .cpe-hero h1.r5g-title { white-space: normal; font-size: 26px; } }
@media (min-width: 1025px) and (max-width: 1199px) { main:has(.cpe-hero.cat6pg) .cpe-hero .chips li { font-size: min(12px, 1.5cqi); padding: 6px min(9px, .95cqi); } }
/* Cat6: 5 thumbnails in one row; Details tab = 3 boxes in one row, same height (About / What it is built from / Where it goes) */
main:has(.cpe-hero.cat6pg) .cpe-hero ul.gal-thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
main:has(.cpe-hero.cat6pg) .ppanel .c6-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
main:has(.cpe-hero.cat6pg) .ppanel .c6-box { border: 1px solid #ece6dc; border-radius: 14px; padding: 20px 22px; background: #fdfbf8; }
main:has(.cpe-hero.cat6pg) .ppanel .c6-box h3 { margin: 0 0 10px; color: #0076af; font-size: 18px; }
main:has(.cpe-hero.cat6pg) .ppanel .c6-box p { margin: 0 0 10px; color: #4d565e; font-size: 15px; line-height: 1.65; }
main:has(.cpe-hero.cat6pg) .ppanel .c6-box p:last-child { margin-bottom: 0; }
main:has(.cpe-hero.cat6pg) .ppanel .c6-box .kf-list { grid-template-columns: minmax(0, 1fr); }
main:has(.cpe-hero.cat6pg) .ppanel .c6-box .kf-list li { font-size: 15px; padding: 9px 0; }
main:has(.cpe-hero.cat6pg) .ppanel .c6-box .kf-list li:last-child { border-bottom: 0; padding-bottom: 0; }
@media (max-width: 1024px) { main:has(.cpe-hero.cat6pg) .ppanel .c6-boxes { grid-template-columns: minmax(0, 1fr); } }
/* picture side wider (this write-up has the length picker and a long Overview) so the photo stays square and ends level */
@media (min-width: 1025px) {
  main:has(.cpe-hero.cat6pg) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 600fr) minmax(0, 660fr); max-width: 1332px; }
}
/* the middle box's list rows share out the space so its last row ends level with the other two boxes */
main:has(.cpe-hero.cat6pg) .ppanel .c6-box { display: flex; flex-direction: column; }
main:has(.cpe-hero.cat6pg) .ppanel .c6-box .kf-list { flex: 1 1 auto; display: flex; flex-direction: column; }
main:has(.cpe-hero.cat6pg) .ppanel .c6-box .kf-list li { flex: 1 1 auto; align-items: center; }
/* === 2026-10-23 8dBi Omni antenna page (Randall "do your thing"): same look as the 4x4 MIMO page (copied; scoped by .cpe-hero.grippg, the product id differs between test and live): 8 thumbnails under the big picture, the 6 feature chips on one line,
   bigger "Choose your 5G Service Package" (not bold; Required stays bold), "Continental U.S. Only" on the Buy Now line === */
main:has(.cpe-hero.grippg) .cpe-hero ul.gal-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; overflow: visible; padding-bottom: 0; }
main:has(.cpe-hero.grippg) .cpe-hero ul.gal-thumbs li { flex: none; min-width: 0; }
main:has(.cpe-hero.grippg) .cpe-hero ul.gal-thumbs button { padding: 2px; border-radius: 9px; }
main:has(.cpe-hero.grippg) .cpe-hero ul.gal-thumbs img { border-radius: 7px; }
main:has(.cpe-hero.grippg) .cpe-hero .chips { flex-wrap: nowrap; gap: 5px; }
main:has(.cpe-hero.grippg) .cpe-hero .chips li { padding: 6px 9px; font-size: 12px; white-space: nowrap; }
main:has(.cpe-hero.grippg) .svc-pick label { font-size: 17px; font-weight: 400; }
main:has(.cpe-hero.grippg) .svc-pick .req { font-size: 13px; font-weight: 800; }
main:has(.cpe-hero.grippg) .cpe-hero .buy-row { display: inline-flex; vertical-align: middle; }
main:has(.cpe-hero.grippg) .cpe-hero .us-badge { display: inline-flex; vertical-align: middle; margin: 16px 0 0 14px; }
@media (min-width: 1025px) and (max-width: 1340px) {
  main:has(.cpe-hero.grippg) .cpe-hero .chips { gap: 4px; }
  main:has(.cpe-hero.grippg) .cpe-hero .chips li { padding: 5px 7px; font-size: 11px; }
}
@media (min-width: 1025px) and (max-width: 1200px) {
  main:has(.cpe-hero.grippg) .cpe-hero .chips li { padding: 5px 5px; font-size: 10.5px; }
}
@media (max-width: 640px) {
  main:has(.cpe-hero.grippg) .cpe-hero ul.gal-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  main:has(.cpe-hero.grippg) .cpe-hero .chips { flex-wrap: wrap; }
  main:has(.cpe-hero.grippg) .cpe-hero .buy-row { align-items: center; }
  main:has(.cpe-hero.grippg) .cpe-hero .buy-row .hbe-add { margin-top: 0; }
  main:has(.cpe-hero.grippg) .cpe-hero .us-badge { margin-left: 0; }
}
/* page title "HBE-5G Dual SIM Router": a little smaller, SIM pink italic (logo pink) */
main:has(.cpe-hero.grippg) .cpe-hero h1.r5g-title { font-size: 32px; }
main:has(.cpe-hero.grippg) .cpe-hero h1.r5g-title em { font-style: italic; color: #eb008b; }
@media (max-width: 640px) { main:has(.cpe-hero.grippg) .cpe-hero h1.r5g-title { font-size: min(26px, calc((100vw - 52px) / 11.5)); } }
/* write-up column tightened to the height of the picture + thumbnails (desktop): only the gaps between items */
@media (min-width: 1025px) {
  main:has(.cpe-hero.grippg) .cpe-hero .cpe-copy .model { margin-top: 8px; }
  main:has(.cpe-hero.grippg) .cpe-hero .cpe-copy .pricing { margin-top: 10px; margin-bottom: 0; }
  main:has(.cpe-hero.grippg) .cpe-hero .cpe-copy .ov { margin-top: 14px; }
  main:has(.cpe-hero.grippg) .cpe-hero .cpe-copy .ov h2 { margin-bottom: 8px; }
  main:has(.cpe-hero.grippg) .cpe-hero .cpe-copy .ov p { margin-bottom: 8px; }
  main:has(.cpe-hero.grippg) .cpe-hero .cpe-copy .ov p:last-child { margin-bottom: 0; }
  main:has(.cpe-hero.grippg) .cpe-hero .cpe-copy .chips { margin-top: 12px; }
  main:has(.cpe-hero.grippg) .cpe-hero .cpe-copy .svc-pick { margin-top: 12px; }
  main:has(.cpe-hero.grippg) .cpe-hero .cpe-copy .svc-pick label { margin-bottom: 5px; }
  main:has(.cpe-hero.grippg) .cpe-hero .cpe-copy .svc-pick select { padding-top: 9px; padding-bottom: 9px; }
  main:has(.cpe-hero.grippg) .cpe-hero .cpe-copy .svc-pick-compare { margin-top: 6px; }
  main:has(.cpe-hero.grippg) .cpe-hero .cpe-copy .buy-row,
  main:has(.cpe-hero.grippg) .cpe-hero .cpe-copy .us-badge { margin-top: 10px; }
}
/* when the write-up is shorter than picture + thumbnails (other fonts / screens), share the leftover space evenly between
   the items so Buy Now / Add to Cart / Continental U.S. Only always end level with the thumbnails */
@media (min-width: 1025px) {
  main:has(.cpe-hero.grippg) .cpe-hero .cpe-copy { display: grid; grid-template-columns: auto 1fr; align-content: space-between; }
  main:has(.cpe-hero.grippg) .cpe-hero .cpe-copy > * { grid-column: 1 / -1; min-width: 0; }
  main:has(.cpe-hero.grippg) .cpe-hero .cpe-copy > .buy-row { grid-column: 1; }
  main:has(.cpe-hero.grippg) .cpe-hero .cpe-copy > .us-badge { grid-column: 2; justify-self: start; align-self: end; }
  main:has(.cpe-hero.grippg) .cpe-hero .cpe-copy > .model { justify-self: start; }
}
/* === 2026-10-23 5G outdoor router At a glance tab (Randall): heading one line 32px with HBE-5G blue, section headings blue,
   wider "At a glance" box (no wrapped lines on desktop), write-up and box the same height === */
main:has(.cpe-hero.grippg) .ppanel .band-head { max-width: none; }
main:has(.cpe-hero.grippg) .ppanel .band-head h2 { font-size: 32px; white-space: nowrap; }
main:has(.cpe-hero.grippg) .ppanel .band-head h2 .nowrap { color: #0076af; }
main:has(.cpe-hero.grippg) .p-desc .prose h3 { color: #0076af; }
/* tight gaps on both sides; both sides end on the same line: the shorter side shares out the difference
   (between the 3 sections on the left, between the rows in the box) - widths chosen so the difference is small */
main:has(.cpe-hero.grippg) .p-desc .prose { align-self: stretch; display: flex; flex-direction: column; }
main:has(.cpe-hero.grippg) .p-desc .prose p { margin-bottom: 0; }
main:has(.cpe-hero.grippg) .p-desc .prose h3:not(:first-child) { margin-top: auto; padding-top: 16px; }
main:has(.cpe-hero.grippg) .p-desc .p-glance { align-self: stretch; display: flex; flex-direction: column; padding: 20px 26px 22px; }
main:has(.cpe-hero.grippg) .p-glance h3 { margin-bottom: 10px; }
main:has(.cpe-hero.grippg) .p-glance dl { flex: 1 1 auto; display: flex; flex-direction: column; }
main:has(.cpe-hero.grippg) .p-glance dl > div { flex: 1 1 auto; align-items: center; padding: 5px 0; }
main:has(.cpe-hero.grippg) .p-glance dl > div:first-child { padding-top: 0; }
main:has(.cpe-hero.grippg) .p-glance dl > div:last-child { padding-bottom: 0; }
@media (min-width: 1240px) {
  main:has(.cpe-hero.grippg) .p-desc { grid-template-columns: minmax(0, 1fr) 620px; }
  main:has(.cpe-hero.grippg) .p-glance dd { white-space: nowrap; }
  main:has(.cpe-hero.grippg) .p-glance dl > div:nth-child(4) dd { white-space: normal; }
}
@media (min-width: 1340px) {
  main:has(.cpe-hero.grippg) .p-desc { grid-template-columns: minmax(0, 1fr) 700px; }
}
@media (min-width: 861px) and (max-width: 1239px) {
  main:has(.cpe-hero.grippg) .p-desc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  main:has(.cpe-hero.grippg) .ppanel .band-head h2 { font-size: 26px; white-space: normal; }
}
/* less space under the top section, under the tab row, and at the top/bottom of the tab card (all tabs) */
main:has(.cpe-hero.grippg) .cpe-hero { padding-bottom: 28px; }
main:has(.cpe-hero.grippg) .ppanel .yband { padding-top: 16px; }
main:has(.cpe-hero.grippg) .ppanel .pcard { padding-top: 30px; padding-bottom: 30px; }
@media (max-width: 640px) {
  main:has(.cpe-hero.grippg) .cpe-hero { padding-bottom: 20px; }
  main:has(.cpe-hero.grippg) .ppanel .yband { padding-top: 14px; }
  main:has(.cpe-hero.grippg) .ppanel .pcard { padding-top: 20px; padding-bottom: 20px; }
}
/* coloured words in headings are always italic (Randall); "features" in Customer / Tech features blue italic */
main:has(.cpe-hero.grippg) .ppanel .band-head h2 .nowrap,
main:has(.cpe-hero.grippg) .ppanel h2 em.r5g-blue { color: #0076af; font-style: italic; }
/* price smaller (was 40px, bigger than the page title) */
main:has(.cpe-hero.grippg) .cpe-hero .pricing-now { font-size: 28px; }
@media (max-width: 640px) { main:has(.cpe-hero.grippg) .cpe-hero .pricing-now { font-size: 24px; } }
/* "Optional add-ons" under the service package picker: one compact line per antenna */
@media (max-width: 640px) {
}
/* with the add-ons the write-up is taller: compact add-ons box; on desktop the picture side is wider (bigger picture) and
   the white picture frame takes up any small difference, so the thumbnails still end level with the buttons */
@media (min-width: 1340px) {
  main:has(.cpe-hero.grippg) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }  /* indoor: no add-ons, so a slightly narrower picture side balances it */
  main:has(.cpe-hero.grippg) .cpe-hero .gallery { align-self: stretch; }
  main:has(.cpe-hero.grippg) .cpe-hero .gal-main { flex: 1 0 auto; }
  main:has(.cpe-hero.grippg) .cpe-hero .gal-main img { height: 100%; }
}
/* chips and add-on lines scale with the width of the write-up column so they always stay on one line inside it */
@media (min-width: 1025px) {
  main:has(.cpe-hero.grippg) .cpe-hero .cpe-copy { container-type: inline-size; }
  main:has(.cpe-hero.grippg) .cpe-hero .chips { gap: min(5px, .8cqi); }
  main:has(.cpe-hero.grippg) .cpe-hero .chips li { font-size: min(12px, 2cqi); padding: 6px min(9px, 1.2cqi); }
}
/* Overview: the opening words of each paragraph blue italic */
main:has(.cpe-hero.grippg) .cpe-hero .ov em.r5g-blue { color: #0076af; font-style: italic; }

/* indoor: the longer title stays on one line (scales with the column) */
main:has(.cpe-hero.grippg) .cpe-hero h1.r5g-title { white-space: nowrap; }
@media (min-width: 1025px) { main:has(.cpe-hero.grippg) .cpe-hero h1.r5g-title { font-size: min(32px, 5.4cqi); } }
@media (max-width: 1024px) { main:has(.cpe-hero.grippg) .cpe-hero h1.r5g-title { font-size: min(32px, calc((100vw - 52px) / 18)); } }
/* "MESH networking" back on the last chip: chips a little smaller on mid-size laptops so all 6 stay on one line */
@media (min-width: 1025px) and (max-width: 1339px) { main:has(.cpe-hero.grippg) .cpe-hero .chips li { font-size: min(12px, 1.8cqi); padding: 6px min(9px, 1.1cqi); } }
/* "Choose your 5G Service Package" blue, not italic (Required keeps its own colour) */
main:has(.cpe-hero.grippg) .svc-pick label { color: #0076af; font-style: normal; }

/* tab headings like the router pages (the page's own style sets them in the big serif) */
main:has(.cpe-hero.grippg) .ppanel .band-head h2 { font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-weight: 700; letter-spacing: -.45px; line-height: 1.2; margin-bottom: 18px; }
main:has(.cpe-hero.grippg) .ppanel .band-head h2 em.r5g-blue { color: #0076af; font-style: italic; }
main:has(.cpe-hero.grippg) .ppanel .band-head { margin-bottom: 0; }
/* the highlight colours and card backgrounds the old sections gave (they were tied to .band / .band.alt) */
main:has(.cpe-hero.grippg) .ppanel .hl { color: var(--blue-ink); font-weight: 700; }
main:has(.cpe-hero.grippg) .ppanel .hl-brand { color: var(--magenta-ink); font-weight: 800; }
main:has(.cpe-hero.grippg) .ppanel .ft,
main:has(.cpe-hero.grippg) .ppanel .diff li { background: var(--bg); }
main:has(.cpe-hero.grippg) .ppanel .ft.ft-wide { background: linear-gradient(150deg, color-mix(in srgb, var(--blue) 7%, var(--bg)) 0%, var(--bg) 60%); }
main:has(.cpe-hero.grippg) .ppanel .diff .d-feature { background: linear-gradient(150deg, color-mix(in srgb, var(--blue) 7%, var(--bg)) 0%, var(--bg) 62%); }
main:has(.cpe-hero.grippg) .ppanel .ft-num { color: color-mix(in srgb, var(--ink-faint) 15%, transparent); }
/* with the two new Overview paragraphs: picture side .6 (about 480px on a 23") so both columns end level on all desktops;
   the picture frame / the write-up take up any small difference */
@media (min-width: 1025px) {
  main:has(.cpe-hero.grippg) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, .6fr) minmax(0, 1fr); }
  main:has(.cpe-hero.grippg) .cpe-hero .gallery { align-self: stretch; }
  main:has(.cpe-hero.grippg) .cpe-hero .gal-main { flex: 1 0 auto; }
  main:has(.cpe-hero.grippg) .cpe-hero .gal-main img { height: 100%; }
}
@media (min-width: 1025px) {
  /* the write-up fills the row (this page's grid sets its items to the top), so any small difference is shared out */
  main:has(.cpe-hero.grippg) .cpe-hero .cpe-copy { align-self: stretch; }
  /* the six chips on one line in the narrower write-up column */
  main:has(.cpe-hero.grippg) .cpe-hero .chips { gap: min(5px, .7cqi); }
  main:has(.cpe-hero.grippg) .cpe-hero .chips li { font-size: min(12px, 1.68cqi); padding: 6px min(9px, 1.1cqi); }
}
/* Features tab: the 5 cards smaller, in one row (icon above the title in each card) */
@media (min-width: 1025px) {
  main:has(.cpe-hero.grippg) .ppanel .ft-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  main:has(.cpe-hero.grippg) .ppanel .ft { grid-column: auto; grid-template-columns: minmax(0, 1fr); padding: 16px 16px 18px; row-gap: 0; }
  main:has(.cpe-hero.grippg) .ppanel .ft > * { grid-column: 1; grid-row: auto; align-self: start; }
  main:has(.cpe-hero.grippg) .ppanel .ft { align-content: start; grid-template-rows: none; grid-template-areas: none; }
  main:has(.cpe-hero.grippg) .ppanel .ft > * { grid-area: auto; }
  main:has(.cpe-hero.grippg) .ppanel .ft .ft-head { width: auto; height: auto; margin-bottom: 10px; }
  main:has(.cpe-hero.grippg) .ppanel .ft .ft-ico { width: 32px; height: 32px; }
  main:has(.cpe-hero.grippg) .ppanel .ft .ft-num { font-size: 44px; }
  main:has(.cpe-hero.grippg) .ppanel .ft h3 { font-size: 16px; line-height: 1.3; width: auto; }
  main:has(.cpe-hero.grippg) .ppanel .ft p { font-size: 13.2px; line-height: 1.6; width: auto; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  main:has(.cpe-hero.grippg) .ppanel .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main:has(.cpe-hero.grippg) .ppanel .ft { grid-column: auto; }
}
/* top section centred as one block: the write-up column is capped at 660px, so the two columns are sized to it and the
   block sits in the middle of the page instead of leaving a wide margin on the right */
@media (min-width: 1025px) {
  main:has(.cpe-hero.grippg) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 480fr) minmax(0, 660fr); max-width: 1212px; margin-inline: auto; }
}
/* dead space inside the tabs (Randall): less space under each tab heading and under the card; shorter photo frames on
   A Closer Look; the Specs drawing box centred beside the table */
main:has(.cpe-hero.grippg) .ppanel .band-head + * { margin-top: 18px; }
main:has(.cpe-hero.grippg) .ppanel .yband { padding-bottom: 32px; }
main:has(.cpe-hero.grippg) .ppanel .shot-card img { aspect-ratio: 5 / 4; }
main:has(.cpe-hero.grippg) .ppanel .spec-split figure.dims { align-self: center; }

/* J-Arm: 4 thumbnails; the tab cards hold Randall's lists: the site's check-mark bullets in two columns (one on phones),
   the second level a small pink chevron */
main:has(.cpe-hero.grippg) .cpe-hero ul.gal-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
main:has(.cpe-hero.grippg) .ppanel .jl-list li strong { color: var(--ink, #1d2328); font-weight: 700; }
main:has(.cpe-hero.grippg) .ppanel .jl-list li > span,
main:has(.cpe-hero.grippg) .ppanel .jl-list li > div { color: #4d565e; line-height: 1.6; }
main:has(.cpe-hero.grippg) .ppanel .jl-list .jl-sub { position: relative; margin: 6px 0 0; padding-left: 16px; }
main:has(.cpe-hero.grippg) .ppanel .jl-list .jl-sub::before { content: ""; position: absolute; left: 1px; top: .62em; width: 5px; height: 5px;
  border-top: 2px solid #eb008b; border-right: 2px solid #eb008b; transform: rotate(45deg); opacity: .75; }
main:has(.cpe-hero.grippg) .ppanel .jl-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 860px) { main:has(.cpe-hero.grippg) .ppanel .jl-list { grid-template-columns: minmax(0, 1fr); } }
/* the longer title and the 7 chips stay inside the write-up column (they scale with it); picture side a little narrower
   so the write-up's natural height matches the picture + thumbnails (small, even gaps); block stays centred */
@media (min-width: 1025px) {
  main:has(.cpe-hero.grippg) .cpe-hero h1.r5g-title { font-size: min(32px, 4.5cqi); }
  main:has(.cpe-hero.grippg) .cpe-hero .chips li { font-size: min(12px, 1.5cqi); padding: 6px min(9px, .95cqi); }
  main:has(.cpe-hero.grippg) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 430fr) minmax(0, 660fr); max-width: 1162px; }
}
/* tablets and phones: chips may wrap; on phones the title wraps at the normal size instead of shrinking to one line */
@media (max-width: 1024px) { main:has(.cpe-hero.grippg) .cpe-hero .chips { flex-wrap: wrap; } }
@media (max-width: 640px) { main:has(.cpe-hero.grippg) .cpe-hero h1.r5g-title { white-space: normal; font-size: 26px; } }
@media (min-width: 1025px) and (max-width: 1199px) { main:has(.cpe-hero.grippg) .cpe-hero .chips li { font-size: min(12px, 1.5cqi); padding: 6px min(9px, .95cqi); } }
/* Cat6: 5 thumbnails in one row; Details tab = 3 boxes in one row, same height (About / What it is built from / Where it goes) */
main:has(.cpe-hero.grippg) .cpe-hero ul.gal-thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
main:has(.cpe-hero.grippg) .ppanel .c6-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
main:has(.cpe-hero.grippg) .ppanel .c6-box { border: 1px solid #ece6dc; border-radius: 14px; padding: 20px 22px; background: #fdfbf8; }
main:has(.cpe-hero.grippg) .ppanel .c6-box h3 { margin: 0 0 10px; color: #0076af; font-size: 18px; }
main:has(.cpe-hero.grippg) .ppanel .c6-box p { margin: 0 0 10px; color: #4d565e; font-size: 15px; line-height: 1.65; }
main:has(.cpe-hero.grippg) .ppanel .c6-box p:last-child { margin-bottom: 0; }
main:has(.cpe-hero.grippg) .ppanel .c6-box .kf-list { grid-template-columns: minmax(0, 1fr); }
main:has(.cpe-hero.grippg) .ppanel .c6-box .kf-list li { font-size: 15px; padding: 9px 0; }
main:has(.cpe-hero.grippg) .ppanel .c6-box .kf-list li:last-child { border-bottom: 0; padding-bottom: 0; }
@media (max-width: 1024px) { main:has(.cpe-hero.grippg) .ppanel .c6-boxes { grid-template-columns: minmax(0, 1fr); } }
/* picture side wider (this write-up has the length picker and a long Overview) so the photo stays square and ends level */
@media (min-width: 1025px) {
  main:has(.cpe-hero.grippg) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 600fr) minmax(0, 660fr); max-width: 1332px; }
}
/* the middle box's list rows share out the space so its last row ends level with the other two boxes */
main:has(.cpe-hero.grippg) .ppanel .c6-box { display: flex; flex-direction: column; }
main:has(.cpe-hero.grippg) .ppanel .c6-box .kf-list { flex: 1 1 auto; display: flex; flex-direction: column; }
main:has(.cpe-hero.grippg) .ppanel .c6-box .kf-list li { flex: 1 1 auto; align-items: center; }
/* Grip Clip: one photo (no thumbnails) and a short write-up, so a smaller picture side; photo as tall as the write-up */
@media (min-width: 1025px) {
  main:has(.cpe-hero.grippg) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 310fr) minmax(0, 660fr); max-width: 1042px; }
}
@media (max-width: 1024px) { main:has(.cpe-hero.grippg) .cpe-hero .gallery { max-width: 420px; margin-inline: auto; width: 100%; } }
/* the middle box has the least text: narrower middle box, wider outer boxes, so all three come out about the same height */
@media (min-width: 1025px) { main:has(.cpe-hero.grippg) .ppanel .c6-boxes { grid-template-columns: minmax(0, 1.1fr) minmax(0, .74fr) minmax(0, 1.16fr); } }
/* one photo: no thumbnail strip (the copied rules showed the single thumbnail); photo sized to the write-up's height */
main:has(.cpe-hero.grippg) .cpe-hero .gallery.solo ul.gal-thumbs { display: none; }
@media (min-width: 1025px) {
  main:has(.cpe-hero.grippg) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 360fr) minmax(0, 660fr); max-width: 1092px; }
}

/* === 2026-10-24 HBE Internet mega menu, new look to try (Randall): the blue logo panel a bit closer to the logo,
   the same 10px all round; the heading and the 3 links centred in their column. === */
@media (min-width: 1010px) {
  html body header.site nav.main .has-mega.hbei .ab-grid {
    grid-template-columns: 172px max-content;
  }

  html body header.site nav.main .has-mega.hbei .ab-shot {
    padding: 10px;
  }

  html body header.site nav.main .has-mega.hbei .ab-links,
  html body header.site nav.main .has-mega.hbei .ab-links h4 {
    text-align: center;
  }

  /* equal room both sides so the text sits on the column's centre line; no sideways nudge on hover */
  html body header.site nav.main .has-mega.hbei .ab-links a,
  html body header.site nav.main .has-mega.hbei .ab-links a:hover {
    padding-left: 18px;
    padding-right: 18px;
  }
}
/* === 2026-10-23 8dBi Omni antenna page (Randall "do your thing"): same look as the 4x4 MIMO page (copied; scoped by .cpe-hero.mtpg, the product id differs between test and live): 8 thumbnails under the big picture, the 6 feature chips on one line,
   bigger "Choose your 5G Service Package" (not bold; Required stays bold), "Continental U.S. Only" on the Buy Now line === */
main:has(.cpe-hero.mtpg) .cpe-hero ul.gal-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; overflow: visible; padding-bottom: 0; }
main:has(.cpe-hero.mtpg) .cpe-hero ul.gal-thumbs li { flex: none; min-width: 0; }
main:has(.cpe-hero.mtpg) .cpe-hero ul.gal-thumbs button { padding: 2px; border-radius: 9px; }
main:has(.cpe-hero.mtpg) .cpe-hero ul.gal-thumbs img { border-radius: 7px; }
main:has(.cpe-hero.mtpg) .cpe-hero .chips { flex-wrap: nowrap; gap: 5px; }
main:has(.cpe-hero.mtpg) .cpe-hero .chips li { padding: 6px 9px; font-size: 12px; white-space: nowrap; }
main:has(.cpe-hero.mtpg) .svc-pick label { font-size: 17px; font-weight: 400; }
main:has(.cpe-hero.mtpg) .svc-pick .req { font-size: 13px; font-weight: 800; }
main:has(.cpe-hero.mtpg) .cpe-hero .buy-row { display: inline-flex; vertical-align: middle; }
main:has(.cpe-hero.mtpg) .cpe-hero .us-badge { display: inline-flex; vertical-align: middle; margin: 16px 0 0 14px; }
@media (min-width: 1025px) and (max-width: 1340px) {
  main:has(.cpe-hero.mtpg) .cpe-hero .chips { gap: 4px; }
  main:has(.cpe-hero.mtpg) .cpe-hero .chips li { padding: 5px 7px; font-size: 11px; }
}
@media (min-width: 1025px) and (max-width: 1200px) {
  main:has(.cpe-hero.mtpg) .cpe-hero .chips li { padding: 5px 5px; font-size: 10.5px; }
}
@media (max-width: 640px) {
  main:has(.cpe-hero.mtpg) .cpe-hero ul.gal-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  main:has(.cpe-hero.mtpg) .cpe-hero .chips { flex-wrap: wrap; }
  main:has(.cpe-hero.mtpg) .cpe-hero .buy-row { align-items: center; }
  main:has(.cpe-hero.mtpg) .cpe-hero .buy-row .hbe-add { margin-top: 0; }
  main:has(.cpe-hero.mtpg) .cpe-hero .us-badge { margin-left: 0; }
}
/* page title "HBE-5G Dual SIM Router": a little smaller, SIM pink italic (logo pink) */
main:has(.cpe-hero.mtpg) .cpe-hero h1.r5g-title { font-size: 32px; }
main:has(.cpe-hero.mtpg) .cpe-hero h1.r5g-title em { font-style: italic; color: #eb008b; }
@media (max-width: 640px) { main:has(.cpe-hero.mtpg) .cpe-hero h1.r5g-title { font-size: min(26px, calc((100vw - 52px) / 11.5)); } }
/* write-up column tightened to the height of the picture + thumbnails (desktop): only the gaps between items */
@media (min-width: 1025px) {
  main:has(.cpe-hero.mtpg) .cpe-hero .cpe-copy .model { margin-top: 8px; }
  main:has(.cpe-hero.mtpg) .cpe-hero .cpe-copy .pricing { margin-top: 10px; margin-bottom: 0; }
  main:has(.cpe-hero.mtpg) .cpe-hero .cpe-copy .ov { margin-top: 14px; }
  main:has(.cpe-hero.mtpg) .cpe-hero .cpe-copy .ov h2 { margin-bottom: 8px; }
  main:has(.cpe-hero.mtpg) .cpe-hero .cpe-copy .ov p { margin-bottom: 8px; }
  main:has(.cpe-hero.mtpg) .cpe-hero .cpe-copy .ov p:last-child { margin-bottom: 0; }
  main:has(.cpe-hero.mtpg) .cpe-hero .cpe-copy .chips { margin-top: 12px; }
  main:has(.cpe-hero.mtpg) .cpe-hero .cpe-copy .svc-pick { margin-top: 12px; }
  main:has(.cpe-hero.mtpg) .cpe-hero .cpe-copy .svc-pick label { margin-bottom: 5px; }
  main:has(.cpe-hero.mtpg) .cpe-hero .cpe-copy .svc-pick select { padding-top: 9px; padding-bottom: 9px; }
  main:has(.cpe-hero.mtpg) .cpe-hero .cpe-copy .svc-pick-compare { margin-top: 6px; }
  main:has(.cpe-hero.mtpg) .cpe-hero .cpe-copy .buy-row,
  main:has(.cpe-hero.mtpg) .cpe-hero .cpe-copy .us-badge { margin-top: 10px; }
}
/* when the write-up is shorter than picture + thumbnails (other fonts / screens), share the leftover space evenly between
   the items so Buy Now / Add to Cart / Continental U.S. Only always end level with the thumbnails */
@media (min-width: 1025px) {
  main:has(.cpe-hero.mtpg) .cpe-hero .cpe-copy { display: grid; grid-template-columns: auto 1fr; align-content: space-between; }
  main:has(.cpe-hero.mtpg) .cpe-hero .cpe-copy > * { grid-column: 1 / -1; min-width: 0; }
  main:has(.cpe-hero.mtpg) .cpe-hero .cpe-copy > .buy-row { grid-column: 1; }
  main:has(.cpe-hero.mtpg) .cpe-hero .cpe-copy > .us-badge { grid-column: 2; justify-self: start; align-self: end; }
  main:has(.cpe-hero.mtpg) .cpe-hero .cpe-copy > .model { justify-self: start; }
}
/* === 2026-10-23 5G outdoor router At a glance tab (Randall): heading one line 32px with HBE-5G blue, section headings blue,
   wider "At a glance" box (no wrapped lines on desktop), write-up and box the same height === */
main:has(.cpe-hero.mtpg) .ppanel .band-head { max-width: none; }
main:has(.cpe-hero.mtpg) .ppanel .band-head h2 { font-size: 32px; white-space: nowrap; }
main:has(.cpe-hero.mtpg) .ppanel .band-head h2 .nowrap { color: #0076af; }
main:has(.cpe-hero.mtpg) .p-desc .prose h3 { color: #0076af; }
/* tight gaps on both sides; both sides end on the same line: the shorter side shares out the difference
   (between the 3 sections on the left, between the rows in the box) - widths chosen so the difference is small */
main:has(.cpe-hero.mtpg) .p-desc .prose { align-self: stretch; display: flex; flex-direction: column; }
main:has(.cpe-hero.mtpg) .p-desc .prose p { margin-bottom: 0; }
main:has(.cpe-hero.mtpg) .p-desc .prose h3:not(:first-child) { margin-top: auto; padding-top: 16px; }
main:has(.cpe-hero.mtpg) .p-desc .p-glance { align-self: stretch; display: flex; flex-direction: column; padding: 20px 26px 22px; }
main:has(.cpe-hero.mtpg) .p-glance h3 { margin-bottom: 10px; }
main:has(.cpe-hero.mtpg) .p-glance dl { flex: 1 1 auto; display: flex; flex-direction: column; }
main:has(.cpe-hero.mtpg) .p-glance dl > div { flex: 1 1 auto; align-items: center; padding: 5px 0; }
main:has(.cpe-hero.mtpg) .p-glance dl > div:first-child { padding-top: 0; }
main:has(.cpe-hero.mtpg) .p-glance dl > div:last-child { padding-bottom: 0; }
@media (min-width: 1240px) {
  main:has(.cpe-hero.mtpg) .p-desc { grid-template-columns: minmax(0, 1fr) 620px; }
  main:has(.cpe-hero.mtpg) .p-glance dd { white-space: nowrap; }
  main:has(.cpe-hero.mtpg) .p-glance dl > div:nth-child(4) dd { white-space: normal; }
}
@media (min-width: 1340px) {
  main:has(.cpe-hero.mtpg) .p-desc { grid-template-columns: minmax(0, 1fr) 700px; }
}
@media (min-width: 861px) and (max-width: 1239px) {
  main:has(.cpe-hero.mtpg) .p-desc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  main:has(.cpe-hero.mtpg) .ppanel .band-head h2 { font-size: 26px; white-space: normal; }
}
/* less space under the top section, under the tab row, and at the top/bottom of the tab card (all tabs) */
main:has(.cpe-hero.mtpg) .cpe-hero { padding-bottom: 28px; }
main:has(.cpe-hero.mtpg) .ppanel .yband { padding-top: 16px; }
main:has(.cpe-hero.mtpg) .ppanel .pcard { padding-top: 30px; padding-bottom: 30px; }
@media (max-width: 640px) {
  main:has(.cpe-hero.mtpg) .cpe-hero { padding-bottom: 20px; }
  main:has(.cpe-hero.mtpg) .ppanel .yband { padding-top: 14px; }
  main:has(.cpe-hero.mtpg) .ppanel .pcard { padding-top: 20px; padding-bottom: 20px; }
}
/* coloured words in headings are always italic (Randall); "features" in Customer / Tech features blue italic */
main:has(.cpe-hero.mtpg) .ppanel .band-head h2 .nowrap,
main:has(.cpe-hero.mtpg) .ppanel h2 em.r5g-blue { color: #0076af; font-style: italic; }
/* price smaller (was 40px, bigger than the page title) */
main:has(.cpe-hero.mtpg) .cpe-hero .pricing-now { font-size: 28px; }
@media (max-width: 640px) { main:has(.cpe-hero.mtpg) .cpe-hero .pricing-now { font-size: 24px; } }
/* "Optional add-ons" under the service package picker: one compact line per antenna */
@media (max-width: 640px) {
}
/* with the add-ons the write-up is taller: compact add-ons box; on desktop the picture side is wider (bigger picture) and
   the white picture frame takes up any small difference, so the thumbnails still end level with the buttons */
@media (min-width: 1340px) {
  main:has(.cpe-hero.mtpg) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }  /* indoor: no add-ons, so a slightly narrower picture side balances it */
  main:has(.cpe-hero.mtpg) .cpe-hero .gallery { align-self: stretch; }
  main:has(.cpe-hero.mtpg) .cpe-hero .gal-main { flex: 1 0 auto; }
  main:has(.cpe-hero.mtpg) .cpe-hero .gal-main img { height: 100%; }
}
/* chips and add-on lines scale with the width of the write-up column so they always stay on one line inside it */
@media (min-width: 1025px) {
  main:has(.cpe-hero.mtpg) .cpe-hero .cpe-copy { container-type: inline-size; }
  main:has(.cpe-hero.mtpg) .cpe-hero .chips { gap: min(5px, .8cqi); }
  main:has(.cpe-hero.mtpg) .cpe-hero .chips li { font-size: min(12px, 2cqi); padding: 6px min(9px, 1.2cqi); }
}
/* Overview: the opening words of each paragraph blue italic */
main:has(.cpe-hero.mtpg) .cpe-hero .ov em.r5g-blue { color: #0076af; font-style: italic; }

/* indoor: the longer title stays on one line (scales with the column) */
main:has(.cpe-hero.mtpg) .cpe-hero h1.r5g-title { white-space: nowrap; }
@media (min-width: 1025px) { main:has(.cpe-hero.mtpg) .cpe-hero h1.r5g-title { font-size: min(32px, 5.4cqi); } }
@media (max-width: 1024px) { main:has(.cpe-hero.mtpg) .cpe-hero h1.r5g-title { font-size: min(32px, calc((100vw - 52px) / 18)); } }
/* "MESH networking" back on the last chip: chips a little smaller on mid-size laptops so all 6 stay on one line */
@media (min-width: 1025px) and (max-width: 1339px) { main:has(.cpe-hero.mtpg) .cpe-hero .chips li { font-size: min(12px, 1.8cqi); padding: 6px min(9px, 1.1cqi); } }
/* "Choose your 5G Service Package" blue, not italic (Required keeps its own colour) */
main:has(.cpe-hero.mtpg) .svc-pick label { color: #0076af; font-style: normal; }

/* tab headings like the router pages (the page's own style sets them in the big serif) */
main:has(.cpe-hero.mtpg) .ppanel .band-head h2 { font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-weight: 700; letter-spacing: -.45px; line-height: 1.2; margin-bottom: 18px; }
main:has(.cpe-hero.mtpg) .ppanel .band-head h2 em.r5g-blue { color: #0076af; font-style: italic; }
main:has(.cpe-hero.mtpg) .ppanel .band-head { margin-bottom: 0; }
/* the highlight colours and card backgrounds the old sections gave (they were tied to .band / .band.alt) */
main:has(.cpe-hero.mtpg) .ppanel .hl { color: var(--blue-ink); font-weight: 700; }
main:has(.cpe-hero.mtpg) .ppanel .hl-brand { color: var(--magenta-ink); font-weight: 800; }
main:has(.cpe-hero.mtpg) .ppanel .ft,
main:has(.cpe-hero.mtpg) .ppanel .diff li { background: var(--bg); }
main:has(.cpe-hero.mtpg) .ppanel .ft.ft-wide { background: linear-gradient(150deg, color-mix(in srgb, var(--blue) 7%, var(--bg)) 0%, var(--bg) 60%); }
main:has(.cpe-hero.mtpg) .ppanel .diff .d-feature { background: linear-gradient(150deg, color-mix(in srgb, var(--blue) 7%, var(--bg)) 0%, var(--bg) 62%); }
main:has(.cpe-hero.mtpg) .ppanel .ft-num { color: color-mix(in srgb, var(--ink-faint) 15%, transparent); }
/* with the two new Overview paragraphs: picture side .6 (about 480px on a 23") so both columns end level on all desktops;
   the picture frame / the write-up take up any small difference */
@media (min-width: 1025px) {
  main:has(.cpe-hero.mtpg) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, .6fr) minmax(0, 1fr); }
  main:has(.cpe-hero.mtpg) .cpe-hero .gallery { align-self: stretch; }
  main:has(.cpe-hero.mtpg) .cpe-hero .gal-main { flex: 1 0 auto; }
  main:has(.cpe-hero.mtpg) .cpe-hero .gal-main img { height: 100%; }
}
@media (min-width: 1025px) {
  /* the write-up fills the row (this page's grid sets its items to the top), so any small difference is shared out */
  main:has(.cpe-hero.mtpg) .cpe-hero .cpe-copy { align-self: stretch; }
  /* the six chips on one line in the narrower write-up column */
  main:has(.cpe-hero.mtpg) .cpe-hero .chips { gap: min(5px, .7cqi); }
  main:has(.cpe-hero.mtpg) .cpe-hero .chips li { font-size: min(12px, 1.68cqi); padding: 6px min(9px, 1.1cqi); }
}
/* Features tab: the 5 cards smaller, in one row (icon above the title in each card) */
@media (min-width: 1025px) {
  main:has(.cpe-hero.mtpg) .ppanel .ft-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  main:has(.cpe-hero.mtpg) .ppanel .ft { grid-column: auto; grid-template-columns: minmax(0, 1fr); padding: 16px 16px 18px; row-gap: 0; }
  main:has(.cpe-hero.mtpg) .ppanel .ft > * { grid-column: 1; grid-row: auto; align-self: start; }
  main:has(.cpe-hero.mtpg) .ppanel .ft { align-content: start; grid-template-rows: none; grid-template-areas: none; }
  main:has(.cpe-hero.mtpg) .ppanel .ft > * { grid-area: auto; }
  main:has(.cpe-hero.mtpg) .ppanel .ft .ft-head { width: auto; height: auto; margin-bottom: 10px; }
  main:has(.cpe-hero.mtpg) .ppanel .ft .ft-ico { width: 32px; height: 32px; }
  main:has(.cpe-hero.mtpg) .ppanel .ft .ft-num { font-size: 44px; }
  main:has(.cpe-hero.mtpg) .ppanel .ft h3 { font-size: 16px; line-height: 1.3; width: auto; }
  main:has(.cpe-hero.mtpg) .ppanel .ft p { font-size: 13.2px; line-height: 1.6; width: auto; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  main:has(.cpe-hero.mtpg) .ppanel .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main:has(.cpe-hero.mtpg) .ppanel .ft { grid-column: auto; }
}
/* top section centred as one block: the write-up column is capped at 660px, so the two columns are sized to it and the
   block sits in the middle of the page instead of leaving a wide margin on the right */
@media (min-width: 1025px) {
  main:has(.cpe-hero.mtpg) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 480fr) minmax(0, 660fr); max-width: 1212px; margin-inline: auto; }
}
/* dead space inside the tabs (Randall): less space under each tab heading and under the card; shorter photo frames on
   A Closer Look; the Specs drawing box centred beside the table */
main:has(.cpe-hero.mtpg) .ppanel .band-head + * { margin-top: 18px; }
main:has(.cpe-hero.mtpg) .ppanel .yband { padding-bottom: 32px; }
main:has(.cpe-hero.mtpg) .ppanel .shot-card img { aspect-ratio: 5 / 4; }
main:has(.cpe-hero.mtpg) .ppanel .spec-split figure.dims { align-self: center; }

/* J-Arm: 4 thumbnails; the tab cards hold Randall's lists: the site's check-mark bullets in two columns (one on phones),
   the second level a small pink chevron */
main:has(.cpe-hero.mtpg) .cpe-hero ul.gal-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
main:has(.cpe-hero.mtpg) .ppanel .jl-list li strong { color: var(--ink, #1d2328); font-weight: 700; }
main:has(.cpe-hero.mtpg) .ppanel .jl-list li > span,
main:has(.cpe-hero.mtpg) .ppanel .jl-list li > div { color: #4d565e; line-height: 1.6; }
main:has(.cpe-hero.mtpg) .ppanel .jl-list .jl-sub { position: relative; margin: 6px 0 0; padding-left: 16px; }
main:has(.cpe-hero.mtpg) .ppanel .jl-list .jl-sub::before { content: ""; position: absolute; left: 1px; top: .62em; width: 5px; height: 5px;
  border-top: 2px solid #eb008b; border-right: 2px solid #eb008b; transform: rotate(45deg); opacity: .75; }
main:has(.cpe-hero.mtpg) .ppanel .jl-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 860px) { main:has(.cpe-hero.mtpg) .ppanel .jl-list { grid-template-columns: minmax(0, 1fr); } }
/* the longer title and the 7 chips stay inside the write-up column (they scale with it); picture side a little narrower
   so the write-up's natural height matches the picture + thumbnails (small, even gaps); block stays centred */
@media (min-width: 1025px) {
  main:has(.cpe-hero.mtpg) .cpe-hero h1.r5g-title { font-size: min(32px, 4.5cqi); }
  main:has(.cpe-hero.mtpg) .cpe-hero .chips li { font-size: min(12px, 1.5cqi); padding: 6px min(9px, .95cqi); }
  main:has(.cpe-hero.mtpg) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 430fr) minmax(0, 660fr); max-width: 1162px; }
}
/* tablets and phones: chips may wrap; on phones the title wraps at the normal size instead of shrinking to one line */
@media (max-width: 1024px) { main:has(.cpe-hero.mtpg) .cpe-hero .chips { flex-wrap: wrap; } }
@media (max-width: 640px) { main:has(.cpe-hero.mtpg) .cpe-hero h1.r5g-title { white-space: normal; font-size: 26px; } }
@media (min-width: 1025px) and (max-width: 1199px) { main:has(.cpe-hero.mtpg) .cpe-hero .chips li { font-size: min(12px, 1.5cqi); padding: 6px min(9px, .95cqi); } }
/* Cat6: 5 thumbnails in one row; Details tab = 3 boxes in one row, same height (About / What it is built from / Where it goes) */
main:has(.cpe-hero.mtpg) .cpe-hero ul.gal-thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
main:has(.cpe-hero.mtpg) .ppanel .c6-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
main:has(.cpe-hero.mtpg) .ppanel .c6-box { border: 1px solid #ece6dc; border-radius: 14px; padding: 20px 22px; background: #fdfbf8; }
main:has(.cpe-hero.mtpg) .ppanel .c6-box h3 { margin: 0 0 10px; color: #0076af; font-size: 18px; }
main:has(.cpe-hero.mtpg) .ppanel .c6-box p { margin: 0 0 10px; color: #4d565e; font-size: 15px; line-height: 1.65; }
main:has(.cpe-hero.mtpg) .ppanel .c6-box p:last-child { margin-bottom: 0; }
main:has(.cpe-hero.mtpg) .ppanel .c6-box .kf-list { grid-template-columns: minmax(0, 1fr); }
main:has(.cpe-hero.mtpg) .ppanel .c6-box .kf-list li { font-size: 15px; padding: 9px 0; }
main:has(.cpe-hero.mtpg) .ppanel .c6-box .kf-list li:last-child { border-bottom: 0; padding-bottom: 0; }
@media (max-width: 1024px) { main:has(.cpe-hero.mtpg) .ppanel .c6-boxes { grid-template-columns: minmax(0, 1fr); } }
/* picture side wider (this write-up has the length picker and a long Overview) so the photo stays square and ends level */
@media (min-width: 1025px) {
  main:has(.cpe-hero.mtpg) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 600fr) minmax(0, 660fr); max-width: 1332px; }
}
/* the middle box's list rows share out the space so its last row ends level with the other two boxes */
main:has(.cpe-hero.mtpg) .ppanel .c6-box { display: flex; flex-direction: column; }
main:has(.cpe-hero.mtpg) .ppanel .c6-box .kf-list { flex: 1 1 auto; display: flex; flex-direction: column; }
main:has(.cpe-hero.mtpg) .ppanel .c6-box .kf-list li { flex: 1 1 auto; align-items: center; }
/* MikroTik routers: one photo (no thumbnails) and a short write-up, so a smaller picture side; photo as tall as the write-up */
@media (min-width: 1025px) {
  main:has(.cpe-hero.mtpg) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 310fr) minmax(0, 660fr); max-width: 1042px; }
}
@media (max-width: 1024px) { main:has(.cpe-hero.mtpg) .cpe-hero .gallery { max-width: 420px; margin-inline: auto; width: 100%; } }
/* the middle box has the least text: narrower middle box, wider outer boxes, so all three come out about the same height */
@media (min-width: 1025px) { main:has(.cpe-hero.mtpg) .ppanel .c6-boxes { grid-template-columns: minmax(0, 1.1fr) minmax(0, .74fr) minmax(0, 1.16fr); } }
/* one photo: no thumbnail strip (the copied rules showed the single thumbnail); photo sized to the write-up's height */
main:has(.cpe-hero.mtpg) .cpe-hero .gallery.solo ul.gal-thumbs { display: none; }
@media (min-width: 1025px) {
  main:has(.cpe-hero.mtpg) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 360fr) minmax(0, 660fr); max-width: 1092px; }
}
/* MikroTik pages moved onto the house product layout: the Downloads cards and the PoE note keep their old look */
main:has(.cpe-hero.mtpg) .dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 18px; }
main:has(.cpe-hero.mtpg) .dl-card { display: flex; align-items: center; gap: 13px; padding: 15px 17px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); text-decoration: none; transition: border-color .14s, transform .12s; }
main:has(.cpe-hero.mtpg) .dl-card:hover { border-color: var(--magenta); transform: translateY(-2px); }
main:has(.cpe-hero.mtpg) .dl-ico { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: var(--blue); background: color-mix(in srgb, var(--blue) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--blue) 20%, transparent); }
main:has(.cpe-hero.mtpg) .dl-ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
main:has(.cpe-hero.mtpg) .dl-card b { display: block; font-size: 16px; color: var(--ink); }
main:has(.cpe-hero.mtpg) .dl-card span { font-size: 13.5px; color: var(--ink-faint); }
main:has(.cpe-hero.mtpg) .sw-note { margin: 20px 0 0; padding: 16px 20px; border-left: 3px solid var(--magenta); background: #fdfbf8; border-radius: 0 12px 12px 0; font-size: 15px; line-height: 1.65; color: #4d565e; }
/* sizes tuned per page: the photo just square and level with the buttons, the three boxes ending close together */
@media (min-width: 1025px) {
  main:has(.cpe-hero.mt750) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 360fr) minmax(0, 660fr); max-width: 1092px; }
  main:has(.cpe-hero.mt960) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 380fr) minmax(0, 660fr); max-width: 1112px; }
  main:has(.cpe-hero.mt5009) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 440fr) minmax(0, 660fr); max-width: 1172px; }
  main:has(.cpe-hero.mt750) .ppanel .c6-boxes { grid-template-columns: minmax(0, .8fr) minmax(0, .7fr) minmax(0, 1.6fr); }
  main:has(.cpe-hero.mt960) .ppanel .c6-boxes { grid-template-columns: minmax(0, .7fr) minmax(0, .7fr) minmax(0, 1.8fr); }
  main:has(.cpe-hero.mt5009) .ppanel .c6-boxes { grid-template-columns: minmax(0, 1.2fr) minmax(0, .6fr) minmax(0, 1.8fr); }
  /* the At a glance list in two columns, so its box ends level with the two write-up boxes */
  main:has(.cpe-hero.mtpg) .ppanel .c6-box .kf-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; }
  main:has(.cpe-hero.mtpg) .ppanel .c6-box .kf-list li { padding: 6px 0; }
}
/* the RB960PGS name is long: a size smaller so it stays on one line */
@media (min-width: 1025px) { main:has(.cpe-hero.mt960) .cpe-hero h1.r5g-title { font-size: min(32px, 3.9cqi); } }
/* the Download Data Sheet button: same size as the buy buttons, small icon (it drew the arrow full size) */
main:has(.cpe-hero.mtpg) .buy-row .btn-outline { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px; border-radius: 40px; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; color: var(--ink); background: var(--surface); border: 1px solid var(--line); text-decoration: none; }
main:has(.cpe-hero.mtpg) .buy-row .btn-outline:hover { border-color: var(--magenta); color: var(--magenta); }
main:has(.cpe-hero.mtpg) .buy-row .btn-outline svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
/* three buttons here (Buy Now, Add to Cart, Data Sheet), so the Continental U.S. badge goes on the line below them;
   the chips are short on these pages, so they can be a readable size */
@media (min-width: 1025px) { main:has(.cpe-hero.mtpg) .cpe-hero .chips li { font-size: min(12.5px, 2.05cqi); padding: 6px min(10px, 1.15cqi); } }
/* 1025-1199 px: the copy column wraps more, so the picture side gets a little more room to stay level */
@media (min-width: 1025px) and (max-width: 1199px) {
  main:has(.cpe-hero.mt960) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 440fr) minmax(0, 660fr); }
  main:has(.cpe-hero.mt5009) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 540fr) minmax(0, 660fr); }
}
@media (min-width: 1025px) { main:has(.cpe-hero.mt5009) .cpe-hero .chips li { font-size: min(12px, 1.85cqi); padding: 6px min(9px, 1.05cqi); } }
/* Continental U.S. badge stays on the button line (Randall): buttons and gaps a little tighter so all four fit */
main:has(.cpe-hero.mtpg) .cpe-hero .buy-row { gap: 6px; }
main:has(.cpe-hero.mtpg) .cpe-hero .buy-row .buybtn, main:has(.cpe-hero.mtpg) .cpe-hero .buy-row .btn-outline { padding-left: 8px; padding-right: 8px; }
main:has(.cpe-hero.mtpg) .cpe-hero .buy-row .btn-outline { font-size: 12.5px; }
main:has(.cpe-hero.mtpg) .cpe-hero .cpe-copy .us-badge { margin-left: 8px; }
main:has(.cpe-hero.mtpg) .cpe-hero .cpe-copy .us-badge { font-size: 12px; padding-left: 9px; padding-right: 9px; gap: 6px; }
@media (min-width: 1025px) and (max-width: 1199px) { main:has(.cpe-hero.mtpg) .cpe-hero .buy-row .buybtn, main:has(.cpe-hero.mtpg) .cpe-hero .buy-row .btn-outline { font-size: 11.5px; padding-left: 6px; padding-right: 6px; } main:has(.cpe-hero.mtpg) .cpe-hero .buy-row { gap: 5px; } main:has(.cpe-hero.mtpg) .cpe-hero .cpe-copy .us-badge { margin-left: 5px; font-size: 11px; padding-left: 7px; padding-right: 7px; } }
/* === 2026-10-23 8dBi Omni antenna page (Randall "do your thing"): same look as the 4x4 MIMO page (copied; scoped by .cpe-hero.ax3pg, the product id differs between test and live): 8 thumbnails under the big picture, the 6 feature chips on one line,
   bigger "Choose your 5G Service Package" (not bold; Required stays bold), "Continental U.S. Only" on the Buy Now line === */
main:has(.cpe-hero.ax3pg) .cpe-hero ul.gal-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; overflow: visible; padding-bottom: 0; }
main:has(.cpe-hero.ax3pg) .cpe-hero ul.gal-thumbs li { flex: none; min-width: 0; }
main:has(.cpe-hero.ax3pg) .cpe-hero ul.gal-thumbs button { padding: 2px; border-radius: 9px; }
main:has(.cpe-hero.ax3pg) .cpe-hero ul.gal-thumbs img { border-radius: 7px; }
main:has(.cpe-hero.ax3pg) .cpe-hero .chips { flex-wrap: nowrap; gap: 5px; }
main:has(.cpe-hero.ax3pg) .cpe-hero .chips li { padding: 6px 9px; font-size: 12px; white-space: nowrap; }
main:has(.cpe-hero.ax3pg) .svc-pick label { font-size: 17px; font-weight: 400; }
main:has(.cpe-hero.ax3pg) .svc-pick .req { font-size: 13px; font-weight: 800; }
main:has(.cpe-hero.ax3pg) .cpe-hero .buy-row { display: inline-flex; vertical-align: middle; }
main:has(.cpe-hero.ax3pg) .cpe-hero .us-badge { display: inline-flex; vertical-align: middle; margin: 16px 0 0 14px; }
@media (min-width: 1025px) and (max-width: 1340px) {
  main:has(.cpe-hero.ax3pg) .cpe-hero .chips { gap: 4px; }
  main:has(.cpe-hero.ax3pg) .cpe-hero .chips li { padding: 5px 7px; font-size: 11px; }
}
@media (min-width: 1025px) and (max-width: 1200px) {
  main:has(.cpe-hero.ax3pg) .cpe-hero .chips li { padding: 5px 5px; font-size: 10.5px; }
}
@media (max-width: 640px) {
  main:has(.cpe-hero.ax3pg) .cpe-hero ul.gal-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  main:has(.cpe-hero.ax3pg) .cpe-hero .chips { flex-wrap: wrap; }
  main:has(.cpe-hero.ax3pg) .cpe-hero .buy-row { align-items: center; }
  main:has(.cpe-hero.ax3pg) .cpe-hero .buy-row .hbe-add { margin-top: 0; }
  main:has(.cpe-hero.ax3pg) .cpe-hero .us-badge { margin-left: 0; }
}
/* page title "HBE-5G Dual SIM Router": a little smaller, SIM pink italic (logo pink) */
main:has(.cpe-hero.ax3pg) .cpe-hero h1.r5g-title { font-size: 32px; }
main:has(.cpe-hero.ax3pg) .cpe-hero h1.r5g-title em { font-style: italic; color: #eb008b; }
@media (max-width: 640px) { main:has(.cpe-hero.ax3pg) .cpe-hero h1.r5g-title { font-size: min(26px, calc((100vw - 52px) / 11.5)); } }
/* write-up column tightened to the height of the picture + thumbnails (desktop): only the gaps between items */
@media (min-width: 1025px) {
  main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-copy .model { margin-top: 8px; }
  main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-copy .pricing { margin-top: 10px; margin-bottom: 0; }
  main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-copy .ov { margin-top: 14px; }
  main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-copy .ov h2 { margin-bottom: 8px; }
  main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-copy .ov p { margin-bottom: 8px; }
  main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-copy .ov p:last-child { margin-bottom: 0; }
  main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-copy .chips { margin-top: 12px; }
  main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-copy .svc-pick { margin-top: 12px; }
  main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-copy .svc-pick label { margin-bottom: 5px; }
  main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-copy .svc-pick select { padding-top: 9px; padding-bottom: 9px; }
  main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-copy .svc-pick-compare { margin-top: 6px; }
  main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-copy .buy-row,
  main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-copy .us-badge { margin-top: 10px; }
}
/* when the write-up is shorter than picture + thumbnails (other fonts / screens), share the leftover space evenly between
   the items so Buy Now / Add to Cart / Continental U.S. Only always end level with the thumbnails */
@media (min-width: 1025px) {
  main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-copy { display: grid; grid-template-columns: auto 1fr; align-content: space-between; }
  main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-copy > * { grid-column: 1 / -1; min-width: 0; }
  main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-copy > .buy-row { grid-column: 1; }
  main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-copy > .us-badge { grid-column: 2; justify-self: start; align-self: end; }
  main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-copy > .model { justify-self: start; }
}
/* === 2026-10-23 5G outdoor router At a glance tab (Randall): heading one line 32px with HBE-5G blue, section headings blue,
   wider "At a glance" box (no wrapped lines on desktop), write-up and box the same height === */
main:has(.cpe-hero.ax3pg) .ppanel .band-head { max-width: none; }
main:has(.cpe-hero.ax3pg) .ppanel .band-head h2 { font-size: 32px; white-space: nowrap; }
main:has(.cpe-hero.ax3pg) .ppanel .band-head h2 .nowrap { color: #0076af; }
main:has(.cpe-hero.ax3pg) .p-desc .prose h3 { color: #0076af; }
/* tight gaps on both sides; both sides end on the same line: the shorter side shares out the difference
   (between the 3 sections on the left, between the rows in the box) - widths chosen so the difference is small */
main:has(.cpe-hero.ax3pg) .p-desc .prose { align-self: stretch; display: flex; flex-direction: column; }
main:has(.cpe-hero.ax3pg) .p-desc .prose p { margin-bottom: 0; }
main:has(.cpe-hero.ax3pg) .p-desc .prose h3:not(:first-child) { margin-top: auto; padding-top: 16px; }
main:has(.cpe-hero.ax3pg) .p-desc .p-glance { align-self: stretch; display: flex; flex-direction: column; padding: 20px 26px 22px; }
main:has(.cpe-hero.ax3pg) .p-glance h3 { margin-bottom: 10px; }
main:has(.cpe-hero.ax3pg) .p-glance dl { flex: 1 1 auto; display: flex; flex-direction: column; }
main:has(.cpe-hero.ax3pg) .p-glance dl > div { flex: 1 1 auto; align-items: center; padding: 5px 0; }
main:has(.cpe-hero.ax3pg) .p-glance dl > div:first-child { padding-top: 0; }
main:has(.cpe-hero.ax3pg) .p-glance dl > div:last-child { padding-bottom: 0; }
@media (min-width: 1240px) {
  main:has(.cpe-hero.ax3pg) .p-desc { grid-template-columns: minmax(0, 1fr) 620px; }
  main:has(.cpe-hero.ax3pg) .p-glance dd { white-space: nowrap; }
  main:has(.cpe-hero.ax3pg) .p-glance dl > div:nth-child(4) dd { white-space: normal; }
}
@media (min-width: 1340px) {
  main:has(.cpe-hero.ax3pg) .p-desc { grid-template-columns: minmax(0, 1fr) 700px; }
}
@media (min-width: 861px) and (max-width: 1239px) {
  main:has(.cpe-hero.ax3pg) .p-desc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  main:has(.cpe-hero.ax3pg) .ppanel .band-head h2 { font-size: 26px; white-space: normal; }
}
/* less space under the top section, under the tab row, and at the top/bottom of the tab card (all tabs) */
main:has(.cpe-hero.ax3pg) .cpe-hero { padding-bottom: 28px; }
main:has(.cpe-hero.ax3pg) .ppanel .yband { padding-top: 16px; }
main:has(.cpe-hero.ax3pg) .ppanel .pcard { padding-top: 30px; padding-bottom: 30px; }
@media (max-width: 640px) {
  main:has(.cpe-hero.ax3pg) .cpe-hero { padding-bottom: 20px; }
  main:has(.cpe-hero.ax3pg) .ppanel .yband { padding-top: 14px; }
  main:has(.cpe-hero.ax3pg) .ppanel .pcard { padding-top: 20px; padding-bottom: 20px; }
}
/* coloured words in headings are always italic (Randall); "features" in Customer / Tech features blue italic */
main:has(.cpe-hero.ax3pg) .ppanel .band-head h2 .nowrap,
main:has(.cpe-hero.ax3pg) .ppanel h2 em.r5g-blue { color: #0076af; font-style: italic; }
/* price smaller (was 40px, bigger than the page title) */
main:has(.cpe-hero.ax3pg) .cpe-hero .pricing-now { font-size: 28px; }
@media (max-width: 640px) { main:has(.cpe-hero.ax3pg) .cpe-hero .pricing-now { font-size: 24px; } }
/* "Optional add-ons" under the service package picker: one compact line per antenna */
@media (max-width: 640px) {
}
/* with the add-ons the write-up is taller: compact add-ons box; on desktop the picture side is wider (bigger picture) and
   the white picture frame takes up any small difference, so the thumbnails still end level with the buttons */
@media (min-width: 1340px) {
  main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }  /* indoor: no add-ons, so a slightly narrower picture side balances it */
  main:has(.cpe-hero.ax3pg) .cpe-hero .gallery { align-self: stretch; }
  main:has(.cpe-hero.ax3pg) .cpe-hero .gal-main { flex: 1 0 auto; }
  main:has(.cpe-hero.ax3pg) .cpe-hero .gal-main img { height: 100%; }
}
/* chips and add-on lines scale with the width of the write-up column so they always stay on one line inside it */
@media (min-width: 1025px) {
  main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-copy { container-type: inline-size; }
  main:has(.cpe-hero.ax3pg) .cpe-hero .chips { gap: min(5px, .8cqi); }
  main:has(.cpe-hero.ax3pg) .cpe-hero .chips li { font-size: min(12px, 2cqi); padding: 6px min(9px, 1.2cqi); }
}
/* Overview: the opening words of each paragraph blue italic */
main:has(.cpe-hero.ax3pg) .cpe-hero .ov em.r5g-blue { color: #0076af; font-style: italic; }

/* indoor: the longer title stays on one line (scales with the column) */
main:has(.cpe-hero.ax3pg) .cpe-hero h1.r5g-title { white-space: nowrap; }
@media (min-width: 1025px) { main:has(.cpe-hero.ax3pg) .cpe-hero h1.r5g-title { font-size: min(32px, 5.4cqi); } }
@media (max-width: 1024px) { main:has(.cpe-hero.ax3pg) .cpe-hero h1.r5g-title { font-size: min(32px, calc((100vw - 52px) / 18)); } }
/* "MESH networking" back on the last chip: chips a little smaller on mid-size laptops so all 6 stay on one line */
@media (min-width: 1025px) and (max-width: 1339px) { main:has(.cpe-hero.ax3pg) .cpe-hero .chips li { font-size: min(12px, 1.8cqi); padding: 6px min(9px, 1.1cqi); } }
/* "Choose your 5G Service Package" blue, not italic (Required keeps its own colour) */
main:has(.cpe-hero.ax3pg) .svc-pick label { color: #0076af; font-style: normal; }

/* tab headings like the router pages (the page's own style sets them in the big serif) */
main:has(.cpe-hero.ax3pg) .ppanel .band-head h2 { font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-weight: 700; letter-spacing: -.45px; line-height: 1.2; margin-bottom: 18px; }
main:has(.cpe-hero.ax3pg) .ppanel .band-head h2 em.r5g-blue { color: #0076af; font-style: italic; }
main:has(.cpe-hero.ax3pg) .ppanel .band-head { margin-bottom: 0; }
/* the highlight colours and card backgrounds the old sections gave (they were tied to .band / .band.alt) */
main:has(.cpe-hero.ax3pg) .ppanel .hl { color: var(--blue-ink); font-weight: 700; }
main:has(.cpe-hero.ax3pg) .ppanel .hl-brand { color: var(--magenta-ink); font-weight: 800; }
main:has(.cpe-hero.ax3pg) .ppanel .ft,
main:has(.cpe-hero.ax3pg) .ppanel .diff li { background: var(--bg); }
main:has(.cpe-hero.ax3pg) .ppanel .ft.ft-wide { background: linear-gradient(150deg, color-mix(in srgb, var(--blue) 7%, var(--bg)) 0%, var(--bg) 60%); }
main:has(.cpe-hero.ax3pg) .ppanel .diff .d-feature { background: linear-gradient(150deg, color-mix(in srgb, var(--blue) 7%, var(--bg)) 0%, var(--bg) 62%); }
main:has(.cpe-hero.ax3pg) .ppanel .ft-num { color: color-mix(in srgb, var(--ink-faint) 15%, transparent); }
/* with the two new Overview paragraphs: picture side .6 (about 480px on a 23") so both columns end level on all desktops;
   the picture frame / the write-up take up any small difference */
@media (min-width: 1025px) {
  main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, .6fr) minmax(0, 1fr); }
  main:has(.cpe-hero.ax3pg) .cpe-hero .gallery { align-self: stretch; }
  main:has(.cpe-hero.ax3pg) .cpe-hero .gal-main { flex: 1 0 auto; }
  main:has(.cpe-hero.ax3pg) .cpe-hero .gal-main img { height: 100%; }
}
@media (min-width: 1025px) {
  /* the write-up fills the row (this page's grid sets its items to the top), so any small difference is shared out */
  main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-copy { align-self: stretch; }
  /* the six chips on one line in the narrower write-up column */
  main:has(.cpe-hero.ax3pg) .cpe-hero .chips { gap: min(5px, .7cqi); }
  main:has(.cpe-hero.ax3pg) .cpe-hero .chips li { font-size: min(12px, 1.68cqi); padding: 6px min(9px, 1.1cqi); }
}
/* Features tab: the 5 cards smaller, in one row (icon above the title in each card) */
@media (min-width: 1025px) {
  main:has(.cpe-hero.ax3pg) .ppanel .ft-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  main:has(.cpe-hero.ax3pg) .ppanel .ft { grid-column: auto; grid-template-columns: minmax(0, 1fr); padding: 16px 16px 18px; row-gap: 0; }
  main:has(.cpe-hero.ax3pg) .ppanel .ft > * { grid-column: 1; grid-row: auto; align-self: start; }
  main:has(.cpe-hero.ax3pg) .ppanel .ft { align-content: start; grid-template-rows: none; grid-template-areas: none; }
  main:has(.cpe-hero.ax3pg) .ppanel .ft > * { grid-area: auto; }
  main:has(.cpe-hero.ax3pg) .ppanel .ft .ft-head { width: auto; height: auto; margin-bottom: 10px; }
  main:has(.cpe-hero.ax3pg) .ppanel .ft .ft-ico { width: 32px; height: 32px; }
  main:has(.cpe-hero.ax3pg) .ppanel .ft .ft-num { font-size: 44px; }
  main:has(.cpe-hero.ax3pg) .ppanel .ft h3 { font-size: 16px; line-height: 1.3; width: auto; }
  main:has(.cpe-hero.ax3pg) .ppanel .ft p { font-size: 13.2px; line-height: 1.6; width: auto; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  main:has(.cpe-hero.ax3pg) .ppanel .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main:has(.cpe-hero.ax3pg) .ppanel .ft { grid-column: auto; }
}
/* top section centred as one block: the write-up column is capped at 660px, so the two columns are sized to it and the
   block sits in the middle of the page instead of leaving a wide margin on the right */
@media (min-width: 1025px) {
  main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 480fr) minmax(0, 660fr); max-width: 1212px; margin-inline: auto; }
}
/* dead space inside the tabs (Randall): less space under each tab heading and under the card; shorter photo frames on
   A Closer Look; the Specs drawing box centred beside the table */
main:has(.cpe-hero.ax3pg) .ppanel .band-head + * { margin-top: 18px; }
main:has(.cpe-hero.ax3pg) .ppanel .yband { padding-bottom: 32px; }
main:has(.cpe-hero.ax3pg) .ppanel .shot-card img { aspect-ratio: 5 / 4; }
main:has(.cpe-hero.ax3pg) .ppanel .spec-split figure.dims { align-self: center; }

/* J-Arm: 4 thumbnails; the tab cards hold Randall's lists: the site's check-mark bullets in two columns (one on phones),
   the second level a small pink chevron */
main:has(.cpe-hero.ax3pg) .cpe-hero ul.gal-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
main:has(.cpe-hero.ax3pg) .ppanel .jl-list li strong { color: var(--ink, #1d2328); font-weight: 700; }
main:has(.cpe-hero.ax3pg) .ppanel .jl-list li > span,
main:has(.cpe-hero.ax3pg) .ppanel .jl-list li > div { color: #4d565e; line-height: 1.6; }
main:has(.cpe-hero.ax3pg) .ppanel .jl-list .jl-sub { position: relative; margin: 6px 0 0; padding-left: 16px; }
main:has(.cpe-hero.ax3pg) .ppanel .jl-list .jl-sub::before { content: ""; position: absolute; left: 1px; top: .62em; width: 5px; height: 5px;
  border-top: 2px solid #eb008b; border-right: 2px solid #eb008b; transform: rotate(45deg); opacity: .75; }
main:has(.cpe-hero.ax3pg) .ppanel .jl-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 860px) { main:has(.cpe-hero.ax3pg) .ppanel .jl-list { grid-template-columns: minmax(0, 1fr); } }
/* the longer title and the 7 chips stay inside the write-up column (they scale with it); picture side a little narrower
   so the write-up's natural height matches the picture + thumbnails (small, even gaps); block stays centred */
@media (min-width: 1025px) {
  main:has(.cpe-hero.ax3pg) .cpe-hero h1.r5g-title { font-size: min(32px, 4.5cqi); }
  main:has(.cpe-hero.ax3pg) .cpe-hero .chips li { font-size: min(12px, 1.5cqi); padding: 6px min(9px, .95cqi); }
  main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 430fr) minmax(0, 660fr); max-width: 1162px; }
}
/* tablets and phones: chips may wrap; on phones the title wraps at the normal size instead of shrinking to one line */
@media (max-width: 1024px) { main:has(.cpe-hero.ax3pg) .cpe-hero .chips { flex-wrap: wrap; } }
@media (max-width: 640px) { main:has(.cpe-hero.ax3pg) .cpe-hero h1.r5g-title { white-space: normal; font-size: 26px; } }
@media (min-width: 1025px) and (max-width: 1199px) { main:has(.cpe-hero.ax3pg) .cpe-hero .chips li { font-size: min(12px, 1.5cqi); padding: 6px min(9px, .95cqi); } }
/* AX3000: 5 thumbnails in one row; Details tab = 3 boxes in one row, same height (About / What it is built from / Where it goes) */
main:has(.cpe-hero.ax3pg) .cpe-hero ul.gal-thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
main:has(.cpe-hero.ax3pg) .ppanel .c6-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
main:has(.cpe-hero.ax3pg) .ppanel .c6-box { border: 1px solid #ece6dc; border-radius: 14px; padding: 20px 22px; background: #fdfbf8; }
main:has(.cpe-hero.ax3pg) .ppanel .c6-box h3 { margin: 0 0 10px; color: #0076af; font-size: 18px; }
main:has(.cpe-hero.ax3pg) .ppanel .c6-box p { margin: 0 0 10px; color: #4d565e; font-size: 15px; line-height: 1.65; }
main:has(.cpe-hero.ax3pg) .ppanel .c6-box p:last-child { margin-bottom: 0; }
main:has(.cpe-hero.ax3pg) .ppanel .c6-box .kf-list { grid-template-columns: minmax(0, 1fr); }
main:has(.cpe-hero.ax3pg) .ppanel .c6-box .kf-list li { font-size: 15px; padding: 9px 0; }
main:has(.cpe-hero.ax3pg) .ppanel .c6-box .kf-list li:last-child { border-bottom: 0; padding-bottom: 0; }
@media (max-width: 1024px) { main:has(.cpe-hero.ax3pg) .ppanel .c6-boxes { grid-template-columns: minmax(0, 1fr); } }
/* picture side wider (this write-up has the length picker and a long Overview) so the photo stays square and ends level */
@media (min-width: 1025px) {
  main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 600fr) minmax(0, 660fr); max-width: 1332px; }
}
/* the middle box's list rows share out the space so its last row ends level with the other two boxes */
main:has(.cpe-hero.ax3pg) .ppanel .c6-box { display: flex; flex-direction: column; }
main:has(.cpe-hero.ax3pg) .ppanel .c6-box .kf-list { flex: 1 1 auto; display: flex; flex-direction: column; }
main:has(.cpe-hero.ax3pg) .ppanel .c6-box .kf-list li { flex: 1 1 auto; align-items: center; }
/* AX3000: 8 pictures in one row under the photo; three buttons, so the Continental U.S. badge goes on its own line */
main:has(.cpe-hero.ax3pg) .cpe-hero ul.gal-thumbs { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 640px) { main:has(.cpe-hero.ax3pg) .cpe-hero ul.gal-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
main:has(.cpe-hero.ax3pg) .buy-row .btn-outline { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px; border-radius: 40px; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; color: var(--ink); background: var(--surface); border: 1px solid var(--line); text-decoration: none; }
main:has(.cpe-hero.ax3pg) .buy-row .btn-outline svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
@media (min-width: 1025px) { main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 420fr) minmax(0, 660fr); max-width: 1152px; } }
@media (min-width: 1025px) { main:has(.cpe-hero.ax3pg) .cpe-hero .chips li { font-size: min(12px, 1.68cqi); padding: 6px min(9px, .92cqi); } }
/* the three paragraphs that left the Overview: a row of three boxes under the write-up and the At a glance box */
main:has(.cpe-hero.ax3pg) .ppanel .c6-boxes.ax-more { margin-top: 24px; }
@media (min-width: 1025px) { main:has(.cpe-hero.ax3pg) .ppanel .c6-boxes.ax-more { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1025px) {
  main:has(.cpe-hero.ax3pg) #panel-glance .p-desc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; width: 100%; max-width: none; margin: 0; }
  main:has(.cpe-hero.ax3pg) #panel-glance .p-desc .p-glance { margin: 0; }
}
main:has(.cpe-hero.ax3pg) #panel-glance .pcard .c6-boxes.ax-more { margin-top: 24px; }
/* Continental U.S. badge stays on the button line (Randall): buttons and gaps a little tighter so all four fit */
main:has(.cpe-hero.ax3pg) .cpe-hero .buy-row { gap: 6px; }
main:has(.cpe-hero.ax3pg) .cpe-hero .buy-row .buybtn, main:has(.cpe-hero.ax3pg) .cpe-hero .buy-row .btn-outline { padding-left: 8px; padding-right: 8px; }
main:has(.cpe-hero.ax3pg) .cpe-hero .buy-row .btn-outline { font-size: 12.5px; }
main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-copy .us-badge { margin-left: 8px; }
main:has(.cpe-hero.ax3pg) #panel-glance .p-glance dd, main:has(.cpe-hero.ax3pg) #panel-glance .p-glance dl > div:nth-child(4) dd { white-space: normal; }
main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-copy .us-badge { font-size: 12px; padding-left: 9px; padding-right: 9px; gap: 6px; }
@media (min-width: 1025px) and (max-width: 1199px) { main:has(.cpe-hero.ax3pg) .cpe-hero .buy-row .buybtn, main:has(.cpe-hero.ax3pg) .cpe-hero .buy-row .btn-outline { font-size: 11.5px; padding-left: 6px; padding-right: 6px; } main:has(.cpe-hero.ax3pg) .cpe-hero .buy-row { gap: 5px; } main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-copy .us-badge { margin-left: 5px; font-size: 11px; padding-left: 7px; padding-right: 7px; } }

/* === 2026-10-24 Routers mega menu pictures (Randall: too much empty space in the picture boxes) === the two picture
   boxes are only as wide as a larger picture plus a small even margin, like the Home Phone menu; the link columns get
   the room back === */
/* narrower panel (Randall): only as wide as the pictures and two link columns, centred under the menu bar */
@media (min-width: 1121px) {
  html body header.site .has-mega .mega.switches-menu { width: max-content !important; max-width: calc(100% - 24px) !important; left: 0 !important; right: 0 !important; margin-left: auto !important; margin-right: auto !important; }
  html body header.site .has-mega .mega.switches-menu .mega-grid { grid-template-columns: max-content 330px 330px max-content !important; }
}
html body header.site .has-mega .mega.switches-menu .mm-thumb { width: 126px !important; padding: 8px 8px 10px !important; gap: 4px !important; background: #fff !important; }
html body header.site .has-mega .mega.switches-menu .mm-thumb img { height: 100px !important; max-height: 100px !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; mix-blend-mode: normal !important; }
html body header.site .has-mega .mega.switches-menu .mm-thumb figcaption { white-space: nowrap !important; }

/* === 2026-10-24 Business Phone mega menu tidy (Randall: like the Routers menu) === white picture boxes only as wide
   as their captions, picture 100 px; panel only as wide as its content and centred (screens >= 1121 px) === */
html body header.site .has-mega:has(> a[href="/business-phone"]) .mega .mm-thumb { width: 190px !important; padding: 8px 8px 10px !important; gap: 4px !important; background: #fff !important; }
html body header.site .has-mega:has(> a[href="/business-phone"]) .mega .mm-thumb img { height: 84px !important; max-height: 84px !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; mix-blend-mode: normal !important; }
html body header.site .has-mega:has(> a[href="/business-phone"]) .mega .mm-thumb figcaption { white-space: nowrap !important; }
@media (min-width: 1121px) {
  html body header.site .has-mega:has(> a[href="/business-phone"]) .mega { width: max-content !important; max-width: calc(100% - 24px) !important; left: 0 !important; right: 0 !important; margin-left: auto !important; margin-right: auto !important; }
  html body header.site .has-mega:has(> a[href="/business-phone"]) .mega .mega-grid { grid-template-columns: max-content 300px 300px max-content !important; }
}

/* === 2026-10-24 Home Phone mega menu (Randall: wrap the text sooner so the menu is much narrower) === the write-ups
   wrap at 330 px next to the tall pictures; the panel is only as wide as its content and centred (screens >= 1121 px) === */
@media (min-width: 1121px) {
  /* place it from the menu bar (like Routers / Business Phone), not from the Home Phone link, on every screen width */
  html body header.site nav.main .has-mega.hp { position: static !important; }
  html body header.site .has-mega.hp .mega { width: max-content !important; max-width: calc(100% - 24px) !important; left: 0 !important; right: 0 !important; margin-left: auto !important; margin-right: auto !important; }
  html body header.site .has-mega.hp .mega .hp-grid { grid-template-columns: max-content 330px !important; }
}

/* === 2026-10-24 Panamax mega menu tidy (Randall: same as Routers / Business Phone / Home Phone) === white picture boxes
   only as wide as their captions, picture 84 px; panel only as wide as its content and centred (the Prime Surge menu
   shares the pnx-menu class and is left alone) === */
html body header.site nav.main .has-mega:has(> a[href="/why-panamax"]) .mega.pnx-menu .mm-thumb { width: 184px !important; padding: 8px 8px 10px !important; gap: 4px !important; background: #fff !important; }
html body header.site nav.main .has-mega:has(> a[href="/why-panamax"]) .mega.pnx-menu .mm-thumb img { height: 72px !important; max-height: 72px !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; mix-blend-mode: normal !important; }
html body header.site nav.main .has-mega:has(> a[href="/why-panamax"]) .mega.pnx-menu .mm-thumb figcaption { white-space: nowrap !important; }
@media (min-width: 1121px) {
  html body header.site nav.main .has-mega:has(> a[href="/why-panamax"]) { position: static !important; }
  html body header.site nav.main .has-mega:has(> a[href="/why-panamax"]) .mega.pnx-menu { width: max-content !important; max-width: calc(100% - 24px) !important; left: 0 !important; right: 0 !important; margin-left: auto !important; margin-right: auto !important; }
  html body header.site nav.main .has-mega:has(> a[href="/why-panamax"]) .mega.pnx-menu .mega-grid { grid-template-columns: 290px 290px !important; }
}
@media (min-width: 1391px) {
  html body header.site nav.main .has-mega:has(> a[href="/why-panamax"]) .mega.pnx-menu .mega-grid { grid-template-columns: max-content 290px 290px max-content !important; }
}

/* === 2026-10-24 Prime Surge mega menu tidy (Randall: Multimedia column gone, same clean-up as the other menus) ===
   white picture boxes only as wide as their captions, picture 72 px; three lists; panel only as wide as its content and
   centred === */
html body header.site nav.main .has-mega:has(> a[href="/all-prime-surge"]) .mega.prime-menu .mm-thumb { width: 140px !important; padding: 8px 8px 10px !important; gap: 4px !important; background: #fff !important; }
html body header.site nav.main .has-mega:has(> a[href="/all-prime-surge"]) .mega.prime-menu .mm-thumb img { height: 72px !important; max-height: 72px !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; mix-blend-mode: normal !important; }
html body header.site nav.main .has-mega:has(> a[href="/all-prime-surge"]) .mega.prime-menu .mm-thumb figcaption { white-space: nowrap !important; }
@media (min-width: 1121px) {
  html body header.site nav.main .has-mega:has(> a[href="/all-prime-surge"]) { position: static !important; }
  html body header.site nav.main .has-mega:has(> a[href="/all-prime-surge"]) .mega.prime-menu { width: max-content !important; max-width: calc(100% - 24px) !important; left: 0 !important; right: 0 !important; margin-left: auto !important; margin-right: auto !important; }
  html body header.site nav.main .has-mega:has(> a[href="/all-prime-surge"]) .mega.prime-menu .mega-grid { grid-template-columns: max-content max-content max-content !important; }
}
@media (min-width: 1391px) {
  html body header.site nav.main .has-mega:has(> a[href="/all-prime-surge"]) .mega.prime-menu .mega-grid { grid-template-columns: max-content max-content max-content max-content max-content !important; }
}
html body header.site nav.main .has-mega:has(> a[href="/all-prime-surge"]) .mega.prime-menu .mega-grid { column-gap: 34px !important; }

/* === 2026-10-24 About Us mega menu tidy (Randall: same look-over as the other menus) === the picture is sized to the
   height of the four links (it set the menu height and left empty space under them) and the links column is only as wide
   as its text === */
html body header.site nav.main .has-mega:has(> a[href="/about-us"]) .mega .ab-grid { grid-template-columns: max-content max-content !important; gap: 22px !important; align-items: center !important; }
html body header.site nav.main .has-mega:has(> a[href="/about-us"]) .mega .ab-shot { min-height: 0 !important; width: auto !important; }
html body header.site nav.main .has-mega:has(> a[href="/about-us"]) .mega .ab-figure { height: 250px !important; width: auto !important; max-height: none !important; }
html body header.site nav.main .has-mega:has(> a[href="/about-us"]) .mega .ab-links { width: max-content !important; }
html body header.site nav.main .has-mega:has(> a[href="/about-us"]) .mega.ab-menu { width: max-content !important; }

/* === 2026-10-24 VoIP PBX top banner (Randall: rounded corners like the HBE Internet banner, same width as the page
   section below, less empty space between the write-up and the picture) === */
html body section.vp-hero { width: calc(100% - 52px); max-width: 1348px; margin: 18px auto 14px; border-radius: 24px; overflow: hidden; padding: 26px 0; }
html body section.vp-hero > .wrap { max-width: none; margin: 0; padding: 0 clamp(22px, 2.6vw, 34px); }
@media (min-width: 900px) {
  html body section.vp-hero > .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(22px, 2.4vw, 34px); align-items: center; }
  html body section.vp-hero .vp-hero-art img { margin-left: 0 !important; width: 100%; max-width: 480px; height: auto; }
}
@media (max-width: 640px) {
  html body section.vp-hero { width: calc(100% - 32px); border-radius: 20px; margin-top: 14px; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  html body section.vp-hero > .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 36%); }
}
html body section.vp-hero .vp-hero-text p { max-width: none !important; }

/* === 2026-10-24 Business Phone page blue banner (Randall) === the intro becomes a blue rounded banner with white
   text (no pink label background) and the T85W + W73P on the right; on wide screens it lines up with the middle three
   product cards below === */
html body main:has(.sw-list.cat-business-phone) section.hbe-compact .band-head {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "eb art" "txt art";
  align-items: center; column-gap: clamp(16px, 2vw, 28px); row-gap: 6px; max-width: none;
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 32px); border-radius: 24px; color: #fff;
  background: radial-gradient(520px 260px at 92% -20%, rgba(235, 0, 139, .30), transparent 64%), linear-gradient(115deg, #0076af 0%, #0a5f8c 55%, #083d5c 100%);
  margin-bottom: clamp(16px, 1.6vw, 22px);
}
html body main:has(.sw-list.cat-business-phone) section.hbe-compact .band-head .sec-eyebrow {
  grid-area: eb; align-self: end; justify-self: start; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; color: #fff !important; font-size: 16px; letter-spacing: .1em;
}
html body main:has(.sw-list.cat-business-phone) section.hbe-compact .band-head .sec-eyebrow::before { display: none !important; }
html body main:has(.sw-list.cat-business-phone) section.hbe-compact .band-head > p[style] { grid-area: txt; align-self: start; display: block !important; color: rgba(255, 255, 255, .9) !important; font-size: 16px !important; line-height: 1.6 !important; }
html body main:has(.sw-list.cat-business-phone) section.hbe-compact .band-head .bp-art { grid-area: art; display: flex; align-items: flex-end; }
html body main:has(.sw-list.cat-business-phone) section.hbe-compact .band-head .bp-art img { display: block; height: auto; filter: drop-shadow(0 10px 18px rgba(3, 32, 50, .45)); }
html body main:has(.sw-list.cat-business-phone) section.hbe-compact .band-head .bp-t85w { width: clamp(120px, 10.5vw, 150px); }
html body main:has(.sw-list.cat-business-phone) section.hbe-compact .band-head .bp-w73p { width: clamp(56px, 4.8vw, 68px); margin-left: -8px; }
@media (min-width: 1340px) {
  /* from the middle of the first product card to the middle of the last one (Randall: wider, so it is shorter) */
  html body main:has(.sw-list.cat-business-phone) section.hbe-compact .band-head { margin-left: calc((100% - 64px) / 10); margin-right: calc((100% - 64px) / 10); }
}
@media (max-width: 640px) {
  html body main:has(.sw-list.cat-business-phone) section.hbe-compact .band-head { grid-template-columns: 1fr; grid-template-areas: "eb" "txt" "art"; border-radius: 20px; }
  html body main:has(.sw-list.cat-business-phone) section.hbe-compact .band-head .bp-art { justify-content: center; }
}
/* the bold YEALINK BUSINESS PHONES label starts the first line, the write-up runs on after it (Randall); the phones sit
   at the right, vertically centred */
@media (min-width: 641px) {
  html body main:has(.sw-list.cat-business-phone) section.hbe-compact .band-head { display: block; min-height: 128px; padding-right: calc(clamp(120px, 10.5vw, 150px) + clamp(56px, 4.8vw, 68px) + clamp(40px, 4vw, 60px)); }
  html body main:has(.sw-list.cat-business-phone) section.hbe-compact .band-head .sec-eyebrow { display: inline !important; margin: 0 6px 0 0 !important; vertical-align: baseline; }
  html body main:has(.sw-list.cat-business-phone) section.hbe-compact .band-head > p[style] { display: inline !important; }
  html body main:has(.sw-list.cat-business-phone) section.hbe-compact .band-head .bp-art { position: absolute; right: clamp(20px, 2.4vw, 32px); top: 50%; transform: translateY(-50%); }
}
/* the label and the write-up share one baseline (the write-up was centred on the line, so it sat lower than the label) */
@media (min-width: 641px) {
  html body main:has(.sw-list.cat-business-phone) section.hbe-compact .band-head .sec-eyebrow,
  html body main:has(.sw-list.cat-business-phone) section.hbe-compact .band-head > p[style] { vertical-align: baseline !important; }
}

/* === 2026-10-24 Prime Surge mega menu, About Prime column gone (Randall): two lists left, so two (or with the picture
   rails four) columns, panel still only as wide as its content and centred === */
@media (min-width: 1121px) {
  html body header.site nav.main .has-mega:has(> a[href="/all-prime-surge"]) .mega.prime-menu .mega-grid { grid-template-columns: max-content max-content !important; }
}
@media (min-width: 1391px) {
  html body header.site nav.main .has-mega:has(> a[href="/all-prime-surge"]) .mega.prime-menu .mega-grid { grid-template-columns: max-content max-content max-content max-content !important; }
}

/* === 2026-10-24 Shop boxes (Randall): only the bold text — brand label and write-up removed; name, model, price and
   button kept; tighter spacing and less space below the list === */
html body .hbe-site .sw-list[data-shop-grid] .sw-card .cat,
html body .hbe-site .sw-list[data-shop-grid] .sw-card > p { display: none !important; }
html body .hbe-site .sw-list[data-shop-grid] .sw-card h3 { margin: 0 0 4px !important; }
html body .hbe-site .sw-list[data-shop-grid] .sw-card .sku { margin-bottom: 10px !important; }
html body .hbe-site .sw-list[data-shop-grid] .sw-card > .row { margin-top: auto !important; }
html body main:has(.sw-list[data-shop-grid]) section.yband { padding-bottom: 30px !important; }
html body main:has(.sw-list[data-shop-grid]) .srcline { margin-top: 14px !important; }

/* === 2026-10-24 main menu colours (Randall): every other item blue / pink, starting with Home blue (5G is now blue);
   on hover an item takes the other colour === */
html body header.site nav.main > a:nth-child(odd), html body header.site nav.main > .has-mega:nth-child(odd) > a { color: #0076af !important; }
html body header.site nav.main > a:nth-child(even), html body header.site nav.main > .has-mega:nth-child(even) > a { color: #eb008b !important; }
html body header.site nav.main > a:nth-child(odd):hover, html body header.site nav.main > .has-mega:nth-child(odd):hover > a { color: #eb008b !important; }
html body header.site nav.main > a:nth-child(even):hover, html body header.site nav.main > .has-mega:nth-child(even):hover > a { color: #0076af !important; }
html body header.site nav.main > .has-mega > a .caret { color: inherit !important; stroke: currentColor !important; }

/* === 2026-10-24 main menu text about 10% bigger (Randall: "a bit small"): 16 px on wide screens (was 14.5), ~14.8 at 1440,
   ~13.3 at 1280; item spacing unchanged === */
@media (min-width: 1011px) {
  html body header.site nav.main > a,
  html body header.site nav.main .has-mega > a { font-size: min(16px, 1.254cqi); }
}
@media (min-width: 1011px) and (max-width: 1199px) {
  html body header.site nav.main > a,
  html body header.site nav.main .has-mega > a { font-size: min(16px, 1.353cqi); }
}

/* === 2026-10-25 Business Phone page: banner and the 5 product boxes at the same 1080 px width (Randall) === */
html body main:has(.sw-list.cat-business-phone) section.hbe-compact .band-head { max-width: 1080px; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; }
html body .hbe-site .sw-list.cat-business-phone { max-width: 1080px; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; }
@media (min-width: 1340px) { html body .hbe-site .sw-list.cat-business-phone { gap: 12px !important; } }
/* === 2026-10-25 Business Phone product pages at 1080 width (Randall) === the 5 phone pages (T85W, EXP55, W73P, W73H,
   Softphone) and 5 accessory pages (WF50, WF40, GEN-PSU, YEA-PS5V600US, BH74): top area, tab bar and every tab at the
   site's 1080 px width; T85W photo top framed like the other banners; light-band headings website blue with the pink
   italic words kept; sub-headers (green / grey) blue. Dark bands, warnings and table labels unchanged. */
html body main:has(:is([data-tmpl-id="7"], img[src*="/t85w/office.jpg"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"], [data-tmpl-id="17"])) :is(section.phero, section.cd-hero, .ptabs-bar, .ppanel, section.cd-cta) > .wrap,
html body main:has(:is([data-tmpl-id="7"], img[src*="/t85w/office.jpg"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"], [data-tmpl-id="17"])) .ppanel > .yband > .wrap { max-width: 1132px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; }
html body main:has(:is([data-tmpl-id="7"], img[src*="/t85w/office.jpg"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"], [data-tmpl-id="17"])) section.phero:has(> .phero-copy) { width: calc(100% - 52px) !important; max-width: 1080px !important; margin: 18px auto 0 !important; border-radius: 24px !important; overflow: hidden !important; }
html body main:has(:is([data-tmpl-id="7"], img[src*="/t85w/office.jpg"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"], [data-tmpl-id="17"])) .ptabs-bar { margin-top: 0 !important; }
@media (max-width: 860px) { html body main:has(:is([data-tmpl-id="7"], img[src*="/t85w/office.jpg"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"], [data-tmpl-id="17"])) section.phero:has(> .phero-copy) { width: calc(100% - 32px) !important; } }
html body main:has(:is([data-tmpl-id="7"], img[src*="/t85w/office.jpg"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"], [data-tmpl-id="17"])) .ppanel .yband:not(.dark) h2, html body main:has(:is([data-tmpl-id="7"], img[src*="/t85w/office.jpg"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"], [data-tmpl-id="17"])) .ppanel.cd-sec h2 { color: var(--blue, #0076af) !important; }
html body main:has(:is([data-tmpl-id="7"], img[src*="/t85w/office.jpg"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"], [data-tmpl-id="17"])) .ppanel .yband:not(.dark) h2 em, html body main:has(:is([data-tmpl-id="7"], img[src*="/t85w/office.jpg"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"], [data-tmpl-id="17"])) .ppanel.cd-sec h2 em { color: #eb008b !important; font-style: italic !important; }
html body main:has(:is([data-tmpl-id="7"], img[src*="/t85w/office.jpg"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"], [data-tmpl-id="17"])) .ppanel .yband:not(.dark) :is(.sumgroup h3, .fband h3, .fcard h3, .compat-box h3, .callout:not(.warn) h3, .benefit h3),
html body main:has(:is([data-tmpl-id="7"], img[src*="/t85w/office.jpg"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"], [data-tmpl-id="17"])) .ppanel.cd-sec :is(.sp-copy h3, .sp-copy b, .cap-top h3) { color: var(--blue, #0076af) !important; }
/* === 2026-10-25 T85W Description: picture box fitted to the picture, centred on the write-up; Continental U.S. badge on the button line (Randall) === */
@media (min-width: 1101px) {
  html body main:has([data-tmpl-id="7"]) #panel-description .desc-grid { align-items: center !important; }
  html body main:has([data-tmpl-id="7"]) #panel-description .desc-grid > figure.shot { align-self: center !important; height: auto !important; min-height: 0 !important; padding: 14px 14px 12px !important; justify-content: center !important; }
  html body main:has([data-tmpl-id="7"]) #panel-description .desc-grid > figure.shot img { width: 100% !important; height: auto !important; max-width: none !important; max-height: none !important; margin: 0 !important; aspect-ratio: 405 / 270; object-fit: cover !important; object-position: 50% 62% !important; }
  html body main:has([data-tmpl-id="7"]) #panel-description .desc-grid > figure.shot figcaption { margin: 4px 0 0 !important; padding: 0 !important; }
}
html body main:has([data-tmpl-id="7"]) #panel-description .buy-group { display: flex !important; flex-wrap: wrap !important; align-items: center !important; column-gap: 10px !important; }
html body main:has([data-tmpl-id="7"]) #panel-description .buy-group > .pricing { flex: 0 0 100% !important; }
html body main:has([data-tmpl-id="7"]) #panel-description .buy-group > :is(.pcta, .us-badge) { width: auto !important; margin: 14px 0 0 !important; }
/* === 2026-10-25 EXP55 / W73P / W73H top: Continental U.S. badge on the Buy Now / Add to Cart line (Randall) === */
html body main:has(:is([data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"])) section.phero .pcta { display: inline-flex !important; vertical-align: middle !important; width: auto !important; margin-top: 18px !important; margin-bottom: 0 !important; }
html body main:has(:is([data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"])) section.phero .pcta + .us-badge { display: inline-flex !important; vertical-align: middle !important; margin: 18px 0 0 10px !important; }
@media (max-width: 480px) { html body main:has(:is([data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"])) section.phero .pcta + .us-badge { margin: 12px 0 0 !important; } }
/* === 2026-10-25 Router product pages at 1080 width (Randall) === Rollover Switch, HBE-AX3000, RB960PGS, RB5009: top area, tab bar
   and tabs at the site's 1080 px width; tab headings website blue with the pink italic words. */
html body main:has(:is([data-tmpl-id="22"], [data-tmpl-id="23"], [data-tmpl-id="24"], [data-tmpl-id="25"])) .cpe-hero > .wrap.cpe-grid, html body main:has(:is([data-tmpl-id="22"], [data-tmpl-id="23"], [data-tmpl-id="24"], [data-tmpl-id="25"])) .ptabs-bar > .wrap, html body main:has(:is([data-tmpl-id="22"], [data-tmpl-id="23"], [data-tmpl-id="24"], [data-tmpl-id="25"])) .ppanel > .yband > .wrap { max-width: 1132px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; }
html body main:has(:is([data-tmpl-id="22"], [data-tmpl-id="23"], [data-tmpl-id="24"], [data-tmpl-id="25"])) .ppanel .pcard h2 { color: var(--blue, #0076af) !important; }
html body main:has(:is([data-tmpl-id="22"], [data-tmpl-id="23"], [data-tmpl-id="24"], [data-tmpl-id="25"])) .ppanel .pcard h2 em { color: #eb008b !important; font-style: italic !important; }
html body main:has(:is([data-tmpl-id="22"], [data-tmpl-id="23"], [data-tmpl-id="24"], [data-tmpl-id="25"])) .ppanel :is(.p-glance h3, .pack h3, .pcard h3), html body main:has(:is([data-tmpl-id="22"], [data-tmpl-id="23"], [data-tmpl-id="24"], [data-tmpl-id="25"])) #panel-highlights b { color: var(--blue, #0076af) !important; }
/* === 2026-10-25 Panamax product pages at 1080 width (Randall) === P360-8, M2A20, MOD-UTP5E: top area, tab bar and tabs at the
   site's 1080 px width; tab headings and sub-headings website blue (same as the router pages). */
html body main:has(:is([data-tmpl-id="38"], [data-tmpl-id="39"], [data-tmpl-id="42"])) .cpe-hero > .wrap.cpe-grid, html body main:has(:is([data-tmpl-id="38"], [data-tmpl-id="39"], [data-tmpl-id="42"])) .ptabs-bar > .wrap, html body main:has(:is([data-tmpl-id="38"], [data-tmpl-id="39"], [data-tmpl-id="42"])) .ppanel > .yband > .wrap { max-width: 1132px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; }
html body main:has(:is([data-tmpl-id="38"], [data-tmpl-id="39"], [data-tmpl-id="42"])) .ppanel .pcard h2 { color: var(--blue, #0076af) !important; }
html body main:has(:is([data-tmpl-id="38"], [data-tmpl-id="39"], [data-tmpl-id="42"])) .ppanel .pcard h2 em { color: #eb008b !important; font-style: italic !important; }
html body main:has(:is([data-tmpl-id="38"], [data-tmpl-id="39"], [data-tmpl-id="42"])) .ppanel :is(.p-glance h3, .pack h3, .pcard h3), html body main:has(:is([data-tmpl-id="38"], [data-tmpl-id="39"], [data-tmpl-id="42"])) #panel-highlights b { color: var(--blue, #0076af) !important; }
/* Continental U.S. Only badge on the Buy Now / Add to Cart line, level with the buttons (phones: under them, as before) */
@media (min-width: 481px) {
html body main:has(:is([data-tmpl-id="38"], [data-tmpl-id="39"], [data-tmpl-id="42"])) .cpe-hero .buy-row { display: inline-flex !important; vertical-align: middle !important; }
html body main:has(:is([data-tmpl-id="38"], [data-tmpl-id="39"], [data-tmpl-id="42"])) .cpe-hero .buy-row + .us-badge { display: inline-flex !important; vertical-align: middle !important; margin: 28px 0 0 10px !important; }
}
/* === 2026-10-25 Prime Surge product pages at 1080 width (Randall) === the 11 Prime products on /all-prime-surge: top area, tab bar
   and tabs at the site's 1080 px width; tab headings and sub-headings website blue; U.S. badge on the button line (same as Panamax). */
html body main:has(:is([data-tmpl-id="26"], [data-tmpl-id="29"], [data-tmpl-id="30"], [data-tmpl-id="31"], [data-tmpl-id="32"], [data-tmpl-id="33"], [data-tmpl-id="34"], [data-tmpl-id="35"], [data-tmpl-id="36"], [data-tmpl-id="37"], [data-tmpl-id="58"], [data-tmpl-id="28"])) .cpe-hero > .wrap.cpe-grid, html body main:has(:is([data-tmpl-id="26"], [data-tmpl-id="29"], [data-tmpl-id="30"], [data-tmpl-id="31"], [data-tmpl-id="32"], [data-tmpl-id="33"], [data-tmpl-id="34"], [data-tmpl-id="35"], [data-tmpl-id="36"], [data-tmpl-id="37"], [data-tmpl-id="58"], [data-tmpl-id="28"])) .ptabs-bar > .wrap, html body main:has(:is([data-tmpl-id="26"], [data-tmpl-id="29"], [data-tmpl-id="30"], [data-tmpl-id="31"], [data-tmpl-id="32"], [data-tmpl-id="33"], [data-tmpl-id="34"], [data-tmpl-id="35"], [data-tmpl-id="36"], [data-tmpl-id="37"], [data-tmpl-id="58"], [data-tmpl-id="28"])) .ppanel > .yband > .wrap { max-width: 1132px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; }
html body main:has(:is([data-tmpl-id="26"], [data-tmpl-id="29"], [data-tmpl-id="30"], [data-tmpl-id="31"], [data-tmpl-id="32"], [data-tmpl-id="33"], [data-tmpl-id="34"], [data-tmpl-id="35"], [data-tmpl-id="36"], [data-tmpl-id="37"], [data-tmpl-id="58"], [data-tmpl-id="28"])) .ppanel .pcard h2 { color: var(--blue, #0076af) !important; }
html body main:has(:is([data-tmpl-id="26"], [data-tmpl-id="29"], [data-tmpl-id="30"], [data-tmpl-id="31"], [data-tmpl-id="32"], [data-tmpl-id="33"], [data-tmpl-id="34"], [data-tmpl-id="35"], [data-tmpl-id="36"], [data-tmpl-id="37"], [data-tmpl-id="58"], [data-tmpl-id="28"])) .ppanel .pcard h2 em { color: #eb008b !important; font-style: italic !important; }
html body main:has(:is([data-tmpl-id="26"], [data-tmpl-id="29"], [data-tmpl-id="30"], [data-tmpl-id="31"], [data-tmpl-id="32"], [data-tmpl-id="33"], [data-tmpl-id="34"], [data-tmpl-id="35"], [data-tmpl-id="36"], [data-tmpl-id="37"], [data-tmpl-id="58"], [data-tmpl-id="28"])) .ppanel :is(.p-glance h3, .pack h3, .pcard h3), html body main:has(:is([data-tmpl-id="26"], [data-tmpl-id="29"], [data-tmpl-id="30"], [data-tmpl-id="31"], [data-tmpl-id="32"], [data-tmpl-id="33"], [data-tmpl-id="34"], [data-tmpl-id="35"], [data-tmpl-id="36"], [data-tmpl-id="37"], [data-tmpl-id="58"], [data-tmpl-id="28"])) #panel-highlights b { color: var(--blue, #0076af) !important; }
/* Continental U.S. Only badge on the Buy Now / Add to Cart line, level with the buttons (phones: under them, as before) */
@media (min-width: 481px) {
html body main:has(:is([data-tmpl-id="26"], [data-tmpl-id="29"], [data-tmpl-id="30"], [data-tmpl-id="31"], [data-tmpl-id="32"], [data-tmpl-id="33"], [data-tmpl-id="34"], [data-tmpl-id="35"], [data-tmpl-id="36"], [data-tmpl-id="37"], [data-tmpl-id="58"], [data-tmpl-id="28"])) .cpe-hero .buy-row { display: inline-flex !important; vertical-align: middle !important; }
html body main:has(:is([data-tmpl-id="26"], [data-tmpl-id="29"], [data-tmpl-id="30"], [data-tmpl-id="31"], [data-tmpl-id="32"], [data-tmpl-id="33"], [data-tmpl-id="34"], [data-tmpl-id="35"], [data-tmpl-id="36"], [data-tmpl-id="37"], [data-tmpl-id="58"], [data-tmpl-id="28"])) .cpe-hero .buy-row + .us-badge { display: inline-flex !important; vertical-align: middle !important; margin: 28px 0 0 10px !important; }
}
/* === 2026-10-25 Prime product thumbnails (Randall) === the 11 Prime products on /all-prime-surge: smaller picture boxes, room for 6 in one row under the
   main picture, the product's pictures centred in that row (phones keep their own box size, centred too). */
@media (min-width: 481px) {
html body main:has(:is([data-tmpl-id="26"], [data-tmpl-id="29"], [data-tmpl-id="30"], [data-tmpl-id="31"], [data-tmpl-id="32"], [data-tmpl-id="33"], [data-tmpl-id="34"], [data-tmpl-id="35"], [data-tmpl-id="36"], [data-tmpl-id="37"], [data-tmpl-id="58"], [data-tmpl-id="28"])) .cpe-hero .gal-thumbs { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; grid-template-columns: none !important; }
html body main:has(:is([data-tmpl-id="26"], [data-tmpl-id="29"], [data-tmpl-id="30"], [data-tmpl-id="31"], [data-tmpl-id="32"], [data-tmpl-id="33"], [data-tmpl-id="34"], [data-tmpl-id="35"], [data-tmpl-id="36"], [data-tmpl-id="37"], [data-tmpl-id="58"], [data-tmpl-id="28"])) .cpe-hero .gal-thumbs > li { flex: 0 0 calc((100% - 40px) / 6) !important; width: auto !important; height: auto !important; aspect-ratio: 1 / 1; }
html body main:has(:is([data-tmpl-id="26"], [data-tmpl-id="29"], [data-tmpl-id="30"], [data-tmpl-id="31"], [data-tmpl-id="32"], [data-tmpl-id="33"], [data-tmpl-id="34"], [data-tmpl-id="35"], [data-tmpl-id="36"], [data-tmpl-id="37"], [data-tmpl-id="58"], [data-tmpl-id="28"])) .cpe-hero .gal-thumbs > li > button { width: 100% !important; height: 100% !important; box-sizing: border-box !important; border-radius: 10px !important; }
html body main:has(:is([data-tmpl-id="26"], [data-tmpl-id="29"], [data-tmpl-id="30"], [data-tmpl-id="31"], [data-tmpl-id="32"], [data-tmpl-id="33"], [data-tmpl-id="34"], [data-tmpl-id="35"], [data-tmpl-id="36"], [data-tmpl-id="37"], [data-tmpl-id="58"], [data-tmpl-id="28"])) .cpe-hero .gal-thumbs > li > button img { width: 100% !important; height: 100% !important; }
}
@media (max-width: 480px) { html body main:has(:is([data-tmpl-id="26"], [data-tmpl-id="29"], [data-tmpl-id="30"], [data-tmpl-id="31"], [data-tmpl-id="32"], [data-tmpl-id="33"], [data-tmpl-id="34"], [data-tmpl-id="35"], [data-tmpl-id="36"], [data-tmpl-id="37"], [data-tmpl-id="58"], [data-tmpl-id="28"])) .cpe-hero .gal-thumbs { justify-content: center !important; } }
/* === 2026-10-25 Prime/Panamax product tops (Randall) === the 11 Prime + 3 Panamax product pages: title smaller, blue, one line where it fits; price smaller,
   on the Model line; spec bullets out of the top (they are in the Features tab); Buy Now out of the At a glance box (it is at the top);
   rounded corners; main picture sized so picture + thumbnails come close to the height of the text beside it. */
html body main:has(:is([data-tmpl-id="26"], [data-tmpl-id="29"], [data-tmpl-id="30"], [data-tmpl-id="31"], [data-tmpl-id="32"], [data-tmpl-id="33"], [data-tmpl-id="34"], [data-tmpl-id="35"], [data-tmpl-id="36"], [data-tmpl-id="37"], [data-tmpl-id="58"], [data-tmpl-id="28"], [data-tmpl-id="38"], [data-tmpl-id="39"], [data-tmpl-id="42"])) .cpe-hero .cpe-copy h1 { max-width: none !important; font-size: 25px !important; line-height: 1.25 !important; color: var(--blue, #0076af) !important; font-style: normal !important; letter-spacing: -.01em !important; }
html body main:has(:is([data-tmpl-id="26"], [data-tmpl-id="29"], [data-tmpl-id="30"], [data-tmpl-id="31"], [data-tmpl-id="32"], [data-tmpl-id="33"], [data-tmpl-id="34"], [data-tmpl-id="35"], [data-tmpl-id="36"], [data-tmpl-id="37"], [data-tmpl-id="58"], [data-tmpl-id="28"], [data-tmpl-id="38"], [data-tmpl-id="39"], [data-tmpl-id="42"])) .cpe-hero .cpe-copy h1 * { color: inherit !important; font-style: normal !important; }
html body main:has(:is([data-tmpl-id="26"], [data-tmpl-id="29"], [data-tmpl-id="30"], [data-tmpl-id="31"], [data-tmpl-id="32"], [data-tmpl-id="33"], [data-tmpl-id="34"], [data-tmpl-id="35"], [data-tmpl-id="36"], [data-tmpl-id="37"], [data-tmpl-id="58"], [data-tmpl-id="28"], [data-tmpl-id="38"], [data-tmpl-id="39"], [data-tmpl-id="42"])) .cpe-hero .cpe-copy .model { vertical-align: middle; }
html body main:has(:is([data-tmpl-id="26"], [data-tmpl-id="29"], [data-tmpl-id="30"], [data-tmpl-id="31"], [data-tmpl-id="32"], [data-tmpl-id="33"], [data-tmpl-id="34"], [data-tmpl-id="35"], [data-tmpl-id="36"], [data-tmpl-id="37"], [data-tmpl-id="58"], [data-tmpl-id="28"], [data-tmpl-id="38"], [data-tmpl-id="39"], [data-tmpl-id="42"])) .cpe-hero .cpe-copy .model + .pricing { display: inline-flex !important; align-items: center; vertical-align: middle; margin: 16px 0 0 14px !important; }
html body main:has(:is([data-tmpl-id="26"], [data-tmpl-id="29"], [data-tmpl-id="30"], [data-tmpl-id="31"], [data-tmpl-id="32"], [data-tmpl-id="33"], [data-tmpl-id="34"], [data-tmpl-id="35"], [data-tmpl-id="36"], [data-tmpl-id="37"], [data-tmpl-id="58"], [data-tmpl-id="28"], [data-tmpl-id="38"], [data-tmpl-id="39"], [data-tmpl-id="42"])) .cpe-hero .cpe-copy .pricing .pricing-now { font-size: 21px !important; line-height: 1.1 !important; }
html body main:has(:is([data-tmpl-id="26"], [data-tmpl-id="29"], [data-tmpl-id="30"], [data-tmpl-id="31"], [data-tmpl-id="32"], [data-tmpl-id="33"], [data-tmpl-id="34"], [data-tmpl-id="35"], [data-tmpl-id="36"], [data-tmpl-id="37"], [data-tmpl-id="58"], [data-tmpl-id="28"], [data-tmpl-id="38"], [data-tmpl-id="39"], [data-tmpl-id="42"])) .cpe-hero .cpe-copy ul.chips { display: none !important; }
html body main:has(:is([data-tmpl-id="26"], [data-tmpl-id="29"], [data-tmpl-id="30"], [data-tmpl-id="31"], [data-tmpl-id="32"], [data-tmpl-id="33"], [data-tmpl-id="34"], [data-tmpl-id="35"], [data-tmpl-id="36"], [data-tmpl-id="37"], [data-tmpl-id="58"], [data-tmpl-id="28"], [data-tmpl-id="38"], [data-tmpl-id="39"], [data-tmpl-id="42"])) .p-glance .buybtn { display: none !important; }
@media (min-width: 1101px) {
html body main:has(:is([data-tmpl-id="26"], [data-tmpl-id="29"], [data-tmpl-id="30"], [data-tmpl-id="31"], [data-tmpl-id="32"], [data-tmpl-id="33"], [data-tmpl-id="34"], [data-tmpl-id="35"], [data-tmpl-id="36"], [data-tmpl-id="37"], [data-tmpl-id="58"], [data-tmpl-id="28"], [data-tmpl-id="38"], [data-tmpl-id="39"], [data-tmpl-id="42"])) .cpe-hero .gallery { width: 100%; max-width: var(--pt-gal, 300px) !important; margin-left: auto !important; margin-right: auto !important; }
html body main:has(:is([data-tmpl-id="26"], [data-tmpl-id="29"], [data-tmpl-id="30"], [data-tmpl-id="31"], [data-tmpl-id="32"], [data-tmpl-id="33"], [data-tmpl-id="34"], [data-tmpl-id="35"], [data-tmpl-id="36"], [data-tmpl-id="37"], [data-tmpl-id="58"], [data-tmpl-id="28"], [data-tmpl-id="38"], [data-tmpl-id="39"], [data-tmpl-id="42"])) .cpe-hero .gal-thumbs > li { flex-basis: calc((100% - 32px) / 5) !important; }
html body main:has(:is([data-tmpl-id="26"], [data-tmpl-id="29"], [data-tmpl-id="30"], [data-tmpl-id="31"], [data-tmpl-id="32"], [data-tmpl-id="33"], [data-tmpl-id="34"], [data-tmpl-id="35"], [data-tmpl-id="36"], [data-tmpl-id="37"], [data-tmpl-id="58"], [data-tmpl-id="28"], [data-tmpl-id="38"], [data-tmpl-id="39"], [data-tmpl-id="42"])) .cpe-hero .gal-main .pg-count { top: 10px !important; bottom: auto !important; }
}
/* picture width per product, so picture + thumbnails come close to the height of that product's text */
html body main:has([data-tmpl-id="36"]) .cpe-hero { --pt-gal: 325px; }
html body main:has([data-tmpl-id="32"]) .cpe-hero { --pt-gal: 280px; }
html body main:has([data-tmpl-id="33"]) .cpe-hero { --pt-gal: 290px; }
html body main:has([data-tmpl-id="31"]) .cpe-hero { --pt-gal: 310px; }
html body main:has([data-tmpl-id="37"]) .cpe-hero { --pt-gal: 275px; }
html body main:has([data-tmpl-id="35"]) .cpe-hero { --pt-gal: 300px; }
html body main:has([data-tmpl-id="30"]) .cpe-hero { --pt-gal: 290px; }
html body main:has([data-tmpl-id="29"]) .cpe-hero { --pt-gal: 325px; }
html body main:has([data-tmpl-id="26"]) .cpe-hero { --pt-gal: 265px; }
html body main:has([data-tmpl-id="34"]) .cpe-hero { --pt-gal: 300px; }
html body main:has([data-tmpl-id="38"]) .cpe-hero { --pt-gal: 390px; }
html body main:has([data-tmpl-id="39"]) .cpe-hero { --pt-gal: 390px; }
html body main:has([data-tmpl-id="42"]) .cpe-hero { --pt-gal: 324px; }
html body main:has([data-tmpl-id="58"]) .cpe-hero { --pt-gal: 300px; }
html body main:has([data-tmpl-id="28"]) .cpe-hero { --pt-gal: 338px; }
/* === 2026-10-25 Product box titles website blue (Randall) === product names website blue everywhere products are listed:
   shop + category pages (.sw-card), home page Phones / 5G boxes (.prod), VoIP PBX phone cards (.vp-card), dropdown menus, cart list. */
html body .hbe-site .sw-card h3, html body .hbe-site .sw-card h3 a,
html body .hbe-site .products .prod .body h3, html body .hbe-site .products .prod .body h3 a,
html body .hbe-site .vp-card h3, html body .hbe-site .vp-card h3 a { color: var(--blue, #0076af) !important; }
/* dropdown menus (product links only; carrier/FAQ/category links unchanged; hover colour kept) and the shopping cart list */
html body .hbe-site .mega .mm-item > a:not(.mm-faq):not([href^="/carrier-"]):not([href^="/pricing-"]):not([href^="/unified-communications"]):not([href^="/why-panamax"]):not([href^="/all-prime-surge"]):not(:hover),
html body .hbe-site .mega .mm-item > a.mm-prod:not(:hover) .mm-prod-name,
html body .hbe-site .mega a.hp-title:not(:hover),
html body .hbe-site .cart-line h3, html body .hbe-site .cart-line h3 a { color: var(--blue, #0076af) !important; }
/* === 2026-10-26 Business Phone / Home Phone product titles blue (Randall) === product page title website blue; W73H and BH74 sit on a
   dark photo, so their title is the site's light blue (#8fd8ff, as on the other dark banners) to stay readable. */
html body main:has(:is([data-tmpl-id="7"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"])) :is(section.phero, section.cd-hero) h1, html body main:has(:is([data-tmpl-id="7"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"])) :is(section.phero, section.cd-hero) h1 * { color: var(--blue, #0076af) !important; }
html body main:has(:is([data-tmpl-id="10"], [data-tmpl-id="17"])) section.phero h1, html body main:has(:is([data-tmpl-id="10"], [data-tmpl-id="17"])) section.phero h1 * { color: #8fd8ff !important; }
/* === 2026-10-26 Business Phone / Home Phone product tops (Randall) === same changes as the Prime / Panamax pages where they apply:
   title smaller (blue from the title block above); price smaller and on the Model line; spec bullets out of the top where every one is
   already in the tabs (W73P / W73H keep their 4 selling points - they are not in the tabs); picture sized to the text beside it. */
html body main:has(:is([data-tmpl-id="7"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"], [data-tmpl-id="17"])) :is(section.phero, section.cd-hero) h1 { font-size: 28px !important; line-height: 1.25 !important; max-width: none !important; font-style: normal !important; letter-spacing: -.01em !important; }
html body main:has(:is([data-tmpl-id="7"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"], [data-tmpl-id="17"])) :is(section.phero, section.cd-hero) h1 * { font-style: normal !important; }
html body main:has(:is([data-tmpl-id="7"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"], [data-tmpl-id="17"])) section.phero .model { display: inline-block !important; width: auto !important; vertical-align: middle; margin-right: 14px !important; }
html body main:has(:is([data-tmpl-id="7"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"], [data-tmpl-id="17"])) section.phero .model + .pricing { display: inline-flex !important; flex-wrap: wrap; align-items: center; gap: 4px 10px; vertical-align: middle; margin: 16px 0 0 0 !important; }
html body main:has(:is([data-tmpl-id="7"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"], [data-tmpl-id="17"])) .pricing .pricing-now { font-size: 21px !important; line-height: 1.1 !important; }
html body main:has(:is([data-tmpl-id="7"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"], [data-tmpl-id="17"])) .pricing .pricing-msrp, html body main:has(:is([data-tmpl-id="7"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"], [data-tmpl-id="17"])) .pricing .pricing-msrp-value { font-size: 14px !important; }
html body main:has(:is([data-tmpl-id="7"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"], [data-tmpl-id="17"])) .pricing .pricing-label { font-size: 12px !important; margin: 0 !important; }
html body main:has(:is([data-tmpl-id="7"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"], [data-tmpl-id="17"])) section.phero ul.quickspecs { display: none !important; }
/* Continental U.S. Only badge on the Buy Now / Add to Cart line, level with the buttons (phones: under them) */
@media (min-width: 481px) {
html body main:has(:is([data-tmpl-id="7"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"], [data-tmpl-id="17"])) section.phero .pcta { display: inline-flex !important; vertical-align: middle !important; margin-top: 18px !important; margin-bottom: 0 !important; }
html body main:has(:is([data-tmpl-id="7"], [data-tmpl-id="8"], [data-tmpl-id="9"], [data-tmpl-id="10"], [data-tmpl-id="12"], [data-tmpl-id="13"], [data-tmpl-id="14"], [data-tmpl-id="15"], [data-tmpl-id="16"], [data-tmpl-id="17"])) section.phero .pcta + .us-badge { display: inline-flex !important; vertical-align: middle !important; margin: 18px 0 0 10px !important; }
}
/* picture sized to the text beside it (only where the picture was much taller than the text) */
@media (min-width: 861px) {
html body main:has([data-tmpl-id="16"]) section.phero { --ph-img: 240px; }
html body main:has([data-tmpl-id="13"]) section.phero { --ph-img: 260px; }
html body main:has([data-tmpl-id="8"]) section.phero { --ph-img: 280px; }
html body main:has([data-tmpl-id="15"]) section.phero { --ph-img: 245px; }
html body main:has(:is([data-tmpl-id="8"], [data-tmpl-id="13"], [data-tmpl-id="15"], [data-tmpl-id="16"])) section.phero figure.hero-shot { height: auto !important; align-self: center !important; }
html body main:has(:is([data-tmpl-id="8"], [data-tmpl-id="13"], [data-tmpl-id="15"], [data-tmpl-id="16"])) section.phero figure.hero-shot img { max-height: var(--ph-img) !important; width: auto !important; max-width: 100% !important; height: auto !important; margin-left: auto !important; margin-right: auto !important; display: block !important; object-fit: contain !important; }
}
/* === 2026-10-26 T85W description picture (Randall) === transparent phone, no white card, larger and centred on the text. */
html body main:has([data-tmpl-id="7"]) #panel-description .desc-grid > figure.shot { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; margin: 0 auto !important; width: 100% !important; max-width: 560px !important; align-self: center !important; }
html body main:has([data-tmpl-id="7"]) #panel-description .desc-grid > figure.shot img { display: block !important; width: 100% !important; height: auto !important; max-height: none !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
html body main:has([data-tmpl-id="7"]) #panel-description .desc-grid > figure.shot figcaption { margin-top: 14px !important; }
@media (min-width: 1101px) {
  html body main:has([data-tmpl-id="7"]) #panel-description .desc-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) !important; column-gap: 48px !important; align-items: center !important; }
}
/* === 2026-10-26 EXP55 pictures swapped (Randall) === top: front view filling the space beside the text; Key Features: see-through angled view sized to the benefits box. */
html body main:has([data-tmpl-id="8"]) section.phero { --ph-img: 290px; }
html body main:has([data-tmpl-id="8"]) section.phero figure.hero-shot { background: transparent !important; box-shadow: none !important; }
html body main:has([data-tmpl-id="8"]) section.phero figure.hero-shot img { border-radius: 18px !important; }
html body main:has([data-tmpl-id="8"]) #panel-features figure.featshot { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; align-self: center !important; }
html body main:has([data-tmpl-id="8"]) #panel-features figure.featshot img { display: block !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: 300px !important; margin: 0 auto !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; object-fit: contain !important; }
html body main:has([data-tmpl-id="8"]) #panel-features figure.featshot figcaption { margin-top: 12px !important; }
@media (max-width: 860px) {
  html body main:has([data-tmpl-id="8"]) section.phero figure.hero-shot img { max-height: 320px !important; width: auto !important; max-width: 100% !important; height: auto !important; margin-left: auto !important; margin-right: auto !important; display: block !important; }
}
/* === 2026-10-26 Softphone top clean-up (Randall) === tighter text column (about the picture's height), smaller sub-line, no divider, blue name, price + note on one line, standard separate buttons. */
html body main:has([data-tmpl-id="12"]) section.cd-hero .cd-hero-grid { align-items: center !important; }
html body main:has([data-tmpl-id="12"]) section.cd-hero h1 { font-weight: 400 !important; }
html body main:has([data-tmpl-id="12"]) section.cd-hero h1 * { font-weight: 400 !important; }
html body main:has([data-tmpl-id="12"]) section.cd-hero .sub { font-size: 16px !important; line-height: 1.4 !important; margin-top: 12px !important; }
html body main:has([data-tmpl-id="12"]) section.cd-hero .lead { border-top: 0 !important; padding-top: 0 !important; margin-top: 12px !important; line-height: 1.65 !important; }
html body main:has([data-tmpl-id="12"]) section.cd-hero .lead + .lead { margin-top: 10px !important; }
html body main:has([data-tmpl-id="12"]) section.cd-hero .lead .sp-name { color: var(--blue, #0076af) !important; font-weight: 400 !important; }
html body main:has([data-tmpl-id="12"]) section.cd-hero .pricing { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 14px !important; margin: 14px 0 0 0 !important; }
html body main:has([data-tmpl-id="12"]) section.cd-hero .pricing-now { flex: 0 0 auto !important; white-space: nowrap !important; }
html body main:has([data-tmpl-id="12"]) section.cd-hero .pricing-note { margin: 0 !important; font-size: 13px !important; line-height: 1.4 !important; }
html body main:has([data-tmpl-id="12"]) section.cd-hero .cd-hero-actions.pcta { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 12px !important; margin-top: 16px !important; }
html body main:has([data-tmpl-id="12"]) section.cd-hero .cd-hero-actions.pcta > .buybtn { margin: 0 !important; }
html body main:has([data-tmpl-id="12"]) section.cd-hero .cd-hero-actions.pcta > a.buybtn { display: inline-flex !important; align-items: center !important; gap: 8px !important; height: 30px !important; padding: 0 16px !important; font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif !important; font-size: 13.5px !important; font-weight: 700 !important; letter-spacing: .01em !important; line-height: 1.2 !important; text-decoration: none !important; white-space: nowrap !important; border: 0 !important; border-radius: 40px !important; color: #fff !important; background: var(--blue, #0076af) !important; box-shadow: 0 8px 20px -8px var(--blue, #0076af) !important; transition: background .14s, transform .12s, box-shadow .14s !important; }
html body main:has([data-tmpl-id="12"]) section.cd-hero .cd-hero-actions.pcta > a.buybtn.hbe-add { color: var(--blue, #0076af) !important; background: #fff !important; box-shadow: inset 0 0 0 1.5px var(--blue, #0076af) !important; }
html body main:has([data-tmpl-id="12"]) section.cd-hero .cd-hero-actions.pcta > a.buybtn:hover { transform: translateY(-1px) !important; }
html body main:has([data-tmpl-id="12"]) section.cd-hero .cd-hero-actions.pcta > a.buybtn svg { display: block !important; width: 15px !important; height: 15px !important; fill: none !important; stroke: #fff !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
html body main:has([data-tmpl-id="12"]) section.cd-hero .lead .hl { color: #eb008b !important; font-weight: 400 !important; text-transform: none !important; }
/* === 2026-10-26 Softphone Desktop tab (Randall) === "Desktop Call Center" header centred like the site's section headers; the call-queue block's list tightened to the picture's height. */
html body main:has([data-tmpl-id="12"]) #panel-desktop .cd-head { display: block !important; text-align: center !important; }
html body main:has([data-tmpl-id="12"]) #panel-desktop .cd-head .cd-copy, html body main:has([data-tmpl-id="12"]) #panel-desktop .cd-head h2 { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
html body main:has([data-tmpl-id="12"]) #panel-desktop .cd-head .cd-lead { margin: 10px auto 0 !important; max-width: 780px !important; padding: 0 !important; border: 0 !important; }
html body main:has([data-tmpl-id="12"]) #panel-desktop .cd-head .cd-lead p { text-align: center !important; margin: 0 auto !important; }
html body main:has([data-tmpl-id="12"]) #panel-desktop .sp-a2 .sp-copy { padding-top: 0 !important; padding-bottom: 0 !important; }
html body main:has([data-tmpl-id="12"]) #panel-desktop .sp-a2 .sp-list { margin-top: 0 !important; }
html body main:has([data-tmpl-id="12"]) #panel-desktop .sp-a2 .sp-list li span:not(.sp-ico) { line-height: 1.55 !important; }
html body main:has([data-tmpl-id="12"]) #panel-desktop .sp-a2 .sp-list { gap: 10px !important; }
html body main:has([data-tmpl-id="12"]) section.cd-hero { padding-bottom: 48px !important; }
html body main:has([data-tmpl-id="12"]) .ppanel.cd-sec { padding-top: 48px !important; }
html body main:has([data-tmpl-id="12"]) #panel-desktop .cd-head { margin-bottom: 32px !important; }
html body main:has([data-tmpl-id="12"]) #panel-desktop .cd-head + .sp-show { margin-top: 0 !important; }
/* === 2026-10-26 Softphone Mobile Phone tab (Randall) === section header centred above the first block (same as Desktop tab), tighter gap to the first block. */
html body main:has([data-tmpl-id="12"]) #panel-mobile .cd-head { display: block !important; text-align: center !important; margin-bottom: 32px !important; }
html body main:has([data-tmpl-id="12"]) #panel-mobile .cd-head .cd-copy, html body main:has([data-tmpl-id="12"]) #panel-mobile .cd-head h2, html body main:has([data-tmpl-id="12"]) #panel-mobile .cd-head .cd-intro { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
html body main:has([data-tmpl-id="12"]) #panel-mobile .cd-head .cd-intro { max-width: 780px !important; }
html body main:has([data-tmpl-id="12"]) #panel-mobile .cd-head .cd-lead { margin: 10px auto 0 !important; max-width: 780px !important; padding: 0 !important; border: 0 !important; }
html body main:has([data-tmpl-id="12"]) #panel-mobile .cd-head .cd-lead p { text-align: center !important; margin: 0 auto !important; }
html body main:has([data-tmpl-id="12"]) #panel-mobile .cd-head + .sp-show { margin-top: 0 !important; }
html body main:has([data-tmpl-id="12"]) #panel-mobile .sp-a1 .sp-copy { padding-top: 0 !important; padding-bottom: 0 !important; }
html body main:has([data-tmpl-id="12"]) #panel-mobile .sp-a1 .sp-list { margin-top: 0 !important; }
html body main:has([data-tmpl-id="12"]) #panel-mobile .sp-a1 .sp-list { gap: 10px !important; }
html body main:has([data-tmpl-id="12"]) #panel-mobile#panel-mobile .cd-head .cd-copy > h2, html body main:has([data-tmpl-id="12"]) #panel-mobile#panel-mobile .cd-head .cd-copy > .cd-intro { display: block !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } html body main:has([data-tmpl-id="12"]) #panel-mobile#panel-mobile .cd-head .cd-copy > .cd-intro { margin-top: 8px !important; }
/* === 2026-10-26 Softphone Laptop/Tablet tab + tighter spacing (Randall) === Laptop/Tablet header centred like the other two tabs; lists tightened to their pictures; less space between the top, tab bar, headers and boxes on all three tabs. */
html body main:has([data-tmpl-id="12"]) #panel-laptop .cd-head { display: block !important; text-align: center !important; }
html body main:has([data-tmpl-id="12"]) #panel-laptop .cd-head .cd-copy { display: block !important; text-align: center !important; }
html body main:has([data-tmpl-id="12"]) #panel-laptop#panel-laptop .cd-head .cd-copy > h2, html body main:has([data-tmpl-id="12"]) #panel-laptop#panel-laptop .cd-head .cd-copy > .cd-intro { display: block !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; }
html body main:has([data-tmpl-id="12"]) #panel-laptop .cd-head .cd-lead { margin: 10px auto 0 !important; max-width: 780px !important; padding: 0 !important; border: 0 !important; }
html body main:has([data-tmpl-id="12"]) #panel-laptop .cd-head .cd-lead p { text-align: center !important; margin: 0 auto !important; }
html body main:has([data-tmpl-id="12"]) #panel-laptop .sp-show .sp-copy { padding-top: 0 !important; padding-bottom: 0 !important; }
html body main:has([data-tmpl-id="12"]) #panel-laptop .sp-show .sp-list { margin-top: 0 !important; gap: 10px !important; }
/* spacing, all three tabs */
html body main:has([data-tmpl-id="12"]) section.cd-hero { padding-bottom: 32px !important; }
html body main:has([data-tmpl-id="12"]) .ppanel.cd-sec { padding-top: 32px !important; padding-bottom: 40px !important; }
html body main:has([data-tmpl-id="12"]) .ppanel.cd-sec .cd-head { margin-bottom: 32px !important; }
html body main:has([data-tmpl-id="12"]) .ppanel.cd-sec .sp-show { margin-top: 0 !important; margin-bottom: 32px !important; }
html body main:has([data-tmpl-id="12"]) section.cd-cta { padding-top: 48px !important; }
/* === 2026-10-26 Softphone bottom banner at page width (Randall) === "every device" banner framed at the 1080 px page width with rounded corners, only as tall as its text plus normal padding (like the other banners), shown under all three tabs. */
html body main:has([data-tmpl-id="12"]) section.cd-cta { width: min(1080px, calc(100% - 52px)) !important; max-width: 1080px !important; margin: 0 auto 48px !important; padding: 24px 32px !important; border-radius: 24px !important; overflow: hidden !important; box-sizing: border-box !important; }
html body main:has([data-tmpl-id="12"]) section.cd-cta.cd-cta > .wrap { max-width: none !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; backdrop-filter: none !important; border-radius: 0 !important; }
html body main:has([data-tmpl-id="12"]) section.cd-cta h2 { margin: 0 !important; }
html body main:has([data-tmpl-id="12"]) section.cd-cta.cd-cta > .wrap > h2 + p { max-width: none !important; width: auto !important; margin: 8px auto 0 !important; }
html body main:has([data-tmpl-id="12"]) section.cd-cta.cd-cta .cd-actions { display: none !important; }
@media (max-width: 480px) {
  html body main:has([data-tmpl-id="12"]) section.cd-cta { padding: 22px 20px !important; }
}
/* === 2026-10-26 WF50 page tightened (Randall) === less space under the top section, above/below tab contents; Description right column:
   picture and Compatibility box 12 px apart, picture slightly smaller so both columns are about the same height. */
html body main:has([data-tmpl-id="13"]) section.phero { padding-bottom: 32px !important; }
html body main:has([data-tmpl-id="13"]) .ppanel > .yband { padding-top: 32px !important; padding-bottom: 40px !important; }
html body main:has([data-tmpl-id="13"]) #panel-description .desc-grid > div:last-child { gap: 0 !important; }
html body main:has([data-tmpl-id="13"]) #panel-description .desc-grid > div:last-child > * { margin-top: 0 !important; margin-bottom: 0 !important; }
html body main:has([data-tmpl-id="13"]) #panel-description .desc-grid > div:last-child > .callout { margin-top: 12px !important; }
html body main:has([data-tmpl-id="13"]) #panel-description figure.shot { padding: 12px !important; flex: 0 0 auto !important; }
html body main:has([data-tmpl-id="13"]) #panel-description figure.shot img { max-height: 172px !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; }
@media (max-width: 1100px) { html body main:has([data-tmpl-id="13"]) #panel-description figure.shot img { max-height: 280px !important; } }
/* === 2026-10-26 WF40 page tightened (Randall) === same as WF50: less space under the top section and around tab contents; Description right
   column: picture (blank edges cropped) and Compatibility box 12 px apart, box lines a little tighter, columns about the same height. */
html body main:has([data-tmpl-id="14"]) section.phero { padding-bottom: 32px !important; }
html body main:has([data-tmpl-id="14"]) .ppanel > .yband { padding-top: 32px !important; padding-bottom: 40px !important; }
html body main:has([data-tmpl-id="14"]) #panel-description .desc-grid > div:last-child { gap: 0 !important; }
html body main:has([data-tmpl-id="14"]) #panel-description .desc-grid > div:last-child > * { margin-top: 0 !important; margin-bottom: 0 !important; }
html body main:has([data-tmpl-id="14"]) #panel-description .desc-grid > div:last-child > .callout { margin-top: 12px !important; }
html body main:has([data-tmpl-id="14"]) #panel-description figure.shot { padding: 12px !important; flex: 0 0 auto !important; }
html body main:has([data-tmpl-id="14"]) #panel-description figure.shot img { max-height: 120px !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; }
@media (max-width: 1100px) { html body main:has([data-tmpl-id="14"]) #panel-description figure.shot img { max-height: 200px !important; } }
html body main:has([data-tmpl-id="14"]) #panel-description .callout li { line-height: 1.5 !important; }
/* === 2026-10-26 GEN-PSU page tightened (Randall) === same spacing as WF50/WF40; Description: pictures removed, Compatibility box in the
   right column, top lined up with the heading and stretched to the text height so both columns end together. */
html body main:has([data-tmpl-id="15"]) section.phero { padding-bottom: 32px !important; }
html body main:has([data-tmpl-id="15"]) .ppanel > .yband { padding-top: 32px !important; padding-bottom: 40px !important; }
html body main:has([data-tmpl-id="15"]) #panel-description .desc-grid > div:last-child { display: flex !important; flex-direction: column !important; }
html body main:has([data-tmpl-id="15"]) #panel-description .desc-grid > div:last-child > .callout { margin: 0 !important; flex: 1 1 auto !important; padding: 20px 24px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; box-sizing: border-box !important; }
html body main:has([data-tmpl-id="15"]) #panel-description .desc-grid > div:first-child > :last-child { margin-bottom: 0 !important; }
@media (max-width: 1100px) { html body main:has([data-tmpl-id="15"]) #panel-description .desc-grid { row-gap: 24px !important; } }
/* === 2026-10-26 YEA-PS5V600US page tightened (Randall) === same as GEN-PSU (spacing; Compatibility box in the right column, stretched to
   the text height) + Prop 65 sentence inside the box under a thin line; Description columns equal width so both columns even out. */
html body main:has([data-tmpl-id="16"]) section.phero { padding-bottom: 32px !important; }
html body main:has([data-tmpl-id="16"]) .ppanel > .yband { padding-top: 32px !important; padding-bottom: 40px !important; }
html body main:has([data-tmpl-id="16"]) #panel-description .desc-grid > div:last-child { display: flex !important; flex-direction: column !important; }
html body main:has([data-tmpl-id="16"]) #panel-description .desc-grid > div:last-child > .callout { margin: 0 !important; flex: 1 1 auto !important; padding: 20px 24px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; box-sizing: border-box !important; }
html body main:has([data-tmpl-id="16"]) #panel-description .desc-grid > div:first-child > :last-child { margin-bottom: 0 !important; }
@media (max-width: 1100px) { html body main:has([data-tmpl-id="16"]) #panel-description .desc-grid { row-gap: 24px !important; } }
@media (min-width: 1101px) { html body main:has([data-tmpl-id="16"]) #panel-description .desc-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; } }
html body main:has([data-tmpl-id="16"]) #panel-description .callout li { line-height: 1.5 !important; }
html body main:has([data-tmpl-id="16"]) #panel-description .callout p.ca65 { margin: 12px 0 0 !important; padding-top: 10px !important; border-top: 1px solid rgba(0,0,0,.12) !important; font-size: 13.5px !important; line-height: 1.45 !important; }
/* === 2026-10-26 5G outdoor router add-on Details pop-up (Randall) === the "Details" buttons of "Optional add-ons" look and
   open like the Sales Request page's Details (copied from page-quote-request.css .qext / .qdlg, renamed r5gd) */
main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon-more { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 30px; border: 1px solid var(--line); background: var(--surface); font-size: 11.9px; font-weight: 700; line-height: 1.3; color: var(--ink-faint) !important; text-decoration: none !important; white-space: nowrap; transition: color .14s, border-color .14s, background .14s; }
main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon-more svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon-more:hover,
main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon-more:focus { color: var(--blue-ink) !important; border-color: color-mix(in srgb, var(--blue) 50%, var(--line)); background: color-mix(in srgb, var(--blue) 7%, transparent); }
/* desktop: the add-on line must stay on one line inside the box, so the button is a little tighter there */
@media (min-width: 1025px) {
  main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon-more { font-size: min(11px, 1.9cqi); padding: 2px min(6px, 1cqi); gap: 3px; }
  main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon-more svg { width: 10px; height: 10px; }
  main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon { gap: min(6px, 1cqi); }
  main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon-price { flex: none; }
  main:has(.buybtn[data-tmpl-id="19"]) .r5g-addon-price { min-width: 0; }
}
.r5gd {
  width: min(760px, calc(100vw - 30px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .3);
  overflow: hidden;
}
.r5gd::backdrop {
  background: rgba(9, 20, 28, .55);
  backdrop-filter: blur(3px);
}
/* the shell caps the height so only the body scrolls, keeping the title and
   the actions in view on a short screen */
.r5gd-in:focus {
  outline: none;
}
.r5gd-in {
  display: flex;
  flex-direction: column;
  max-height: min(86vh, 720px);
}
.r5gd-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: none;
  padding: 15px 16px 13px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 7%, var(--surface)), var(--surface));
}
.r5gd-head .t {
  flex: 1 1 auto;
  min-width: 0;
}
.r5gd-eyebrow {
  margin: 0 0 3px;
  font-size: 11.4px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--blue-ink);
}
.r5gd-head h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(19px, 2.1vw, 23px);
  line-height: 1.2;
  letter-spacing: -.02em;
}
.r5gd-model {
  margin: 4px 0 0;
  font-size: 12.6px;
  color: var(--ink-faint);
}
.r5gd-x {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .14s, border-color .14s, background .14s;
}
.r5gd-x svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.r5gd-x:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
  background: color-mix(in srgb, var(--blue) 7%, transparent);
}
.r5gd-body {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  gap: 17px;
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.r5gd-fig {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-2);
  overflow: hidden;
}
.r5gd-fig img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.r5gd-lead {
  margin: 0;
  font-size: 14.6px;
  line-height: 1.62;
  color: var(--ink-soft);
}
.r5gd-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 14px;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}
.r5gd-specs li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 13.2px;
  line-height: 1.45;
  color: var(--ink);
}
.r5gd-specs li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--magenta));
}
.r5gd-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: none;
  flex-wrap: wrap;
  padding: 13px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.r5gd-foot .r5gd-note {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-faint);
}
.r5gd-acts {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
/* the route to the full page the Details link used to take, kept available */
.r5gd-full {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 30px;
  border: 1px solid color-mix(in srgb, var(--blue) 45%, var(--line));
  background: var(--surface);
  font-size: 12.8px;
  font-weight: 700;
  color: var(--blue-ink);
  text-decoration: none;
  transition: background .14s, border-color .14s;
}
.r5gd-full svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.r5gd-full:hover {
  background: color-mix(in srgb, var(--blue) 9%, transparent);
  border-color: var(--blue);
}
.r5gd-done {
  padding: 8px 16px;
  border: 0;
  border-radius: 30px;
  background: linear-gradient(135deg, var(--blue), var(--blue-deep));
  font: inherit;
  font-size: 12.8px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
}
.r5gd-done:hover {
  filter: brightness(1.06);
}
@media (max-width:620px) {
  .r5gd-body {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  /* the photo stops being worth half the screen once it is full width */
  .r5gd-fig img {
    aspect-ratio: 4 / 3;
  }
  .r5gd-specs {
    grid-template-columns: 1fr;
  }
  .r5gd-foot {
    justify-content: stretch;
  }
  .r5gd-acts {
    width: 100%;
  }
  .r5gd-acts>* {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .r5gd[open] {
    animation: r5gdIn .17s cubic-bezier(.22, .61, .36, 1);
  }
  @keyframes r5gdIn {
    from {
      opacity: 0;
      transform: translateY(8px) scale(.985);
    }
  }
}
.r5gd-full:hover, .r5gd-full:active, .r5gd-full:focus { color: var(--blue-ink) !important; text-decoration: none !important; }
.r5gd-full { color: var(--blue-ink) !important; }
.r5gd p, .r5gd h3, .r5gd ul { padding: 0; }
/* === 2026-10-27 HBE routers Custom Firmware Features pop-up (Randall) === "Custom Firmware Features" button on the
   Overview line of the HBE-5G Outdoor / HBE-5G Indoor / HBE-AX3000 pages (built by the pages' JS from their Customer /
   Tech Features tabs); button and dialog copied from the Sales Request "Details" (.qext / .qdlg). AX3000 (no MSRP):
   "HBE Yakabit Price" + price on one line, starting where the label starts on the 5G pages (180px). */
main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-copy .pricing:not(:has(.pricing-msrp)) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 6px; padding-left: 180px; }
main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-copy .pricing:not(:has(.pricing-msrp)) .pricing-label { display: inline-block; margin: 0 -8px 0 0; }
main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-copy .pricing:not(:has(.pricing-msrp)) .pricing-now { display: inline-block; }
@media (max-width: 600px) {
  main:has(.cpe-hero.ax3pg) .cpe-hero .cpe-copy .pricing:not(:has(.pricing-msrp)) { padding-left: 0; }
}
/* Overview + button on one line; the button starts 180px in, under the H of "HBE Yakabit Price" */
.fwf-row { display: flex; align-items: center; gap: 12px; }
.fwf-row > h2 { flex: 0 0 168px; margin: 0 !important; }
.fwf-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px 3px 13px; border-radius: 30px; border: 1px solid #eb008b; background: #eb008b; box-shadow: 0 6px 18px -6px #eb008b; font: inherit; font-size: 12.6px; font-weight: 700; line-height: 1.3; color: #fff; white-space: nowrap; cursor: pointer; transition: color .14s, border-color .14s, background .14s; }
.fwf-btn svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* pink with white text like the Sales Request button (Randall); padding 4/11/3/13 = text measured dead centre */
.fwf-btn:hover, .fwf-btn:focus-visible { color: #fff; border-color: #c30074; background: #c30074; }
@media (max-width: 420px) {
  .fwf-row > h2 { flex: none; }
  .fwf-row .fwf-btn { margin-left: auto; }
}
.fwf { position: fixed; width: min(860px, calc(100vw - 30px)); padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, .3); overflow: hidden; }
.fwf::backdrop { background: rgba(9, 20, 28, .55); backdrop-filter: blur(3px); }
.fwf-in { display: flex; flex-direction: column; max-height: min(88vh, 860px); }
.fwf-in:focus { outline: none; }
.fwf-head { display: flex; align-items: flex-start; gap: 12px; flex: none; padding: 15px 16px 13px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 7%, var(--surface)), var(--surface)); }
.fwf-head .t { flex: 1 1 auto; min-width: 0; }
.fwf-eyebrow { margin: 0 0 3px; padding: 0; font-size: 11.4px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--blue-ink); }
.fwf-head h3 { margin: 0; padding: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(19px, 2.1vw, 23px); line-height: 1.2; letter-spacing: -.02em; color: var(--blue); }
.fwf-sub { margin: 4px 0 0; padding: 0; font-size: 12.6px; color: var(--blue); }
.fwf-x { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink-soft); cursor: pointer; transition: color .14s, border-color .14s, background .14s; }
.fwf-x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.fwf-x:hover { color: var(--ink); border-color: color-mix(in srgb, var(--blue) 45%, var(--line)); background: color-mix(in srgb, var(--blue) 7%, transparent); }
.fwf-body { padding: 18px 22px 22px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* the tabs' feature groups and green-check lists, one column in the pop-up */
/* group headings blue in the pop-up (Randall) */
.fwf .kf-group { margin: 24px 0 2px; padding: 0; font-size: 17.5px; font-weight: 700; color: var(--blue); }
.fwf .kf-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.fwf .kf-list li { display: flex; align-items: flex-start; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; line-height: 1.5; color: var(--ink); }
.fwf .kf-list svg { box-sizing: border-box; width: 22px; height: 22px; flex: none; margin-top: 0; padding: 4px; border-radius: 50%; color: var(--good-ink); background: color-mix(in srgb, var(--good) 20%, transparent); }
.fwf .fwf-intro { margin: 0 0 18px; padding: 0; font-size: 17px; line-height: 1.55; color: var(--ink-soft); }
.fwf .fwf-box .fwf-intro { color: var(--blue); }
/* blue bar over each half; the Tech Features one opens the second half */
.fwf-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 24px 0 0; padding: 13px 18px; border: 1px solid color-mix(in srgb, var(--blue) 40%, var(--line)); border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 10%, var(--surface)), color-mix(in srgb, var(--blue) 4%, var(--surface))); font: inherit; font-size: 17.5px; font-weight: 700; color: var(--blue-ink); text-align: left; cursor: pointer; transition: background .14s, border-color .14s; }
.fwf-bar:hover { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 13%, var(--surface)); }
.fwf-bar svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.fwf-bar[aria-expanded="true"], .fwf-bar-static { border-radius: 12px 12px 0 0; }
.fwf-bar-static { margin-top: 0; cursor: default; }
.fwf-bar-static:hover { border-color: color-mix(in srgb, var(--blue) 40%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 10%, var(--surface)), color-mix(in srgb, var(--blue) 4%, var(--surface))); }
.fwf-bar[aria-expanded="true"] svg { transform: rotate(180deg); }
.fwf-box { padding: 18px 18px 6px; border: 1px solid color-mix(in srgb, var(--blue) 40%, var(--line)); border-top: 0; border-radius: 0 0 12px 12px; }
.fwf-tech[hidden] { display: none; }
.fwf-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; flex-wrap: wrap; padding: 13px 16px; border-top: 1px solid var(--line); background: var(--surface-2); }
.fwf-note { margin: 0; padding: 0; font-size: 12.5px; color: var(--ink-faint); }
.fwf-done { padding: 8px 16px; border: 0; border-radius: 30px; background: linear-gradient(135deg, var(--blue), var(--blue-deep)); font: inherit; font-size: 12.8px; font-weight: 700; color: #fff; cursor: pointer; }
.fwf-done:hover { filter: brightness(1.06); }
@media (max-width: 620px) {
  .fwf-body { padding: 14px 14px 18px; }
  .fwf-box { padding: 14px 12px 4px; }
  .fwf-done { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .fwf[open] { animation: fwfIn .17s cubic-bezier(.22, .61, .36, 1); }
  @keyframes fwfIn { from { opacity: 0; transform: translateY(8px) scale(.985); } }
}
/* === 2026-10-27 home hero buttons Sales Request width (Randall) === "Talk to HBE Yakabit" / "Meet the team" under
   "Business voice, Without the Noise": a bit smaller, same width/height as the header Sales Request button (151.5 x 30);
   12px text (13px like Sales Request does not fit "Talk to HBE Yakabit →" in that width). */
section#hero .hx-cta .btn-primary, section#hero .hx-cta .btn-ghost { box-sizing: border-box; flex: none; width: 151.5px; height: 30px; min-height: 0; padding: 0 3px; font-size: 12px; line-height: 1; justify-content: center; align-items: center; text-align: center; white-space: nowrap; }

/* === 2026-10-30 TP-Link switch pages (Randall): copy of the 5G outdoor router hero + tabs block below, scoped to .cpe-hero.tpsw ===
   5G outdoor router hero (Randall): 8 thumbnails under the big picture, the 6 feature chips on one line,
   bigger "Choose your 5G Service Package" (not bold; Required stays bold), "Continental U.S. Only" on the Buy Now line === */
main:has(.cpe-hero.tpsw) .cpe-hero ul.gal-thumbs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; overflow: visible; padding-bottom: 0; }
main:has(.cpe-hero.tpsw) .cpe-hero ul.gal-thumbs li { flex: none; min-width: 0; }
main:has(.cpe-hero.tpsw) .cpe-hero ul.gal-thumbs button { padding: 2px; border-radius: 9px; }
main:has(.cpe-hero.tpsw) .cpe-hero ul.gal-thumbs img { border-radius: 7px; }
main:has(.cpe-hero.tpsw) .cpe-hero .chips { flex-wrap: nowrap; gap: 5px; }
main:has(.cpe-hero.tpsw) .cpe-hero .chips li { padding: 6px 9px; font-size: 12px; white-space: nowrap; }
main:has(.cpe-hero.tpsw) .svc-pick label { font-size: 17px; font-weight: 400; }
main:has(.cpe-hero.tpsw) .svc-pick .req { font-size: 13px; font-weight: 800; }
main:has(.cpe-hero.tpsw) .cpe-hero .buy-row { display: inline-flex; vertical-align: middle; }
main:has(.cpe-hero.tpsw) .cpe-hero .us-badge { display: inline-flex; vertical-align: middle; margin: 16px 0 0 14px; }
@media (min-width: 1025px) and (max-width: 1340px) {
  main:has(.cpe-hero.tpsw) .cpe-hero .chips { gap: 4px; }
  main:has(.cpe-hero.tpsw) .cpe-hero .chips li { padding: 5px 7px; font-size: 11px; }
}
@media (min-width: 1025px) and (max-width: 1200px) {
  main:has(.cpe-hero.tpsw) .cpe-hero .chips li { padding: 5px 5px; font-size: 10.5px; }
}
@media (max-width: 640px) {
  main:has(.cpe-hero.tpsw) .cpe-hero ul.gal-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  main:has(.cpe-hero.tpsw) .cpe-hero .chips { flex-wrap: wrap; }
  main:has(.cpe-hero.tpsw) .cpe-hero .buy-row { align-items: center; }
  main:has(.cpe-hero.tpsw) .cpe-hero .buy-row .hbe-add { margin-top: 0; }
  main:has(.cpe-hero.tpsw) .cpe-hero .us-badge { margin-left: 0; }
}
/* page title "HBE-5G Dual SIM Router": a little smaller, SIM pink italic (logo pink) */
main:has(.cpe-hero.tpsw) .cpe-hero h1.r5g-title { font-size: 32px; }
main:has(.cpe-hero.tpsw) .cpe-hero h1.r5g-title em { font-style: italic; color: #eb008b; }
@media (max-width: 640px) { main:has(.cpe-hero.tpsw) .cpe-hero h1.r5g-title { font-size: 26px; } }
/* write-up column tightened to the height of the picture + thumbnails (desktop): only the gaps between items */
@media (min-width: 1025px) {
  main:has(.cpe-hero.tpsw) .cpe-hero .cpe-copy .model { margin-top: 8px; }
  main:has(.cpe-hero.tpsw) .cpe-hero .cpe-copy .pricing { margin-top: 10px; margin-bottom: 0; }
  main:has(.cpe-hero.tpsw) .cpe-hero .cpe-copy .ov { margin-top: 14px; }
  main:has(.cpe-hero.tpsw) .cpe-hero .cpe-copy .ov h2 { margin-bottom: 8px; }
  main:has(.cpe-hero.tpsw) .cpe-hero .cpe-copy .ov p { margin-bottom: 8px; }
  main:has(.cpe-hero.tpsw) .cpe-hero .cpe-copy .ov p:last-child { margin-bottom: 0; }
  main:has(.cpe-hero.tpsw) .cpe-hero .cpe-copy .chips { margin-top: 12px; }
  main:has(.cpe-hero.tpsw) .cpe-hero .cpe-copy .svc-pick { margin-top: 12px; }
  main:has(.cpe-hero.tpsw) .cpe-hero .cpe-copy .svc-pick label { margin-bottom: 5px; }
  main:has(.cpe-hero.tpsw) .cpe-hero .cpe-copy .svc-pick select { padding-top: 9px; padding-bottom: 9px; }
  main:has(.cpe-hero.tpsw) .cpe-hero .cpe-copy .svc-pick-compare { margin-top: 6px; }
  main:has(.cpe-hero.tpsw) .cpe-hero .cpe-copy .buy-row,
  main:has(.cpe-hero.tpsw) .cpe-hero .cpe-copy .us-badge { margin-top: 10px; }
}
/* when the write-up is shorter than picture + thumbnails (other fonts / screens), share the leftover space evenly between
   the items so Buy Now / Add to Cart / Continental U.S. Only always end level with the thumbnails */
@media (min-width: 1025px) {
  main:has(.cpe-hero.tpsw) .cpe-hero .cpe-copy { display: grid; grid-template-columns: auto 1fr; align-content: space-between; }
  main:has(.cpe-hero.tpsw) .cpe-hero .cpe-copy > * { grid-column: 1 / -1; min-width: 0; }
  main:has(.cpe-hero.tpsw) .cpe-hero .cpe-copy > .buy-row { grid-column: 1; }
  main:has(.cpe-hero.tpsw) .cpe-hero .cpe-copy > .us-badge { grid-column: 2; justify-self: start; align-self: end; }
  main:has(.cpe-hero.tpsw) .cpe-hero .cpe-copy > .model { justify-self: start; }
}
/* === 2026-10-23 5G outdoor router At a glance tab (Randall): heading one line 32px with HBE-5G blue, section headings blue,
   wider "At a glance" box (no wrapped lines on desktop), write-up and box the same height === */
main:has(.cpe-hero.tpsw) .ppanel .band-head { max-width: none; }
main:has(.cpe-hero.tpsw) .ppanel .band-head h2 { font-size: 32px; white-space: nowrap; }
main:has(.cpe-hero.tpsw) .ppanel .band-head h2 .nowrap { color: #0076af; }
main:has(.cpe-hero.tpsw) .p-desc .prose h3 { color: #0076af; }
/* tight gaps on both sides; both sides end on the same line: the shorter side shares out the difference
   (between the 3 sections on the left, between the rows in the box) - widths chosen so the difference is small */
main:has(.cpe-hero.tpsw) .p-desc .prose { align-self: stretch; display: flex; flex-direction: column; }
main:has(.cpe-hero.tpsw) .p-desc .prose p { margin-bottom: 0; }
main:has(.cpe-hero.tpsw) .p-desc .prose h3:not(:first-child) { margin-top: auto; padding-top: 16px; }
main:has(.cpe-hero.tpsw) .p-desc .p-glance { align-self: stretch; display: flex; flex-direction: column; padding: 20px 26px 22px; }
main:has(.cpe-hero.tpsw) .p-glance h3 { margin-bottom: 10px; }
main:has(.cpe-hero.tpsw) .p-glance dl { flex: 1 1 auto; display: flex; flex-direction: column; }
main:has(.cpe-hero.tpsw) .p-glance dl > div { flex: 1 1 auto; align-items: center; padding: 5px 0; }
main:has(.cpe-hero.tpsw) .p-glance dl > div:first-child { padding-top: 0; }
main:has(.cpe-hero.tpsw) .p-glance dl > div:last-child { padding-bottom: 0; }
@media (min-width: 1240px) {
  main:has(.cpe-hero.tpsw) .p-desc { grid-template-columns: minmax(0, 1fr) 620px; }
  main:has(.cpe-hero.tpsw) .p-glance dd { white-space: nowrap; }
  main:has(.cpe-hero.tpsw) .p-glance dl > div:nth-child(4) dd { white-space: normal; }
}
@media (min-width: 1340px) {
  main:has(.cpe-hero.tpsw) .p-desc { grid-template-columns: minmax(0, 1fr) 700px; }
}
@media (min-width: 861px) and (max-width: 1239px) {
  main:has(.cpe-hero.tpsw) .p-desc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  main:has(.cpe-hero.tpsw) .ppanel .band-head h2 { font-size: 26px; white-space: normal; }
}
/* less space under the top section, under the tab row, and at the top/bottom of the tab card (all tabs) */
main:has(.cpe-hero.tpsw) .cpe-hero { padding-bottom: 28px; }
main:has(.cpe-hero.tpsw) .ppanel .yband { padding-top: 16px; }
main:has(.cpe-hero.tpsw) .ppanel .pcard { padding-top: 30px; padding-bottom: 30px; }
@media (max-width: 640px) {
  main:has(.cpe-hero.tpsw) .cpe-hero { padding-bottom: 20px; }
  main:has(.cpe-hero.tpsw) .ppanel .yband { padding-top: 14px; }
  main:has(.cpe-hero.tpsw) .ppanel .pcard { padding-top: 20px; padding-bottom: 20px; }
}
/* coloured words in headings are always italic (Randall); "features" in Customer / Tech features blue italic */
main:has(.cpe-hero.tpsw) .ppanel .band-head h2 .nowrap,
main:has(.cpe-hero.tpsw) .ppanel h2 em.r5g-blue { color: #0076af; font-style: italic; }
/* price smaller (was 40px, bigger than the page title) */
main:has(.cpe-hero.tpsw) .cpe-hero .pricing-now { font-size: 28px; }
@media (max-width: 640px) { main:has(.cpe-hero.tpsw) .cpe-hero .pricing-now { font-size: 24px; } }
/* "Optional add-ons" under the service package picker: one compact line per antenna */
main:has(.cpe-hero.tpsw) .r5g-addons { margin-top: 10px; border: 1px solid var(--line, #e3dfd6); border-radius: 12px; background: #fff; padding: 8px 12px; }
main:has(.cpe-hero.tpsw) .r5g-addons-title { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #0076af; }
main:has(.cpe-hero.tpsw) .r5g-addon { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 14px; }
main:has(.cpe-hero.tpsw) .r5g-addon + .r5g-addon { border-top: 1px solid var(--line, #e3dfd6); }
main:has(.cpe-hero.tpsw) .r5g-addon input[type="checkbox"] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: #0076af; cursor: pointer; }
main:has(.cpe-hero.tpsw) .r5g-addon img { width: 30px; height: 30px; object-fit: contain; flex: none; border-radius: 6px; background: #fff; }
main:has(.cpe-hero.tpsw) .r5g-addon-name { font-weight: 700; color: #1d2328; cursor: pointer; margin: 0; white-space: nowrap; }
main:has(.cpe-hero.tpsw) .r5g-addon-name span { font-weight: 400; color: #5b646c; }
main:has(.cpe-hero.tpsw) .r5g-addon-more { font-size: 12.5px; color: #0076af; white-space: nowrap; }
main:has(.cpe-hero.tpsw) .r5g-addon-qty { margin-left: auto; font-size: 13px; color: #5b646c; white-space: nowrap; }
main:has(.cpe-hero.tpsw) .r5g-addon-qty select { margin-left: 4px; padding: 2px 4px; font-size: 13px; border: 1px solid var(--line, #d6d1c6); border-radius: 6px; background: #fff; }
main:has(.cpe-hero.tpsw) .r5g-addon-price { font-weight: 800; color: #0076af; white-space: nowrap; min-width: 112px; text-align: right; }
main:has(.cpe-hero.tpsw) .r5g-addon-qty + .r5g-addon-price { margin-left: 0; }
main:has(.cpe-hero.tpsw) .r5g-addon-more + .r5g-addon-price { margin-left: auto; }
main:has(.cpe-hero.tpsw) .r5g-addon-price span { font-weight: 400; font-size: 12px; color: #5b646c; }
@media (max-width: 640px) {
  main:has(.cpe-hero.tpsw) .r5g-addon { flex-wrap: wrap; row-gap: 2px; }
  main:has(.cpe-hero.tpsw) .r5g-addon-price { min-width: 0; }
}
/* with the add-ons the write-up is taller: compact add-ons box; on desktop the picture side is wider (bigger picture) and
   the white picture frame takes up any small difference, so the thumbnails still end level with the buttons */
main:has(.cpe-hero.tpsw) .r5g-addons { margin-top: 8px; padding: 5px 12px; }
main:has(.cpe-hero.tpsw) .r5g-addons-title { margin: 0; font-size: 11px; line-height: 16px; }
main:has(.cpe-hero.tpsw) .r5g-addon { padding: 2px 0; }
main:has(.cpe-hero.tpsw) .r5g-addon img { width: 26px; height: 26px; }
@media (min-width: 1340px) {
  main:has(.cpe-hero.tpsw) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  main:has(.cpe-hero.tpsw) .cpe-hero .gallery { align-self: stretch; }
  main:has(.cpe-hero.tpsw) .cpe-hero .gal-main { flex: 1 0 auto; }
  main:has(.cpe-hero.tpsw) .cpe-hero .gal-main img { height: 100%; }
}
/* chips and add-on lines scale with the width of the write-up column so they always stay on one line inside it */
@media (min-width: 1025px) {
  main:has(.cpe-hero.tpsw) .cpe-hero .cpe-copy { container-type: inline-size; }
  main:has(.cpe-hero.tpsw) .cpe-hero .chips { gap: min(5px, .8cqi); }
  main:has(.cpe-hero.tpsw) .cpe-hero .chips li { font-size: min(12px, 2cqi); padding: 6px min(9px, 1.2cqi); }
  main:has(.cpe-hero.tpsw) .r5g-addon { font-size: min(14px, 2.45cqi); gap: min(10px, 1.6cqi); }
  main:has(.cpe-hero.tpsw) .r5g-addon-more,
  main:has(.cpe-hero.tpsw) .r5g-addon-qty,
  main:has(.cpe-hero.tpsw) .r5g-addon-qty select { font-size: min(13px, 2.25cqi); }
  main:has(.cpe-hero.tpsw) .r5g-addon-price { min-width: min(112px, 19cqi); }
}
@media (max-width: 1239px) { main:has(.cpe-hero.tpsw) .r5g-addon { flex-wrap: wrap; row-gap: 2px; } }
/* Overview: the opening words of each paragraph blue italic */
main:has(.cpe-hero.tpsw) .cpe-hero .ov em.r5g-blue { color: #0076af; font-style: italic; }
/* "Choose your 5G Service Package" blue, not italic (Required keeps its own colour) */
main:has(.cpe-hero.tpsw) .svc-pick label { color: #0076af; font-style: normal; }
/* less empty space under the tab card, before the footer (84 -> 32px, like the 4x4 MIMO page) */
main:has(.cpe-hero.tpsw) .ppanel .yband { padding-bottom: 32px; }

main:has(.cpe-hero.tpsw-7) .cpe-hero ul.gal-thumbs { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 640px) { main:has(.cpe-hero.tpsw-7) .cpe-hero ul.gal-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* switches: shorter write-up than the 5G router, so a narrower picture side (like the 4x4 MIMO antenna page): picture + thumbnails = write-up height */
@media (min-width: 1025px) { main:has(.cpe-hero.tpsw) .cpe-hero .cpe-grid { grid-template-columns: minmax(0, 480fr) minmax(0, 660fr); max-width: 1212px; margin-inline: auto; } }
/* 2026-10-30 switches with 4 or 2 pictures: thumbnails the same size as 8 across, centred */
main:has(.cpe-hero.tpsw-4) .cpe-hero ul.gal-thumbs { grid-template-columns: repeat(4, calc((100% - 42px) / 8)); justify-content: center; }
main:has(.cpe-hero.tpsw-2) .cpe-hero ul.gal-thumbs { grid-template-columns: repeat(2, calc((100% - 42px) / 8)); justify-content: center; }
@media (max-width: 640px) {
  main:has(.cpe-hero.tpsw-4) .cpe-hero ul.gal-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  main:has(.cpe-hero.tpsw-2) .cpe-hero ul.gal-thumbs { grid-template-columns: repeat(2, calc((100% - 18px) / 4)); }
}

/* menu room 2026-10-30 (Randall): Sales Request lives in the top bar (smaller); the menu row has no side reserves and
   self-centres; menu text follows the window width (vw), not the menu width, so freed room is left for more items. */
html body .util-right .cta-btn.cta-top { margin-left: 0; height: 24px; padding: 0 10px; font-size: 11.5px; gap: 5px; letter-spacing: .01em; }
html body .util-right .cta-btn.cta-top svg { width: 11px; height: 11px; }
@media (max-width: 1499px) {
  html body .util .wrap { gap: 16px; }
  html body .util-right { gap: 14px; }
  html body .util-right .cta-btn.cta-top svg { display: none; }
}
@media (min-width: 1011px) {
  html body header.site .wrap:has(> nav.main) > nav.main { flex: 1 1 auto; margin: 0; padding-left: 0; padding-right: 0; justify-content: safe center; }
  html body header.site nav.main > a, html body header.site nav.main .has-mega > a { font-size: min(16px, 1.03vw); padding: 0 min(9px, .3vw); }
}
@media (min-width: 1011px) and (max-width: 1199px) {
  html body header.site nav.main > a, html body header.site nav.main .has-mega > a { font-size: min(16px, 1.09vw); }
}

/* 5G menu width 2026-10-30 (Randall): columns as wide as their longest line (names shortened), menu centred. */
@media (min-width: 1121px) {
  html body header.site .has-mega .mega.g5-menu { width: max-content !important; max-width: calc(100% - 24px) !important; left: 0 !important; right: 0 !important; margin-left: auto !important; margin-right: auto !important; }
  html body header.site .mega.g5-menu .mega-grid { grid-template-columns: repeat(4, max-content); column-gap: 30px; }
}
@media (min-width: 1391px) {
  html body header.site .mega.g5-menu .mega-grid { grid-template-columns: 149px repeat(4, max-content) 149px; }
}
/* hero warranty first 2026-10-30 (Randall): the warranty line leads the list, so it is no longer pinned to the foot;
   the pink icons stay on the Yealink and "Over 40 Yrs" lines, now the 4th and 7th children */
html body ul.hero-points li.hp-warranty { margin-top: 0; padding-top: 0; padding-bottom: 3px; }
html body ul.hero-points li:nth-child(3) .hp-ico, html body ul.hero-points li:nth-child(6) .hp-ico {
  color: var(--blue); background: color-mix(in srgb, var(--blue) 9%, var(--surface)); border-color: color-mix(in srgb, var(--blue) 20%, transparent); }
html body ul.hero-points li:nth-child(4) .hp-ico, html body ul.hero-points li:nth-child(7) .hp-ico {
  color: var(--magenta-ink); background: color-mix(in srgb, var(--magenta) 9%, var(--surface)); border-color: color-mix(in srgb, var(--magenta) 22%, transparent); }
/* pain cards short 2026-10-30 (Randall): minimum padding above/below the 2 lines; template width */
html body #why-switch .flip-front, html body #why-switch .flip-back { min-height: 0; padding: 8px 22px; gap: 2px; }
/* pain cards fold 2026-10-30 (Randall): folded corner rounded like the others; white arrow moved in */
html body #why-switch .flip-front .fold { width: 42px; height: 42px; border: 0; border-top-right-radius: 16px;
  background: linear-gradient(to bottom left, var(--magenta-deep) 50%, transparent calc(50% + .5px)); }
html body #why-switch .flip-front .fold::after { top: 6px; right: 7px; }
/* why-hbe boxes tight 2026-10-30 (Randall): minimum padding above/below the 2 lines */
html body #why-hbe .fc { padding: 8px 20px; }
html body #why-hbe .fc p { margin-top: 2px; }
/* provstats tight 2026-10-30 (Randall): minimum padding; small line = weight/colour of the boxes above */
html body #why-hbe .provstats .st { padding: 8px 12px; }
html body #why-hbe .provstats .st span { margin-top: 4px; font-weight: 400; color: var(--ink-soft); }
/* 5g-hardware boxes tight 2026-10-30 (Randall): less space under the write-up and the View product button */
html body [id="5g-hardware"] .prod .body { padding-bottom: 10px; }
html body [id="5g-hardware"] .prod .body p { margin-bottom: 8px; }
/* sales-request tight 2026-10-30 (Randall): 3 steps, less height */
html body #sales-request .srcard { padding-top: 16px; padding-bottom: 16px; }
html body #sales-request .step { padding: 8px 0; }
html body #sales-request .step:first-child { padding-top: 4px; }
html body #sales-request .step:last-child { padding-bottom: 4px; }
/* hero warranty colour fade 2026-10-31 (Randall): blue -> pink -> blue, 6 s, text + shield icon */
@keyframes hbe-warranty-fade {
  0%, 100% { color: var(--blue, #0076af); }
  50% { color: var(--magenta, #eb008b); }
}
@keyframes hbe-warranty-ico {
  0%, 100% { color: var(--blue, #0076af); background-color: #e8f3f8; border-color: rgba(0, 118, 175, .2); }
  50% { color: var(--magenta, #eb008b); background-color: #fde6f3; border-color: rgba(235, 0, 139, .25); }
}
html body ul.hero-points li.hp-warranty b { animation: hbe-warranty-fade 6s ease-in-out infinite; }
html body ul.hero-points li.hp-warranty .hp-ico { animation: hbe-warranty-ico 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  html body ul.hero-points li.hp-warranty b, html body ul.hero-points li.hp-warranty .hp-ico { animation: none; }
}
/* hero columns slide in 2026-10-31 (Randall): held off-screen, then left column in from the left page edge, right column from the right */
html body section#hero { overflow-x: clip; }
html body section#hero.hbe-slide .mag-lead { transform: translateX(-100vw); }
html body section#hero.hbe-slide .hx-art[data-reveal] { opacity: 1; transform: translateX(100vw); transition: none; }
html body section#hero.hbe-slide.hbe-slide-in .mag-lead,
html body section#hero.hbe-slide.hbe-slide-in .hx-art[data-reveal] { transform: none; transition: transform 1.6s cubic-bezier(.22, .61, .36, 1); }
/* One Provider box rows slide in 2026-10-31 (Randall) v2: from the depth of the page, not the sides.
   Each box flies in from far away (small, faint) toward the screen, tilted; row 1 lands bottom edge first
   (tilted back, hinged on its bottom edge) then the top settles flat; row 2 lands top edge first, then the bottom. */
@keyframes hbe-ws-land-bottom {
  0% { opacity: 0; transform: translateZ(-1600px) rotateX(42deg); }
  25% { opacity: 1; }
  60% { transform: translateZ(0) rotateX(42deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes hbe-ws-land-top {
  0% { opacity: 0; transform: translateZ(-1600px) rotateX(-42deg); }
  25% { opacity: 1; }
  60% { transform: translateZ(0) rotateX(-42deg); }
  100% { opacity: 1; transform: none; }
}
html body section#why-hbe.hbe-ws { overflow-x: clip; }
html body section#why-hbe.hbe-ws > .wrap > .center[data-reveal] { opacity: 1; transform: none; transition: none; }
html body section#why-hbe.hbe-ws .f3, html body section#why-hbe.hbe-ws .provstats { perspective: 1000px; }
html body section#why-hbe.hbe-ws .f3 > .fc, html body section#why-hbe.hbe-ws .provstats > .st { opacity: 0; transform: translateZ(-1600px); transition: none; }
html body section#why-hbe.hbe-ws .f3 > .fc { transform-origin: 50% 100%; }
html body section#why-hbe.hbe-ws .provstats > .st { transform-origin: 50% 0; }
html body section#why-hbe.hbe-ws .f3.hbe-ws-in > .fc { animation: hbe-ws-land-bottom 1.8s cubic-bezier(.3, .6, .4, 1) both; }
html body section#why-hbe.hbe-ws .provstats.hbe-ws-in > .st { animation: hbe-ws-land-top 1.8s cubic-bezier(.3, .6, .4, 1) both; }

/* sales request under contact us 2026-10-31 (Randall): Sales Request sits under Contact Us in the top bar, exactly as
   wide as the "Contact Us" words (no envelope, no underline); the "Hang UP On Big Telco" headline centres on the whole
   bar (it used to centre in the gap between the side groups). */
@media (min-width: 921px) {
  html body .util-right { display: grid; grid-template-columns: auto auto auto; grid-template-rows: auto auto; align-items: center; row-gap: 12px; margin-block: -10px; margin-left: auto; }
  html body .util-right .acct-wrap { grid-column: 1; grid-row: 1 / 3; }
  html body .util-right .cart-btn { grid-column: 2; grid-row: 1 / 3; }
  html body .util-right .contact-us { grid-column: 3; grid-row: 1; justify-self: stretch; justify-content: center; gap: 0; }
  html body .util-right .contact-us svg { display: none; }
  html body .util-right .contact-us span, html body .util-right .contact-us:hover span { border-bottom: 0; padding-bottom: 0; }
  html body .util-right .cta-btn.cta-top { grid-column: 3; grid-row: 2; justify-self: stretch; justify-content: center; padding: 0 2px; min-width: 0; position: relative; left: 1px; }
  html body .util-right .cta-btn.cta-top svg { display: none; }
}
@media (min-width: 1241px) {
  html body .util .wrap { position: relative; }
  html body .util .headline { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}
/* carrier banner lands from depth 2026-11-02 (Randall): from far away, tilted back on its bottom edge;
   the bottom edge lands first, then the top settles flat. Replaces the small zoom reveal. */
@keyframes hbe-cb-land {
  0% { opacity: 0; transform: perspective(1000px) translateZ(-3200px) rotateX(48deg); }
  25% { opacity: 1; }
  60% { transform: perspective(1000px) translateZ(0) rotateX(48deg); }
  100% { opacity: 1; transform: perspective(1000px) translateZ(0) rotateX(0); }
}
html body section.fiveg.hbe-cb { overflow-x: clip; }
html body section.fiveg.hbe-cb .carrier-band[data-reveal] { opacity: 0; transform: perspective(1000px) translateZ(-3200px); transform-origin: 50% 100%; transition: none; }
html body section.fiveg.hbe-cb .carrier-band.hbe-cb-in { animation: hbe-cb-land 2s cubic-bezier(.3, .6, .4, 1) both; }
/* home video box like /videos 2026-11-02 (Randall): copy of the /videos list look (view 3876 style block) */
html body section#videos .vlist { display: block; background: var(--surface, #fff); border: 1px solid var(--line, #e3e6ea); border-radius: 16px; box-shadow: var(--shadow-sm); overflow: hidden; }
html body section#videos .vfeat.is-panel { display: grid; grid-template-columns: 280px minmax(0, 1fr); column-gap: 20px; align-items: start; margin: 0; padding: 12px 16px; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
html body section#videos .vfeat > .vfeat-media { grid-column: 1; grid-row: 1; order: 0; }
html body section#videos .vfeat > .vfeat-copy { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 0; }
html body section#videos .vplay { border-radius: 10px; box-shadow: none; }
html body section#videos .vplay-ico { width: 44px; height: 44px; }
html body section#videos .vfeat .vfeat-title { order: -1; margin: 0; font-size: 19px; line-height: 1.3; color: var(--blue, #0076af); text-wrap: pretty; }
html body section#videos .vfeat-meta { margin: 4px 0 0; }
html body section#videos .vfeat .vfeat-cat { font-size: 13.5px; font-weight: 400; letter-spacing: normal; text-transform: capitalize; color: var(--magenta-ink, #c8007a); }
html body section#videos .vfeat-desc { margin: 5px 0 0; max-width: none; font-size: 15px; line-height: 1.55; color: var(--ink-soft, #55606a); }
html body section#videos .vfeat-points { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 6px 0 0; max-width: none; }
html body section#videos .vfeat-points li { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft, #55606a); }
html body section#videos .vfeat-link { margin-top: 6px; color: var(--blue, #0076af); }
@media (max-width: 860px) { html body section#videos .vfeat.is-panel { grid-template-columns: 240px minmax(0, 1fr); column-gap: 16px; } }
@media (max-width: 640px) {
  html body section#videos .vfeat.is-panel { grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding: 14px; }
  html body section#videos .vfeat > .vfeat-copy { grid-column: 1; grid-row: 2; }
}
/* home video header centred 2026-11-02 (Randall): "Watch" label gone, title centred, write-up centred under it */
html body section#videos .vhead { display: block; text-align: center; }
html body section#videos .vhead > .vhead-copy { display: block; margin: 0; padding: 0; }
html body section#videos .vhead h2 { margin: 0; text-align: center; }
html body section#videos .vhead > .vhead-lead { margin: 8px auto 0; padding: 0; border: 0; max-width: 760px; }
html body section#videos .vhead > .vhead-lead p { margin: 0; text-align: center; text-wrap: balance; }
/* home important information box 2026-11-06 (Randall): Important Information box right of the hero headline */
#hero .mag-lead { position: relative; }
/* Important Information pop-up: same look as the router Custom Firmware Features pop-up (.fwf), questions + answers */
.hbe-iid .fwf-box { padding: 6px 18px 4px; }
.hbe-iid .fwf-box + .fwf-bar { margin-top: 18px; }
/* sizes + colours copied from the router pop-up (Randall 11-06): intro = .fwf-sub, question = .kf-group, answer = .kf-list li */
.hbe-iid .fwf-sub { max-width: 64em; margin-top: 6px; font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--ink, #1d2328); }
.hbe-iid .fwf-sub .iid-new { font-weight: 600; color: #0076af; }
.hbe-iid .fwf-sub .iid-formerly { font-style: italic; color: #eb008b; }
.hbe-iid .iid-qa { padding: 12px 0; border-bottom: 1px solid var(--line-soft, #eceae5); }
.hbe-iid .iid-qa:last-child { border-bottom: 0; }
.hbe-iid .iid-q { margin: 0 0 4px; padding: 0; font-size: 17.5px; font-weight: 600; line-height: 1.3; color: var(--blue, #0076af); }
.hbe-iid .iid-a { margin: 0; padding: 0; font-size: 15px; line-height: 1.5; color: var(--ink, #1d2328); }
.hbe-iid .iid-list { margin: 6px 0 0; padding: 0 0 0 22px; font-size: 15px; line-height: 1.5; color: var(--ink, #1d2328); }
.hbe-iid .iid-list li { margin: 0 0 4px; }
@media (max-width: 620px) { .hbe-iid .fwf-box { padding: 4px 12px 2px; } }
/* Randall 11-06: router Custom Firmware Features pop-up headings half bold too (same weight as Important / Information) */
.fwf .kf-group { font-weight: 600; }
/* more room between the headline and the list under it (Randall 11-06): 22 -> 40 px */
#hero .mag-lead > h1 { margin-bottom: 18px; }
/* look copied from the see-through boxes on the hero picture (.hx-card-in) */
#hero .hbe-ii { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; box-sizing: border-box; width: max-content; padding: 7px 12px 8px 12px;
  border: 1px solid rgba(245, 243, 239, .81); border-radius: 14px; background: rgba(250, 247, 242, .7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 2px rgba(10, 40, 60, .06), 0 14px 30px -12px rgba(10, 45, 70, .34); }
/* semi-bold title (Randall's "half bold") */
#hero .hbe-ii-t { font-size: 16px; font-weight: 600; line-height: 1.12; color: #0076af; }
#hero .hbe-ii-t > span { display: block; }
#hero .hbe-ii-br { display: block; }
#hero .hbe-ii-s { font-size: 12.6px; line-height: 1.25; color: #33414b; }
#hero .hbe-ii-btn { margin-top: 3px; display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px 2px 11px; border-radius: 30px; border: 1px solid #eb008b; background: #eb008b; box-shadow: 0 5px 14px -6px #eb008b;
  font: inherit; font-size: 11.4px; font-weight: 700; line-height: 1.3; color: #fff; white-space: nowrap; cursor: pointer;
  transition: border-color .14s, background .14s; }
#hero .hbe-ii-btn svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
#hero .hbe-ii-btn:hover, #hero .hbe-ii-btn:focus-visible { border-color: #c30074; background: #c30074; }
/* phones (no room beside the headline): same box under the headline */
#hero .hbe-ii:not(.ii-side) { margin: 14px 0 4px; }
/* beside the headline (set by the small script when there is room), centred on the headline's height */
#hero .hbe-ii.ii-side { position: absolute; z-index: 3; margin: 0; }
/* buy buttons off except Panamax 2026-11-06 (Randall): greyed, see-through, not clickable */
html body .buybtn.hbe-buy-off, html body .viewbtn.hbe-buy-off, html body .viewbtn.hbe-buy-off:disabled {
  opacity: .4; filter: grayscale(1); cursor: not-allowed; box-shadow: none; transform: none; }
html body .buybtn.hbe-buy-off:hover, html body .viewbtn.hbe-buy-off:hover { opacity: .4; filter: grayscale(1); }
/* two-line "notify me" button on the Continental U.S. Only line (inside the badge, so it follows it) */
html body .us-badge.hbe-has-notify { position: relative; overflow: visible; }
html body .us-badge .hbe-notify { position: absolute; z-index: 2; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; width: max-content; min-height: 30px; margin: 0;
  padding: 0; border: 0; border-radius: 0; background: none; color: #eb008b;
  font-size: 10.5px; font-weight: 600; letter-spacing: normal; line-height: 1.2; text-align: left; white-space: nowrap; text-decoration: none; }
/* text only (Randall 11-06): pink words, underline on hover */
html body .us-badge .hbe-notify:hover, html body .us-badge .hbe-notify:focus-visible { color: #c30074; text-decoration: underline; }
/* no room on the right: under the badge, and the badge keeps room for it */
html body main .us-badge.hbe-n-below { margin-bottom: 38px !important; }
html body .us-badge.hbe-n-below .hbe-notify { left: 2px; top: calc(100% + 8px); transform: none; }
/* Randall 11-06: same side padding in Buy Now / Add to Cart on every product page (gaps are set by the script) */
html body :is(.buy-row, .pcta) > .buybtn { padding-left: 11px !important; padding-right: 11px !important; }
html body :is(.buy-row, .pcta) { column-gap: 0 !important; }
/* end buy buttons off */
/* checkout tax total only 2026-11-06 (Randall): customers see just the Tax total; the state / county / city split stays in
   Odoo's records and the Sales tax collected report */
html body .hbe-taxline, html body [data-hbe-taxlines] { display: none !important; }
/* end checkout tax total only */