/* 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. */

/* --- ../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;
  }
}

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

    img {
      max-width: 100%
    }
  

    :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 ============ */
    /* Above .ptabs-bar (60), not below it. The header and the tab bar are both
       sticky to the top of the viewport, so they share the same band once the
       page is scrolled; at 40 the bar painted over the nav and, because the
       mega menu lives inside this element, over the open mega menu with it.
       The header owns the top layer so its menus always clear the tab bar. */
    header.site {
      position: sticky;
      top: 0;
      z-index: 70;
      /* 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;
      }
    }

    @media (max-width:1080px) {

      nav.main>a,
      nav.main .has-mega>a {
        padding: 0 5px;
        font-size: 12.8px;
        gap: 4px;
      }

      .nav-badge {
        margin-left: 2px;
        padding: 2px 5px;
        font-size: 9px;
      }
    }

    /* between desktop and mobile: nav + Sales Request no longer fit on one line */

    /* 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;
      }

      /* anchor compact mega menus to the bar instead of running off-screen */
      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));
      }
    }

    /* 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.28fr .72fr;
      gap: 40px;
      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: 13px;
      /* the column is sized to hold the two longest rows on a single line */
      max-width: none;
    }

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

    ul.hero-points li>span:last-child {
      white-space: nowrap;
    }

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

    .hp-ico {
      flex: none;
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border-radius: 9px;
      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: 16px;
      height: 16px;
      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: 11px;
        font-size: 15.5px;
      }

      ul.hero-points li>span:last-child {
        white-space: normal;
      }

      .hp-ico {
        width: 28px;
        height: 28px;
        border-radius: 8px;
      }

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

      .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;
    }
  

    /* ============ switch product pages ============ */
    .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;
    }

    .sw-hero {
      padding: clamp(34px, 4vw, 60px) 0 clamp(40px, 5vw, 70px);
      background: var(--bg);
    }

    .sw-grid {
      display: grid;
      grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
      gap: clamp(32px, 4vw, 60px);
      align-items: stretch;
    }

    .sw-shot {
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 26px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 20px;
      box-shadow: var(--shadow-sm);
    }

    .sw-shot img {
      display: block;
      width: 100%;
      max-width: 460px;
      height: auto;
      max-height: 100%;
      object-fit: contain;
    }

    .sw-copy .cat {
      display: inline-block;
      padding: 5px 13px;
      border-radius: 30px;
      background: color-mix(in srgb, var(--magenta) 10%, var(--surface));
      color: var(--magenta-ink);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .sw-copy h1 {
      margin: 14px 0 0;
      font-size: clamp(26px, 3vw, 38px);
      line-height: 1.18;
    }

    .sw-copy .model {
      margin: 10px 0 0;
      font-size: 16px;
      color: var(--ink-soft);
    }

    .sw-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 8px 18px;
      margin: 18px 0 0;
    }

    .sw-price {
      font-size: clamp(26px, 3vw, 34px);
      font-weight: 800;
      color: var(--blue);
      letter-spacing: -.01em;
    }

    .sw-sku {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--ink-faint);
    }

    ul.sw-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 20px 0 0;
      padding: 0;
      list-style: none;
    }

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

    .sw-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 26px;
    }

    .sw-actions .viewbtn,
    .sw-actions .btn-outline {
      padding: 9px 19px;
      border-radius: 40px;
      font-size: 13.5px;
      gap: 7px;
    }

    .btn-outline {
      display: inline-flex;
      align-items: center;
      font-weight: 700;
      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);
    }

    .sw-actions svg {
      width: 15px;
      height: 15px;
      flex: none;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* ---- tabs (same component as the phone pages) ---- */
    .ptabs-bar {
      position: sticky;
      /* clears the 66px sticky header rather than colliding with it */
      top: 66px;
      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;
      position: relative;
      border: 0;
      background: none;
      font-family: inherit;
      font-size: 14.8px;
      font-weight: 700;
      letter-spacing: -.01em;
      cursor: pointer;
      white-space: nowrap;
      padding: 19px 20px;
      color: var(--ink-faint);
      transition: color .14s;
    }

    /* the indicator is inset and rounded so it reads as a marker, not a border */
    .ptabs button::after {
      content: "";
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 0;
      height: 3px;
      border-radius: 3px 3px 0 0;
      background: var(--magenta);
      transform: scaleX(0);
      transition: transform .2s cubic-bezier(.22, .61, .36, 1);
    }

    .ptabs button:hover {
      color: var(--ink);
    }

    .ptabs button[aria-selected="true"] {
      color: var(--magenta-ink);
    }

    .ptabs button[aria-selected="true"]::after {
      transform: scaleX(1);
    }

    .ptabs button:focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: -4px;
      border-radius: 4px;
    }

    .ppanel[hidden] {
      display: none;
    }

    .yband {
      padding: clamp(48px, 6vw, 84px) 0;
      background: var(--bg);
      display: flow-root;
    }

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

    .yband h2 {
      margin: 0 0 18px;
      font-size: clamp(24px, 2.8vw, 34px);
      line-height: 1.2;
    }

    .desc-grid {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: clamp(32px, 4vw, 56px);
      align-items: stretch;
    }

    .desc-grid p {
      margin: 0 0 18px;
      font-size: 17px;
      line-height: 1.75;
      color: var(--ink-soft);
    }

    .highlights {
      padding: 26px 30px;
      border-radius: 16px;
      background: var(--surface-2);
      border: 1px solid var(--line);
      align-self: start;
    }

    .highlights h3 {
      margin: 0 0 14px;
      font-size: 16px;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--ink-faint);
    }

    .highlights ul {
      margin: 0;
      padding-left: 20px;
      font-size: 15.5px;
      line-height: 1.7;
      color: var(--ink-soft);
    }

    .sw-note {
      margin: clamp(26px, 3vw, 36px) 0 0;
      padding: 20px 24px;
      border-left: 3px solid var(--magenta);
      background: var(--surface-2);
      border-radius: 0 12px 12px 0;
      font-size: 15px;
      line-height: 1.65;
      color: var(--ink-soft);
    }

    .spec-wrap {
      margin-top: clamp(24px, 3vw, 34px);
      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: 620px;
      font-size: 14.8px;
    }

    table.spec th[scope="row"] {
      width: 300px;
      text-align: left;
      vertical-align: top;
      padding: 14px 22px;
      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: 14px 22px;
      vertical-align: top;
      color: var(--ink-soft);
      border-bottom: 1px solid var(--line);
      overflow-wrap: anywhere;
    }

    .dl-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
      gap: 18px;
      margin-top: clamp(24px, 3vw, 34px);
    }

    .dl-card {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 22px 24px;
      border-radius: 16px;
      background: var(--surface);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-sm);
      text-decoration: none;
      transition: border-color .14s, transform .12s;
    }

    .dl-card:hover {
      border-color: var(--magenta);
      transform: translateY(-2px);
    }

    .dl-ico {
      flex: none;
      width: 42px;
      height: 42px;
      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);
    }

    .dl-ico svg {
      width: 19px;
      height: 19px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .dl-card b {
      display: block;
      font-size: 16px;
      color: var(--ink);
    }

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

    /* ---- listing page ---- */
    .sw-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
      gap: clamp(20px, 2.4vw, 28px);
      margin-top: clamp(30px, 3.6vw, 44px);
    }

    .sw-card {
      display: flex;
      flex-direction: column;
      padding: 24px;
      border-radius: 20px;
      background: var(--surface);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-sm);
      transition: border-color .14s, transform .14s, box-shadow .14s;
    }

    .sw-card:hover {
      border-color: var(--magenta);
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    .sw-card .shot {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 190px;
      margin-bottom: 18px;
      padding: 10px;
      overflow: hidden;
      background: #fff;
      border: 1px solid var(--line-soft);
      border-radius: 14px;
    }

    /* the link is the flex item, so it has to carry the height — otherwise the
       image's max-height:100% resolves against an auto-height box and does nothing */
    .sw-card .shot a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      min-height: 0;
    }

    .sw-card .shot img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
    }

    .sw-card h3 {
      margin: 8px 0 6px;
      font-size: 19px;
      line-height: 1.3;
    }

    .sw-card h3 a {
      color: var(--ink);
      text-decoration: none;
    }

    .sw-card h3 a:hover {
      color: var(--blue);
    }

    .sw-card p {
      margin: 0 0 14px;
      font-size: 14.8px;
      line-height: 1.6;
      color: var(--ink-soft);
    }

    .sw-card .row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: auto;
      padding-top: 14px;
      border-top: 1px solid var(--line-soft);
    }

    .srcline {
      margin: clamp(28px, 4vw, 44px) 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) {

      .sw-grid,
      .desc-grid {
        grid-template-columns: 1fr;
      }

      table.spec th[scope="row"] {
        width: 180px;
      }
    }

    /* ---- placeholder notice: sits where the finished sections will go ---- */
    .soon {
      margin-top: 34px;
      padding: clamp(34px, 5vw, 56px) 28px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 12px;
      border: 1px dashed var(--line);
      border-radius: 16px;
      background: var(--surface-2);
    }

    .soon svg {
      width: 34px;
      height: 34px;
      color: var(--ink-faint);
      opacity: .6;
    }

    .soon h3 {
      margin: 4px 0 0;
      font-size: clamp(20px, 2.2vw, 26px);
      color: var(--ink);
    }

    .soon p {
      margin: 0;
      max-width: 56ch;
      font-size: 15.5px;
      line-height: 1.7;
      color: var(--ink-soft);
    }

    .soon .viewbtn {
      margin-top: 8px;
      padding: 9px 19px;
      border-radius: 40px;
      font-size: 13.5px;
    }

    /* ---- 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;
      }
    }

    /* ================= CONTRACT DEVELOPERS ================= */
    /* ---------- shared section shell ---------- */
    .cd-sec {
      padding: clamp(46px, 5.2vw, 82px) 0;
      background: var(--bg);
      scroll-margin-top: 80px;
    }

    .cd-sec.alt {
      background: var(--surface);
      border-top: 1px solid var(--line-soft);
      border-bottom: 1px solid var(--line-soft);
    }

    .cd-head {
      margin-bottom: clamp(28px, 3.2vw, 44px);
    }

    .cd-head .sec-eyebrow {
      font-size: 13px;
      margin: 0 0 18px;
    }

    .cd-head h2 {
      font-family: var(--serif);
      font-weight: 600;
      margin: 0;
      max-width: 30ch;
      font-size: clamp(26px, 2.9vw, 38px);
      line-height: 1.12;
      letter-spacing: -.02em;
      text-wrap: balance;
    }

    .cd-head p {
      margin: 18px 0 0;
      font-size: clamp(16px, 1.1vw, 17.5px);
      line-height: 1.78;
      color: var(--ink-soft);
      max-width: 66ch;
    }

    /* ---------- technology tag: one component, used everywhere ---------- */
    .tag-row {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin: 16px 0 0;
      padding: 0;
      list-style: none;
    }

    .tag-row li {
      padding: 5px 12px;
      border-radius: 7px;
      background: var(--surface-2);
      border: 1px solid var(--line);
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: .01em;
      color: var(--ink-soft);
      white-space: nowrap;
    }

    .cd-sec.alt .tag-row li {
      background: var(--bg);
    }

    /* ================= HERO ================= */
    .cd-hero {
      position: relative;
      overflow: hidden;
      background: var(--hero-grad);
      color: #fff;
      /* Top padding roughly halved from clamp(56px, 6.4vw, 104px): on a wide
         screen that reserved ~104px of empty gradient above the eyebrow, which
         read as dead space rather than breathing room. The bottom is unchanged
         so the hero still separates cleanly from the breadcrumb below. */
      padding: clamp(30px, 3.4vw, 56px) 0 clamp(48px, 5.4vw, 84px);
    }

    .cd-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(820px 380px at 88% -14%, rgba(235, 0, 139, .28), transparent 62%),
        radial-gradient(560px 300px at 0% 108%, rgba(255, 255, 255, .12), transparent 62%);
      pointer-events: none;
    }

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

    .cd-hero-copy {
      max-width: 66ch;
      padding-bottom: 0;
    }

    .cd-hero .sec-eyebrow {
      font-size: 13px;
      color: #ffd9ee;
      background: rgba(255, 255, 255, .13);
      border: 1px solid rgba(255, 255, 255, .2);
      padding: 6px 15px 6px 13px;
    }

    .cd-hero .sec-eyebrow::before {
      background: #ff8ac8;
      box-shadow: 0 0 0 3px rgba(255, 138, 200, .25);
    }

    .cd-hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
      align-items: start;
      gap: clamp(30px, 4vw, 66px);
    }

    .cd-hero-grid>.cd-hero-copy {
      max-width: 60ch;
    }

    .cd-hero-panel {
      position: relative;
      align-self: center;
      justify-self: end;
      width: 100%;
      max-width: 560px;
      border-radius: 24px;
      padding: 2px clamp(20px, 2.2vw, 30px);
      background:
        radial-gradient(120% 82% at 100% 0%, color-mix(in srgb, var(--magenta) 20%, transparent), transparent 58%),
        linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .045));
      border: 1px solid rgba(255, 255, 255, .17);
      box-shadow: 0 26px 62px rgba(3, 32, 50, .3), inset 0 1px 0 rgba(255, 255, 255, .15);
      backdrop-filter: blur(8px) saturate(140%);
    }

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

    .hp-item {
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr);
      gap: clamp(14px, 1.4vw, 20px);
      align-items: start;
      padding: clamp(20px, 2.2vw, 28px) 0;
    }

    .hp-item+.hp-item {
      border-top: 1px solid rgba(255, 255, 255, .13);
    }

    .hp-ico {
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border-radius: 14px;
      color: #fff;
      background: rgba(255, 255, 255, .09);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--magenta) 40%, transparent);
    }

    .hp-ico svg {
      display: block;
      width: 23px;
      height: 23px;
    }

    .hp-t {
      margin: 2px 0 0;
      font-size: clamp(15px, 1.15vw, 17px);
      font-weight: 700;
      letter-spacing: -.01em;
      line-height: 1.3;
      color: #fff;
      text-wrap: balance;
    }

    .hp-item p {
      margin: 8px 0 0;
      max-width: 44ch;
      font-size: clamp(13.5px, .96vw, 14.6px);
      line-height: 1.62;
      color: rgba(255, 255, 255, .74);
    }

    @media (max-width: 1040px) {
      .cd-hero-grid {
        grid-template-columns: 1fr;
        gap: clamp(28px, 4vw, 40px);
      }

      .cd-hero-grid>.cd-hero-copy {
        max-width: 66ch;
      }
    }

    .cd-hero h1 {
      font-family: var(--serif);
      font-weight: 600;
      margin: 14px 0 0;
      max-width: 15ch;
      font-size: clamp(36px, 5.2vw, 66px);
      line-height: 1.06;
      letter-spacing: -.02em;
      text-wrap: balance;
      color: #fff;
    }

    /* the deck sits closest to the headline, so it carries a hairline above the
       body copy to separate promise from explanation */
    .cd-hero .sub {
      margin: clamp(18px, 1.9vw, 24px) 0 0;
      max-width: 46ch;
      font-size: clamp(18px, 1.5vw, 23px);
      line-height: 1.4;
      font-weight: 600;
      letter-spacing: -.01em;
      text-wrap: balance;
      color: #fff;
    }

    .cd-hero .lead {
      margin: clamp(16px, 1.6vw, 20px) 0 0;
      max-width: 62ch;
      font-size: clamp(15.5px, 1.1vw, 17px);
      line-height: 1.78;
      text-align: justify;
      text-justify: inter-word;
      hyphens: auto;
      -webkit-hyphenate-limit-before: 3;
      -webkit-hyphenate-limit-after: 3;
      hyphenate-limit-chars: 8 3 3;
      color: rgba(255, 255, 255, .78);
    }

    .cd-hero .sub+.lead {
      margin-top: clamp(20px, 2.2vw, 28px);
      padding-top: clamp(20px, 2.2vw, 28px);
      border-top: 1px solid rgba(255, 255, 255, .16);
    }

    .cd-hero-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px;
      margin-top: clamp(26px, 3vw, 36px);
    }

    /* match the Sales Request button in the header: 30px tall, 13px, 40px radius */
    .cd-hero-actions .btn-primary,
    .cd-hero-actions .btn-ghost {
      white-space: nowrap;
      height: 30px;
      padding: 0 14px;
      font-size: 13px;
      border-radius: 40px;
      align-items: center;
    }

    /* ================= SECTION 1 — CAPABILITY CARDS ================= */
    .cap-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(16px, 1.7vw, 24px);
    }

    /* the cards carry three or four lines of copy at most, so the generous
       padding was reading as empty depth rather than breathing room — the box
       is tightened around the type without touching the type itself */
    .cap {
      position: relative;
      display: flex;
      flex-direction: column;
      padding: clamp(14px, 1.15vw, 17px) clamp(15px, 1.3vw, 19px);
      border-radius: 18px;
      background: var(--surface);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s, border-color .3s;
    }

    .cd-sec.alt .cap {
      background: var(--bg);
    }

    /* hairline accent that fills in on hover */
    .cap::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--blue), var(--magenta));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .4s cubic-bezier(.22, .61, .36, 1);
    }

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

    .cap:hover::before {
      transform: scaleX(1);
    }

    .cap-top {
      display: flex;
      align-items: center;
      gap: 13px;
      margin-bottom: 0;
    }

    .cap-ico {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      flex: none;
      border-radius: 11px;
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--blue) 14%, transparent), color-mix(in srgb, var(--blue) 5%, transparent));
      border: 1px solid color-mix(in srgb, var(--blue) 16%, transparent);
      color: var(--blue);
    }

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

    .cap-n {
      font-family: var(--serif);
      font-size: clamp(19px, 1.5vw, 23px);
      line-height: 1;
      letter-spacing: -.03em;
      color: color-mix(in srgb, var(--ink-faint) 22%, transparent);
    }

    .cd-sec.alt .cap-n {
      color: color-mix(in srgb, var(--ink-faint) 28%, transparent);
    }

    .cap h3 {
      flex: 1 1 auto;
      min-width: 0;
      margin: 0;
      font-size: clamp(16px, 1.15vw, 17.6px);
      line-height: 1.32;
      letter-spacing: -.015em;
      text-wrap: balance;
    }

    /* short accent rule under each card title, echoing the section eyebrow */
    .cap h3::after {
      content: none;
      display: block;
      width: 32px;
      height: 2px;
      margin: 14px 0 0;
      border-radius: 2px;
      background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--magenta) 70%, transparent));
      opacity: .5;
    }

    .cap p {
      margin: 7px 0 0 49px;
      font-size: 14.6px;
      line-height: 1.52;
      color: var(--ink-soft);
      text-align: justify;
      text-justify: inter-word;
    }

    @media (max-width:560px) {
      .cap p {
        margin-left: 0;
      }
    }

    .cap .tag-row {
      margin-top: auto;
      padding-top: 20px;
    }

    /* ================= SECTION 2 — INTEGRATION ================= */
    .api-grid {
      display: grid;
      grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
      gap: clamp(28px, 4vw, 64px);
      align-items: start;
    }

    .api-copy p {
      margin: 0 0 18px;
      font-size: clamp(16px, 1.1vw, 17.5px);
      line-height: 1.8;
      color: var(--ink-soft);
      max-width: 60ch;
    }

    /* the five standards this section is judged on */
    .api-pillars {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
      gap: 10px;
      margin: clamp(22px, 2.4vw, 30px) 0 0;
      padding: 0;
      list-style: none;
    }

    .api-pillars li {
      padding: 14px 16px;
      border-radius: 12px;
      background: var(--surface);
      border: 1px solid var(--line);
    }

    .cd-sec.alt .api-pillars li {
      background: var(--bg);
    }

    .api-pillars b {
      display: block;
      font-size: 14.5px;
      letter-spacing: -.01em;
    }

    .api-pillars span {
      display: block;
      margin-top: 5px;
      font-size: 13px;
      line-height: 1.5;
      color: var(--ink-faint);
    }

    /* protocol table — the technical half of the section */
    .proto {
      margin: 0;
      padding: 0;
      list-style: none;
      border: 1px solid var(--line);
      border-radius: 18px;
      overflow: hidden;
      background: var(--surface);
      box-shadow: var(--shadow-sm);
    }

    .cd-sec.alt .proto {
      background: var(--bg);
    }

    .proto li {
      display: grid;
      grid-template-columns: minmax(0, 132px) minmax(0, 1fr);
      gap: clamp(14px, 2vw, 26px);
      align-items: baseline;
      padding: clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 28px);
      border-top: 1px solid var(--line-soft);
    }

    .proto li:first-child {
      border-top: 0;
    }

    .proto .p-name {
      font-size: 16px;
      font-weight: 800;
      letter-spacing: -.01em;
      color: var(--blue-ink);
    }

    .proto .p-name small {
      display: block;
      margin-top: 4px;
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--ink-faint);
    }

    .proto p {
      margin: 0;
      font-size: 15px;
      line-height: 1.7;
      color: var(--ink-soft);
    }

    /* ================= SECTION 3 — BUILT FOR PRODUCTION ================= */
    .cd-band {
      position: relative;
      overflow: hidden;
      padding: clamp(52px, 5.8vw, 92px) 0;
      background: linear-gradient(150deg, #10222e 0%, #0d3448 42%, #082a3e 100%);
      color: #fff;
      scroll-margin-top: 80px;
    }

    .cd-band::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(760px 340px at 94% 0%, rgba(0, 118, 175, .36), transparent 62%),
        radial-gradient(620px 320px at 4% 104%, rgba(235, 0, 139, .2), transparent 64%);
      pointer-events: none;
    }

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

    /* copy left, player right — a full-width video left the band half empty */
    #partner-video .wrap {
      display: grid;
      grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
      column-gap: clamp(30px, 4vw, 66px);
      row-gap: 16px;
      align-items: center;
    }

    #partner-video .wrap>:first-child {
      grid-column: 1;
      grid-row: 1 / span 2;
    }

    #partner-video .vid {
      grid-column: 2;
      grid-row: 1;
      margin: 0;
      max-width: none;
    }

    #partner-video .vid-note {
      grid-column: 2;
      grid-row: 2;
      margin: 0;
      max-width: none;
    }

    @media (max-width:980px) {
      #partner-video .wrap {
        grid-template-columns: minmax(0, 1fr);
      }

      #partner-video .wrap>:first-child,
      #partner-video .vid,
      #partner-video .vid-note {
        grid-column: 1;
        grid-row: auto;
      }

      #partner-video .vid {
        margin-top: clamp(26px, 3.2vw, 38px);
      }
    }

    .cd-band .sec-eyebrow {
      font-size: 13px;
      color: #ffd9ee;
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(255, 255, 255, .2);
    }

    .cd-band .sec-eyebrow::before {
      background: #ff8ac8;
      box-shadow: 0 0 0 3px rgba(255, 138, 200, .22);
    }

    .cd-band h2 {
      font-family: var(--serif);
      font-weight: 600;
      margin: 6px 0 0;
      font-size: clamp(30px, 3.8vw, 48px);
      line-height: 1.1;
      letter-spacing: -.02em;
      color: #fff;
    }

    .cd-band .lead {
      margin: 18px 0 0;
      max-width: 62ch;
      font-size: clamp(16px, 1.1vw, 18px);
      line-height: 1.78;
      color: rgba(255, 255, 255, .82);
    }

    /* secure -> observable -> performant -> reliable */
    .chain {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 14px;
      margin: clamp(26px, 3vw, 38px) 0 0;
      padding: 0;
      list-style: none;
    }

    .chain li {
      padding: 7px 16px;
      border-radius: 30px;
      background: rgba(255, 255, 255, .09);
      border: 1px solid rgba(255, 255, 255, .2);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .chain .arw {
      padding: 0;
      border: 0;
      background: none;
      color: rgba(255, 255, 255, .45);
      font-size: 15px;
      letter-spacing: 0;
    }

    .prod-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(18px, 2.2vw, 28px);
      margin-top: clamp(32px, 3.8vw, 50px);
    }

    .prod {
      display: flex;
      flex-direction: column;
      padding: clamp(24px, 2.6vw, 34px);
      border-radius: 18px;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .16);
      transition: background .24s, border-color .24s;
    }

    .prod:hover {
      background: rgba(255, 255, 255, .09);
      border-color: rgba(255, 255, 255, .3);
    }

    .prod-top {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 16px;
    }

    .prod-ico {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      flex: none;
      border-radius: 12px;
      background: rgba(255, 255, 255, .1);
      border: 1px solid rgba(255, 255, 255, .18);
      color: #7cc8ec;
    }

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

    .prod h3 {
      margin: 0;
      font-size: clamp(18px, 1.5vw, 21px);
      line-height: 1.25;
      letter-spacing: -.015em;
      color: #fff;
    }

    .prod p {
      margin: 0;
      font-size: 15.5px;
      line-height: 1.74;
      color: rgba(255, 255, 255, .78);
    }

    .prod .tag-row li {
      background: rgba(255, 255, 255, .08);
      border-color: rgba(255, 255, 255, .18);
      color: rgba(255, 255, 255, .82);
    }

    /* ================= SECTION 4 — DELIVERY PIPELINE ================= */
    .flow {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: clamp(10px, 1.1vw, 16px);
      margin: 0;
      padding: 0;
      list-style: none;
      counter-reset: step;
    }

    .flow li {
      position: relative;
      padding: clamp(18px, 1.8vw, 24px) clamp(14px, 1.4vw, 18px);
      border-radius: 14px;
      background: var(--surface);
      border: 1px solid var(--line);
      transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s;
    }

    .cd-sec.alt .flow li {
      background: var(--bg);
    }

    .flow li:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-sm);
    }

    .flow .s-n {
      display: block;
      font-family: var(--serif);
      font-size: 14px;
      letter-spacing: .06em;
      color: var(--ink-faint);
    }

    .flow b {
      display: block;
      margin-top: 10px;
      font-size: clamp(15px, 1.15vw, 17px);
      line-height: 1.25;
      letter-spacing: -.01em;
    }

    .flow span.d {
      display: block;
      margin-top: 8px;
      font-size: 13px;
      line-height: 1.55;
      color: var(--ink-faint);
    }

    /* the rule that ties the stages together */
    .flow li::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 100%;
      width: clamp(10px, 1.1vw, 16px);
      height: 1px;
      background: var(--line);
    }

    .flow li:last-child::after {
      display: none;
    }

    .flow-note {
      margin: clamp(26px, 3vw, 36px) 0 0;
      padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.4vw, 32px);
      border-left: 3px solid var(--magenta);
      border-radius: 0 14px 14px 0;
      background: var(--surface);
      border-top: 1px solid var(--line);
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      font-family: var(--serif);
      font-size: clamp(17px, 1.4vw, 21px);
      line-height: 1.6;
      color: var(--ink);
      max-width: 78ch;
    }

    .cd-sec.alt .flow-note {
      background: var(--bg);
    }

    /* ================= SECTION 5 — EXECUTION ================= */
    .exec {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 clamp(34px, 4.4vw, 72px);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .exec li {
      padding: clamp(26px, 2.8vw, 36px) 0;
      border-top: 1px solid var(--line);
    }

    .exec li:nth-child(-n+2) {
      border-top: 0;
      padding-top: 0;
    }

    .exec .e-n {
      display: block;
      font-family: var(--serif);
      font-size: 14px;
      letter-spacing: .06em;
      color: var(--magenta-ink);
    }

    .exec h3 {
      margin: 12px 0 0;
      font-family: var(--serif);
      font-weight: 600;
      font-size: clamp(21px, 1.9vw, 27px);
      line-height: 1.18;
      letter-spacing: -.02em;
    }

    .exec p {
      margin: 12px 0 0;
      font-size: 15.5px;
      line-height: 1.78;
      color: var(--ink-soft);
      max-width: 52ch;
    }

    /* ================= SECTION 6 — TECHNOLOGY ECOSYSTEM ================= */
    .eco {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
      gap: clamp(18px, 2vw, 28px);
    }

    .eco-col h3 {
      margin: 0 0 14px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--line);
      font-size: 12.5px;
      font-weight: 800;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--ink-faint);
    }

    .eco-col .tag-row {
      margin: 0;
    }

    .eco-note {
      margin: clamp(26px, 3vw, 36px) 0 0;
      font-size: 14.5px;
      line-height: 1.7;
      color: var(--ink-faint);
      max-width: 76ch;
    }

    /* ================= SECTION 7 — THE DIFFERENCE ================= */
    .diff-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
      gap: clamp(30px, 4vw, 68px);
      align-items: start;
    }

    .diff-copy p {
      margin: 0 0 18px;
      font-size: clamp(16.5px, 1.15vw, 18px);
      line-height: 1.8;
      color: var(--ink-soft);
      max-width: 56ch;
    }

    .diff-copy p:last-child {
      margin-bottom: 0;
    }

    .diff-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1px;
      margin: 0;
      padding: 0;
      list-style: none;
      background: var(--line);
      border: 1px solid var(--line);
      border-radius: 18px;
      overflow: hidden;
    }

    .diff-list li {
      padding: clamp(20px, 2.2vw, 28px);
      background: var(--surface);
    }

    .cd-sec.alt .diff-list li {
      background: var(--bg);
    }

    .diff-list b {
      display: block;
      font-family: var(--serif);
      font-weight: 600;
      font-size: clamp(18px, 1.5vw, 21px);
      line-height: 1.2;
      letter-spacing: -.015em;
    }

    .diff-list span {
      display: block;
      margin-top: 8px;
      font-size: 14px;
      line-height: 1.6;
      color: var(--ink-soft);
    }

    /* ================= FINAL CTA ================= */
    /* the side padding normally carried by .wrap moves out to the section,
       since the wrap itself becomes the panel below */
    .cd-cta {
      padding: clamp(52px, 5.6vw, 88px) 26px;
      background: var(--bg);
      text-align: center;
    }

    /* the closing ask sits on its own panel so it reads as a destination
       instead of trailing off into the footer */
    .cd-cta .wrap {
      padding: clamp(40px, 4.6vw, 68px) clamp(24px, 3vw, 52px);
      border-radius: 24px;
      border: 1px solid var(--line);
      background:
        radial-gradient(120% 130% at 50% 0%, color-mix(in srgb, var(--blue) 7%, var(--surface)) 0%, var(--surface) 62%);
      box-shadow: var(--shadow-sm);
    }

    .cd-cta h2 {
      margin: 0 auto;
      max-width: 20ch;
      font-family: var(--serif);
      font-weight: 600;
      font-size: clamp(30px, 3.8vw, 50px);
      line-height: 1.1;
      letter-spacing: -.02em;
    }

    .cd-cta p {
      margin: 20px auto 0;
      max-width: 60ch;
      font-size: clamp(16px, 1.1vw, 18px);
      line-height: 1.78;
      color: var(--ink-soft);
    }

    .cd-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      margin-top: clamp(26px, 3vw, 36px);
    }

    /* the shared button height is fixed site-wide, so the label must not wrap */
    .cd-actions .viewbtn {
      white-space: nowrap;
    }

    .cd-cta p.cd-cta-meta {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px 26px;
      margin-top: 24px;
      font-size: 14.5px;
      color: var(--ink-faint);
    }

    .cd-cta p.cd-cta-meta a {
      color: var(--ink-soft);
      font-weight: 700;
      text-decoration: none;
    }

    .cd-cta p.cd-cta-meta a:hover {
      color: var(--magenta-ink);
      text-decoration: underline;
    }

    /* ================= RESPONSIVE ================= */
    /* the pipeline is the first thing to run out of room */
    @media (max-width:1240px) {
      .flow {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        row-gap: clamp(14px, 1.6vw, 20px);
      }

      .flow li:nth-child(4)::after {
        display: none;
      }
    }

    @media (max-width:1080px) {
      .api-grid,
      .diff-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    @media (max-width:1100px) {
      .cap-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width:880px) {
      .cap-grid,
      .prod-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .flow li:nth-child(4)::after,
      .flow li:nth-child(even)::after {
        display: none;
      }

      .exec {
        grid-template-columns: minmax(0, 1fr);
      }

      .exec li:nth-child(2) {
        border-top: 1px solid var(--line);
        padding-top: clamp(26px, 2.8vw, 36px);
      }

      .proto li {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
      }
    }

    @media (max-width:640px) {

      .flow {
        grid-template-columns: minmax(0, 1fr);
      }

      .flow li::after {
        display: none;
      }

      .diff-list {
        grid-template-columns: minmax(0, 1fr);
      }
    }

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

      .cap:hover,
      .flow li:hover {
        transform: none;
      }
    }

    /* an odd number of cards would leave a hole in the last row */
    @media (min-width:1101px) {
      .cap-grid > .cap:last-child:nth-child(3n+1) {
        grid-column: 1 / -1;
      }

      /* four cards read better as a 2x2 block than as three plus a full-width
         strip carrying a single line of copy */
      .cap-grid:has(> .cap:nth-child(4):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .cap-grid:has(> .cap:nth-child(4):last-child)>.cap:last-child {
        grid-column: auto;
      }
    }

    @media (max-width:1100px) and (min-width:881px) {
      .cap-grid > .cap:last-child:nth-child(odd) {
        grid-column: 1 / -1;
      }
    }

    /* ---- carrier pages: video, comparison tables, plain prose ---- */
    /* full-bleed 16:9 was over 700px tall on a desktop — cap it so the band
       stays a section rather than a screen of its own */
    .vid {
      position: relative;
      margin: clamp(30px, 3.6vw, 46px) 0 0;
      max-width: 900px;
      aspect-ratio: 16 / 9;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .18);
      background: rgba(0, 0, 0, .35);
      box-shadow: var(--shadow-md);
    }

    .vid iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
    }

    .vid-note {
      margin: 18px 0 0;
      max-width: 900px;
      font-size: 14.5px;
      line-height: 1.7;
      color: rgba(255, 255, 255, .7);
    }

    /* Justified, with hyphenation on: at this measure an unhyphenated justify
       opens visible rivers between words on the short lines. The page is
       lang="en", so the browser has a dictionary to break on. */
    .cprose p {
      margin: 0 0 18px;
      font-size: clamp(16px, 1.1vw, 17.5px);
      line-height: 1.8;
      color: var(--ink-soft);
      max-width: 74ch;
      text-align: justify;
      -webkit-hyphens: auto;
      hyphens: auto;
    }

    .cprose p:last-child {
      margin-bottom: 0;
    }

    .ctab-wrap {
      overflow-x: auto;
      border-radius: 16px;
      border: 1px solid var(--line);
      background: var(--surface);
    }

    .cd-sec.alt .ctab-wrap {
      background: var(--bg);
    }

    table.ctab {
      width: 100%;
      min-width: 620px;
      border-collapse: collapse;
      table-layout: fixed;
    }

    table.ctab caption {
      caption-side: top;
      text-align: left;
      padding: 14px 18px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--ink-faint);
      background: var(--surface-2);
      border-bottom: 1px solid var(--line);
    }

    .cd-sec.alt table.ctab caption {
      background: color-mix(in srgb, var(--surface-2) 60%, var(--bg));
    }

    table.ctab th,
    table.ctab td {
      padding: 17px 20px;
      font-size: 14.8px;
      line-height: 1.65;
      text-align: left;
      vertical-align: top;
      border-top: 1px solid var(--line-soft);
      color: var(--ink-soft);
    }

    table.ctab thead th {
      border-top: 0;
      font-size: 12.5px;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--ink);
      background: color-mix(in srgb, var(--blue) 6%, transparent);
    }

    table.ctab tbody th[scope="row"] {
      font-weight: 700;
      color: var(--ink);
      background: color-mix(in srgb, var(--surface-2) 45%, transparent);
    }

    /* ---- client screenshot slot ---- */
    .uc-shot {
      position: relative;
      container-type: inline-size;
      margin: 0;
      overflow: hidden;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: var(--surface);
      box-shadow: var(--shadow-sm);
    }

    .uc-shot img {
      display: block;
      width: 100%;
      height: auto;
    }

    .uc-shot:has(img) .uc-ph {
      display: none;
    }

    .uc-ph {
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 10px;
      text-align: center;
      aspect-ratio: 16 / 9;
      padding: 24px;
      background:
        radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--blue) 8%, transparent), transparent 70%),
        var(--surface-2);
      border: 1px dashed var(--line);
      border-radius: 18px;
    }

    .uc-ph b {
      font-family: var(--serif);
      font-weight: 600;
      font-size: clamp(22px, 4cqi, 38px);
      line-height: 1.1;
      letter-spacing: -.02em;
      color: var(--blue-ink);
    }

    .uc-ph span {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--ink-faint);
    }

    /* Carrier marks sit in the copy flow, the same slot the AT&T and T-Mobile
       pages use. No plate, per the client's instruction. */
    .carrier-mark {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: clamp(18px, 2.2vw, 32px);
      margin: clamp(18px, 2.2vw, 28px) 0 0;
    }

    /* The supplied file carries Verizon's mandated clear space inside the PNG:
       the wordmark is only 41% of the canvas height, with a transparent band
       above and below it. Sizing the file to 32px would therefore render a 13px
       wordmark. So the height is scaled up by 1/.414 to put the *ink* at the
       24-32px the wordmark has always occupied here, and the transparent band is
       pulled back in so the mark keeps the AT&T banner's spacing off the rule
       above and the buttons below. The PNG itself is untouched — this is
       layout, not a modified asset. */
    .carrier-mark img {
      --vz-box: clamp(58px, 5.8vw, 77px);
      display: block;
      width: auto;
      height: var(--vz-box);
      /* the band is a uniform 405px on all four sides of a 1361px-tall canvas,
         so every side pulls back by the same .298 — without the left one the
         wordmark hangs ~23px inboard of the copy it sits under. Bottom is 392px,
         hence the slightly smaller figure. */
      margin: calc(var(--vz-box) * -.298);
      margin-bottom: calc(var(--vz-box) * -.288);
    }

    /* the marks read as a credential row rather than loose images. inline-flex
       shrank the rule to the width of the logo, which read as a stray dash */
    .carrier-mark {
      display: flex;
      justify-content: flex-start;
      padding-top: clamp(22px, 2.4vw, 32px);
      border-top: 1px solid rgba(255, 255, 255, .16);
    }

    /* ---------- section head: carrier credential ----------
       The headline is capped at 30ch, which left the right half of every panel
       head empty. The carrier mark fills it and repeats down the tab panels.
       White plate for the same reason the utility bar uses one: it keeps the
       carrier marks legible on the cream ground and in the dark theme. */
    .ppanel .cd-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      column-gap: clamp(28px, 4vw, 64px);
    }

    .cd-cred {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(16px, 1.6vw, 22px) clamp(22px, 2.2vw, 30px);
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--r);
      box-shadow: var(--shadow-sm);
    }

    .cd-cred img {
      display: block;
      width: auto;
      height: clamp(38px, 3.4vw, 50px);
    }

    /* ---------- panel head: two-column editorial split ----------
       These heads used to park the carrier logo in the right column, which the
       client did not want repeated down every panel. The headline is capped at
       30ch, so removing it left the right half empty. Nothing is added to fill
       it: the lead paragraph that already followed the headline moves into the
       second column behind a hairline, balancing the head with content the
       panel already carried. Below 1000px the columns collapse and the lead
       returns to its original position, so reading order never changes. */
    .ppanel .cd-head {
      grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
      align-items: start;
      column-gap: clamp(32px, 4.5vw, 72px);
    }

    /* The lead centres on the headline itself, not on the eyebrow + headline
       stack. Centring against the whole block floated the paragraph above the
       headline and read as top-hung, and the old fixed padding-top only ever
       approximated the offset — it drifted with the viewport and with how many
       lines each panel's lead ran to. Both columns centre in the row, then the
       lead is nudged down by the eyebrow band, which puts its centre exactly on
       the headline's at every width while the eyebrow keeps its own 18px gap
       above the headline. */
    .ppanel .cd-head {
      /* the eyebrow pill's own height plus the 18px margin below it */
      --cd-eyebrow-band: 53px;
    }

    .ppanel .cd-head .cd-copy {
      align-self: center;
    }

    .ppanel .cd-lead {
      align-self: center;
      margin-top: var(--cd-eyebrow-band);
    }

    .cd-lead {
      padding-left: clamp(24px, 2.6vw, 40px);
      border-left: 1px solid var(--line);
    }

    /* justified on the same terms as the hero lead: the column is a measured
       block beside the headline, so a flush right edge reads as a second column
       of the head rather than loose prose. Hyphenation keeps the word spacing
       even at the narrower measure. */
    .cd-lead p {
      margin: 0;
      text-align: justify;
      text-justify: inter-word;
      -webkit-hyphens: auto;
      hyphens: auto;
    }

    /* The comparison panel goes straight from its headline into the table, so
       there is no lead prose to sit in the second column. Rather than leave that
       column empty, the head runs full width and the headline is given a wider
       measure — which sets it in two lines instead of three. */
    .ppanel .cd-head.is-wide {
      grid-template-columns: minmax(0, 1fr);
    }

    .cd-head.is-wide h2 {
      max-width: 48ch;
    }

    @media (max-width:1000px) {
      .cd-lead {
        padding: 0;
        border-left: 0;
      }

      /* stacked: one column, so there is no headline beside the lead to centre
         against and it returns to plain body copy under the headline */
      .ppanel .cd-lead {
        margin-top: 20px;
      }
    }

    /* stacked: the plate drops under the copy, left-aligned with it */
    @media (max-width:1000px) {
      .ppanel .cd-head {
        grid-template-columns: 1fr;
      }

      .cd-cred {
        justify-self: start;
        margin-top: clamp(20px, 2.4vw, 28px);
      }
    }

    /* ---- "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. */
