/* HBE Yakabit theme — lifted verbatim from index.html.
   Generated by odoo/scripts/port_page.py. Edit index.html and re-run rather
   than editing this file, or the two versions drift.

   Plain CSS on purpose, not .scss. The stylesheet uses CSS min()/max(), which
   Sass claims as its own functions and then rejects for mixing units — the
   port is meant to be byte-identical to what the browser gets today, so it
   goes through no compiler at all. */

    body {
      margin: 0;
      padding: 0;
      font: 14px -apple-system, BlinkMacSystemFont, sans-serif
    }

    img {
      max-width: 100%
    }
  
    /* ---------- responsive tables ----------
       Spec tables have more columns than a phone has room for. Rather than
       shrink the type until it is unreadable, each one scrolls inside its own
       track so the page itself never scrolls sideways. */
    .tscroll {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
    }

    .tscroll>table {
      min-width: 480px;
    }
  

/* --- ../assets/css/buy-now.css (linked, inlined by port_page.py) --- */
/* ============================================================================
   buy-now.css — the Buy Now button, for product pages that don't already
   carry it in their own <style>.

   The Panamax, Prime and HBE-5G pages define a.buybtn inline because Buy Now
   is the only call to action in their hero. The MikroTik router, Yealink and
   power-supply pages don't: they carry only the site-wide button-height rule
   that names a.buybtn alongside .viewbtn and .btn-outline. This file supplies
   the rest of the look for those pages, deliberately matching the inline
   version so a Buy Now is the same button everywhere on the site.

   It does NOT set height. Every one of those pages already harmonises
   .viewbtn / .btn-outline / a.buybtn to 30px, and a height here would fight
   that rule depending on source order.
   ========================================================================= */

a.buybtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 40px;
  color: #fff;
  background: var(--blue);
  border: 0;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 8px 20px -8px var(--blue);
  transition: background .14s, transform .12s, box-shadow .14s;
}

a.buybtn:hover {
  background: var(--blue-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -8px var(--blue);
}

a.buybtn:focus-visible {
  outline: 2px solid var(--blue-deep);
  outline-offset: 2px;
}

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

/* the router pages set their own padding for this row; match it so Buy Now
   sits on the same rhythm as the buttons beside it */
.sw-actions a.buybtn {
  padding: 0 19px;
  gap: 7px;
}

/* the two dark-theme overrides these pages carry flip .viewbtn's label to a
   near-black; Buy Now keeps white on blue in every theme, as it does on the
   pages that style it inline */
:root[data-theme="dark"] a.buybtn,
:root[data-theme="light"] a.buybtn {
  color: #fff;
}

/* --- ../assets/css/product-price.css (linked, inlined by port_page.py) --- */
/* ============================================================================
   product-price.css — what a product costs, on the product's own page.

   One presentation for every product page, whichever hero it happens to use:
   the Prime, Panamax and HBE-5G pages build theirs from .cpe-copy, the
   Yealink phones and dongles from .phero-grid, the headset from .hero-copy
   and the softphone from .cd-hero-copy.

   Three lines where there is an MSRP to beat:

       [MSRP] $299.00      <- navy badge, charcoal figure, struck
       HBE YAKABIT PRICE   <- brand blue
       $279.00             <- brand blue, large

   The MSRP earns real weight here. Earlier versions set it in the faint grey
   the pages use for SKU lines, which on these light heroes left it barely
   visible — a struck price nobody notices is a struck price that does no
   work. The figure is charcoal at 21px with a 2px rule through it, and the
   word MSRP is a solid navy chip, so the comparison registers at a glance.

   The selling price still wins: it is brand blue against charcoal, near twice
   the height, and carries its own label. Colour and size keep the order —
   the MSRP is noticeable, not competitive.

   No cards, borders or containers. The one piece of decoration is the badge,
   which is doing the job of making the word MSRP findable in one look.

   Where there is no MSRP there is one number and no label at all.
   ========================================================================= */

.pricing {
  margin: 18px 0 14px;
}

/* ---------- the manufacturer's figure ---------- */

.pricing-msrp {
  display: block;
  margin-bottom: 9px;
}

/* Navy rather than a new colour: --blue-ink is the site's own darkest blue,
   already used for text on light grounds, so the chip belongs to the palette
   the rest of the page is drawn from. */
.pricing-msrp-badge {
  display: inline-block;
  margin-right: 9px;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--blue-ink);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  /* optically centred against the 21px figure beside it rather than sitting
     on its baseline, which leaves the chip hanging low */
  vertical-align: 2px;
}

.pricing-msrp-value {
  font-size: 21px;
  font-weight: 600;
  /* charcoal, not the page's faint ink: this figure has to be read, not just
     sensed, and #374151 holds up against the pale hero backgrounds */
  color: #374151;
  text-decoration: line-through;
  /* 1.5px. At 21px the digits' own stems are about 2.5px, so a full 2px rule
     sat almost as heavy as the numerals and closed up the counters — the
     figure read as cancelled before it read as $299.00, which defeats the
     point of showing it. 1px was legible but too quiet to register as a
     strike at a glance; half a pixel more carries the line without crowding
     the number underneath. */
  text-decoration-thickness: 1.5px;
  text-decoration-color: currentColor;
}

/* ---------- what we actually charge ---------- */

.pricing-label {
  display: block;
  margin-bottom: 1px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
}

.pricing-now {
  display: block;
  font-size: clamp(30px, 3.3vw, 40px);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.04;
  color: var(--blue);
}

/* "/month" on the softphone. Attached to the figure so it is never read as a
   one-off price, sized well below it so it is never read as part of the
   number either. */
.pricing-term {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink-soft);
}

/* A line of qualifying copy under the price — what a subscription covers,
   what a bag holds. Optional; most products need nothing here. */