.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; }
.hero .btn-ghost:hover { color: var(--ink) !important; }
.hero .btn-ghost:active { color: var(--ink) !important; }
.hero .btn-ghost:focus { color: var(--ink) !important; }
.btn-primary:hover { color: #fff !important; text-decoration: none !important; }
.btn-primary:active { color: #fff !important; text-decoration: none !important; }
.btn-primary:focus { color: #fff !important; text-decoration: none !important; }
.btn-ghost:hover { color: #fff !important; text-decoration: none !important; }
.btn-ghost:active { color: #fff !important; text-decoration: none !important; }
.btn-ghost:focus { color: #fff !important; text-decoration: none !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; }
.sp .rail .on:hover { color: #fff !important; }
.sp .rail .on:active { color: #fff !important; }
.sp .rail .on:focus { color: #fff !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; }
.crumb .on:hover { color: var(--ink) !important; }
.crumb .on:active { color: var(--ink) !important; }
.crumb .on:focus { color: var(--ink) !important; }
.sw-card h3 a:hover { color: var(--ink) !important; text-decoration: none !important; }
.sw-card h3 a:active { color: var(--ink) !important; text-decoration: none !important; }
.sw-card h3 a:focus { color: var(--ink) !important; text-decoration: none !important; }
.sw-card h3 a:hover:hover { color: var(--blue) !important; }
.sw-card h3 a:hover:active { color: var(--blue) !important; }
.sw-card h3 a:hover:focus { color: var(--blue) !important; }
.cd-cta p.cd-cta-meta a:hover { color: var(--ink-soft) !important; text-decoration: none !important; }
.cd-cta p.cd-cta-meta a:active { color: var(--ink-soft) !important; text-decoration: none !important; }
.cd-cta p.cd-cta-meta a:focus { color: var(--ink-soft) !important; text-decoration: none !important; }
.cd-cta p.cd-cta-meta a:hover:hover { color: var(--magenta-ink) !important; text-decoration: underline !important; }
.cd-cta p.cd-cta-meta a:hover:active { color: var(--magenta-ink) !important; text-decoration: underline !important; }
.cd-cta p.cd-cta-meta a:hover:focus { color: var(--magenta-ink) !important; text-decoration: underline !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)); }
}