.pricing-note {
  display: block;
  margin-top: 8px;
  max-width: 46ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- narrow screens ----------
   Everything steps down together so the order between the two figures holds,
   and the block keeps clear of the CTAs stacked beneath it on a phone. */
@media (max-width: 600px) {
  .pricing {
    margin: 16px 0 12px;
  }

  .pricing-msrp {
    margin-bottom: 7px;
  }

  .pricing-msrp-value {
    font-size: 19px;
  }

  .pricing-now {
    font-size: 31px;
  }
}

/* ---------------------------------------------------------------------------
   Heroes that are a photograph rather than the page's own ground.

   Two product pages put their copy over a dark shot — the BH74 headset and
   the W73H handset. Charcoal on #374151 and a navy chip both disappear there,
   so the treatment inverts: the chip goes light with navy text on it, and the
   struck figure goes to near-white. Same hierarchy, same reading order, read
   against the other ground.

   The blue is the one these pages' own dark theme already substitutes for
   --blue, so the price stays the same element it is everywhere else.
   ------------------------------------------------------------------------ */

.pricing-on-dark .pricing-msrp-badge {
  background: rgba(255, 255, 255, .94);
  color: var(--blue-ink);
}

.pricing-on-dark .pricing-msrp-value {
  color: rgba(255, 255, 255, .9);
}

.pricing-on-dark .pricing-label,
.pricing-on-dark .pricing-now {
  color: #4fb0e0;
}

.pricing-on-dark .pricing-note {
  color: rgba(255, 255, 255, .8);
}

/* --- ../assets/css/cart-indicator.css (linked, inlined by port_page.py) --- */
/* The header's cart button, compact.
   ==========================================================================
   The prototype styled this as a .cta-btn — the same wide pill as Sales
   Request, reading "Cart ( 1 )". Its own README records that the site's nav
   already overruns its box by about 70px at 1440px, and that is what the pill
   collided with: it sat on top of Videos, the last nav item.

   So the label goes and the count becomes a badge on the icon. That takes the
   control from roughly 110px to 34px, which is less than the nav was already
   overrunning by, so the collision cannot come back at this width.

   Tokens are read with a fallback because this stylesheet loads alongside the
   site's own CSS — a different page stylesheet on every page — and the custom
   properties come from whichever of those got there first.

   Shared with the Odoo site, which serves this file from hbe_product. The
   only difference is the note on the breakpoint below: there the cart is in
   every page's header, here it is in the four shop screens' headers. */

.cart-btn.cart-mini {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* A fixed square, and flex:none so a tight header shrinks the nav rather
     than squashing the button into an ellipse. */
  width: 34px;
  height: 34px;
  flex: none;
  padding: 0;
  margin: 0 6px 0 2px;
  /* On the utility bar's blue, not the header's cream: the button is drawn
     in the bar's own foreground colour the way Contact Us beside it is,
     rather than as a white chip stuck onto the blue. */
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  text-decoration: none;
  transition: border-color .12s, background .12s;
}

.cart-btn.cart-mini:hover,
.cart-btn.cart-mini:focus-visible {
  border-color: #fff;
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.cart-btn.cart-mini svg {
  width: 18px;
  height: 18px;
  /* The pill's rules sized the icon against a text label that is gone. */
  margin: 0;
}

/* The count. A circle on the corner of the icon rather than a figure beside
   it: it has to be readable at a glance without taking a word's worth of
   width. min-width plus padding so 1 stays round and 12 stays legible. */
.cart-btn.cart-mini .cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 999px;
  /* The site's own blue would disappear into the bar it sits on. Magenta is
     the site's other brand colour and the one it already uses on this bar
     for the "Us" in Contact Us. */
  background: var(--magenta, #eb008b);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 17px;
  letter-spacing: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
  /* No ring: on the utility bar there is no pale ground to separate it
     from, and a cream ring would read as a sticker on the blue. */
}

/* An empty cart gets no badge. The page is served with 0 in it and shop.js
   paints the real figure on load, so this is also what stops a 0 flashing
   before the cart has been read. */
.cart-btn.cart-mini[data-count="0"] .cart-count,
.cart-btn.cart-mini:not([data-count]) .cart-count {
  display: none;
}

/* One nav rule, for the widest windows only.
   ==========================================================================
   The page is capped at --maxw (1400px), so above about 1440px a wider
   window buys the header nothing — the wrap stops growing. The site's nav
   keeps its loosest spacing until 1680px, which is fine for ten items in
   that box and one too many for eleven: at 1700px the last item runs into
   the Sales Request button.

   So the 1680px step is taken from 1681px up instead. It is the site's own
   next value, not a new one, and it only ever applies where extra window
   width is already doing nothing for the row.

   Unscoped, because this stylesheet is on every page now and so is the Shop
   item that needs the room. */
@media (min-width: 1681px) {
  /* header.site is a longer selector than the site's own `nav.main > a`,
     and it has to be: every page keeps its CSS in a <style> block in the
     body, which lands after this file's <link> in the head, so an
     equal-specificity rule here would lose on source order alone. */
  header.site nav.main > a,
  header.site nav.main .has-mega > a {
    padding: 0 12px;
  }
}

/* Nothing else here touches the nav.
   ==========================================================================
   Earlier versions did, in two heavier ways, and both were wrong.

   The first hid the nav below 1360px and handed it to the hamburger, so
   these four pages dropped their menus at widths where every other page on
   the site still showed them. The second tried to buy the space back by
   stepping the nav's own size ladder down harder, which is re-tuning a
   layout this file does not own: below 1520px the site runs the nav as one
   line of flex:none, nowrap items sized by a ladder written for exactly ten
   of them, so extra width does not compress, it spills out of the nav's box
   and lands on whatever is beside it.

   Neither is needed now. The cart is in the utility bar, a row up, and the
   nav carries its ten items plus Shop with the site's own ladder untouched. */

@media (max-width: 860px) {
  .cart-btn.cart-mini {
    width: 30px;
    height: 30px;
    margin: 0 6px 0 2px;
  }
  .cart-btn.cart-mini svg { width: 16px; height: 16px; }
  .cart-btn.cart-mini .cart-count {
    min-width: 15px;
    height: 15px;
    line-height: 15px;
    font-size: 9px;
    top: -4px;
    right: -4px;
  }
}

/* --- ../assets/css/account-indicator.css (linked, inlined by port_page.py) --- */
/* The header's Account button and its dropdown.
   ==========================================================================
   Loaded on every page, beside cart-indicator.css, because the control is in
   every page's utility bar. The account SCREENS are styled by account.css,
   which only those pages load.

   The button is deliberately the cart button's twin — same 34px circle, same
   border, same hover — because they sit next to each other and two controls
   a pixel apart that are almost the same read as a mistake. The only
   difference is the glyph and that this one opens a panel instead of going
   somewhere.

   Tokens are read with a fallback, as cart-indicator.css does: this loads
   alongside whichever page stylesheet got there first, and the custom
   properties come from that.

   Shared with the Odoo site. */

/* ---- the control ---- */

.acct-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  padding: 0;
  margin: 0 2px 0 2px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .12s, background .12s;
}

.acct-btn:hover,
.acct-btn:focus-visible,
.acct-wrap.is-open .acct-btn {
  border-color: #fff;
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.acct-btn svg {
  width: 18px;
  height: 18px;
  margin: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A signed-in customer gets a filled dot on the glyph — the same corner the
   cart puts its count on, so the two controls report their state the same
   way. No initials: at 34px a letter is unreadable and a name is private. */
.acct-btn::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--magenta, #eb008b);
  border: 2px solid var(--blue-deep, #005e87);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .14s, transform .14s;
}

.acct-wrap[data-signed-in="true"] .acct-btn::after {
  opacity: 1;
  transform: none;
}

/* ---- the panel ---- */

.acct-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Fixed, not absolute, and placed by script.

   The utility bar this control sits in is `overflow: hidden` — it has to be,
   to contain the gradient and the white logo plate that overhangs it — so an
   absolutely positioned panel is cut off at the bar's own 44px. A fixed
   panel is positioned against the viewport and an overflow ancestor does not
   clip it, which is why account-menu.js measures the button and sets top and
   left on open. Checked: nothing above .acct-wrap carries a transform, a
   filter or a perspective, any of which would have made this element
   containing-block-relative again and put us back where we started. */
.acct-menu {
  position: fixed;
  z-index: 120;
  width: 244px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--line, #e6e0d6);
  background: var(--surface, #fff);
  box-shadow: 0 2px 6px rgba(20, 30, 40, .06), 0 18px 44px rgba(20, 30, 40, .16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .14s, transform .14s, visibility .14s;
  /* the utility bar is short; the panel must not inherit its centring */
  text-align: left;
}

.acct-wrap.is-open .acct-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* The greeting. One line, and the name is allowed to truncate rather than
   wrap the panel into two heights depending on whose account it is. */
.acct-menu-head {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--line, #e6e0d6);
  margin-bottom: 6px;
}

.acct-menu-hi {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink, #1d2328);
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acct-menu-sub {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-faint, #79828a);
}

.acct-menu a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft, #4d565e);
  text-decoration: none;
  transition: background .1s, color .1s;
}

.acct-menu a:hover,
.acct-menu a:focus-visible {
  background: var(--surface-2, #f2ede5);
  color: var(--blue, #0076af);
}

.acct-menu a svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--ink-faint, #79828a);
}

.acct-menu a:hover svg,
.acct-menu a:focus-visible svg {
  color: inherit;
}

/* Sign Out is a different kind of action from the eight links above it, so
   it gets the rule rather than a colour — red here would be the only red on
   the site, and signing out is not destructive. */
.acct-menu-cut {
  height: 1px;
  margin: 6px 12px;
  background: var(--line, #e6e0d6);
}

/* ---- the two buttons a signed-out panel ends with ----

   Styled here in full rather than leaning on the site's .buybtn and
   .btn-outline. Those are defined in each page's own inline stylesheet, and
   not every page has them: the product pages style a.buybtn, the home page
   has no product hero and so never needed it. A dropdown that is in all 87
   headers cannot assume the page under it brought a button along — on the
   home page both of these rendered as plain centred text.

   The values are the site's own, so the pair looks the same as every other
   primary/secondary pair on the site; they are just not borrowed. */

.acct-menu-cta {
  padding: 4px 4px 2px;
}

.acct-menu-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 34px;
  margin-bottom: 8px;
  padding: 0 14px;
  border-radius: 40px;
  box-sizing: border-box;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background .14s, border-color .14s, color .14s;
}

.acct-menu-cta a.buybtn {
  background: var(--blue, #0076af);
  border: 1px solid var(--blue, #0076af);
  color: #fff;
}

.acct-menu-cta a.buybtn:hover {
  background: var(--blue-deep, #005e87);
  border-color: var(--blue-deep, #005e87);
  color: #fff;
}

.acct-menu-cta a.btn-outline {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e6e0d6);
  color: var(--ink, #1d2328);
}

.acct-menu-cta a.btn-outline:hover {
  border-color: var(--blue, #0076af);
  color: var(--blue, #0076af);
}

/* ---- mobile ----
   Hover is not available and a 244px panel pinned to a 34px button near the
   right edge of a 360px screen would hang off it. Below 720px the panel
   becomes a sheet: full width, under the bar, still opened by the same
   click and closed by the same outside-click. */
@media (max-width: 720px) {
  .acct-menu {
    position: fixed;
    top: auto;
    left: 8px;
    right: 8px;
    width: auto;
    max-height: min(78vh, 560px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px;
  }

  .acct-menu a {
    /* a comfortable tap target, which 32px is not */
    padding: 12px;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .acct-menu,
  .acct-btn::after {
    transition: none;
  }
}

    :root {
      --blue: #0076af;
      --blue-deep: #005e87;
      --blue-ink: #0a4d70;
      --magenta: #eb008b;
      --magenta-deep: #c30074;
      --magenta-ink: #b3006b;
      /* text-safe magenta for labels/links on light bg (AA) */
      /* Ooma-matched: warm cream ground, white cards, slate footer */
      --bg: #faf7f2;
      --surface: #ffffff;
      --surface-2: #f2ede5;
      --ink: #1d2328;
      --ink-soft: #4d565e;
      --ink-faint: #79828a;
      --line: #e6e0d6;
      --line-soft: #f0ebe3;
      --charcoal: #2f3d47;
      /* Ooma slate footer */
      --warn: #b3441f;
      --good: #1f7d52;
      --warn-ink: #9c3a19;
      --good-ink: #16663f;
      --shadow-sm: 0 1px 2px rgba(20, 30, 40, .05), 0 3px 12px rgba(20, 30, 40, .05);
      --shadow-md: 0 2px 6px rgba(20, 30, 40, .07), 0 16px 38px rgba(20, 30, 40, .09);
      --r: 12px;
      --maxw: 1400px;
      --logo-plate-end: 232px; /* util .logo padding + 85px-tall img + padding */
      --hero-grad: linear-gradient(115deg, #0076af 0%, #0a5f8c 55%, #083d5c 100%);
    }

    @media (prefers-color-scheme:dark) {
      :root {
        --bg: #0c151b;
        --surface: #14212a;
        --surface-2: #1b2b35;
        --ink: #e8eef2;
        --ink-soft: #aab8c2;
        --ink-faint: #71828d;
        --line: #283a45;
        --line-soft: #20303a;
        --charcoal: #0a1218;
        --blue: #4fb0e0;
        --blue-deep: #7cc8ec;
        --blue-ink: #9fd6ef;
        --magenta: #ff5fb0;
        --magenta-deep: #ff8ac8;
        --magenta-ink: #ff7cc0;
        --warn: #e8804f;
        --good: #4fc48a;
        --warn-ink: #f0946a;
        --good-ink: #6fd6a2;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .28);
        --shadow-md: 0 2px 6px rgba(0, 0, 0, .35), 0 18px 40px rgba(0, 0, 0, .4);
        --hero-grad: linear-gradient(115deg, #0a5075 0%, #0a3d5a 55%, #07293c 100%);
      }
    }

    :root[data-theme="light"] {
      --bg: #faf7f2;
      --surface: #ffffff;
      --surface-2: #f2ede5;
      --ink: #1d2328;
      --ink-soft: #4d565e;
      --ink-faint: #79828a;
      --line: #e6e0d6;
      --line-soft: #f0ebe3;
      --charcoal: #2f3d47;
      --blue: #0076af;
      --blue-deep: #005e87;
      --blue-ink: #0a4d70;
      --magenta: #eb008b;
      --magenta-deep: #c30074;
      --magenta-ink: #b3006b;
      --warn: #b3441f;
      --good: #1f7d52;
      --warn-ink: #9c3a19;
      --good-ink: #16663f;
      --shadow-sm: 0 1px 2px rgba(20, 30, 40, .05), 0 3px 12px rgba(20, 30, 40, .05);
      --shadow-md: 0 2px 6px rgba(20, 30, 40, .07), 0 16px 38px rgba(20, 30, 40, .09);
      --hero-grad: linear-gradient(115deg, #0076af 0%, #0a5f8c 55%, #083d5c 100%);
    }

    :root[data-theme="dark"] {
      --bg: #0c151b;
      --surface: #14212a;
      --surface-2: #1b2b35;
      --ink: #e8eef2;
      --ink-soft: #aab8c2;
      --ink-faint: #71828d;
      --line: #283a45;
      --line-soft: #20303a;
      --charcoal: #0a1218;
      --blue: #4fb0e0;
      --blue-deep: #7cc8ec;
      --blue-ink: #9fd6ef;
      --magenta: #ff5fb0;
      --magenta-deep: #ff8ac8;
      --magenta-ink: #ff7cc0;
      --warn: #e8804f;
      --good: #4fc48a;
      --warn-ink: #f0946a;
      --good-ink: #6fd6a2;
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .28);
      --shadow-md: 0 2px 6px rgba(0, 0, 0, .35), 0 18px 40px rgba(0, 0, 0, .4);
      --hero-grad: linear-gradient(115deg, #0a5075 0%, #0a3d5a 55%, #07293c 100%);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
      line-height: 1.62;
      -webkit-font-smoothing: antialiased;
    }

    .brandface {
      font-style: italic;
      font-weight: 800;
      letter-spacing: -.01em;
    }

    /* Ooma-style serif display type */
    /* Nunito ExtraBold, subset to the header headline glyphs (~2KB, embedded so the page stays self-contained) */
    @font-face {
      font-family: "HeadlineSans";
      font-style: normal;
      font-weight: 800;
      font-display: swap;
      src: url(data:font/woff2;base64,d09GMgABAAAAAAeoAA8AAAAADkQAAAdOAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhwbg0YcZAZgP1NUQVREAIEMEQgKjHiKLgsoAAE2AiQDTAQgBYRAByAb0QsR1aweyDRSFs7fzw/dvt4kfEuA3T1TTkSsgxbKM9fKkaI5ER+DcLMGqFLVAxqywUTqVAWpUNEXdfX51lqdvTtcok5IhEhIRFLb/Tu3Nqh5IvJoPCLe3JLZ65oIiUimkhOlVpaxyZzCu7SxEHHWuzEIgImJLpw0ghZpFvIFwk9WqInmkJ279h6MIpNWLJwN/rMnLJ4bDyO58t6oN2vKwrnIXuV9gAGBbB6NhwLjt9zmUH1SsJDD5i9xDBbHf6ZjflkJfFwHo8k5AbZr7Pe4cf4jW9jzs0T+hyX8gV9TaQbXgueHdJQQyCCNLAdVaYCBUSk3JAWpmwiZDIVULPYZWaSL5La7TKAyikGggIala97QQgFspLswqgj3aYve5po2VXsCNHhgLweqG6OgBG7Jmj573qTZncrO0JrpAOPKDTFJOvrlCV8MF5G9zsvQWJShiiR12wbB/eH0cp/Qt1/fLrgGB/Pkl/9bWTujCdV2QGvD8+ipuI7cIQHKKgSAIkdSOX/ZtOmLq1E+Y/GE2RSHwQipDEEV8o2ifRUoK52hLQKX2SGDs4eB5U8thXxIKDjoiO7ojyGYgEmYgmmYgdmYRwELD98Pg8ncO/MnvsoX+BQf5z28m3fxTt7BO3g7jQNuRKggZuRxXjhOqEpK2ovScWKliLGfyUhhkJVmtpVdcldhIcJ7kGEUz+WcQnbhXPHyzWrUrm3bpl2qciHbHJKx0hOtjKn9K5TyrmodRBHcsDOdjlJDdfCAvPtKkYgakqhRcBmwCHYw3EvKv0JkguVO8OMYspIkKaRWGA4NkgRWipUfhnCjIaVI9mWUgntplA6ekPdYqQn+FZJ4oHdVW8FluJeUEvllxiTVLCHcSAeJKyMMhyh77pNEayj/1j64l3Vw8SiRd0X5txrvOnPAO1rtYlWiUMkIRTddu3dKi92bN+3bVXXPGeWfO3RscqQOzlbbu3v/5k2Vz4WJJBvGnLNPmaSLeCc+dBf3qGdugBx5nNxquaa99bKrzr/6cnLnqwZVssrOeYWb1XjZydnTzKp0wfDRT99MicsTN6g1SrxnvAFku5/Qif1HNQO594unl51+Jg64gj7lEpkpwLu5tqBhxheAAzpm9N0ajC5U+Sk1N2+esDmmkdfIcYboTBFfdKbop1hWZuy2uEID31WHy7sGQ+MHZtbuXLvUvp9Sua/90vVTrHvLZXtbT8EpJcwuo2N2GbLLvBJ+hdklzC6jY3bdH/Ze+D0mi2O5mXOGUxcv9aoPGRk/QJfMnT2UumipV3PoyMT+uuTBth6jPBNentoZsvYaZOnI0tReOT5OJjqc+Xlr/61cbv/trctvZ7LMfsfaP9XrP7YfC3vk/4F/3civ4fGr+f/yq/m8Gv6NfzFZbHBja0wixqzF+0TbDNkW9acSqWg0nkr1i7YJSYv65vxHHObD+1xjv0QVUhj327c1Y0jqdV9d2dQ+Q/Y8dR5vXb6hbvtmfKi1XahOf9RTIUxMyzWjkfeIiaJChMx1T94FMbdry+la77QJx/yeKcrOD1TWmD/QRv+wSI+s5b30EYfyuqO22h2r5U8p9YG42lcJM3dgH6d3LRl3ra25I4Z+yuHmj1rq1pqsyX/+lWw93UE09ytK4sFQsPnta3JGS0d1tLavFuQ+43RNd1YljP3VdHO0rM39pz1e+u2YxeKdshuWIybe0PFdlMY2bP72fAuZp+kUWd77sH32tlFVd0mcdr+W4l0lcdoCOLSY5EQpcY7QOXFKNEzHpY/R5DGp9DZC3xaxA77iDg1MTz/MzLOPn2fulTB7Sl4s+fExirffISechENLSJrMkHkhnSKWCyaH9VZbTE6Ggx+TNKHT5B1dnFEfrX0uAcLt3HC4GugdvBOUrXPD4V7ttNNjPt8kZV3p+P8+TcTm1wgqrtNEbEFE6DlKOEOTXqGwD0XMC6+qGLU47BO0j/X/P/Ai+43//77gbXoW56w9j1iW75iosv9awuF8wfLfbrr01emu72kvNfz3y3+fFvYU0IAvk/UbwL4ray4c/++X/z4p7Hkrv0Ad6xdo2bcjxClHiNMOLfsMhNg7///L/hxetgI06z1QbAKKnQbFKoeKxbh1TxIO7N6KBChW0/eS31pwwzpMoxj5b3mfDftyppfjtPe5UfAflHURq+ROWRDgC8pGJd6iHBhxyeiCeFqIVhxFiyBALqQSRugNlpoosSWwbNppCWrB1Tv4RYAe5LGEKSwjgB1sYA128yKPRcwigg1x/iKymMEA5pBFGhls7NtuYAXrsELFd1vHDNaQxQo2UFcuRfhti1AijzWkoUIngogjiU0sI4sN5KFQVJHCHNayfTePZQiggxJGqKG9hrYhiU4kERhCUULP6mlsYhFTWJMMS9DQhzxWsGsCM/AnCaCFGhroIUAfMpiDoAC9CxvmkcMcZkSGB5vEwGR9HccXk8TT2TpmsIlpKDFDO0LS8shjxSLmMG84KJyswrIiLvl7kaaz/X8D2rEBAA==) format("woff2");
    }

    :root {
      --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", Georgia, serif;
    }

    .band h2,
    .switch-title,
    .hero h1,
    .mobile-head h2,
    .soft-head h2,
    .srcard h2 {
      font-family: var(--serif);
      font-weight: 600;
      letter-spacing: -.015em;
      line-height: 1.14;
    }

    .band h2 em,
    .switch-title .focus {
      font-style: normal;
    }

    .wrap {
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 0 26px;
    }

    h1,
    h2,
    h3 {
      letter-spacing: -.02em;
      text-wrap: balance;
      line-height: 1.08;
    }

    section {
      position: relative;
    }

    a {
      color: inherit;
    }

    /* ============ SCROLL REVEAL + MOTION ============ */
    [data-reveal] {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
    }

    [data-reveal].in {
      opacity: 1;
      transform: none;
    }

    [data-reveal="left"] {
      transform: translateX(-34px);
    }

    [data-reveal="right"] {
      transform: translateX(34px);
    }

    [data-reveal="zoom"] {
      transform: scale(.92);
    }

    [data-reveal="left"].in,
    [data-reveal="right"].in,
    [data-reveal="zoom"].in {
      transform: none;
    }

    /* stagger children */
    [data-stagger]>* {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
    }

    [data-stagger].in>* {
      opacity: 1;
      transform: none;
    }

    [data-stagger].in>*:nth-child(1) {
      transition-delay: .05s;
    }

    [data-stagger].in>*:nth-child(2) {
      transition-delay: .13s;
    }

    [data-stagger].in>*:nth-child(3) {
      transition-delay: .21s;
    }

    [data-stagger].in>*:nth-child(4) {
      transition-delay: .29s;
    }

    [data-stagger].in>*:nth-child(5) {
      transition-delay: .37s;
    }

    [data-stagger].in>*:nth-child(6) {
      transition-delay: .45s;
    }

    /* image reveal: subtle clip + zoom */
    .reveal-img {
      overflow: hidden;
    }

    .reveal-img img {
      transition: transform .9s cubic-bezier(.22, .61, .36, 1);
    }

    .reveal-img.in img {
      animation: imgIn 1.1s cubic-bezier(.22, .61, .36, 1) both;
    }

    @keyframes imgIn {
      from {
        transform: scale(1.12);
        opacity: .4;
      }

      to {
        transform: scale(1);
        opacity: 1;
      }
    }

    @media (prefers-reduced-motion:reduce) {

      [data-reveal],
      [data-stagger]>* {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }

      .reveal-img.in img {
        animation: none;
      }

      * {
        scroll-behavior: auto;
      }
    }

    /* ===== design-variation switcher (client review tool) ===== */
    .vswitch {
      background: #141a1f;
      color: #cfd6dc;
      font-size: 12.5px;
      position: relative;
      z-index: 60;
    }

    .vswitch .wrap {
      display: flex;
      align-items: center;
      gap: 14px 18px;
      flex-wrap: wrap;
      padding: 11px 26px;
    }

    .vswitch .vs-lbl {
      font-weight: 800;
      letter-spacing: .09em;
      text-transform: uppercase;
      font-size: 10.5px;
      color: #8fa3b3;
    }

    .vswitch .vs-links {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .vswitch a {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      text-decoration: none;
      color: #cfd6dc;
      border: 1px solid #2b353d;
      background: #1c242b;
      padding: 6px 14px;
      border-radius: 30px;
      font-weight: 600;
      transition: .15s;
    }

    .vswitch a:hover {
      border-color: #4a5a66;
      color: #fff;
    }

    .vswitch a.on {
      background: #fff;
      color: #141a1f;
      border-color: #fff;
    }

    .vswitch a i {
      font-style: normal;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .06em;
      opacity: .75;
    }

    .vswitch .vs-note {
      margin-left: auto;
      color: #7f8f9c;
      font-size: 11.5px;
    }

    @media (max-width:700px) {
      .vswitch .vs-note {
        display: none;
      }
    }

    /* ============ BLUE HEADER (real logo + badges + headline + contact) ============ */
    .util {
      background: var(--hero-grad);
      color: #eaf6ff;
      font-size: 13px;
      overflow: hidden;
      /* thin divider under the utility bar so the white logo plate doesn't blend
         into the white nav menu below it */
      border-bottom: 0.5px solid var(--blue);
    }

    @media (prefers-color-scheme:dark) {
      .util {
        background: linear-gradient(115deg, #0a3d5a, #07293c);
      }
    }

    :root[data-theme="dark"] .util {
      background: linear-gradient(115deg, #0a3d5a, #07293c);
    }

    .util .wrap {
      display: flex;
      gap: 24px;
      align-items: center;
      justify-content: space-between;
      min-height: 92px;
      padding-top: 12px;
      padding-bottom: 12px;
    }

    .util-left {
      display: flex;
      align-items: center;
      align-self: stretch;
      gap: 24px;
      flex: none;
      /* full-bleed the logo group out to the true left viewport edge at every width.
         `%` here resolves against .wrap's fixed max-width content box, so this equals
         exactly the negative offset needed to cancel the auto-centering + 26px padding. */
      margin-left: calc(50% - 50vw);
    }

    .util-right {
      display: flex;
      align-items: center;
      gap: 22px;
      flex: none;
    }

    /* real logo on a white panel so the blue wordmark stays legible */
    /* white plate runs the full height of the utility bar and bleeds to the left viewport edge;
     negative margin cancels .wrap's 12px padding, ::before paints the bleed past .wrap's max-width */
    .util .logo {
      position: relative;
      display: flex;
      align-items: center;
      align-self: stretch;
      text-decoration: none;
      background: #fff;
      border-radius: 0;
      /* margin: -12px cancels .wrap's 12px top/bottom padding so the white plate
         fills the full height of the utility bar and touches the top edge */
      padding: 0 28px;
      margin: -12px 0;
      box-shadow: 6px 0 20px rgba(0, 0, 0, .14);
    }

    .util .logo img {
      height: 85px;
      width: auto;
      display: block;
    }

    /* both certification marks pull inward toward the headline by the same amount,
       which keeps the headline optically centred while evening out the banner */
    .util .badge-hipaa {
      height: 54px;
      width: auto;
      display: block;
      margin-left: clamp(9px, 2.25vw, 45px);
      opacity: .96;
    }

    /* the right-hand badge is the same HIPAA artwork as the left, mirrored:
       same height, and the gap moves to the Contact Us side */
    .util .badge-hipaa-right {
      margin-left: 0;
      margin-right: clamp(9px, 2.25vw, 45px);
    }

    /* centered serif headline */
    /* flex:1 makes the headline span the whole gap between the two badges, so
       centring inside it puts the text exactly midway between them. Under
       space-between alone it merely sat wherever the free space fell. */
    .util .headline {
      flex: 1;
      text-align: center;
      margin: 0;
      white-space: nowrap;
      color: #fff;
      font-family: "HeadlineSans", "Avenir Next", "Nunito Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
      font-weight: 800;
      font-style: italic;
      font-size: clamp(24px, 2.9vw, 46px);
      letter-spacing: .14em;
      line-height: 1.06;
      text-shadow: 0 2px 12px rgba(0, 0, 0, .22);
    }

    /* no extra margin after UP — the word space plus the headline's letter-spacing
       already matches every other gap in the phrase */
    .util .headline em {
      color: inherit;
      font-style: italic;
      font-weight: 800;
      margin-right: 0;
    }

    /* plain clickable Contact Us text link (holds all contact info) */
    .contact-us {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      flex: none;
      background: none;
      border: 0;
      padding: 0;
      box-shadow: none;
      color: #fff;
      text-decoration: none;
      font-weight: 800;
      font-size: 17px;
      letter-spacing: .01em;
      text-shadow: 0 2px 10px rgba(0, 0, 0, .25);
      transition: opacity .12s;
    }

    .contact-us em {
      color: #ff8ac8;
      font-style: italic;
    }

    .contact-us svg {
      width: 18px;
      height: 18px;
    }

    .contact-us span {
      border-bottom: 1.5px solid rgba(255, 255, 255, .45);
      padding-bottom: 2px;
    }

    .contact-us:hover {
      opacity: .82;
    }

    .contact-us:hover span {
      border-bottom-color: #fff;
    }

    @media (max-width:1240px) {
      .util .headline {
        display: none;
      }
    }

    @media (max-width:920px) {

      .util .badge-hipaa,
      .util .badge-hipaa-right {
        display: none;
      }
    }

    /* ============ HEADER / NAV ============ */
    header.site {
      position: sticky;
      top: 0;
      z-index: 40;
      /* page background, not surface — the nav bar reads as part of the cream
         page rather than a white band sitting on it */
      background: var(--bg);
      border-bottom: 0;
      box-shadow: none;
    }

    header.site .wrap {
      display: flex;
      align-items: center;
      gap: 12px;
      height: 66px;
      min-width: 0;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 11px;
      text-decoration: none;
      flex: none;
    }

    .logo svg {
      width: 42px;
      height: auto;
      display: block;
    }

    .logo .wm {
      display: flex;
      flex-direction: column;
      line-height: 1;
    }

    .logo .wm .n {
      font-size: 21px;
      font-weight: 800;
      letter-spacing: -.02em;
      color: var(--blue);
    }

    .logo .wm .n em {
      color: var(--magenta);
      font-style: italic;
    }

    .logo .wm .t {
      font-size: 9.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink-faint);
      margin-top: 3px;
      font-weight: 600;
    }

    nav.main {
      display: flex;
      gap: 0;
      flex: 1;
      min-width: 0;
      margin-left: 0;
      margin-right: auto;
      align-items: stretch;
    }

    nav.main>a,
    nav.main .has-mega>a {
      position: relative;
      display: flex;
      align-items: center;
      gap: 6px;
      height: 66px;
      padding: 0 14px;
      text-decoration: none;
      color: var(--ink-soft);
      font-weight: 600;
      font-size: 14.5px;
      white-space: nowrap;
      border-bottom: 2.5px solid transparent;
      transition: color .15s, border-color .15s;
    }

    nav.main>a:hover,
    nav.main .has-mega:hover>a,
    nav.main .has-mega:focus-within>a {
      color: var(--blue);
      border-color: var(--blue);
    }

    nav.main .has-mega {
      display: flex;
    }

    nav.main .caret {
      width: 10px;
      height: 10px;
      opacity: .6;
      transition: transform .16s;
    }

    nav.main .has-mega:hover .caret {
      transform: rotate(180deg);
    }
    /* align Home with the right edge of the white logo plate in the bar above */
    @media (min-width: 921px) {
      nav.main {
        margin-left: calc(var(--logo-plate-end) - 26px - (100vw - min(100vw, var(--maxw))) / 2);
      }
    }

    @media (max-width:1680px) {

      nav.main>a,
      nav.main .has-mega>a {
        padding: 0 12px;
      }
    }

    @media (max-width:1620px) {

      nav.main>a,
      nav.main .has-mega>a {
        padding: 0 9px;
        font-size: 14px;
      }

      header.site .wrap {
        gap: 8px;
      }

      .cta-btn {
        padding: 5px 12px;
        font-size: 13.5px;
      }

      .logo .wm .t {
        display: none;
      }
    }

    /* Narrow band between the header wrap's max-width and the nav-wrap point:
       About Us sits close enough to the right edge that a perfectly centred panel
       would clip. Nudge it back just far enough — it still reads as centred. */
    @media (min-width:1361px) and (max-width:1405px) {
      header.site .mega.mega-sm.ab-menu {
        transform: translateX(calc(-50% - 46px)) translateY(-8px);
      }

      header.site .has-mega.ab:hover .ab-menu,
      header.site .has-mega.ab:focus-within .ab-menu,
      header.site .has-mega.ab.open .ab-menu {
        transform: translateX(calc(-50% - 46px));
      }
    }

    /* Wrapped-nav band: About Us sits far enough right that the full-width panel
       would overhang. Narrower panel, still centred, still on-screen. */
    @media (max-width:1015px) {

      /* one class more specific than the max-width:1360 block, which on the
         sub-pages is emitted after this rule */
      header.site nav.main .mega.mega-sm.ab-menu {
        width: min(420px, calc(100vw - 32px));
      }
    }

    @media (max-width:1200px) {
      .cta-btn svg {
        display: none;
      }
    }

    @media (max-width:1080px) {

      /* the nav item sizing lives in the one-line ladder above; this legacy rule
         used to reset it back to 14px and undo the whole thing */
      header.site .wrap {
        gap: 10px;
      }

      .cta-btn svg {
        display: none;
      }
    }

    .cta-btn {
      flex: none;
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--magenta);
      color: #fff;
      text-decoration: none;
      font-weight: 700;
      /* explicit height so the product-page CTAs can match it exactly */
      height: 30px;
      padding: 0 12px;
      border-radius: 40px;
      font-size: 13px;
      letter-spacing: .01em;
      box-shadow: 0 6px 18px -6px var(--magenta);
      transition: transform .12s, box-shadow .12s, background .12s;
    }

    .cta-btn:hover {
      transform: translateY(-1px);
      background: var(--magenta-deep);
      box-shadow: 0 10px 24px -6px var(--magenta);
    }

    .cta-btn svg {
      width: 14px;
      height: 14px;
    }

    /* mega menu */
    header.site {
      overflow: visible;
    }

    header.site .wrap {
      position: relative;
    }

    .has-mega {
      position: static;
    }

    .has-mega .mega {
      position: absolute;
      left: 12px;
      right: 12px;
      top: calc(100% + 8px);
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: var(--shadow-md);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(-8px);
      transition: opacity .16s ease, transform .16s ease, visibility .16s;
      padding: 28px 32px 30px;
      z-index: 50;
    }

    /* invisible hover bridge across the gap so the cursor never leaves the hover chain */
    .has-mega .mega::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: -14px;
      height: 16px;
      background: transparent;
    }

    /* keep the trigger itself an active hover target the full height of the bar */
    .has-mega>a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -10px;
      height: 12px;
    }

    .has-mega:hover .mega,
    .has-mega:focus-within .mega,
    .has-mega.open .mega {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: none;
    }

    .mega .mega-grid {
      max-width: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: 0.9fr 1fr 1.05fr 0.9fr;
      gap: 34px;
      align-items: start;
    }

    .mega .mm-rail {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    /* 5G menu: two image rails plus four lists is six tracks in the width the
       other menus use for four, so this panel runs a size down on its own.
       It needs its own responsive rules — .mega.g5-menu .mega-grid outranks
       the shared .mega .mega-grid override inside the media queries. */
    .mega.g5-menu .mega-grid {
      /* column widths track what each column's longest label actually needs:
         products 215px, accessories 181px, carrier 169px, pricing 253px */
      grid-template-columns: 0.58fr 0.95fr 0.8fr 0.74fr 1.11fr 0.58fr;
      gap: 18px;
    }

    .mega.g5-menu .col a,
    .mega.g5-menu .col .mm-soon {
      font-size: 13.5px;
      padding: 7.5px 0;
      gap: 7px;
    }

    .mega.g5-menu .col h4 {
      font-size: 10.5px;
      letter-spacing: .1em;
    }

    .mega.g5-menu .mm-rail {
      gap: 14px;
    }

    .mega.g5-menu .mm-thumb img {
      max-height: 70px;
    }

    .mega.g5-menu .mm-thumb figcaption {
      font-size: 9.5px;
    }

    /* laptops: the rails go first so the four lists keep full-size labels */
    @media (max-width:1390px) {
      .mega.g5-menu .mm-rail {
        display: none;
      }

      .mega.g5-menu .mega-grid {
        /* the pricing names are the longest in this menu, so that column keeps
           more of the row than an even four-way split would give it */
        grid-template-columns: 1.05fr 0.89fr 0.83fr 1.24fr;
        gap: 26px;
      }

      .mega.g5-menu .col a,
      .mega.g5-menu .col .mm-soon {
        font-size: 14.5px;
        padding: 9px 0;
      }
    }

    @media (max-width:1120px) {
      .mega.g5-menu .mega-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 34px;
      }
    }

    /* ---- 5G Accessories ----------------------------------------------------
       Two levels in a panel whose other columns have one, so the product rows
       are left to the shared .mega .col a treatment untouched — same bullet,
       size, weight, padding and hairline as 5G Products beside it — and only
       the sub-category is given a style of its own.

       That style is a label, not a heading: micro caps in grey, no bullet and
       no rule, so it sits between the rows the way a column head sits above
       them. An earlier pass made it bold and hung the products off a vertical
       rail; the rail and the weight cut the column into three blocks and made
       it the heaviest thing in the panel. The full-width hairlines under the
       product rows are what hold the column together as one list. ------- */
    .mega.g5-menu .mm-acc .mm-cat {
      display: block;
      padding: 13px 0 2px;
      border-bottom: 0;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .09em;
      text-transform: uppercase;
      /* not --ink-faint: at 10px it lands at 3.9:1 on the panel, under the
         4.5:1 small text wants. Mixed toward --ink-soft it clears 4.5 and is
         still plainly quieter than the rows it labels. */
      color: color-mix(in srgb, var(--ink-faint) 55%, var(--ink-soft));
    }

    .mega.g5-menu .mm-acc .mm-cat:first-of-type {
      padding-top: 3px;
    }

    .mega.g5-menu .mm-acc .mm-cat::before {
      content: none;
    }

    /* the shared list steps a row right on hover; a label is not a row, so it
       takes the colour and stays put */
    .mega.g5-menu .mm-acc .mm-cat:hover {
      padding-left: 0;
      color: var(--blue);
    }


    /* the qualifier sits inside the model's own text flow, so it wraps with it
       and shares its baseline rather than being a second flex item */
    .mega.g5-menu .mm-acc .mm-prod-meta {
      margin-left: 5px;
      font-size: 11.5px;
      color: color-mix(in srgb, var(--ink-faint) 55%, var(--ink-soft));
    }

    /* Panamax menu: About column plus two product columns, one image rail
       either side. Needs its own responsive rule — .mega.pnx-menu .mega-grid
       outranks the shared .mega .mega-grid override inside the media query.

       Battery Backup is commented out of the markup for as long as every
       product in it is unpublished. Restore these two track lists along with
       the column, or the panel renders a column short of its own grid:
           here                 0.7fr 0.8fr 0.95fr 0.95fr 1fr 0.7fr
           1390 breakpoint      repeat(4, minmax(0, 1fr)) */
    .mega.pnx-menu .mega-grid {
      grid-template-columns: 0.7fr 0.9fr 1.1fr 1.1fr 0.7fr;
      gap: 20px;
    }

    /* more tracks in the width the other menus use for four, so the Panamax
       panel runs a size down on type, padding and thumbnails */
    .mega.pnx-menu .col a {
      font-size: 13.5px;
      padding: 7.5px 0;
      gap: 7px;
    }

    .mega.pnx-menu .col h4 {
      font-size: 10.5px;
      letter-spacing: .1em;
    }

    .mega.pnx-menu .mm-rail {
      gap: 14px;
    }

    .mega.pnx-menu .mm-thumb img {
      max-height: 70px;
    }

    .mega.pnx-menu .mm-thumb figcaption {
      font-size: 9.5px;
    }

    /* Prime Surge menu — same panel as Panamax (it carries pnx-menu too), with
       its own track list because it runs one product column fewer. */
    .mega.pnx-menu.prime-menu .mega-grid {
      grid-template-columns: 0.7fr 0.85fr 1fr 1fr 1fr 0.7fr;
    }

    @media (max-width:1390px) {
      .mega.pnx-menu.prime-menu .mega-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }

    /* laptops: the rails go first so the four lists keep full-size labels.
       1390 is where the six-track layout stops fitting the longest label,
       P360-8 Power360 8 Outlet Strip, on a single line. */
    @media (max-width:1390px) {
      .mega.pnx-menu .mm-rail {
        display: none;
      }

      .mega.pnx-menu .mega-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 26px;
      }

      .mega.pnx-menu .col a {
        font-size: 14.5px;
        padding: 9px 0;
      }
    }

    @media (max-width:1120px) {
      .mega.pnx-menu .mega-grid {
        grid-template-columns: 1fr 1fr;
        gap: 26px 34px;
      }
    }

    .mega .mm-thumb {
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 8px;
      padding: 12px;
      border: 1px solid var(--line-soft);
      border-radius: 12px;
      background: var(--surface-2);
      transition: border-color .14s, transform .14s;
    }

    .mega .mm-thumb:hover {
      border-color: var(--magenta);
      transform: translateY(-2px);
    }

    .mega .mm-thumb img {
      width: 100%;
      max-height: 88px;
      object-fit: contain;
      mix-blend-mode: multiply;
    }

    .mega .mm-thumb figcaption {
      font-size: 10.5px;
      letter-spacing: .04em;
      color: var(--ink-faint);
      line-height: 1.4;
    }

    .mega .mm-thumb figcaption b {
      display: block;
      color: var(--ink-soft);
      font-size: 12px;
      letter-spacing: 0;
      margin-top: 2px;
    }

    @media (prefers-color-scheme:dark) {
      .mega .mm-thumb {
        background: #fff;
      }

      .mega .mm-thumb img {
        mix-blend-mode: normal;
      }
    }

    :root[data-theme="dark"] .mega .mm-thumb {
      background: #fff;
    }

    :root[data-theme="dark"] .mega .mm-thumb img {
      mix-blend-mode: normal;
    }

    :root[data-theme="light"] .mega .mm-thumb {
      background: var(--surface-2);
    }

    :root[data-theme="light"] .mega .mm-thumb img {
      mix-blend-mode: multiply;
    }

    @media (max-width:1120px) {
      .mega .mm-rail {
        display: none;
      }

      .mega .mega-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    .mega .col h4 {
      margin: 0 0 6px;
      padding-bottom: 10px;
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--magenta);
      border-bottom: 2px solid color-mix(in srgb, var(--magenta) 22%, transparent);
    }

    .mega .col a {
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      color: var(--ink-soft);
      font-size: 14.5px;
      padding: 9px 0;
      border-bottom: 1px solid var(--line-soft);
      font-weight: 500;
      transition: color .13s, padding-left .13s;
    }

    .mega .col a:last-child {
      border-bottom: 0;
    }

    .mega .col a::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--line);
      transition: background .13s;
      flex: none;
    }

    .mega .col a:hover {
      color: var(--blue);
      padding-left: 5px;
    }

    .mega .col a:hover::before {
      background: var(--magenta);
    }

    /* A menu row that is named but not yet linked. Matches .mega .col a apart from
       the muted colour and the missing hover affordance, so it reads as "listed,
       not ready" instead of as a broken link. Swap the span for an <a> to enable it. */
    .mega .col .mm-soon {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      color: var(--ink-faint);
      font-size: 14.5px;
      padding: 9px 0;
      font-weight: 500;
      cursor: default;
    }

    .mega .col .mm-soon::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--line);
      flex: none;
    }

    /* mega-menu product row: link + data-sheet (client asked for data sheets) */
    .mega .mm-item {
      display: flex;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid var(--line-soft);
      padding: 2px 0;
    }

    .mega .mm-item:last-child {
      border-bottom: 0;
    }

    .mega .mm-item>a:first-child {
      flex: 1;
      border-bottom: 0;
      padding: 9px 0;
    }

    .mega .mm-item .ds,
    .mega .hp-desc .ds {
      flex: none;
      border-bottom: 0;
      padding: 4px 10px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--ink-faint);
      background: var(--surface-2);
      border-radius: 20px;
      white-space: nowrap;
      transition: .14s;
    }

    .mega .hp-desc .ds {
      display: inline-block;
      text-decoration: none;
    }

    .mega .mm-item .ds::before,
    .mega .hp-desc .ds::before {
      content: "\2193";
      margin-right: 5px;
      font-weight: 900;
    }

    .mega .mm-item .ds:hover,
    .mega .hp-desc .ds:hover {
      background: var(--blue);
      color: #fff;
      padding-left: 10px;
    }

    /* ---- Switches: one compact row per product, so the menu keeps its height as
       the catalogue grows. Data sheets and quick guides deliberately are not
       repeated here — they live on each product page and on the Switches listing.
       Adding a product is a single .mm-item row. ---- */
    .mega.switches-menu .mega-grid {
      grid-template-columns: .9fr 1fr 1.15fr .9fr;
    }

    /* price sits flush right on the same line as the product name */
    .mega.switches-menu .mm-price {
      margin-left: auto;
      padding-left: 14px;
      color: var(--ink);
      font-size: 13px;
      font-weight: 750;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .mega.switches-menu .col a:hover .mm-price {
      color: var(--blue);
    }

    /* The list scrolls inside itself rather than pushing the menu past the
       viewport. With ~46px per row this only engages once a category holds a
       dozen or so products, so nothing changes at today's catalogue size. */
    .mega.switches-menu .mm-list {
      max-height: min(56vh, 480px);
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: var(--line) transparent;
    }

    @media (max-width:1120px) {
      .mega.switches-menu .mega-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    /* ---- Home Phone: compact two-section mega menu (images left, copy right) ---- */
    .has-mega.hp {
      position: relative;
    }

    .mega.mega-sm {
      left: 0;
      right: auto;
      width: min(680px, calc(100vw - 40px));
      padding: 24px 26px 20px;
    }

    .hp-grid {
      display: grid;
      grid-template-columns: 136px 1fr;
      gap: 20px 24px;
      align-items: center;
    }

    .hp-grid .mm-thumb {
      padding: 10px;
      background: #fff;
    }

    .hp-grid .mm-thumb img {
      max-height: 78px;
      mix-blend-mode: normal;
    }

    .hp-desc a.hp-title {
      display: block;
      color: var(--ink);
      font-size: 15.5px;
      font-weight: 700;
      line-height: 1.25;
      text-decoration: none;
      transition: color .13s;
    }

    .hp-desc a.hp-title:hover {
      color: var(--blue);
    }

    .hp-desc p {
      margin: 7px 0 11px;
      font-size: 13.5px;
      line-height: 1.5;
      color: var(--ink-soft);
    }

    .mega .hp-all {
      display: block;
      margin-top: 18px;
      padding-top: 14px;
      border-top: 1px solid var(--line-soft);
      color: var(--magenta-ink);
      font-size: 13.5px;
      font-weight: 700;
      text-decoration: none;
      transition: padding-left .13s;
    }

    .mega .hp-all:hover {
      padding-left: 4px;
    }

    /* ---- About Us: compact two-column mega menu ----
       Left is the image slot. Until the client's photo lands it shows the brand
       panel — the same hero gradient and magenta glow used by .mega .promo — so
       the menu reads as finished rather than as a missing asset. Dropping an
       <img> in as the first child of .ab-shot fills the panel; the caption keeps
       its scrim and stays legible. Nothing else has to change. */
    .has-mega.ab {
      position: relative;
    }

    /* centred on its trigger. The base .mega animates with transform, so the
       centring translate has to ride along in both the closed and open state. */
    .mega.mega-sm.ab-menu {
      left: 50%;
      right: auto;
      width: min(524px, calc(100vw - 32px));
      padding: 20px;
      transform: translateX(-50%) translateY(-8px);
    }

    .has-mega.ab:hover .ab-menu,
    .has-mega.ab:focus-within .ab-menu,
    .has-mega.ab.open .ab-menu {
      transform: translateX(-50%);
    }

    .ab-grid {
      display: grid;
      grid-template-columns: 164px 1fr;
      gap: 22px;
      align-items: stretch;
    }

    .ab-shot {
      position: relative;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 198px;
      border-radius: 12px;
      overflow: hidden;
      background: var(--hero-grad);
    }

    /* glow, same device as .mega .promo — keeps the empty slot on-brand */
    .ab-shot::after {
      content: "";
      position: absolute;
      right: -46px;
      top: -46px;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--magenta), transparent 66%);
      opacity: .5;
    }

    .ab-shot img {
      position: absolute;
      inset: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      object-fit: cover;
      mix-blend-mode: normal;
    }

    /* placeholder — dashed ring says "image slot" without looking unfinished */
    .ab-shot .ab-ph {
      position: absolute;
      inset: 10px;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 9px;
      border: 1px dashed rgba(255, 255, 255, .34);
      border-radius: 8px;
      color: rgba(255, 255, 255, .82);
      text-align: center;
    }

    .ab-shot .ab-ph svg {
      width: 26px;
      height: 26px;
      opacity: .85;
    }

    .ab-shot .ab-ph span {
      font-size: 9.5px;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
      opacity: .9;
    }

    /* the photo lands, the placeholder steps aside — no markup surgery needed */
    .ab-shot:has(img) .ab-ph {
      display: none;
    }

    /* the HBE Internet slot holds a logo, not a photograph like the team shot,
       so it is contained and centred rather than cropped edge to edge */
    .hbei .ab-shot img {
      position: static;
      width: auto;
      height: auto;
      max-width: 84%;
      max-height: 66%;
      object-fit: contain;
    }

    /* the Company slot holds a cut-out figure, so she stands the full height of
       the slot instead of being cropped edge to edge */
    .ab-shot img.ab-figure {
      position: static;
      width: auto;
      height: 100%;
      max-width: 96%;
      object-fit: contain;
    }

    /* and she stands on the menu surface itself — no gradient panel, no glow,
       which the HBE Internet slot next door still keeps */
    .ab-shot:has(img.ab-figure) {
      background: none;
    }

    .ab-shot:has(img.ab-figure)::after {
      display: none;
    }

    .ab-links h4 {
      margin: 0 0 3px;
      padding: 0 0 9px;
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--magenta);
      border-bottom: 2px solid color-mix(in srgb, var(--magenta) 22%, transparent);
    }

    .ab-links a {
      position: relative;
      display: block;
      padding: 9px 22px 9px 0;
      border-bottom: 1px solid var(--line-soft);
      text-decoration: none;
      transition: padding-left .14s;
    }

    .ab-links a:last-child {
      border-bottom: 0;
    }

    .ab-links a b {
      display: block;
      font-size: 14.5px;
      font-weight: 650;
      line-height: 1.25;
      color: var(--ink);
      transition: color .14s;
    }

    .ab-links a span {
      display: block;
      margin-top: 1px;
      font-size: 11.5px;
      line-height: 1.45;
      color: var(--ink-faint);
    }

    /* chevron slides in on hover — same restraint as the rest of the nav */
    .ab-links a::after {
      content: "";
      position: absolute;
      right: 7px;
      top: 50%;
      width: 6px;
      height: 6px;
      margin-top: -4px;
      border-top: 1.5px solid var(--magenta);
      border-right: 1.5px solid var(--magenta);
      transform: translateX(-5px) rotate(45deg);
      opacity: 0;
      transition: opacity .14s, transform .14s;
    }

    .ab-links a:hover {
      padding-left: 6px;
    }

    .ab-links a:hover b {
      color: var(--blue);
    }

    .ab-links a:hover::after {
      opacity: 1;
      transform: translateX(0) rotate(45deg);
    }

    @media (prefers-reduced-motion: reduce) {

      .ab-links a,
      .ab-links a::after {
        transition: none;
      }
    }

    @media (max-width:560px) {
      .ab-grid {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .ab-shot {
        min-height: 132px;
      }
    }

    .mega .promo {
      background: var(--hero-grad);
      border-radius: 12px;
      padding: 22px;
      color: #eaf6ff;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
    }

    .mega .promo::after {
      content: "";
      position: absolute;
      right: -30px;
      bottom: -30px;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--magenta), transparent 65%);
      opacity: .4;
    }

    .mega .promo strong {
      font-size: 17px;
      color: #fff;
      display: block;
      margin-bottom: 6px;
      position: relative;
    }

    .mega .promo span {
      font-size: 13px;
      opacity: .9;
      line-height: 1.5;
      position: relative;
    }

    .mega .promo a {
      margin-top: 16px;
      align-self: flex-start;
      background: #fff;
      color: var(--blue-ink);
      text-decoration: none;
      font-weight: 700;
      font-size: 13px;
      padding: 9px 17px;
      border-radius: 30px;
      position: relative;
      transition: transform .12s;
    }

    .mega .promo a:hover {
      transform: translateY(-2px);
    }

    .menu-toggle {
      display: none;
      margin-left: auto;
      background: none;
      border: 1px solid var(--line);
      border-radius: 8px;
      width: 44px;
      height: 40px;
      cursor: pointer;
      align-items: center;
      justify-content: center;
    }

    .menu-toggle svg {
      width: 22px;
      height: 22px;
      color: var(--ink);
    }

    /* below this the ten items can no longer be shown at a legible size, so the
       existing mobile menu takes over (1024 still gets the full nav) */
    @media (max-width:1010px) {

      nav.main,
      .cta-btn.desktop {
        display: none;
      }

      .menu-toggle {
        display: flex;
      }
    }

    /* ============ HERO — Ooma-style light, centered ============ */
    .hero {
      background: var(--bg);
      color: var(--ink);
      overflow: hidden;
    }

    .hero .wrap {
      position: relative;
      display: block;
      text-align: center;
      padding: 56px 26px 0;
      max-width: 1080px;
    }

    .hero .eyebrow {
      display: none;
    }

    .hero h1 {
      font-family: var(--serif);
      font-size: clamp(34px, 5.2vw, 58px);
      margin: 0 auto 10px;
      font-weight: 600;
      color: var(--ink);
      max-width: 18ch;
      line-height: 1.12;
    }

    .hero h1 .voice {
      color: var(--magenta-ink);
      font-style: italic;
    }

    .hero h1 .noise {
      color: var(--blue);
      font-style: italic;
    }

    .hero .sig {
      font-size: clamp(16px, 1.9vw, 19px);
      font-weight: 500;
      margin: 0 auto 10px;
      color: var(--ink-soft);
    }

    .hero .sig em {
      color: var(--ink);
      font-style: normal;
      font-weight: 700;
    }

    .hero p.lead {
      font-size: 16.5px;
      color: var(--ink-soft);
      max-width: 56ch;
      margin: 0 auto 26px;
    }

    /* ===== magazine landing (styled from variation E, Ooma cream coloring) ===== */
    .hero.mag .wrap.mag-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 54px;
      align-items: center;
      text-align: left;
      max-width: var(--maxw);
      padding: 60px 26px 64px;
    }

    .hero.mag h1 {
      margin: 0 0 18px;
      text-align: left;
      max-width: none;
      font-size: clamp(42px, 5.2vw, 72px);
      line-height: 1.04;
      letter-spacing: -.02em;
      font-weight: 700;
      color: var(--ink);
    }

    .hero.mag p.lead {
      margin: 0 0 4px;
      text-align: left;
      font-size: 19.5px;
      max-width: 52ch;
    }

    /* ---- hero proof points (icon rows, replaces the plain bullet list) ---- */
    ul.hero-points {
      margin: 28px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 14px;
      max-width: 56ch;
    }

    ul.hero-points li {
      display: flex;
      align-items: center;
      gap: 15px;
      font-size: 17.5px;
      line-height: 1.35;
      color: var(--ink-soft);
    }

    ul.hero-points b {
      color: var(--ink);
      font-weight: 700;
    }

    .hp-ico {
      flex: none;
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      color: var(--blue);
      background: color-mix(in srgb, var(--blue) 9%, var(--surface));
      border: 1px solid color-mix(in srgb, var(--blue) 20%, transparent);
      box-shadow: var(--shadow-sm);
    }

    /* alternate the two brand accents so the column reads as a rhythm, not a wall */
    ul.hero-points li:nth-child(3) .hp-ico,
    ul.hero-points li:nth-child(6) .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);
    }

    .hp-ico svg {
      width: 21px;
      height: 21px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .mag-art {
      position: relative;
      margin: 0;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: var(--shadow-md);
    }

    .mag-art img {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 440px;
      object-fit: cover;
    }

    .mag-art .cap {
      position: absolute;
      left: 18px;
      bottom: 18px;
      background: rgba(255, 255, 255, .94);
      border-radius: 12px;
      padding: 11px 16px;
      display: flex;
      flex-direction: column;
      line-height: 1.25;
      box-shadow: var(--shadow-sm);
    }

    .mag-art .cap b {
      color: #1d2328;
      font-size: 14px;
    }

    .mag-art .cap span {
      color: #79828a;
      font-size: 12px;
    }

    @media (max-width:900px) {
      .hero.mag .wrap.mag-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 36px 26px 48px;
      }

      ul.hero-points {
        margin-top: 22px;
        gap: 12px;
      }

      ul.hero-points li {
        gap: 12px;
        font-size: 15.5px;
      }

      .hp-ico {
        width: 34px;
        height: 34px;
        border-radius: 10px;
      }

      .hp-ico svg {
        width: 18px;
        height: 18px;
      }

      .mag-art {
        order: -1;
      }

      .mag-art img {
        min-height: 280px;
      }
    }

    /* pill filter tabs (Ooma signature) */
    .hero-tabs {
      display: flex;
      gap: 10px;
      justify-content: center;
      flex-wrap: wrap;
      margin: 0 0 34px;
    }

    .hero-tabs a {
      display: inline-flex;
      align-items: center;
      text-decoration: none;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--ink-soft);
      background: var(--surface);
      border: 1px solid var(--line);
      padding: 11px 20px;
      border-radius: 40px;
      transition: border-color .16s, color .16s, transform .16s, box-shadow .16s;
    }

    .hero-tabs a:hover {
      color: var(--blue);
      border-color: var(--blue);
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm);
    }

    .hero .actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 8px;
    }

    .hero .btn-ghost {
      color: var(--ink);
      border-color: var(--line);
      background: var(--surface);
    }

    .hero .btn-ghost:hover {
      background: var(--surface-2);
      border-color: var(--ink-faint);
    }

    /* twin photo cards under the hero (Ooma signature) */
    .twin-wrap {
      padding-top: 44px;
      padding-bottom: 0;
    }

    .twin {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: var(--shadow-md);
    }

    @media (max-width:760px) {
      .twin {
        grid-template-columns: 1fr;
      }
    }

    .twincard {
      display: flex;
      flex-direction: column;
      text-decoration: none;
      background: var(--surface);
      transition: transform .25s cubic-bezier(.22, .61, .36, 1);
    }

    .twincard:hover {
      transform: translateY(-4px);
    }

    .tw-photo {
      height: 230px;
      display: grid;
      place-items: center;
      position: relative;
      overflow: hidden;
    }

    .tw-biz .tw-photo {
      background: linear-gradient(150deg, #c9453a, #a5342b);
    }

    .tw-res .tw-photo {
      background: linear-gradient(150deg, #4b7f9e, #33607a);
    }

    .tw-photo svg {
      width: 82px;
      height: 82px;
      color: rgba(255, 255, 255, .92);
      transition: transform .35s cubic-bezier(.22, .61, .36, 1);
    }

    .twincard:hover .tw-photo svg {
      transform: scale(1.08);
    }

    .tw-body {
      padding: 26px 30px 30px;
      text-align: center;
    }

    .tw-body h3 {
      font-family: var(--serif);
      font-size: 24px;
      font-weight: 600;
      margin: 0 0 8px;
      color: var(--ink);
    }

    .tw-body p {
      font-size: 14.5px;
      color: var(--ink-soft);
      margin: 0 0 12px;
      max-width: 40ch;
      margin-left: auto;
      margin-right: auto;
    }

    .tw-go {
      font-size: 13.5px;
      font-weight: 750;
      color: var(--blue);
    }

    .tw-res .tw-go {
      color: var(--magenta-ink);
    }

    /* ===== Ooma-style colored promo band ===== */

    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: var(--magenta);
      color: #fff;
      text-decoration: none;
      font-weight: 700;
      padding: 5px 16px;
      border-radius: 44px;
      font-size: 14.5px;
      box-shadow: 0 12px 30px -8px rgba(235, 0, 139, .7);
      transition: transform .12s, background .12s;
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      background: var(--magenta-deep);
    }

    .btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: #fff;
      text-decoration: none;
      font-weight: 600;
      padding: 5px 16px;
      border-radius: 44px;
      font-size: 14.5px;
      border: 1.5px solid rgba(255, 255, 255, .35);
      transition: background .12s, border-color .12s;
    }

    .btn-ghost:hover {
      background: rgba(255, 255, 255, .1);
      border-color: #fff;
    }

    /* "View product" button (variation C style) for phone + hardware cards */
    .viewbtn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      background: var(--blue);
      color: #fff;
      text-decoration: none;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: .01em;
      padding: 11px 22px;
      border-radius: 10px;
      box-shadow: 0 8px 20px -8px var(--blue);
      transition: transform .12s, background .12s, box-shadow .12s;
      border-bottom: 0;
    }

    .viewbtn:hover {
      transform: translateY(-2px);
      background: var(--blue-deep);
      box-shadow: 0 12px 26px -8px var(--blue);
    }

    .prod .links a.viewbtn {
      color: #fff;
      text-decoration: none;
    }

    .prod .links a.viewbtn:hover {
      color: #fff;
      text-decoration: none;
    }

    .btn-primary svg,
    .btn-ghost svg {
      width: 17px;
      height: 17px;
    }

    /* hero visual: speech bubble motif */
    .hero-art {
      position: relative;
      display: grid;
      place-items: center;
      min-height: 300px;
    }

    .hero-art .bubbles {
      width: min(360px, 80%);
      filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .35));
    }

    .hero-art .ring {
      position: absolute;
      border: 1.5px solid rgba(255, 255, 255, .16);
      border-radius: 50%;
    }

    .hero-art .r1 {
      width: 340px;
      height: 340px;
      animation: spin 40s linear infinite;
    }

    .hero-art .r2 {
      width: 440px;
      height: 440px;
      border-style: dashed;
      animation: spin 60s linear infinite reverse;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    @media (prefers-reduced-motion:reduce) {
      .hero-art .ring {
        animation: none;
      }
    }

    @media (max-width:880px) {
      .hero .wrap {
        grid-template-columns: 1fr;
        padding: 56px 26px 60px;
      }

      .hero-art {
        order: -1;
        min-height: 220px;
      }

      .hero-art .bubbles {
        width: 190px;
      }

      .hero-art .r1 {
        width: 240px;
        height: 240px;
      }

      .hero-art .r2 {
        width: 310px;
        height: 310px;
      }
    }

    /* trust strip */
    .trust {
      background: var(--surface);
      border-bottom: 1px solid var(--line);
    }

    .trust .wrap {
      display: flex;
      align-items: center;
      gap: 14px 40px;
      flex-wrap: wrap;
      padding: 20px 26px;
    }

    .trust .lbl {
      font-size: 12px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--ink-faint);
      font-weight: 700;
    }

    .trust .carriers {
      display: flex;
      gap: 26px;
      align-items: center;
      flex-wrap: wrap;
      margin-left: auto;
    }

    .trust .carriers b {
      font-size: 19px;
      font-weight: 800;
      color: var(--ink-soft);
      letter-spacing: -.02em;
    }

    .trust .carriers b.att {
      color: #00a8e0;
    }

    .trust .carriers b.vz {
      color: #ee0000;
    }

    .trust .carriers b.tm {
      color: #e20074;
    }

    @media (prefers-color-scheme:dark) {
      .trust .carriers b.att {
        color: #4fc3ee;
      }

      .trust .carriers b.vz {
        color: #ff5b5b;
      }

      .trust .carriers b.tm {
        color: #ff4fab;
      }
    }

    /* ============ generic section ============ */
    .band {
      padding: 94px 0;
    }

    .band.alt {
      background: var(--surface);
    }

    .sec-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 22px;
      letter-spacing: .11em;
      text-transform: uppercase;
      font-weight: 800;
      color: var(--magenta-ink);
      margin: 0 0 16px;
      background: color-mix(in srgb, var(--magenta) 12%, transparent);
      padding: 6px 14px 6px 12px;
      border-radius: 30px;
    }

    .sec-eyebrow::before {
      content: "";
      width: 7px;
      height: 7px;
      background: var(--magenta);
      border-radius: 50%;
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--magenta) 22%, transparent);
    }

    .band h2 {
      font-size: clamp(28px, 3.6vw, 40px);
      margin: 0 0 16px;
      font-weight: 800;
      color: var(--ink);
    }

    .band h2 em {
      color: var(--magenta-ink);
      font-style: italic;
    }

    .band .intro {
      font-size: 17px;
      color: var(--ink-soft);
      max-width: 60ch;
      margin: 0 0 40px;
    }

    .center {
      text-align: center;
    }

    .center .sec-eyebrow {
      justify-content: center;
    }

    .center .sec-eyebrow::before {
      display: none;
    }

    .center .intro {
      margin-left: auto;
      margin-right: auto;
    }

    /* ===== WHY HBE — everything you need, one provider (variation C content, Ooma coloring) ===== */
    .f3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      max-width: 1080px;
      margin: 0 auto 32px;
    }

    @media (max-width:820px) {
      .f3 {
        grid-template-columns: 1fr;
      }
    }

    .fc {
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 30px 26px;
      box-shadow: var(--shadow-sm);
    }

    .fc .ic {
      width: 52px;
      height: 52px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      background: color-mix(in srgb, var(--blue) 12%, var(--surface));
      color: var(--blue);
      margin-bottom: 16px;
    }

    .fc .ic svg {
      width: 26px;
      height: 26px;
    }

    .fc h3 {
      margin: 0 0 8px;
      font-size: 19px;
      letter-spacing: -.01em;
      color: var(--ink);
    }

    .fc p {
      margin: 0;
      color: var(--ink-soft);
      font-size: 14.5px;
      line-height: 1.6;
    }

    .provstats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      max-width: 1080px;
      margin: 0 auto;
    }

    @media (max-width:820px) {
      .provstats {
        grid-template-columns: 1fr 1fr;
      }
    }

    .provstats .st {
      text-align: center;
      padding: 24px 12px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--bg);
    }

    .provstats .st b {
      display: block;
      font-size: 30px;
      font-weight: 700;
      color: var(--magenta-ink);
      letter-spacing: -.02em;
      font-family: var(--serif);
      line-height: 1;
    }

    .provstats .st span {
      display: block;
      margin-top: 8px;
      font-size: 12.5px;
      color: var(--ink-faint);
      letter-spacing: .02em;
    }

    /* ===== SOLUTIONS 2×2 (Ooma-style) ===== */
    .solgrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    @media (max-width:760px) {
      .solgrid {
        grid-template-columns: 1fr;
      }
    }

    .solcard {
      display: flex;
      gap: 22px;
      align-items: flex-start;
      text-decoration: none;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 30px 30px;
      box-shadow: var(--shadow-sm);
      position: relative;
      overflow: hidden;
      transition: transform .22s cubic-bezier(.22, .61, .36, 1), box-shadow .22s, border-color .22s;
    }

    .solgrid-band {
      background: var(--surface);
    }

    .solgrid-band .solcard {
      background: var(--bg);
    }

    .solcard::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: var(--blue);
      opacity: 0;
      transition: opacity .2s;
    }

    .solcard:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-md);
      border-color: color-mix(in srgb, var(--blue) 35%, var(--line));
    }

    .solcard:hover::before {
      opacity: 1;
    }

    .sc-res::before {
      background: var(--magenta);
    }

    .sc-5g::before {
      background: var(--blue);
    }

    .sc-net::before {
      background: var(--ink-soft);
    }

    .sc-icon {
      flex: none;
      width: 56px;
      height: 56px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: color-mix(in srgb, var(--blue) 12%, transparent);
      color: var(--blue);
    }

    .sc-icon svg {
      width: 28px;
      height: 28px;
    }

    .sc-res .sc-icon {
      background: color-mix(in srgb, var(--magenta) 12%, transparent);
      color: var(--magenta-ink);
    }

    .sc-body {
      flex: 1;
    }

    .sc-k {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--blue);
    }

    .sc-res .sc-k {
      color: var(--magenta-ink);
    }

    .sc-new {
      font-style: normal;
      font-size: 9px;
      color: #fff;
      background: var(--magenta);
      padding: 2px 6px;
      border-radius: 20px;
      letter-spacing: .04em;
    }

    .sc-body h3 {
      font-size: 19px;
      margin: 8px 0 8px;
      color: var(--ink);
      font-weight: 750;
    }

    .sc-body p {
      font-size: 14.5px;
      color: var(--ink-soft);
      margin: 0 0 14px;
    }

    .sc-go {
      font-size: 14px;
      font-weight: 750;
      color: var(--blue);
      transition: letter-spacing .15s;
    }

    .sc-res .sc-go {
      color: var(--magenta-ink);
    }

    .solcard:hover .sc-go {
      letter-spacing: .02em;
    }

    /* ===== TESTIMONIALS ===== */
    /* Ooma layout: heading column left, review cards right */

    /* ===== PAIN → SOLUTION transformation ledger ===== */
    .switch {
      position: relative;
      overflow: hidden;
    }

    /* attention-grabbing tinted glow behind the section */
    .switch::before {
      content: "";
      position: absolute;
      top: -120px;
      left: 50%;
      transform: translateX(-50%);
      width: 680px;
      height: 340px;
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
      background: radial-gradient(closest-side, color-mix(in srgb, var(--magenta) 22%, transparent), transparent 72%);
      opacity: .5;
    }

    .switch .wrap {
      position: relative;
      z-index: 1;
    }

    .switch-head {
      text-align: center;
      margin-bottom: 34px;
    }

    .switch-head .sec-eyebrow {
      justify-content: center;
    }

    .switch-head .sec-eyebrow::before {
      display: none;
    }

    .switch-title {
      font-size: clamp(26px, 3vw, 36px);
      margin: 0 auto 12px;
      font-weight: 800;
      letter-spacing: -.02em;
    }

    /* "Your pain points" is the focal phrase — highlighted */
    .switch-title .focus {
      position: relative;
      color: var(--magenta-ink);
      white-space: nowrap;
    }

    .switch-title .focus::after {
      content: "";
      position: absolute;
      left: -4px;
      right: -4px;
      bottom: 2px;
      height: 38%;
      z-index: -1;
      background: color-mix(in srgb, var(--magenta) 22%, transparent);
      border-radius: 4px;
    }

    .switch-sub {
      font-size: clamp(15px, 1.7vw, 18px);
      color: var(--ink-soft);
      margin: 0 auto 22px;
      max-width: 52ch;
      font-weight: 500;
    }

    .switch-sub em {
      color: var(--magenta-ink);
      font-style: italic;
      font-weight: 700;
    }

    .switch-sub .muted {
      color: var(--ink-faint);
    }

    .switch-legend {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .switch-legend .lg {
      padding: 6px 14px;
      border-radius: 30px;
    }

    .switch-legend .lg-pain {
      background: color-mix(in srgb, var(--warn) 14%, transparent);
      color: var(--warn);
    }

    .switch-legend .lg-sol {
      background: color-mix(in srgb, var(--good) 15%, transparent);
      color: var(--good);
      text-transform: none;
      letter-spacing: 0;
    }

    .switch-legend .lg-sol .brandface {
      color: var(--good);
    }

    .switch-legend .lg-arrow {
      width: 38px;
      color: var(--magenta);
    }

    .ledger {
      max-width: 920px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .trade {
      display: grid;
      grid-template-columns: 1fr 54px 1fr;
      align-items: stretch;
      gap: 0;
      border: 1px solid var(--line);
      border-radius: 16px;
      overflow: hidden;
      background: var(--surface);
      box-shadow: var(--shadow-sm);
      transition: transform .22s cubic-bezier(.22, .61, .36, 1), box-shadow .22s;
    }

    .band.alt .trade {
      background: var(--bg);
    }

    .trade:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-md);
    }

    .trade .from,
    .trade .to {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 18px 22px;
      font-size: 15.5px;
    }

    .trade .from {
      background: color-mix(in srgb, var(--warn) 5%, transparent);
      color: var(--ink-faint);
    }

    .trade .from span {
      text-decoration: line-through;
      text-decoration-color: color-mix(in srgb, var(--warn) 55%, transparent);
      text-decoration-thickness: 1.5px;
    }

    .trade .from b {
      color: var(--warn-ink);
      font-weight: 600;
    }

    .trade .from svg {
      width: 20px;
      height: 20px;
      color: var(--warn);
      flex: none;
      opacity: .85;
    }

    .trade .to {
      color: var(--ink);
      font-weight: 500;
    }

    .trade .to b {
      color: var(--good-ink);
      font-weight: 750;
    }

    .trade .to svg {
      width: 20px;
      height: 20px;
      color: var(--good);
      flex: none;
    }

    .trade .pivot {
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--hero-grad);
    }

    .trade .pivot svg {
      width: 22px;
      height: 22px;
      color: #fff;
      transition: transform .25s;
    }

    .trade:hover .pivot svg {
      transform: translateX(3px);
    }

    .switch-foot {
      max-width: 920px;
      margin: 26px auto 0;
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 18px 24px;
      border-radius: 16px;
      background: var(--surface-2);
      border: 1px dashed var(--line);
    }

    .switch-foot svg {
      flex: none;
    }

    .switch-foot span {
      font-size: 15px;
      color: var(--ink-soft);
    }

    .switch-foot b {
      color: var(--ink);
      font-weight: 750;
    }

    @media (max-width:720px) {
      .trade {
        grid-template-columns: 1fr;
      }

      .trade .pivot {
        padding: 8px 0;
      }

      .trade .pivot svg {
        transform: rotate(90deg);
      }

      .trade:hover .pivot svg {
        transform: rotate(90deg) translateX(3px);
      }

      .trade .from span {
        text-decoration-color: color-mix(in srgb, var(--warn) 55%, transparent);
      }

      .switch-foot {
        flex-direction: column;
        text-align: center;
        gap: 10px;
      }
    }

    /* ===== design-option label (comparison scaffolding) ===== */
    .opt-label {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      color: var(--ink-faint);
      font-weight: 600;
      margin: 0 auto 18px;
      padding: 7px 16px;
      border: 1px dashed var(--line);
      border-radius: 30px;
      background: var(--surface);
    }

    .opt-label span {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: #fff;
      background: var(--blue);
      padding: 3px 9px;
      border-radius: 20px;
    }

    .optvar {
      text-align: center;
    }

    .optvar .switch-head {
      margin-bottom: 30px;
    }

    .optvar .ledger,
    .optvar .flipgrid,
    .optvar .splitpanel {
      text-align: left;
    }

    /* ===== PAIN POINTS — folded-corner flip cards (flip on hover; tap on touch) ===== */
    .flipgrid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      max-width: 1080px;
      margin: 0 auto;
    }

    @media (max-width:900px) {
      .flipgrid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width:520px) {
      .flipgrid {
        grid-template-columns: 1fr;
      }
    }

    .flip {
      perspective: 1400px;
      cursor: pointer;
    }

    .flip-in {
      position: relative;
      display: grid;
      transition: transform .62s cubic-bezier(.3, .7, .3, 1);
      transform-style: preserve-3d;
    }

    .flip.flipped .flip-in {
      transform: rotateY(180deg);
    }

    @media (hover:hover) and (pointer:fine) {

      .flip:hover .flip-in,
      .flip:focus-visible .flip-in {
        transform: rotateY(180deg);
      }
    }

    .flip-front,
    .flip-back {
      grid-area: 1/1;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      border-radius: 16px;
      padding: 20px 22px;
      min-height: 150px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 8px;
      box-shadow: var(--shadow-sm);
      overflow: hidden;
    }

    .flip-front svg,
    .flip-back svg {
      width: 30px;
      height: 30px;
    }

    .flip-front b,
    .flip-back b {
      font-size: 17px;
      line-height: 1.25;
    }

    .flip-front span,
    .flip-back span {
      font-size: 13.5px;
    }

    /* front = mid blush rose (same gradient on all four cards) */
    .flip-front {
      background: linear-gradient(150deg, #fef2f8 0%, #f9d3e6 34%, #f0b0cf 68%, #e58ab6 100%);
      border: 1px solid #e187b3;
      color: #7a4a3d;
    }

    .flip-front svg {
      color: #c0563a;
    }

    .flip-front b {
      color: #a23c22;
    }

    .flip-front span {
      opacity: .86;
    }

    @media (prefers-color-scheme:dark) {
      .flip-front {
        background: linear-gradient(150deg, #3b2430 0%, #341f2a 55%, #2c1a24 100%);
        border-color: #54313f;
        color: #e7c3b8;
      }

      .flip-front b {
        color: #f0a68c;
      }

      .flip-front svg {
        color: #e0805f;
      }
    }

    :root[data-theme="dark"] .flip-front {
      background: linear-gradient(150deg, #3b2430 0%, #341f2a 55%, #2c1a24 100%);
      border-color: #54313f;
      color: #e7c3b8;
    }

    :root[data-theme="dark"] .flip-front b {
      color: #f0a68c;
    }

    :root[data-theme="dark"] .flip-front svg {
      color: #e0805f;
    }

    /* magenta folded corner — signals "more on the back" */
    .flip-front .fold {
      position: absolute;
      top: 0;
      right: 0;
      width: 0;
      height: 0;
      border-left: 42px solid transparent;
      border-top: 42px solid var(--magenta-deep);
      filter: drop-shadow(-2px 2px 2px rgba(0, 0, 0, .14));
    }

    .flip-front .fold::after {
      content: "⤶";
      position: absolute;
      top: -39px;
      right: 3px;
      color: #fff;
      font-size: 16px;
      font-weight: 900;
      line-height: 1;
    }

    /* back = blue gradient */
    .flip-back {
      transform: rotateY(180deg);
      background: var(--hero-grad);
      color: #eaf6ff;
      border: 1px solid transparent;
    }

    .flip-back svg {
      color: #8fe0ff;
    }

    .flip-back b {
      color: #fff;
    }

    .flip-back span {
      color: #cfe6f4;
    }

    @media (prefers-reduced-motion:reduce) {
      .flip-in {
        transition: none;
      }

      .flip {
        min-height: auto;
      }

      .flip-in {
        min-height: auto;
      }

      .flip-front,
      .flip-back {
        grid-area: auto;
        backface-visibility: visible;
        transform: none;
      }

      .flip-back {
        margin-top: 12px;
      }
    }

    /* ===== OPTION C — split panel ===== */
    .splitpanel {
      display: grid;
      grid-template-columns: 1fr 64px 1fr;
      align-items: stretch;
      max-width: 960px;
      margin: 0 auto;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: var(--shadow-md);
      border: 1px solid var(--line);
    }

    .sp-pain,
    .sp-sol {
      padding: 34px 32px;
    }

    .sp-pain {
      background: linear-gradient(160deg, #26333c, #1a252d);
      color: #c6d2da;
    }

    :root[data-theme="light"] .sp-pain {
      background: linear-gradient(160deg, #2b3941, #1c272f);
    }

    .sp-sol {
      background: var(--hero-grad);
      color: #eaf6ff;
    }

    .sp-tag {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      margin: 0 0 18px;
    }

    .sp-pain .sp-tag {
      color: #ff9d78;
    }

    .sp-sol .sp-tag {
      color: #8fe0ff;
      text-transform: none;
      letter-spacing: 0;
      font-size: 14px;
    }

    .sp-sol .sp-tag .brandface {
      color: #fff;
    }

    .splitpanel ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .splitpanel li {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 13px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .1);
      font-size: 15.5px;
    }

    .splitpanel li:last-child {
      border-bottom: 0;
    }

    .splitpanel li svg {
      width: 20px;
      height: 20px;
      flex: none;
    }

    .sp-pain li {
      color: #aab8c1;
    }

    .sp-pain li svg {
      color: #ff9d78;
    }

    .sp-sol li {
      color: #fff;
      font-weight: 500;
    }

    .sp-sol li svg {
      color: #8fe0ff;
    }

    .sp-mid {
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--magenta);
    }

    .sp-mid svg {
      width: 26px;
      height: 26px;
      color: #fff;
    }

    @media (max-width:720px) {
      .splitpanel {
        grid-template-columns: 1fr;
      }

      .sp-mid {
        padding: 10px 0;
      }

      .sp-mid svg {
        transform: rotate(90deg);
      }
    }

    /* business / residential split */

    /* ===== SOFT PHONE — two alternating blocks (variation C style) ===== */
    .soft2 .s2row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: center;
      margin-bottom: 56px;
    }

    .soft2 .s2row:last-child {
      margin-bottom: 0;
    }

    .soft2 .s2row.rev .s2txt {
      order: 2;
    }

    @media (max-width:820px) {
      .soft2 .s2row {
        grid-template-columns: 1fr;
        gap: 26px;
      }

      .soft2 .s2row.rev .s2txt {
        order: 0;
      }
    }

    .s2k {
      display: inline-block;
      font-size: 21px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--magenta-ink);
      margin-bottom: 12px;
    }

    .soft2 .s2txt h3 {
      font-size: clamp(22px, 2.4vw, 28px);
      margin: 0 0 12px;
      letter-spacing: -.02em;
      color: var(--ink);
    }

    .soft2 .s2txt>p {
      color: var(--ink-soft);
      font-size: 19px;
      margin: 0 0 18px;
      line-height: 1.6;
    }

    .s2list {
      list-style: none;
      padding: 0;
      margin: 0 0 22px;
      display: flex;
      flex-direction: column;
      gap: 11px;
    }

    .s2list li {
      position: relative;
      padding-left: 30px;
      font-size: 14.5px;
      color: var(--ink);
    }

    .s2list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 1px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: color-mix(in srgb, var(--good) 20%, transparent);
    }

    .s2list li::after {
      content: "";
      position: absolute;
      left: 6px;
      top: 7px;
      width: 8px;
      height: 5px;
      border-left: 2px solid var(--good-ink);
      border-bottom: 2px solid var(--good-ink);
      transform: rotate(-45deg);
    }

    .s2media {
      margin: 0;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: var(--shadow-md);
      background: var(--surface-2);
      min-height: 280px;
    }

    .s2media img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* feature rows (softphone / mobile) */
    .frow {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: center;
    }

    .frow+.frow {
      margin-top: 64px;
    }

    .frow.rev .txt {
      order: 2;
    }

    .frow .txt h3 {
      font-size: 24px;
      margin: 0 0 14px;
      font-weight: 800;
      color: var(--blue);
    }

    .frow .feat {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .frow .feat li {
      position: relative;
      padding: 9px 0 9px 30px;
      font-size: 15.5px;
      color: var(--ink-soft);
    }

    .frow .feat li svg {
      position: absolute;
      left: 0;
      top: 11px;
      width: 19px;
      height: 19px;
      color: var(--magenta);
    }

    .device {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 20px;
      box-shadow: var(--shadow-md);
      padding: 22px;
      position: relative;
      overflow: hidden;
    }

    .band.alt .device {
      background: var(--bg);
    }

    .device .chip {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 2;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--blue);
      background: color-mix(in srgb, var(--blue) 14%, var(--surface));
      padding: 4px 10px;
      border-radius: 20px;
      box-shadow: var(--shadow-sm);
    }

    /* real screenshot devices */
    .device.shot {
      padding: 14px;
      display: flex;
    }

    .device.shot img {
      width: 100%;
      height: auto;
      border-radius: 12px;
      display: block;
      box-shadow: 0 8px 24px rgba(15, 45, 65, .14);
    }

    .device.mobileshot {
      background: linear-gradient(160deg, color-mix(in srgb, var(--blue) 10%, var(--surface)), var(--surface));
      justify-content: center;
    }

    .device.mobileshot img {
      max-width: 320px;
      box-shadow: none;
    }

    /* ===== MOBILE — composed bento ===== */
    .mobile {
      background: var(--hero-grad);
      color: #eef7fd;
      padding: 84px 0;
    }

    .mobile-head {
      max-width: 64ch;
      margin: 0 0 44px;
    }

    .mobile-head h2 {
      font-size: clamp(28px, 3.6vw, 42px);
      margin: 0 0 14px;
      font-weight: 800;
      color: #fff;
    }

    .mobile-head h2 em {
      color: #ff5cae;
      font-style: italic;
    }

    .bento {
      display: grid;
      grid-template-columns: 1.5fr 1fr;
      grid-template-rows: auto auto;
      gap: 22px;
    }

    .cell {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .12);
    }

    /* hero cell: image with gradient scrim + overlaid copy */
    .cell-hero {
      grid-row: span 2;
      display: flex;
      align-items: flex-end;
      min-height: 420px;
    }

    .cell-hero img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      transition: transform .8s cubic-bezier(.22, .61, .36, 1);
    }

    .cell-hero:hover img {
      transform: scale(1.05);
    }

    .cell-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(7, 41, 60, .05) 30%, rgba(7, 41, 60, .92) 92%);
    }

    .cell-hero-body {
      position: relative;
      z-index: 1;
      padding: 32px;
    }

    .cell-hero-body h3 {
      font-size: 26px;
      margin: 8px 0 10px;
      color: #fff;
      font-weight: 800;
    }

    .cell-hero-body p {
      margin: 0;
      color: #dbeefb;
      font-size: 15.5px;
      max-width: 44ch;
    }

    .tagnum {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: #0a3d5a;
      background: #8fe0ff;
      padding: 4px 12px;
      border-radius: 20px;
    }

    /* device cell */
    .cell-device {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: linear-gradient(150deg, rgba(143, 224, 255, .16), rgba(235, 0, 139, .14));
      min-height: 200px;
    }

    .cell-device img {
      max-width: 170px;
      height: auto;
      border-radius: 14px;
      filter: drop-shadow(0 16px 34px rgba(0, 0, 0, .4));
      transform: rotate(-3deg);
      transition: transform .3s;
    }

    .cell-device:hover img {
      transform: rotate(0);
    }

    .cell-device .chip {
      position: absolute;
      top: 16px;
      left: 16px;
      z-index: 2;
      background: #fff;
      color: var(--blue);
      box-shadow: var(--shadow-sm);
    }

    /* specs cell */
    .cell-specs {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0;
      padding: 6px 26px;
    }

    .cell-specs .spec {
      padding: 16px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .14);
    }

    .cell-specs .spec:last-child {
      border-bottom: 0;
    }

    .cell-specs .k {
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #8fe0ff;
      font-weight: 700;
    }

    .cell-specs .spec b {
      display: block;
      font-size: 19px;
      color: #fff;
      margin: 3px 0 2px;
    }

    .cell-specs .spec small {
      color: #b9d4e6;
      font-size: 13px;
    }

    /* team cell — wide closing strip */
    .cell-team {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      align-items: stretch;
      min-height: 300px;
    }

    .cell-team {
      overflow: hidden;
    }

    .cell-team img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      transition: transform .8s cubic-bezier(.22, .61, .36, 1);
    }

    .cell-team:hover img {
      transform: scale(1.05);
    }

    .cell-team-body {
      padding: 38px 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 14px;
    }

    .cell-team-body h3 {
      font-size: 26px;
      margin: 0;
      color: #fff;
      font-weight: 800;
    }

    .cell-team-body h3 em {
      color: #ff5cae;
      font-style: italic;
    }

    .cell-team-body p {
      margin: 0;
      color: #cfe6f4;
      font-size: 15.5px;
      max-width: 52ch;
    }

    .cell-team-body .btn-ghost {
      align-self: flex-start;
      margin-top: 6px;
    }

    @media (max-width:860px) {
      .bento {
        grid-template-columns: 1fr;
      }

      .cell-hero {
        grid-row: auto;
        min-height: 360px;
      }

      .cell-team {
        grid-column: auto;
        grid-template-columns: 1fr;
      }

      .cell-team img {
        max-height: 240px;
      }
    }

    /* ===== SOFTPHONE / DESKTOP — composed showcase ===== */
    .soft-head {
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      gap: 36px;
      align-items: end;
      margin-bottom: 30px;
    }

    .soft-head h2 {
      font-size: clamp(26px, 3.4vw, 38px);
      margin: 0;
      font-weight: 800;
    }

    @media (max-width:820px) {
      .soft-head {
        grid-template-columns: 1fr;
        gap: 14px;
      }
    }

    .soft-banner {
      margin: 0 0 26px;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: var(--shadow-md);
      line-height: 0;
    }

    .soft-banner img {
      width: 100%;
      height: auto;
      display: block;
    }

    .soft-stage {
      display: grid;
      grid-template-columns: 1.55fr 1fr;
      gap: 26px;
      align-items: stretch;
    }

    .soft-screen {
      position: relative;
      background: var(--surface-2);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 20px;
      box-shadow: var(--shadow-sm);
    }

    .soft-screen>img {
      width: 100%;
      height: auto;
      border-radius: 12px;
      display: block;
      box-shadow: 0 10px 30px rgba(15, 45, 65, .16);
    }

    .soft-screen .chip {
      position: absolute;
      top: 14px;
      left: 14px;
      z-index: 3;
      background: #fff;
      color: var(--blue);
      box-shadow: var(--shadow-sm);
    }

    .soft-inset {
      position: absolute;
      right: -14px;
      bottom: -18px;
      width: 46%;
      margin: 0;
      border-radius: 12px;
      overflow: hidden;
      border: 4px solid var(--surface);
      box-shadow: 0 14px 34px rgba(15, 45, 65, .28);
      line-height: 0;
    }

    .soft-inset img {
      width: 100%;
      height: auto;
      display: block;
    }

    .soft-rail {
      display: flex;
      flex-direction: column;
      gap: 14px;
      justify-content: center;
    }

    .statbox {
      background: var(--surface);
      border: 1px solid var(--line);
      border-left: 3px solid var(--magenta);
      border-radius: 12px;
      padding: 16px 18px;
      box-shadow: var(--shadow-sm);
      transition: transform .2s cubic-bezier(.22, .61, .36, 1), box-shadow .2s, border-left-width .2s;
    }

    .statbox:hover {
      transform: translateX(5px);
      box-shadow: var(--shadow-md);
      border-left-width: 6px;
    }

    .statbox b {
      display: block;
      font-size: 20px;
      color: var(--blue);
      font-weight: 800;
      letter-spacing: -.01em;
    }

    .statbox span {
      font-size: 14px;
      color: var(--ink-soft);
      display: block;
      margin-top: 3px;
    }

    .soft-rail .btn-primary {
      margin-top: 4px;
    }

    @media (max-width:820px) {
      .soft-stage {
        grid-template-columns: 1fr;
      }

      .soft-inset {
        width: 44%;
        right: 8px;
        bottom: -14px;
      }
    }

    /* softphone gallery strip */
    .spgallery {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
      margin-top: 52px;
    }

    .spgallery figure {
      margin: 0;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--r);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
    }

    .band.alt .spgallery figure {
      background: var(--bg);
    }

    .spgallery img {
      width: 100%;
      height: auto;
      display: block;
    }

    .spgallery figcaption {
      padding: 12px 18px;
      font-size: 13.5px;
      color: var(--ink-soft);
      border-top: 1px solid var(--line-soft);
    }

    .spgallery figcaption b {
      color: var(--ink);
    }

    @media (max-width:720px) {
      .spgallery {
        grid-template-columns: 1fr;
      }
    }

    /* product real images */
    .prod .ph {
      padding: 18px;
    }

    .prod .ph img {
      max-width: 100%;
      max-height: 134px;
      width: auto;
      object-fit: contain;
      mix-blend-mode: multiply;
    }

    @media (prefers-color-scheme:dark) {
      .prod .ph img {
        mix-blend-mode: normal;
        border-radius: 8px;
      }

      .prod .ph {
        background: #fff;
      }
    }

    :root[data-theme="dark"] .prod .ph {
      background: #fff;
    }

    :root[data-theme="dark"] .prod .ph img {
      mix-blend-mode: normal;
    }

    :root[data-theme="light"] .prod .ph img {
      mix-blend-mode: multiply;
    }

    :root[data-theme="light"] .prod .ph {
      background: linear-gradient(135deg, #eef5fd, #dfeafb);
    }

    /* carrier strip image */
    .trust .carrier-img {
      height: 34px;
      width: auto;
      margin-left: auto;
      border-radius: 6px;
      background: #fff;
      padding: 3px 8px;
    }

    /* faux softphone UI */
    .sp {
      display: grid;
      grid-template-columns: 64px 1fr;
      gap: 0;
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid var(--line);
      background: var(--surface);
    }

    .band.alt .sp {
      background: var(--bg);
    }

    .sp .rail {
      background: var(--hero-grad);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      padding: 16px 0;
      color: rgba(255, 255, 255, .85);
    }

    .sp .rail svg {
      width: 20px;
      height: 20px;
    }

    .sp .rail .on {
      color: #fff;
    }

    .sp .body {
      padding: 16px 18px;
    }

    .sp .caller {
      display: flex;
      align-items: center;
      gap: 11px;
      margin-bottom: 14px;
    }

    .sp .av {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--magenta), var(--blue));
      display: grid;
      place-items: center;
      color: #fff;
      font-weight: 700;
      font-size: 15px;
    }

    .sp .caller b {
      display: block;
      font-size: 15px;
    }

    .sp .caller span {
      font-size: 12.5px;
      color: var(--ink-faint);
    }

    .sp .caller .live {
      margin-left: auto;
      font-size: 11px;
      font-weight: 700;
      color: var(--good);
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .sp .caller .live::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--good);
      animation: pulse 1.6s infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: .3;
      }
    }

    @media (prefers-reduced-motion:reduce) {
      .sp .caller .live::before {
        animation: none;
      }
    }

    .keypad {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin: 4px 0 14px;
    }

    .keypad div {
      background: var(--surface-2);
      border-radius: 9px;
      text-align: center;
      padding: 9px 0;
      font-weight: 600;
      font-size: 15px;
      color: var(--ink);
    }

    .keypad div small {
      display: block;
      font-size: 8px;
      color: var(--ink-faint);
      letter-spacing: .1em;
    }

    .callbar {
      display: flex;
      gap: 10px;
      justify-content: center;
    }

    .callbar .k {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: grid;
      place-items: center;
    }

    .callbar .k svg {
      width: 19px;
      height: 19px;
      color: #fff;
    }

    .callbar .k.g {
      background: var(--good);
    }

    .callbar .k.r {
      background: #e0463a;
    }

    .callbar .k.n {
      background: var(--ink-faint);
    }

    @media (max-width:820px) {
      .frow {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .frow.rev .txt {
        order: 0;
      }
    }

    /* 5G carriers band */
    .fiveg {
      background: var(--hero-grad);
      color: #eef7fd;
      padding: 80px 0;
    }

    .fiveg .sec-eyebrow {
      color: #bdefff;
      background: rgba(143, 224, 255, .16);
    }

    .fiveg .sec-eyebrow::before {
      background: #8fe0ff;
      box-shadow: 0 0 0 3px rgba(143, 224, 255, .25);
    }

    .sec-eyebrow.eb-dark {
      color: #bdefff;
      background: rgba(143, 224, 255, .16);
    }

    .sec-eyebrow.eb-dark::before {
      background: #8fe0ff;
      box-shadow: 0 0 0 3px rgba(143, 224, 255, .25);
    }

    .fiveg h2 {
      color: #fff;
      font-size: 25px;
    }

    .fiveg h2 em {
      color: #ff5cae;
    }

    .fiveg .intro {
      color: #cfe6f4;
    }

    .carrier-band {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 32px;
      flex-wrap: wrap;
      background: #fdf7e1;
      border-radius: 16px;
      padding: 20px 34px;
      margin: 0 auto 24px;
      max-width: 780px;
      box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
    }

    .carrier-band .cb-label {
      flex: 0 1 auto;
      max-width: 430px;
      min-width: 0;
      margin: 0;
      text-align: left;
      text-wrap: balance;
      color: #0a3d5a;
    }

    .carrier-band .cb-lead {
      display: block;
      font-size: 22px;
      line-height: 1.28;
      font-weight: 800;
      letter-spacing: .005em;
    }

    .carrier-band .cb-sub {
      display: block;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(10, 61, 90, .18);
      font-size: 16px;
      line-height: 1.45;
      font-weight: 600;
      color: #2d5f7c;
    }

    /* The three carrier credential marks, stacked. Order follows the copy:
       the two licensed partners, then T-Mobile, who is named but never called
       a partner. All three are set to the 40px the footer row uses, so the
       mark renders exactly as designed rather than at a second scale. */
    .carrier-band .cb-marks {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      flex: 0 0 auto;
    }

    /* ---------- carrier credential plate ----------
       The AT&T badge is a fixed raster — its frame, tile, padding and type are
       all baked in and cannot be restyled — so it sets the pattern and the
       other two are rebuilt to it. Measured off the artwork: a square brand
       tile occupying the left 26% of the plate, then three text rows in a
       small-lead / bold-name / fine-italic-qualifier hierarchy. The plate
       carries the badge's own 4:1 ratio, so AT&T fills it edge to edge with no
       letterboxing and no second frame drawn around a mark that has one.
       The lockup itself is unscoped: the 5G band and the footer carrier row
       both build their marks from it, so the two rows cannot drift apart. */
    .carrier-band .cb-marks {
      width: 160px;
    }

    .carrier-band .cb-mark {
      height: 40px;
    }

    .carrier-band .cb-mark img {
      display: block;
      width: 100%;
      height: 100%;
    }

    /* AT&T's frame lives in its raster; these two get the CSS equivalent —
       the badge's 8px-on-200px edge and 28px corner, scaled to this plate. */
    .cb-cred {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: stretch;
      width: 160px;
      height: 40px;
      background: #fff;
      border: 1.5px solid #e6e0d6;
      border-radius: 6px;
      overflow: hidden;
    }

    /* square-ish and 26% of the plate, the proportion the AT&T globe block
       occupies in its own artwork, so the three text columns start level */
    .cb-sig {
      display: grid;
      place-items: center;
      width: 41px;
      color: #fff;
    }

    /* the official glow V is red-on-transparent, so it cannot sit on the red
       tile the recreated white V used. It gets a warm off-white instead —
       light enough for the mark to read, but still a filled block with a hard
       edge against the text panel, which is the structure AT&T's own raster
       and the T-Mobile tile both use. Without it the V floated on the plate
       and the lockup read as one undivided block. */
    .cb-sig-vzn {
      background: #f6f2ec;
      border-right: 1.5px solid #e6e0d6;
    }

    .cb-sig-tmo {
      background: linear-gradient(158deg, #0b4368 0%, #07304a 55%, #04222f 100%);
    }

    .cb-sig svg {
      display: block;
      height: 26px;
      width: auto;
    }

    /* the V is a solid mass where the globe and the tower are open forms, so
       it is set smaller to carry the same weight in its tile. The official
       file carries a 15.7% clear-space band on all four sides, so the box runs
       larger than the mark. 30px lands the V itself at ~21px — a shade up on
       the 18px the old silhouette used, because that one was solid white on
       saturated red and this one is red on the plate's own white, which
       carries less weight at the same size. */
    .cb-sig img {
      display: block;
      height: 30px;
      width: auto;
    }

    .cb-txt {
      display: grid;
      align-content: center;
      gap: 1px;
      padding: 0 8px;
    }

    .cb-c1 {
      font-size: 8px;
      font-weight: 600;
      line-height: 1.2;
      color: #79828a;
    }

    .cb-c2 {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: -.02em;
      line-height: 1.1;
      white-space: nowrap;
      color: #1d2328;
    }

    /* required beside the carrier name, but must not compete with it */
    .cb-c2 .reg {
      font-size: .5em;
      font-weight: 700;
      letter-spacing: 0;
      vertical-align: .62em;
    }

    .cb-c3 {
      font-size: 6.5px;
      font-style: italic;
      line-height: 1.2;
      white-space: nowrap;
      color: #4d565e;
    }

    /* ---------- hero variant ----------
       On a carrier page the mark is a page-level statement, so it runs at the
       size the AT&T badge beside it uses: that badge is clamped to 46px, which
       is 184px on its 4:1 box. Everything inside steps up by the same 1.15 so
       the lockup scales rather than just stretching. */
    .carrier-mark .cb-cred {
      width: 184px;
      height: 46px;
    }

    .carrier-mark .cb-sig {
      width: 47px;
    }

    .carrier-mark .cb-sig svg {
      height: 30px;
    }

    .carrier-mark .cb-txt {
      padding: 0 9px;
    }

    .carrier-mark .cb-c1 {
      font-size: 9px;
    }

    .carrier-mark .cb-c2 {
      font-size: 12.5px;
    }

    .carrier-mark .cb-c3 {
      font-size: 7.5px;
    }
    @media (max-width:760px) {
      .carrier-band {
        flex-direction: column;
        gap: 16px;
        padding: 20px 24px;
      }

      .carrier-band .cb-label {
        flex: 0 1 auto;
        text-align: center;
      }

      .carrier-band .cb-lead {
        font-size: 20px;
      }

      .carrier-band .cb-marks {
        gap: 7px;
      }
    }

    .fiveg .grid5 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 14px;
    }

    .fiveg .cell {
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: var(--r);
      padding: 24px;
    }

    .fiveg .cell b {
      display: block;
      font-size: 16px;
      color: #fff;
      margin-bottom: 8px;
    }

    .fiveg .cell span {
      font-size: 14.5px;
      color: #cfe6f4;
    }

    .fiveg .cell .num {
      font-size: 13px;
      font-weight: 800;
      color: #ff8fc9;
      letter-spacing: .1em;
    }

    @media (max-width:760px) {
      .fiveg .grid5 {
        grid-template-columns: 1fr;
      }
    }

    /* nav "New" badge */
    .nav-badge {
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: #fff;
      background: var(--magenta);
      padding: 2px 6px;
      border-radius: 20px;
      margin-left: -2px;
      vertical-align: middle;
    }

    /* ===== 5G PRODUCTS showcase ===== */
    .g5cta {
      color: var(--blue);
      font-weight: 750;
      font-size: 14.5px;
      text-decoration: none;
    }

    .g5cta:hover {
      text-decoration: underline;
    }

    .g5sheet {
      color: var(--ink-faint);
      font-weight: 600;
      font-size: 13.5px;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .g5sheet::before {
      content: "↓";
      font-weight: 800;
    }

    .g5sheet:hover {
      color: var(--blue);
    }

    /* phone showcase */
    /* two-up hardware photos under the section intro */
    .hwshots {
      display: grid;
      grid-template-columns: 602fr 772fr;
      gap: 22px;
      align-items: stretch;
      max-width: 1120px;
      margin: 0 auto 34px;
    }

    @media (max-width:820px) {
      .hwshots {
        grid-template-columns: 1fr;
      }
    }

    .hwshot {
      margin: 0;
      border-radius: 18px;
      overflow: hidden;
      background: #f4f5f7;
      min-height: 180px;
    }

    .hwshot img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    :root[data-theme="dark"] .hwshot {
      background: #20272e;
    }

    @media (prefers-color-scheme:dark) {
      .hwshot {
        background: #20272e;
      }
    }

    .products {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    .prod {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--r);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      transition: transform .22s cubic-bezier(.22, .61, .36, 1), box-shadow .22s, border-color .22s;
    }

    .band.alt .prod {
      background: #eaf3fb;
      border-color: #cddff2;
    }

    /* The tinted card is a light-theme treatment. In dark mode it kept the tint
       while the type flipped to light ink, which left the title at 1.04:1
       against its own card — invisible. Sit it on the raised surface so it
       still separates from the .band.alt behind it and the ink reads.

       --blue also lightens to #4fb0e0 in dark mode, so white button text fell
       to 2.44:1; dark ink on that same fill is 7.57:1 and keeps the button on
       the brand colour rather than darkening it.

       Both go in three parts, the way the rest of this sheet handles dark: the
       media query covers an OS-level preference, the [data-theme="dark"] rules
       cover the explicit toggle, and the [data-theme="light"] rules undo the
       media query for someone whose OS is dark but who has forced light. */
    @media (prefers-color-scheme:dark) {
      .band.alt .prod {
        background: var(--surface-2);
        border-color: var(--line);
      }

      .viewbtn,
      .prod .links a.viewbtn {
        color: #0c151b;
      }
    }

    :root[data-theme="dark"] .band.alt .prod {
      background: var(--surface-2);
      border-color: var(--line);
    }

    :root[data-theme="dark"] .viewbtn,
    :root[data-theme="dark"] .prod .links a.viewbtn {
      color: #0c151b;
    }

    :root[data-theme="light"] .band.alt .prod {
      background: #eaf3fb;
      border-color: #cddff2;
    }

    :root[data-theme="light"] .viewbtn,
    :root[data-theme="light"] .prod .links a.viewbtn {
      color: #fff;
    }

    .prod:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-md);
      border-color: color-mix(in srgb, var(--magenta) 40%, var(--line));
    }

    .prod .ph img {
      transition: transform .4s cubic-bezier(.22, .61, .36, 1);
    }

    .prod:hover .ph img {
      transform: scale(1.07) rotate(-1deg);
    }

    .prod .cat,
    .prod h3 {
      transition: color .2s;
    }

    .prod:hover h3 {
      color: var(--blue);
    }

    .prod .ph {
      height: 170px;
      background: linear-gradient(135deg, #eef5fd, #dfeafb);
      display: grid;
      place-items: center;
    }

    .prod .ph svg {
      width: 74px;
      height: 74px;
      color: var(--blue);
      opacity: .85;
    }

    .prod .body {
      padding: 20px 22px 22px;
    }

    .prod .cat {
      font-size: 11px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--magenta);
      font-weight: 700;
    }

    .prod h3 {
      font-size: 18px;
      margin: 6px 0 8px;
    }

    .prod p {
      font-size: 14px;
      color: var(--ink-soft);
      margin: 0 0 14px;
    }

    .prod .links {
      display: flex;
      gap: 14px;
      font-size: 13.5px;
      font-weight: 700;
    }

    .prod .links a {
      color: var(--blue);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .prod .links a:hover {
      text-decoration: underline;
    }

    .prod .links a.sheet {
      color: var(--ink-soft);
    }

    @media (max-width:820px) {
      .products {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width:560px) {
      .products {
        grid-template-columns: 1fr;
      }
    }

    /* SALES REQUEST cta band */
    .srband {
      padding: 90px 0;
    }

    .srcard {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 22px;
      box-shadow: var(--shadow-md);
      padding: 52px;
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 44px;
      align-items: center;
      position: relative;
      overflow: hidden;
    }

    .srcard::before {
      content: "";
      position: absolute;
      right: -80px;
      top: -80px;
      width: 280px;
      height: 280px;
      background: radial-gradient(circle, var(--magenta), transparent 62%);
      opacity: .16;
    }

    .srcard .sec-eyebrow {
      margin-bottom: 12px;
    }

    .srcard h2 {
      font-size: clamp(26px, 3.4vw, 38px);
      margin: 0 0 14px;
      font-weight: 800;
    }

    .srcard p {
      font-size: 16.5px;
      color: var(--ink-soft);
      margin: 0 0 26px;
      max-width: 44ch;
    }

    .srcard .btn-primary {
      box-shadow: 0 12px 30px -8px rgba(235, 0, 139, .55);
    }

    /* mini stepper preview */
    .stepper {
      position: relative;
      z-index: 1;
    }

    .step {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      padding: 14px 0;
      border-bottom: 1px dashed var(--line);
    }

    .step:last-child {
      border-bottom: 0;
    }

    .step .n {
      flex: none;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--blue);
      color: #fff;
      display: grid;
      place-items: center;
      font-weight: 700;
      font-size: 14px;
    }

    .step .n.done {
      background: var(--good);
    }

    .step .n.now {
      background: var(--magenta);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--magenta) 22%, transparent);
    }

    .step b {
      font-size: 15px;
      display: block;
    }

    .step span {
      font-size: 13.5px;
      color: var(--ink-faint);
    }

    .step .opts {
      display: flex;
      gap: 8px;
      margin-top: 8px;
      flex-wrap: wrap;
    }

    .step .opts em {
      font-style: normal;
      font-size: 12.5px;
      padding: 5px 12px;
      border: 1px solid var(--line);
      border-radius: 20px;
      color: var(--ink-soft);
    }

    .step .opts em.sel {
      background: color-mix(in srgb, var(--magenta) 12%, transparent);
      border-color: var(--magenta);
      color: var(--magenta-deep);
      font-weight: 600;
    }

    @media (max-width:820px) {
      .srcard {
        grid-template-columns: 1fr;
        padding: 36px 26px;
      }
    }

    /* footer */
    /* ===== Ooma-style charcoal footer ===== */
    footer.site {
      background: var(--charcoal);
      color: #b6bec5;
      padding: 0 0 30px;
    }

    /* trust badge row across the top of the footer */
    .foot-trust {
      border-bottom: 1px solid rgba(255, 255, 255, .1);
      padding: 26px 0;
    }

    .foot-trust .wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px 44px;
      flex-wrap: wrap;
    }

    .foot-trust .b {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-size: 13px;
      font-weight: 700;
      color: #e4e8ec;
      letter-spacing: .02em;
    }

    .foot-trust .b svg {
      width: 18px;
      height: 18px;
      color: #8fe0ff;
    }

    /* ---------- footer carrier row ----------
       The order is deliberate and is the whole point of the layout: the
       T-Mobile mark stands on its own ahead of the wording, so "Partner with"
       governs only AT&T and Verizon, who are the licensed partners. T-Mobile is
       named in plain text with its ® and is never called a partner. */
    .foot-trust .foot-carriers {
      display: flex;
      align-items: center;
      justify-content: center;
      /* No gap of its own: the row rides .foot-trust .wrap's 20px/44px rhythm.
         The tighter 26px here existed only to fit a seventh item on one line. */
      flex-wrap: wrap;
    }

    .foot-carriers .fc-lead {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .02em;
      color: #e4e8ec;
    }

    .foot-carriers img {
      display: block;
      width: auto;
      height: 40px;
    }

    /* ---------- footer carrier row marks ----------
       The row is built from the same .cb-cred lockup the 5G band uses, so all
       three marks carry the AT&T badge's 4:1 box, tile proportion and type
       hierarchy here too. AT&T's own raster is 40px tall, which is 160px wide,
       and the two lockups are held to that. */
    /* beats .foot-carriers img, which sizes the AT&T badge to the row height.
       30px matches the 5G band: the official V carries its clear space inside
       the file, so an 18px box left the mark itself at ~12px and it read as a
       speck next to the AT&T globe. */
    .foot-carriers .cb-sig img {
      height: 30px;
      width: auto;
    }

    footer.site .cols {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
      gap: 30px;
      padding: 48px 0 34px;
      border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    footer.site .wm {
      font-size: 22px;
      font-weight: 800;
      color: #fff;
    }

    footer.site .wm em {
      color: #ff5cae;
      font-style: italic;
    }

    footer.site p {
      font-size: 14px;
      color: #9aa3ab;
      max-width: 34ch;
      margin: 12px 0 16px;
    }

    footer.site .fcontact {
      font-size: 14px;
    }

    footer.site .fcontact a {
      color: #e4e8ec;
      display: block;
      padding: 3px 0;
    }

    footer.site h5 {
      font-size: 12px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #8fe0ff;
      margin: 0 0 14px;
    }

    footer.site a {
      display: block;
      color: #b6bec5;
      text-decoration: none;
      font-size: 14px;
      padding: 5px 0;
    }

    footer.site a:hover {
      color: #fff;
    }

    footer.site .legal {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      padding-top: 22px;
      font-size: 12.5px;
      color: #8b949c;
    }

    footer.site .fbadge {
      display: flex;
      gap: 20px;
      align-items: center;
    }

    footer.site .fbadge a {
      display: inline;
      padding: 0;
      font-size: 12.5px;
      color: #9aa3ab;
    }

    footer.site .fbadge a:hover {
      color: #fff;
    }

    @media (max-width:900px) {
      footer.site .cols {
        grid-template-columns: 1fr 1fr 1fr;
      }

      footer.site .fbrand {
        grid-column: 1 / -1;
      }
    }

    @media (max-width:520px) {
      footer.site .cols {
        grid-template-columns: 1fr 1fr;
      }

      .foot-trust .wrap {
        gap: 14px 24px;
      }
    }

    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
    }

    a:focus-visible,
    button:focus-visible {
      outline: 3px solid var(--magenta);
      outline-offset: 2px;
      border-radius: 4px;
    }
  

    /* ============ product landing page ============ */
    .crumb {
      background: var(--surface);
      border-bottom: 1px solid var(--line);
      font-size: 13.5px;
      color: var(--ink-faint);
    }

    .crumb .wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      padding-top: 13px;
      padding-bottom: 13px;
      flex-wrap: wrap;
    }

    .crumb a {
      color: var(--ink-soft);
      text-decoration: none;
      font-weight: 600;
    }

    .crumb a:hover {
      color: var(--magenta-ink);
      text-decoration: underline;
    }

    .crumb .sep {
      opacity: .5;
    }

    .crumb .on {
      color: var(--ink);
      font-weight: 700;
    }

    /* ---- hero ---- */
    .phero {
      padding: clamp(44px, 5vw, 76px) 0 clamp(48px, 6vw, 84px);
      background: #f8f8f8;
    }

    @media (prefers-color-scheme:dark) {
      .phero {
        background: var(--surface-2);
      }
    }

    :root[data-theme="dark"] .phero {
      background: var(--surface-2);
    }

    :root[data-theme="light"] .phero {
      background: #f8f8f8;
    }

    .phero-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(30px, 4vw, 60px);
      align-items: center;
    }

    .phero .sec-eyebrow {
      font-size: 12.5px;
    }

    .phero h1 {
      max-width: 16ch;
      font-size: clamp(30px, 3.6vw, 44px);
      line-height: 1.2;
      margin: 0;
    }

    .phero .model {
      display: block;
      margin: 12px 0 0;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--ink-faint);
    }

    .phero h1.wide {
      max-width: 22ch;
    }

    .nb {
      white-space: nowrap;
    }

    .phero .lead {
      margin: 20px 0 0;
      max-width: 56ch;
      font-size: 17.5px;
      line-height: 1.6;
      color: var(--ink-soft);
    }

    .quickspecs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 24px 0 0;
      padding: 0;
      list-style: none;
    }

    .quickspecs li {
      font-size: 13px;
      font-weight: 700;
      color: var(--ink-soft);
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 30px;
      padding: 7px 14px;
    }

    .pcta {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
    }

    .pcta .viewbtn {
      padding: 13px 26px;
    }

    .btn-outline {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 22px;
      border-radius: 10px;
      font-weight: 700;
      font-size: 14px;
      line-height: 1.2;
      text-decoration: none;
      color: var(--ink);
      background: var(--surface);
      border: 1px solid var(--line);
      transition: border-color .14s, transform .12s, color .14s;
    }

    .btn-outline:hover {
      border-color: var(--magenta);
      color: var(--magenta-ink);
      transform: translateY(-1px);
    }

    .btn-outline svg {
      width: 17px;
      height: 17px;
      flex: none;
    }

    .hero-shot {
      margin: 0;
    }

    .hero-shot img {
      display: block;
      width: 100%;
      max-width: 560px;
      height: auto;
      margin-left: auto;
    }

    /* ---- tab bar ---- */
    .ptabs-bar {
      position: sticky;
      top: 0;
      z-index: 60;
      background: color-mix(in srgb, var(--bg) 93%, transparent);
      backdrop-filter: saturate(160%) blur(10px);
      border-bottom: 1px solid var(--line);
    }

    .ptabs {
      display: flex;
      gap: 4px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .ptabs::-webkit-scrollbar {
      display: none;
    }

    .ptabs button {
      appearance: none;
      border: 0;
      background: none;
      font-family: inherit;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      padding: 17px 22px;
      color: var(--ink-soft);
      border-bottom: 3px solid transparent;
      transition: color .14s, border-color .14s;
    }

    .ptabs button:hover {
      color: var(--ink);
    }

    .ptabs button[aria-selected="true"] {
      color: var(--magenta-ink);
      border-bottom-color: var(--magenta);
    }

    .ptabs button:focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: -4px;
      border-radius: 4px;
    }

    .ppanel[hidden] {
      display: none;
    }

    /* ---- bands ---- */
    .yband {
      padding: clamp(60px, 7vw, 100px) 0;
      background: var(--bg);
    }

    .yband.alt {
      background: var(--surface);
    }

    .yhead {
      text-align: center;
      max-width: 900px;
      margin: 0 auto;
    }

    .yhead h2 {
      font-size: clamp(27px, 3.2vw, 42px);
      line-height: 1.24;
      margin: 0;
    }

    .yhead p {
      margin: 24px auto 0;
      font-size: 17.5px;
      line-height: 1.62;
      color: var(--ink-soft);
    }

    /* description */
    .desc-grid {
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      gap: clamp(32px, 4vw, 60px);
      align-items: start;
    }

    .desc-grid h2 {
      margin: 0 0 18px;
      font-size: clamp(24px, 2.8vw, 34px);
      line-height: 1.2;
    }

    .desc-grid p {
      margin: 0 0 18px;
      font-size: 17px;
      line-height: 1.75;
      color: var(--ink-soft);
    }

    .shot {
      margin: 0;
      padding: 22px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 20px;
      box-shadow: var(--shadow-md);
    }

    .shot img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 12px;
    }

    .shot figcaption {
      margin-top: 13px;
      text-align: center;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--ink-faint);
    }

    .callout {
      margin-top: 22px;
      padding: 16px 18px;
      border-radius: 16px;
      background: var(--surface-2);
      border: 1px solid var(--line);
    }

    .callout h3 {
      margin: 0 0 9px;
      font-size: 16px;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--ink-faint);
    }

    .callout ul {
      margin: 0;
      padding-left: 20px;
      font-size: 15px;
      line-height: 1.62;
      color: var(--ink-soft);
    }

    /* the compatibility strings are long unbroken model lists (SIP-T27G/T41S/…) */
    .callout li,
    .compat-box li,
    ul.speclist li {
      overflow-wrap: anywhere;
    }

    .callout li + li {
      margin-top: 10px;
    }

    ul.sublist {
      margin: 8px 0 0;
      padding-left: 18px;
      list-style: circle;
      color: var(--ink-faint);
      font-size: .94em;
    }

    ul.sublist li + li {
      margin-top: 4px;
    }

    /* key feature cards */
    .fcard-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
      gap: clamp(20px, 2.5vw, 30px);
      margin-top: clamp(34px, 4vw, 52px);
    }

    .fcard {
      padding: 18px 20px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: var(--shadow-sm);
    }

    .fcard h3 {
      margin: 0 0 8px;
      font-size: 17.2px;
      line-height: 1.3;
      color: #109e6f;
    }

    .fcard p {
      margin: 0;
      font-size: 15.5px;
      line-height: 1.6;
      color: var(--ink-soft);
    }

    .compat-box {
      margin-top: clamp(34px, 4vw, 50px);
      padding: 18px 20px;
      border-radius: 16px;
      background: var(--surface-2);
      border: 1px solid var(--line);
    }

    .compat-box h3 {
      margin: 0 0 10px;
      font-size: 17px;
      line-height: 1.3;
    }

    .compat-box ul {
      margin: 0;
      padding-left: 20px;
      font-size: 15.5px;
      line-height: 1.62;
      color: var(--ink-soft);
    }

    .compat-box li + li {
      margin-top: 10px;
    }

    /* data sheet */
    .ds-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 24px 0 28px;
    }

    .ds-frame {
      border: 1px solid var(--line);
      border-radius: 16px;
      overflow: hidden;
      background: var(--surface-2);
      box-shadow: var(--shadow-sm);
    }

    .ds-frame object {
      display: block;
      width: 100%;
      height: 860px;
      border: 0;
    }

    .ds-fallback {
      padding: 46px 26px;
      text-align: center;
      color: var(--ink-soft);
    }

    /* specifications */
    .spec-wrap {
      margin-top: clamp(26px, 3vw, 38px);
      border: 1px solid var(--line);
      border-radius: 16px;
      overflow-x: auto;
      background: var(--surface);
      box-shadow: var(--shadow-sm);
    }

    table.spec {
      width: 100%;
      border-collapse: collapse;
      min-width: 640px;
    }

    table.spec caption {
      text-align: left;
      padding: 18px 22px;
      font-weight: 800;
      font-size: 13px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--ink-faint);
      border-bottom: 1px solid var(--line);
    }

    table.spec th[scope="row"] {
      width: 230px;
      text-align: left;
      vertical-align: top;
      padding: 20px 22px;
      font-size: 15px;
      font-weight: 800;
      color: var(--ink);
      background: var(--surface-2);
      border-bottom: 1px solid var(--line);
      border-right: 1px solid var(--line);
    }

    table.spec td {
      padding: 18px 22px;
      vertical-align: top;
      border-bottom: 1px solid var(--line);
    }

    ul.speclist {
      margin: 0;
      padding-left: 20px;
      font-size: 14.8px;
      line-height: 1.62;
      color: var(--ink-soft);
    }

    ul.speclist li {
      margin: 3px 0;
    }

    ul.speclist ul {
      margin: 4px 0 6px;
      padding-left: 18px;
      list-style: circle;
      color: var(--ink-faint);
    }

    .spec-note {
      margin: 0;
      font-size: 14.5px;
      color: var(--ink-soft);
    }

    .spec-note a,
    .srcline a {
      color: var(--blue);
      font-weight: 700;
    }

    .srcline {
      margin: clamp(30px, 4vw, 46px) 0 0;
      padding-top: 16px;
      border-top: 1px dashed var(--line);
      font-size: 13px;
      line-height: 1.7;
      color: var(--ink-faint);
    }

    @media (max-width:1100px) {

      /* the horizontal reveal offset overflows the viewport before it animates in */
      [data-reveal="left"],
      [data-reveal="right"] {
        transform: translateY(22px);
      }

      .phero-grid,
      .desc-grid {
        grid-template-columns: 1fr;
      }

      .hero-shot img {
        margin: 0 auto;
      }

      .ds-frame object {
        height: 560px;
      }

      table.spec th[scope="row"] {
        width: 160px;
      }
    }

    .gal-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      margin-top: 22px;
    }

    .callout.warn {
      background: color-mix(in srgb, #d97706 9%, var(--surface));
      border-color: color-mix(in srgb, #d97706 34%, var(--line));
    }

    .callout.warn h3 {
      color: #b45309;
    }

    .gshot {
      margin: 0;
      padding: 14px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: var(--shadow-sm);
    }

    .gshot img {
      display: block;
      /* the alternate shot is only 250px wide at source — do not upscale it */
      width: 100%;
      max-width: 300px;
      height: auto;
      margin: 0 auto;
      border-radius: 10px;
    }
  
    /* ============ 8 Aug 2026 update ============ */

    /* Description tab: the image card tracks the height of the copy beside it, so the
       top and bottom edges line up instead of the picture floating in the middle. */
    .desc-grid {
      align-items: stretch;
    }

    .desc-grid>[data-reveal="right"] {
      display: flex;
      flex-direction: column;
      gap: 20px;
      min-height: 0;
    }

    .desc-grid figure.shot {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 0;
      margin: 0;
    }

    .desc-grid figure.shot img {
      width: 88%;
      height: auto;
      max-height: 100%;
      object-fit: contain;
    }

    /* Hero actions: smaller, and pill-rounded to match the Sales Request button. */
    .pcta .viewbtn,
    .pcta .btn-outline {
      padding: 9px 19px;
      font-size: 13.5px;
      border-radius: 40px;
      gap: 7px;
    }

    .pcta .viewbtn svg,
    .pcta .btn-outline svg {
      width: 15px;
      height: 15px;
      flex: none;
    }

    @media (max-width:1100px) {
      .desc-grid>[data-reveal="right"] {
        display: block;
      }

      .desc-grid figure.shot img {
        width: 100%;
        max-height: none;
      }
    }
  
    /* nav + Sales Request no longer fit on one line — nav gets its own row */

    /* the last ~80px before the hamburger: the decorative badge is the first thing
       to go, so the labels themselves stay as large as possible */
    @media (min-width:1011px) and (max-width:1060px) {
      nav.main .nav-badge {
        display: none;
      }

      nav.main {
        margin-right: 6px;
      }

      /* and the CTA gives back a few pixels rather than the labels shrinking further */
      .cta-btn.desktop {
        padding: 0 9px;
        font-size: 12px;
      }
    }

    /* ---- the white logo plate scales with the viewport, and --logo-plate-end
       tracks it, so "menu starts where the logo ends" holds at every width ---- */
    @media (max-width:1520px) {
      :root {
        --logo-plate-end: 196px;
      }

      .util .wrap {
        min-height: 80px;
        padding-top: 10px;
        padding-bottom: 10px;
      }

      .util .logo {
        padding: 0 23px;
        margin: -10px 0;
      }

      .util .logo img {
        height: 72px;
      }
    }

    @media (max-width:1200px) {
      :root {
        --logo-plate-end: 166px;
      }

      .util .wrap {
        min-height: 70px;
        padding-top: 9px;
        padding-bottom: 9px;
      }

      .util .logo {
        padding: 0 19px;
        margin: -9px 0;
      }

      .util .logo img {
        height: 62px;
      }
    }

    @media (max-width:1030px) {
      :root {
        --logo-plate-end: 142px;
      }

      .util .wrap {
        min-height: 62px;
        padding-top: 8px;
        padding-bottom: 8px;
      }

      .util .logo {
        padding: 0 15px;
        margin: -8px 0;
      }

      .util .logo img {
        height: 54px;
      }
    }

    /* ---- One line at every width. The nav still starts at the logo plate's right
       edge; item size is interpolated against the viewport so the row always fits
       between that edge and the Sales Request button — no steps, no wrapping. ---- */
    @media (min-width:1011px) and (max-width:1520px) {

      nav.main>a,
      nav.main .has-mega>a {
        padding: 0 clamp(2px, calc(1.34vw - 11.4px), 9px);
        font-size: clamp(9.9px, calc(0.76vw + 2.45px), 14px);
        gap: clamp(2px, .42vw, 6px);
      }

      nav.main .caret {
        width: clamp(9px, .78vw, 12px);
      }

      .nav-badge {
        margin-left: clamp(2px, .3vw, 6px);
        padding: 1px clamp(4px, .38vw, 6px);
        font-size: clamp(8px, .62vw, 10px);
      }
    }

    /* ---- the white logo plate scales with the viewport, and --logo-plate-end
       tracks it, so "menu starts where the logo ends" holds at every width ---- */
    @media (max-width:1520px) {
      :root {
        --logo-plate-end: 196px;
      }

      .util .wrap {
        min-height: 80px;
        padding-top: 10px;
        padding-bottom: 10px;
      }

      .util .logo {
        padding: 0 23px;
        margin: -10px 0;
      }

      .util .logo img {
        height: 72px;
      }
    }

    @media (max-width:1200px) {
      :root {
        --logo-plate-end: 166px;
      }

      .util .wrap {
        min-height: 70px;
        padding-top: 9px;
        padding-bottom: 9px;
      }

      .util .logo {
        padding: 0 19px;
        margin: -9px 0;
      }

      .util .logo img {
        height: 62px;
      }
    }

    @media (max-width:1030px) {
      :root {
        --logo-plate-end: 142px;
      }

      .util .wrap {
        min-height: 62px;
        padding-top: 8px;
        padding-bottom: 8px;
      }

      .util .logo {
        padding: 0 15px;
        margin: -8px 0;
      }

      .util .logo img {
        height: 54px;
      }
    }

    /* ---- keep the ten top-level items on one line all the way down to the
       hamburger breakpoint: shrink the items, never wrap the row ---- */
    @media (max-width:1180px) {

      nav.main>a,
      nav.main .has-mega>a {
        padding: 0 7px;
        font-size: 13.5px;
      }

      nav.main .caret {
        width: 10px;
      }
    }

    @media (max-width:1080px) {

      nav.main>a,
      nav.main .has-mega>a {
        padding: 0 5px;
        font-size: 12.6px;
        gap: 4px;
      }

      .nav-badge {
        margin-left: 2px;
        padding: 2px 5px;
        font-size: 9px;
      }
    }

    /* last stop before the hamburger takes over at 980px */
    @media (max-width:1030px) {

      nav.main>a,
      nav.main .has-mega>a {
        padding: 0 3px;
        font-size: 11.6px;
        gap: 3px;
      }

      nav.main .caret {
        width: 9px;
      }

      .nav-badge {
        padding: 1px 4px;
        font-size: 8.5px;
      }
    }

    @media (max-width:1520px) {
      /* one row at every width: nav on the left, Sales Request pinned right.
         Nothing wraps — the size ladder above shrinks the items to fit. */
      header.site .wrap {
        flex-wrap: nowrap;
        height: 66px;
        row-gap: 0;
        padding-top: 0;
        padding-bottom: 0;
      }

      nav.main {
        order: 0;
        flex: 1 1 auto;
        min-width: 0;
        margin-right: 12px;
        justify-content: flex-start;
        flex-wrap: nowrap;
      }

      nav.main>a,
      nav.main .has-mega>a {
        flex: none;
        white-space: nowrap;
        height: 66px;
      }

      .cta-btn.desktop {
        margin-left: auto;
      }

      header.site .has-mega.hp {
        position: static;
      }

      header.site .mega.mega-sm {
        left: 12px;
        right: 12px;
        width: auto;
      }

      /* the About menu is narrow enough to stay centred on its trigger — it does
         not need the full-bar anchoring the wider Home Phone menu relies on */
      header.site .mega.mega-sm.ab-menu {
        left: 50%;
        right: auto;
        width: min(524px, calc(100vw - 32px));
      }
    }

    /* ---- every action button is the same height as the Sales Request pill.
       The container-scoped rules above set padding with a shorthand and out-rank a
       bare .viewbtn, so those containers are named here to reset it cleanly. ---- */
    .pcta .viewbtn,
    .pcta .btn-outline,
    .sw-actions .viewbtn,
    .sw-actions .btn-outline,
    .ab-cta .viewbtn,
    .ab-cta .btn-outline,
    .ds-actions .viewbtn,
    .ds-actions .btn-outline,
    .prod .links a.viewbtn,
    .viewbtn,
    .btn-outline,
    a.buybtn {
      height: 30px;
      padding-top: 0;
      padding-bottom: 0;
      align-items: center;
    }

    /* ---------------------------------------------------------------
       Shared-header fix, kept here so it is easy to lift into the other
       pages: between 1016px and 1360px the About Us panel is centred on a
       trigger that sits close to the right edge, so the hidden panel pushes
       the document sideways and the whole page gains a horizontal scrollbar.
       Right-aligning it to the trigger keeps it on-screen at every width.
       --------------------------------------------------------------- */
    @media (min-width:1016px) and (max-width:1360px) {
      header.site .mega.mega-sm.ab-menu {
        left: auto;
        right: 0;
        transform: translateY(-8px);
      }

      header.site .has-mega.ab:hover .ab-menu,
      header.site .has-mega.ab:focus-within .ab-menu,
      header.site .has-mega.ab.open .ab-menu {
        transform: none;
      }
    }

    /* Same story one tier down: between the 1030px stop and 1150px the nav
       still uses the roomy 1180px sizing, so the last item runs past the
       viewport on smaller laptops. Borrow the compact tier for that band. */
    @media (min-width:1031px) and (max-width:1150px) {

      nav.main>a,
      nav.main .has-mega>a {
        padding: 0 5px;
        font-size: 12.6px;
        gap: 4px;
      }

      .nav-badge {
        margin-left: 2px;
        padding: 2px 5px;
        font-size: 9px;
      }
    }

    /* ---- "Videos" makes ten top-level items. The one-line ladder above was
       tuned for nine, so from the hamburger breakpoint up to 1250px the row is
       re-interpolated a little tighter instead of stepped, which is where the
       nine items were already closest to the Sales Request button. ---- */
    @media (min-width:1011px) and (max-width:1250px) {

      nav.main>a,
      nav.main .has-mega>a {
        padding-left: clamp(3px, calc(1.05vw - 8.6px), 6px);
        padding-right: clamp(3px, calc(1.05vw - 8.6px), 6px);
        font-size: clamp(11.2px, calc(0.62vw + 4.4px), 12.8px);
        gap: 3px;
      }

      nav.main .caret {
        width: 9px;
      }

      .nav-badge {
        margin-left: 2px;
        padding: 1px 4px;
        font-size: 8.5px;
      }
    }
  

    /* Floating chrome: brand blue at rest, brand magenta on hover. Kept on the
       literal brand hexes rather than --blue/--magenta so the white arrow keeps
       its contrast in both the light and dark themes. */
    .to-top {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 45;
      width: 46px;
      height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 0;
      border-radius: 50%;
      cursor: pointer;
      color: #fff;
      background: #0076af;
      /* hairline magenta ring: brand pink at rest, and it keeps the edge
         defined where the button floats over the site's blue bands */
      box-shadow: 0 0 0 1.5px rgba(235, 0, 139, .5), 0 10px 24px -8px rgba(0, 118, 175, .7), 0 2px 6px rgba(20, 30, 40, .12);
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px) scale(.94);
      /* visibility flips instantly on the way in, and only after the fade on the
         way out, so the button never fades in while still invisible */
      transition: opacity .22s ease, transform .22s ease, background .14s ease, box-shadow .14s ease, visibility 0s linear .22s;
    }

    .to-top.is-on {
      opacity: 1;
      visibility: visible;
      transform: none;
      transition: opacity .22s ease, transform .22s ease, background .14s ease, box-shadow .14s ease, visibility 0s;
    }

    .to-top:hover {
      background: #eb008b;
      transform: translateY(-3px);
      /* the two brand colours swap on hover: magenta fill, blue ring */
      box-shadow: 0 0 0 1.5px rgba(0, 118, 175, .55), 0 14px 28px -8px rgba(235, 0, 139, .65), 0 2px 6px rgba(20, 30, 40, .12);
    }

    .to-top:active {
      transform: translateY(-1px);
    }

    .to-top svg {
      display: block;
      width: 19px;
      height: 19px;
    }

    @media (max-width:720px) {
      .to-top {
        right: 14px;
        bottom: 14px;
        width: 42px;
        height: 42px;
      }
    }

    @media (prefers-reduced-motion:reduce) {
      .to-top,
      .to-top.is-on {
        transition: opacity .01s linear, background .14s ease, visibility 0s;
      }

      .to-top,
      .to-top:hover,
      .to-top:active {
        transform: none;
      }
    }

    /* ==== small-screen corrections — scripts/mobile-fixes.py ==== */

    /* Below the width where anything sits side by side, a sideways reveal has
       nowhere to come from: it starts 34px outside a wrap that has 26px of
       padding, and the document is wider than the screen until the element
       lands. The rise is the right motion on a stacked layout anyway. */
    @media (max-width: 900px) {

      [data-reveal="left"],
      [data-reveal="right"] {
        transform: translateY(26px);
      }
    }

    /* The highlighted phrase in a switch title is nowrap, so its underlay — an
       absolute ::after — cannot break across lines. The phrase is wider than a
       phone, so here it wraps and the underlay becomes an inline background
       cloned onto every line fragment instead. */
    @media (max-width: 700px) {
      .switch-title .focus {
        white-space: normal;
        padding: 0 4px;
        border-radius: 4px;
        background: color-mix(in srgb, var(--magenta) 22%, transparent);
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
      }

      .switch-title .focus::after {
        display: none;
      }
    }

    /* One class, so the 13px eyebrows the inner section heads set still win and
       only the 22px base — which the centred heads on the home page take —
       comes down to something a 320px column can hold. */
    @media (max-width: 560px) {
      .sec-eyebrow {
        font-size: 15px;
        letter-spacing: .09em;
        padding: 5px 12px 5px 10px;
      }

      .sec-eyebrow::before {
        width: 6px;
        height: 6px;
      }
    }


    /* Each hero point is nowrap so its animated underline spans one line. As a
       flex item that cannot shrink below its content, on a phone the rows were
       cut off mid-word inside the hero's clipped box. The underline is a
       block-level flex item already, so it survives the wrap. */
    @media (max-width: 900px) {

      .hp-row>span:last-child,
      ul.hero-points li.hp-warranty>span:last-child {
        white-space: normal;
        min-width: 0;
      }
    }

    /* Justified copy is tidy at a desktop measure and is rivers of white and a
       hyphen every other line at forty characters. Ragged right on a phone. */
    @media (max-width: 700px) {

      .cap p,
      .cd-hero .lead,
      .cd-lead p,
      .cprose p,
      .prose p,
      .prime-ab-card p,
      .vhead-lead p,
      .fd-block>p,
      .pf-copy>p:not(.role),
      .fs-lead>p,
      .bio-body>p {
        text-align: left;
        hyphens: manual;
      }
    }

    /* ==== end small-screen corrections ==== */
  


/* --- link state restore, generated by port_page.py ---
   Cancels Odoo's `a:hover,a:active,a:focus{color:#004868!important}`.
   See restore_link_states() for why this cannot be done any other way. */
a.buybtn:hover { color: #fff !important; text-decoration: none !important; }
a.buybtn:active { color: #fff !important; text-decoration: none !important; }
a.buybtn:focus { color: #fff !important; text-decoration: none !important; }
:root[data-theme="dark"] a.buybtn:hover { color: #fff !important; }
:root[data-theme="dark"] a.buybtn:active { color: #fff !important; }
:root[data-theme="dark"] a.buybtn:focus { color: #fff !important; }
:root[data-theme="light"] a.buybtn:hover { color: #fff !important; }
:root[data-theme="light"] a.buybtn:active { color: #fff !important; }
:root[data-theme="light"] a.buybtn:focus { color: #fff !important; }
.cart-btn.cart-mini:hover { color: #fff !important; text-decoration: none !important; }
.cart-btn.cart-mini:active { color: #fff !important; text-decoration: none !important; }
.cart-btn.cart-mini:focus { color: #fff !important; text-decoration: none !important; }
.cart-btn.cart-mini:hover:hover { color: #fff !important; }
.cart-btn.cart-mini:hover:active { color: #fff !important; }
.cart-btn.cart-mini:hover:focus { color: #fff !important; }
.cart-btn.cart-mini:focus-visible:hover { color: #fff !important; }
.cart-btn.cart-mini:focus-visible:active { color: #fff !important; }
.cart-btn.cart-mini:focus-visible:focus { color: #fff !important; }
.cart-btn.cart-mini .cart-count:hover { color: #fff !important; }
.cart-btn.cart-mini .cart-count:active { color: #fff !important; }
.cart-btn.cart-mini .cart-count:focus { color: #fff !important; }
.acct-menu a:hover { color: var(--ink-soft, #4d565e) !important; text-decoration: none !important; }
.acct-menu a:active { color: var(--ink-soft, #4d565e) !important; text-decoration: none !important; }
.acct-menu a:focus { color: var(--ink-soft, #4d565e) !important; text-decoration: none !important; }
.acct-menu a:hover:hover { color: var(--blue, #0076af) !important; }
.acct-menu a:hover:active { color: var(--blue, #0076af) !important; }
.acct-menu a:hover:focus { color: var(--blue, #0076af) !important; }
.acct-menu a:focus-visible:hover { color: var(--blue, #0076af) !important; }
.acct-menu a:focus-visible:active { color: var(--blue, #0076af) !important; }
.acct-menu a:focus-visible:focus { color: var(--blue, #0076af) !important; }
.acct-menu-cta a.buybtn:hover { color: #fff !important; }
.acct-menu-cta a.buybtn:active { color: #fff !important; }
.acct-menu-cta a.buybtn:focus { color: #fff !important; }
.acct-menu-cta a.buybtn:hover:hover { color: #fff !important; }
.acct-menu-cta a.buybtn:hover:active { color: #fff !important; }
.acct-menu-cta a.buybtn:hover:focus { color: #fff !important; }
.acct-menu-cta a.btn-outline:hover { color: var(--ink, #1d2328) !important; }
.acct-menu-cta a.btn-outline:active { color: var(--ink, #1d2328) !important; }
.acct-menu-cta a.btn-outline:focus { color: var(--ink, #1d2328) !important; }
.acct-menu-cta a.btn-outline:hover:hover { color: var(--blue, #0076af) !important; }
.acct-menu-cta a.btn-outline:hover:active { color: var(--blue, #0076af) !important; }
.acct-menu-cta a.btn-outline:hover:focus { color: var(--blue, #0076af) !important; }
a:hover { color: inherit !important; }
a:active { color: inherit !important; }
a:focus { color: inherit !important; }
.vswitch a:hover { text-decoration: none !important; color: #cfd6dc !important; }
.vswitch a:active { text-decoration: none !important; color: #cfd6dc !important; }
.vswitch a:focus { text-decoration: none !important; color: #cfd6dc !important; }
.vswitch a:hover:hover { color: #fff !important; }
.vswitch a:hover:active { color: #fff !important; }
.vswitch a:hover:focus { color: #fff !important; }
.vswitch a.on:hover { color: #141a1f !important; }
.vswitch a.on:active { color: #141a1f !important; }
.vswitch a.on:focus { color: #141a1f !important; }
.contact-us:hover { color: #fff !important; text-decoration: none !important; }
.contact-us:active { color: #fff !important; text-decoration: none !important; }
.contact-us:focus { color: #fff !important; text-decoration: none !important; }
.contact-us em:hover { color: #ff8ac8 !important; }
.contact-us em:active { color: #ff8ac8 !important; }
.contact-us em:focus { color: #ff8ac8 !important; }
.logo .wm .n:hover { color: var(--blue) !important; }
.logo .wm .n:active { color: var(--blue) !important; }
.logo .wm .n:focus { color: var(--blue) !important; }
.logo .wm .n em:hover { color: var(--magenta) !important; }
.logo .wm .n em:active { color: var(--magenta) !important; }
.logo .wm .n em:focus { color: var(--magenta) !important; }
.logo .wm .t:hover { color: var(--ink-faint) !important; }
.logo .wm .t:active { color: var(--ink-faint) !important; }
.logo .wm .t:focus { color: var(--ink-faint) !important; }
nav.main>a:hover { text-decoration: none !important; color: var(--ink-soft) !important; }
nav.main>a:active { text-decoration: none !important; color: var(--ink-soft) !important; }
nav.main>a:focus { text-decoration: none !important; color: var(--ink-soft) !important; }
nav.main .has-mega>a:hover { text-decoration: none !important; color: var(--ink-soft) !important; }
nav.main .has-mega>a:active { text-decoration: none !important; color: var(--ink-soft) !important; }
nav.main .has-mega>a:focus { text-decoration: none !important; color: var(--ink-soft) !important; }
nav.main>a:hover:hover { color: var(--blue) !important; }
nav.main>a:hover:active { color: var(--blue) !important; }
nav.main>a:hover:focus { color: var(--blue) !important; }
nav.main .has-mega:hover>a:hover { color: var(--blue) !important; }
nav.main .has-mega:hover>a:active { color: var(--blue) !important; }
nav.main .has-mega:hover>a:focus { color: var(--blue) !important; }
nav.main .has-mega:focus-within>a:hover { color: var(--blue) !important; }
nav.main .has-mega:focus-within>a:active { color: var(--blue) !important; }
nav.main .has-mega:focus-within>a:focus { color: var(--blue) !important; }
.cta-btn:hover { color: #fff !important; text-decoration: none !important; }
.cta-btn:active { color: #fff !important; text-decoration: none !important; }
.cta-btn:focus { color: #fff !important; text-decoration: none !important; }
.mega.g5-menu .mm-acc .mm-cat:hover { color: color-mix(in srgb, var(--ink-faint) 55%, var(--ink-soft)) !important; }
.mega.g5-menu .mm-acc .mm-cat:active { color: color-mix(in srgb, var(--ink-faint) 55%, var(--ink-soft)) !important; }
.mega.g5-menu .mm-acc .mm-cat:focus { color: color-mix(in srgb, var(--ink-faint) 55%, var(--ink-soft)) !important; }
.mega.g5-menu .mm-acc .mm-cat:hover:hover { color: var(--blue) !important; }
.mega.g5-menu .mm-acc .mm-cat:hover:active { color: var(--blue) !important; }
.mega.g5-menu .mm-acc .mm-cat:hover:focus { color: var(--blue) !important; }
.mega.g5-menu .mm-acc .mm-prod-meta:hover { color: color-mix(in srgb, var(--ink-faint) 55%, var(--ink-soft)) !important; }
.mega.g5-menu .mm-acc .mm-prod-meta:active { color: color-mix(in srgb, var(--ink-faint) 55%, var(--ink-soft)) !important; }
.mega.g5-menu .mm-acc .mm-prod-meta:focus { color: color-mix(in srgb, var(--ink-faint) 55%, var(--ink-soft)) !important; }
.mega .col a:hover { text-decoration: none !important; color: var(--ink-soft) !important; }
.mega .col a:active { text-decoration: none !important; color: var(--ink-soft) !important; }
.mega .col a:focus { text-decoration: none !important; color: var(--ink-soft) !important; }
.mega .col a:hover:hover { color: var(--blue) !important; }
.mega .col a:hover:active { color: var(--blue) !important; }
.mega .col a:hover:focus { color: var(--blue) !important; }
.mega .mm-item .ds:hover { color: var(--ink-faint) !important; }
.mega .mm-item .ds:active { color: var(--ink-faint) !important; }
.mega .mm-item .ds:focus { color: var(--ink-faint) !important; }
.mega .hp-desc .ds:hover { color: var(--ink-faint) !important; }
.mega .hp-desc .ds:active { color: var(--ink-faint) !important; }
.mega .hp-desc .ds:focus { color: var(--ink-faint) !important; }
.mega .mm-item .ds:hover:hover { color: #fff !important; }
.mega .mm-item .ds:hover:active { color: #fff !important; }
.mega .mm-item .ds:hover:focus { color: #fff !important; }
.mega .hp-desc .ds:hover:hover { color: #fff !important; }
.mega .hp-desc .ds:hover:active { color: #fff !important; }
.mega .hp-desc .ds:hover:focus { color: #fff !important; }
.hp-desc a.hp-title:hover { color: var(--ink) !important; text-decoration: none !important; }
.hp-desc a.hp-title:active { color: var(--ink) !important; text-decoration: none !important; }
.hp-desc a.hp-title:focus { color: var(--ink) !important; text-decoration: none !important; }
.hp-desc a.hp-title:hover:hover { color: var(--blue) !important; }
.hp-desc a.hp-title:hover:active { color: var(--blue) !important; }
.hp-desc a.hp-title:hover:focus { color: var(--blue) !important; }
.mega .hp-all:hover { color: var(--magenta-ink) !important; text-decoration: none !important; }
.mega .hp-all:active { color: var(--magenta-ink) !important; text-decoration: none !important; }
.mega .hp-all:focus { color: var(--magenta-ink) !important; text-decoration: none !important; }
.mega .promo a:hover { color: var(--blue-ink) !important; text-decoration: none !important; }
.mega .promo a:active { color: var(--blue-ink) !important; text-decoration: none !important; }
.mega .promo a:focus { color: var(--blue-ink) !important; text-decoration: none !important; }
.hero-tabs a:hover { text-decoration: none !important; color: var(--ink-soft) !important; }
.hero-tabs a:active { text-decoration: none !important; color: var(--ink-soft) !important; }
.hero-tabs a:focus { text-decoration: none !important; color: var(--ink-soft) !important; }
.hero-tabs a:hover:hover { color: var(--blue) !important; }
.hero-tabs a:hover:active { color: var(--blue) !important; }
.hero-tabs a:hover:focus { color: var(--blue) !important; }
.viewbtn:hover { color: #fff !important; text-decoration: none !important; }
.viewbtn:active { color: #fff !important; text-decoration: none !important; }
.viewbtn:focus { color: #fff !important; text-decoration: none !important; }
.prod .links a.viewbtn:hover { color: #fff !important; text-decoration: none !important; }
.prod .links a.viewbtn:active { color: #fff !important; text-decoration: none !important; }
.prod .links a.viewbtn:focus { color: #fff !important; text-decoration: none !important; }
.prod .links a.viewbtn:hover:hover { color: #fff !important; text-decoration: none !important; }
.prod .links a.viewbtn:hover:active { color: #fff !important; text-decoration: none !important; }
.prod .links a.viewbtn:hover:focus { color: #fff !important; text-decoration: none !important; }
@media (prefers-color-scheme:dark) {
  .viewbtn:hover { color: #0c151b !important; }
  .viewbtn:active { color: #0c151b !important; }
  .viewbtn:focus { color: #0c151b !important; }
  .prod .links a.viewbtn:hover { color: #0c151b !important; }
  .prod .links a.viewbtn:active { color: #0c151b !important; }
  .prod .links a.viewbtn:focus { color: #0c151b !important; }
}
:root[data-theme="dark"] .viewbtn:hover { color: #0c151b !important; }
:root[data-theme="dark"] .viewbtn:active { color: #0c151b !important; }
:root[data-theme="dark"] .viewbtn:focus { color: #0c151b !important; }
:root[data-theme="dark"] .prod .links a.viewbtn:hover { color: #0c151b !important; }
:root[data-theme="dark"] .prod .links a.viewbtn:active { color: #0c151b !important; }
:root[data-theme="dark"] .prod .links a.viewbtn:focus { color: #0c151b !important; }
:root[data-theme="light"] .viewbtn:hover { color: #fff !important; }
:root[data-theme="light"] .viewbtn:active { color: #fff !important; }
:root[data-theme="light"] .viewbtn:focus { color: #fff !important; }
:root[data-theme="light"] .prod .links a.viewbtn:hover { color: #fff !important; }
:root[data-theme="light"] .prod .links a.viewbtn:active { color: #fff !important; }
:root[data-theme="light"] .prod .links a.viewbtn:focus { color: #fff !important; }
.prod .links a:hover { color: var(--blue) !important; text-decoration: none !important; }
.prod .links a:active { color: var(--blue) !important; text-decoration: none !important; }
.prod .links a:focus { color: var(--blue) !important; text-decoration: none !important; }
.prod .links a.sheet:hover { color: var(--ink-soft) !important; }
.prod .links a.sheet:active { color: var(--ink-soft) !important; }
.prod .links a.sheet:focus { color: var(--ink-soft) !important; }
footer.site .fcontact a:hover { color: #e4e8ec !important; }
footer.site .fcontact a:active { color: #e4e8ec !important; }
footer.site .fcontact a:focus { color: #e4e8ec !important; }
footer.site a:hover { color: #b6bec5 !important; text-decoration: none !important; }
footer.site a:active { color: #b6bec5 !important; text-decoration: none !important; }
footer.site a:focus { color: #b6bec5 !important; text-decoration: none !important; }
footer.site a:hover:hover { color: #fff !important; }
footer.site a:hover:active { color: #fff !important; }
footer.site a:hover:focus { color: #fff !important; }
footer.site .fbadge a:hover { color: #9aa3ab !important; }
footer.site .fbadge a:active { color: #9aa3ab !important; }
footer.site .fbadge a:focus { color: #9aa3ab !important; }
footer.site .fbadge a:hover:hover { color: #fff !important; }
footer.site .fbadge a:hover:active { color: #fff !important; }
footer.site .fbadge a:hover:focus { color: #fff !important; }
.crumb a:hover { color: var(--ink-soft) !important; text-decoration: none !important; }
.crumb a:active { color: var(--ink-soft) !important; text-decoration: none !important; }
.crumb a:focus { color: var(--ink-soft) !important; text-decoration: none !important; }
.crumb a:hover:hover { color: var(--magenta-ink) !important; text-decoration: underline !important; }
.crumb a:hover:active { color: var(--magenta-ink) !important; text-decoration: underline !important; }
.crumb a:hover:focus { color: var(--magenta-ink) !important; text-decoration: underline !important; }
.btn-outline:hover { text-decoration: none !important; color: var(--ink) !important; }
.btn-outline:active { text-decoration: none !important; color: var(--ink) !important; }
.btn-outline:focus { text-decoration: none !important; color: var(--ink) !important; }
.btn-outline:hover:hover { color: var(--magenta-ink) !important; }
.btn-outline:hover:active { color: var(--magenta-ink) !important; }
.btn-outline:hover:focus { color: var(--magenta-ink) !important; }
.ds-fallback:hover { color: var(--ink-soft) !important; }
.ds-fallback:active { color: var(--ink-soft) !important; }
.ds-fallback:focus { color: var(--ink-soft) !important; }
.spec-note a:hover { color: var(--blue) !important; }
.spec-note a:active { color: var(--blue) !important; }
.spec-note a:focus { color: var(--blue) !important; }
.srcline a:hover { color: var(--blue) !important; }
.srcline a:active { color: var(--blue) !important; }
.srcline a:focus { color: var(--blue) !important; }


/* --- contain the reveal offsets, generated by port_page.py ---
   See contain_reveal_offsets() for why this is clip and not hidden. */
.hbe-site { overflow-x: clip; }


/* --- small-screen containment, generated by port_page.py ---
   See responsive_fixes(). Desktop is untouched: every rule here is
   inside a max-width query. */
@media (max-width: 700px) {
  .hp-row > span:last-child,
  ul.hero-points li.hp-warranty > span:last-child { white-space: normal; }
}
@media (max-width: 860px) {
  /* Thumbnails are a grid sized for a desktop track and overflow
     their strip by 48px on a phone; let it fit the room there is.
     The spec tables are deliberately left alone — the design wraps
     them in .tscroll, which is overflow-x: auto with a 480px
     min-width on the table, so they are meant to be swiped. */
  ul.gal-thumbs { grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)); }
}