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

/* --- ../assets/css/shop.css (linked, inlined by port_page.py) --- */
/* The shop screens' stylesheet.  GENERATED — do not edit.
   ==========================================================================
   Written by scripts/shop/build.py. Every rule below is the live site's own
   CSS, lifted out of the pages that own it — the design tokens, header, mega
   menu, footer, buttons, bands and typography from a product page, the
   product-card grid from the Routers listing, the form fields from the Sales
   Request page. Edit the site and re-run the build; editing here is undone by
   the next run.

   What is NOT here: assets/css/commerce.css, assets/css/shop-card.css and
   assets/css/cart-indicator.css, the three files written by hand for these
   screens. Each page links them after this one, so the order they apply in is
   visible in the page rather than buried in a concatenation. */


/* ---- the page reset every HBE page opens with ---- */
body {
      margin: 0;
      padding: 0;
      font: 14px -apple-system, BlinkMacSystemFont, sans-serif
    }

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

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

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

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

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

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

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

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

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

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

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

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

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

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

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

    section {
      position: relative;
    }

    a {
      color: inherit;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      * {
        scroll-behavior: auto;
      }
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    @media (max-width:920px) {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    @media (max-width:1680px) {

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

    @media (max-width:1620px) {

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

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

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

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

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

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

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

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

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

    @media (max-width:1080px) {

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

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

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

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

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

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

    header.site .wrap {
      position: relative;
    }

    .has-mega {
      position: static;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      .menu-toggle {
        display: flex;
      }
    }

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

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

    .hero .eyebrow {
      display: none;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

    /* alternate the two brand accents so the column reads as a rhythm, not a wall */
    ul.hero-points li:nth-child(3) .hp-ico,
    ul.hero-points li:nth-child(6) .hp-ico {
      color: var(--magenta-ink);
      background: color-mix(in srgb, var(--magenta) 9%, var(--surface));
      border-color: color-mix(in srgb, var(--magenta) 22%, transparent);
    }

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

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

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

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

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

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

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

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

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

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

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

      .mag-art {
        order: -1;
      }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .center {
      text-align: center;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .sc-body {
      flex: 1;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .switch-foot svg {
      flex: none;
    }

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

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

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

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

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

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

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

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

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

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

    .optvar {
      text-align: center;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      .flip {
        min-height: auto;
      }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    /* business / residential split */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .cell-team {
      overflow: hidden;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: .3;
      }
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .fiveg h2 em {
      color: #ff5cae;
    }

    .fiveg .intro {
      color: #cfe6f4;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ---- the product-page components: hero, price, tabs, spec tables ---- */
/* ============ HBE-5G CPE product page ============ */
    .crumb {
      background: var(--surface);
      border-bottom: 1px solid var(--line);
      font-size: 13.5px;
      color: var(--ink-faint);
    }

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

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

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

    .crumb .sep {
      opacity: .5;
    }

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

    /* ---- hero: gallery left, copy right ---- */
    .cpe-hero {
      padding: clamp(34px, 4vw, 60px) 0 clamp(44px, 5vw, 76px);
      background: var(--bg);
    }

    .cpe-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: clamp(32px, 4vw, 64px);
      align-items: start;
    }

    .cpe-copy h1 {
      margin: 0;
      max-width: 18ch;
      font-size: clamp(30px, 3.6vw, 46px);
      line-height: 1.14;
    }

    /* Prime's manufacturer names run 54-92 characters against Panamax's 49 max,
       and at the size above they wrap to four lines. Long names get a wider
       measure and a smaller size; the generator sets the class by length. */
    .cpe-copy h1.long {
      max-width: 32ch;
      font-size: clamp(24px, 2.6vw, 32px);
      line-height: 1.2;
    }

    .cpe-copy .tagline {
      margin: 14px 0 0;
      font-size: 17px;
      line-height: 1.5;
      color: var(--ink-soft);
    }

    .cpe-copy .model {
      display: inline-block;
      margin: 16px 0 0;
      padding: 5px 13px;
      border-radius: 20px;
      background: var(--surface-2);
      border: 1px solid var(--line);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--ink-faint);
    }

    /* price and SKU sit under the model chip, in the same rhythm as the tagline
       (the cpe-meta component from the HBE-AX3000 page) */
    .cpe-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 8px 18px;
      margin: 18px 0 0;
    }

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

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

    .ov {
      margin-top: clamp(24px, 3vw, 34px);
    }

    .ov h2 {
      margin: 0 0 14px;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--magenta-ink);
    }

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

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

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

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

    .buy-row {
      margin-top: 28px;
    }

    /* sized to the Sales Request pill in the header — same 30px height, same
       pill radius, same type size */
    a.buybtn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      height: 30px;
      padding: 0 12px;
      border-radius: 40px;
      color: #fff;
      background: var(--blue);
      border: 0;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .01em;
      text-decoration: none;
      box-shadow: var(--shadow-sm);
      transition: background .14s, transform .12s, box-shadow .14s;
    }

    a.buybtn:hover {
      background: var(--blue-deep);
      transform: translateY(-1px);
      box-shadow: var(--shadow-md);
    }

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

    /* ---- bands ---- */
    .band {
      padding: clamp(52px, 6vw, 86px) 0;
      background: var(--bg);
      display: flow-root;
    }

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

    .band-head {
      max-width: 800px;
    }

    .band-head h2 {
      margin: 0;
      font-size: clamp(26px, 3.2vw, 40px);
      line-height: 1.18;
    }

    .band-head p {
      margin: 16px 0 0;
      font-size: 17px;
      line-height: 1.7;
      color: var(--ink-soft);
    }

    /* ---- key features ---- */
    .kf-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
      gap: clamp(18px, 2.2vw, 26px);
      margin-top: clamp(32px, 4vw, 48px);
    }

    .kf {
      padding: 28px 30px;
      border-radius: 18px;
      background: var(--surface);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-sm);
    }

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

    .kf-ico {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      margin-bottom: 16px;
      border-radius: 13px;
      color: var(--blue);
      background: color-mix(in srgb, var(--blue) 9%, var(--surface));
      border: 1px solid color-mix(in srgb, var(--blue) 20%, transparent);
    }

    .kf:nth-child(4) .kf-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);
    }

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

    .kf h3 {
      margin: 0 0 9px;
      font-size: 19px;
      line-height: 1.3;
    }

    .kf p {
      margin: 0;
      font-size: 15.5px;
      line-height: 1.62;
      color: var(--ink-soft);
    }

    /* ---- specifications ---- */
    .spec-wrap {
      margin-top: clamp(28px, 3.2vw, 42px);
      border: 1px solid var(--line);
      border-radius: 16px;
      overflow-x: auto;
      background: var(--surface);
      box-shadow: var(--shadow-sm);
    }

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

    table.spec {
      width: 100%;
      border-collapse: collapse;
      min-width: 640px;
    }

    table.spec caption {
      text-align: left;
      padding: 18px 22px;
      font-weight: 800;
      font-size: 13px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--ink-faint);
      border-bottom: 1px solid var(--line);
    }

    table.spec th[scope="row"] {
      width: 235px;
      text-align: left;
      vertical-align: top;
      padding: 18px 22px;
      font-size: 15px;
      font-weight: 800;
      color: var(--ink);
      background: var(--surface-2);
      border-bottom: 1px solid var(--line);
      border-right: 1px solid var(--line);
    }

    table.spec td {
      padding: 16px 22px;
      vertical-align: top;
      border-bottom: 1px solid var(--line);
    }

    ul.speclist {
      margin: 0;
      padding-left: 20px;
      font-size: 14.8px;
      line-height: 1.62;
      color: var(--ink-soft);
    }

    ul.speclist li {
      margin: 3px 0;
      overflow-wrap: anywhere;
    }

    ul.speclist ul {
      margin: 4px 0 6px;
      padding-left: 18px;
      list-style: circle;
      color: var(--ink-faint);
    }

    .pack {
      margin-top: clamp(24px, 3vw, 34px);
      padding: 26px 30px;
      border-radius: 16px;
      background: var(--surface-2);
      border: 1px solid var(--line);
      max-width: 60ch;
    }

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

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

    /* ---- full-width detail panels ---- */
    .panels {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
      gap: clamp(16px, 2vw, 24px);
      margin-top: clamp(32px, 4vw, 48px);
    }

    .panels figure {
      margin: 0;
      overflow: hidden;
      border-radius: 16px;
      border: 1px solid var(--line);
      background: #fff;
      box-shadow: var(--shadow-sm);
    }

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

    .srcline {
      margin: clamp(30px, 4vw, 46px) 0 0;
      padding-top: 16px;
      border-top: 1px dashed var(--line);
      font-size: 13px;
      line-height: 1.7;
      color: var(--ink-faint);
    }

    @media (max-width:1100px) {

      [data-reveal="left"],
      [data-reveal="right"] {
        transform: translateY(22px);
      }

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

      table.spec th[scope="row"] {
        width: 165px;
      }
    }
  
    /* ---- gallery column tracks the height of the product copy beside it ---- */
    .cpe-grid {
      align-items: stretch;
    }

  
    /* nav + Sales Request no longer fit on one line — nav gets its own row */

    /* the last ~80px before the hamburger: the decorative badge is the first thing
       to go, so the labels themselves stay as large as possible */
    @media (min-width:1011px) and (max-width:1060px) {
      nav.main .nav-badge {
        display: none;
      }

      nav.main {
        margin-right: 6px;
      }

      /* and the CTA gives back a few pixels rather than the labels shrinking further */
      .cta-btn.desktop {
        padding: 0 9px;
        font-size: 12px;
      }
    }

    /* ---- the white logo plate scales with the viewport, and --logo-plate-end
       tracks it, so "menu starts where the logo ends" holds at every width ---- */
    @media (max-width:1520px) {
      :root {
        --logo-plate-end: 196px;
      }

      .util .wrap {
        min-height: 80px;
        padding-top: 10px;
        padding-bottom: 10px;
      }

      .util .logo {
        padding: 0 23px;
        margin: -10px 0;
      }

      .util .logo img {
        height: 72px;
      }
    }

    @media (max-width:1200px) {
      :root {
        --logo-plate-end: 166px;
      }

      .util .wrap {
        min-height: 70px;
        padding-top: 9px;
        padding-bottom: 9px;
      }

      .util .logo {
        padding: 0 19px;
        margin: -9px 0;
      }

      .util .logo img {
        height: 62px;
      }
    }

    @media (max-width:1030px) {
      :root {
        --logo-plate-end: 142px;
      }

      .util .wrap {
        min-height: 62px;
        padding-top: 8px;
        padding-bottom: 8px;
      }

      .util .logo {
        padding: 0 15px;
        margin: -8px 0;
      }

      .util .logo img {
        height: 54px;
      }
    }

    /* ---- One line at every width. The nav still starts at the logo plate's right
       edge; item size is interpolated against the viewport so the row always fits
       between that edge and the Sales Request button — no steps, no wrapping. ---- */
    @media (min-width:1011px) and (max-width:1520px) {

      nav.main>a,
      nav.main .has-mega>a {
        padding: 0 clamp(2px, calc(1.34vw - 11.4px), 9px);
        font-size: clamp(9.9px, calc(0.76vw + 2.45px), 14px);
        gap: clamp(2px, .42vw, 6px);
      }

      nav.main .caret {
        width: clamp(9px, .78vw, 12px);
      }

      .nav-badge {
        margin-left: clamp(2px, .3vw, 6px);
        padding: 1px clamp(4px, .38vw, 6px);
        font-size: clamp(8px, .62vw, 10px);
      }
    }

    /* ---- the white logo plate scales with the viewport, and --logo-plate-end
       tracks it, so "menu starts where the logo ends" holds at every width ---- */
    @media (max-width:1520px) {
      :root {
        --logo-plate-end: 196px;
      }

      .util .wrap {
        min-height: 80px;
        padding-top: 10px;
        padding-bottom: 10px;
      }

      .util .logo {
        padding: 0 23px;
        margin: -10px 0;
      }

      .util .logo img {
        height: 72px;
      }
    }

    @media (max-width:1200px) {
      :root {
        --logo-plate-end: 166px;
      }

      .util .wrap {
        min-height: 70px;
        padding-top: 9px;
        padding-bottom: 9px;
      }

      .util .logo {
        padding: 0 19px;
        margin: -9px 0;
      }

      .util .logo img {
        height: 62px;
      }
    }

    @media (max-width:1030px) {
      :root {
        --logo-plate-end: 142px;
      }

      .util .wrap {
        min-height: 62px;
        padding-top: 8px;
        padding-bottom: 8px;
      }

      .util .logo {
        padding: 0 15px;
        margin: -8px 0;
      }

      .util .logo img {
        height: 54px;
      }
    }

    /* ---- keep the ten top-level items on one line all the way down to the
       hamburger breakpoint: shrink the items, never wrap the row ---- */
    @media (max-width:1180px) {

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

      nav.main .caret {
        width: 10px;
      }
    }

    @media (max-width:1080px) {

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

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

    /* last stop before the hamburger takes over at 980px */
    @media (max-width:1030px) {

      nav.main>a,
      nav.main .has-mega>a {
        padding: 0 3px;
        font-size: 11.6px;
        gap: 3px;
      }

      nav.main .caret {
        width: 9px;
      }

      .nav-badge {
        padding: 1px 4px;
        font-size: 8.5px;
      }
    }

    @media (max-width:1520px) {
      /* one row at every width: nav on the left, Sales Request pinned right.
         Nothing wraps — the size ladder above shrinks the items to fit. */
      header.site .wrap {
        flex-wrap: nowrap;
        height: 66px;
        row-gap: 0;
        padding-top: 0;
        padding-bottom: 0;
      }

      nav.main {
        order: 0;
        flex: 1 1 auto;
        min-width: 0;
        margin-right: 12px;
        justify-content: flex-start;
        flex-wrap: nowrap;
      }

      nav.main>a,
      nav.main .has-mega>a {
        flex: none;
        white-space: nowrap;
        height: 66px;
      }

      .cta-btn.desktop {
        margin-left: auto;
      }

      header.site .has-mega.hp {
        position: static;
      }

      header.site .mega.mega-sm {
        left: 12px;
        right: 12px;
        width: auto;
      }

      /* the About menu is narrow enough to stay centred on its trigger — it does
         not need the full-bar anchoring the wider Home Phone menu relies on */
      header.site .mega.mega-sm.ab-menu {
        left: 50%;
        right: auto;
        width: min(524px, calc(100vw - 32px));
      }
    }

    /* ---- every action button is the same height as the Sales Request pill.
       The container-scoped rules above set padding with a shorthand and out-rank a
       bare .viewbtn, so those containers are named here to reset it cleanly. ---- */
    .pcta .viewbtn,
    .pcta .btn-outline,
    .sw-actions .viewbtn,
    .sw-actions .btn-outline,
    .ab-cta .viewbtn,
    .ab-cta .btn-outline,
    .ds-actions .viewbtn,
    .ds-actions .btn-outline,
    .prod .links a.viewbtn,
    .viewbtn,
    .btn-outline,
    a.buybtn {
      height: 30px;
      padding-top: 0;
      padding-bottom: 0;
      align-items: center;
    }

    /* =================== HERO LAYOUT ===================
       The product is portrait, so a landscape photo frame left it stranded in
       white space. The frame is now square and capped, and the columns are split
       44/56 in the copy's favour. The two columns start level at the top rather
       than being centred against each other. */
    .cpe-hero {
      padding: clamp(30px, 3.6vw, 56px) 0 clamp(34px, 4vw, 58px);
    }

    .cpe-grid {
      grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
      gap: clamp(34px, 4.4vw, 72px);
      align-items: start;
    }

    .cpe-copy {
      max-width: 660px;
    }

    /* ---- product tabs: a boxed strip the active tab merges into, following the
       Panamax reference but drawn in the site's palette. The strip and the panel
       card share one padded container so their left edges align exactly. ---- */
    .ptabs-bar {
      background: transparent;
      border-bottom: 0;
      padding-top: clamp(26px, 3vw, 44px);
    }

    .ptabs {
      display: flex;
      align-items: stretch;
      gap: 4px;
      /* sit one pixel over the card so the active tab and the card share an edge */
      margin-bottom: -1px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .ptabs::-webkit-scrollbar {
      display: none;
    }

    .ptabs button {
      appearance: none;
      position: relative;
      z-index: 1;
      font-family: inherit;
      font-size: 12.5px;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      cursor: pointer;
      white-space: nowrap;
      padding: 15px 26px;
      color: var(--ink-faint);
      background: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
      border: 1px solid var(--line);
      /* transparent rule on every tab keeps all six the same height */
      border-top: 3px solid transparent;
      border-radius: 8px 8px 0 0;
      transition: color .14s, background .14s, border-color .14s;
    }

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

    .ptabs button[aria-selected="true"] {
      color: var(--ink);
      background: var(--surface);
      /* the rule spans the full tab and follows its radius */
      border-top-color: var(--magenta);
      /* paint over the card's top border so the two become one surface */
      border-bottom-color: var(--surface);
    }

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

    /* the panel card — an inner element, so it shares the strip's gutters */
    .ppanel .yband {
      padding-top: 0;
      padding-bottom: clamp(48px, 6vw, 84px);
    }

    .pcard {
      position: relative;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 0 10px 10px 10px;
      padding: clamp(30px, 3.6vw, 52px) clamp(26px, 3.4vw, 48px) clamp(34px, 4vw, 56px);
    }

    .ppanel[hidden] {
      display: none;
    }

    /* panel headings: the band scale (up to 40px) is too loud inside a card, and
       the heading needs air under it before the copy starts */
    .ppanel .band-head {
      max-width: 60ch;
      margin: 0 0 clamp(18px, 2.1vw, 26px);
    }

    .ppanel .band-head h2 {
      margin: 0;
      font-size: clamp(23px, 2.15vw, 30px);
      line-height: 1.24;
      letter-spacing: -.015em;
    }

    /* the heading now owns the gap, so blocks below start flush */
    .ppanel .p-desc,
    .ppanel .kf-list,
    .ppanel .res-list,
    .ppanel .spec-wrap {
      margin-top: 0;
    }

    /* ---- green-check feature list (same component as the Yealink pages) ---- */
    .kf-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
      gap: 4px 30px;
      list-style: none;
      margin: clamp(28px, 3vw, 40px) 0 0;
      padding: 0;
    }

    .kf-list li {
      display: flex;
      align-items: flex-start;
      gap: 11px;
      font-size: 15.5px;
      line-height: 1.5;
      color: var(--ink);
      padding: 12px 0;
      border-bottom: 1px solid var(--line-soft);
    }

    .kf-list svg {
      width: 19px;
      height: 19px;
      flex: none;
      margin-top: 2px;
      color: var(--good-ink);
    }

    .kf-list li b {
      display: block;
      margin-bottom: 2px;
    }

    /* one feature the client wants to read louder than the rest */
    .kf-list li.kf-hi {
      grid-column: 1 / -1;
      align-items: center;
      gap: 13px;
      margin-top: 14px;
      padding: 16px 20px;
      border: 1px solid color-mix(in srgb, var(--magenta) 30%, transparent);
      border-radius: 14px;
      background: color-mix(in srgb, var(--magenta) 7%, var(--surface));
      font-size: 16.5px;
      font-weight: 700;
      color: var(--ink);
    }

    .kf-list li.kf-hi svg {
      color: var(--magenta-ink);
      margin-top: 0;
    }

    /* ---- description / warranty prose: a measure that wraps naturally, with
       real space between lines and between paragraphs ---- */
    .prose {
      max-width: 64ch;
    }

    .prose h3 {
      margin: 26px 0 8px;
      font-size: 17.5px;
      font-weight: 700;
      color: var(--ink);
    }

    .prose h3:first-child {
      margin-top: 0;
    }

    .prose p {
      margin: 0 0 16px;
      font-size: 16px;
      line-height: 1.8;
      color: var(--ink-soft);
      text-align: justify;
      /* the page is lang="en", so hyphenation works and keeps a justified
         64ch column from opening rivers of whitespace between words */
      hyphens: auto;
    }

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

    /* ---- resources ---- */
    .res-list {
      list-style: none;
      margin: clamp(26px, 3vw, 36px) 0 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
      gap: 12px;
    }

    .res-list a {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 18px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--surface);
      color: var(--ink);
      text-decoration: none;
      font-weight: 700;
      font-size: 15px;
      transition: border-color .14s, transform .12s, color .14s;
    }

    .res-list a:hover {
      border-color: var(--magenta);
      color: var(--magenta-ink);
      transform: translateY(-2px);
    }

    .res-list svg {
      width: 20px;
      height: 20px;
      flex: none;
      color: var(--blue);
    }

    /* hero copy picks up the same eyebrow -> title -> tagline ladder as the rest of the site */
    .cpe-copy .sec-eyebrow {
      margin: 0 0 12px;
    }

    /* two readable columns instead of four narrow ones */
    .kf-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 44px;
    }

    /* description: prose left, the numbers that matter pinned right */
    .p-desc {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
      gap: clamp(28px, 3.4vw, 56px);
      align-items: start;
      margin-top: clamp(26px, 3vw, 38px);
    }

    .p-desc .prose {
      max-width: none;
      margin: 0;
    }

    .p-glance {
      position: sticky;
      top: 84px;
      margin: 0;
      padding: 26px 28px 28px;
      border-radius: 18px;
      background: var(--surface);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-sm);
    }

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

    .p-glance h3 {
      margin: 0 0 16px;
      font-size: 12.5px;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink-faint);
    }

    .p-glance dl {
      margin: 0;
      display: grid;
      gap: 0;
    }

    .p-glance div {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 18px;
      padding: 11px 0;
      border-top: 1px solid var(--line-soft);
    }

    .p-glance div:first-child {
      border-top: 0;
      padding-top: 0;
    }

    .p-glance dt {
      font-size: 13.4px;
      color: var(--ink-soft);
    }

    .p-glance dd {
      margin: 0;
      font-size: 13.8px;
      font-weight: 700;
      color: var(--ink);
      text-align: right;
    }

    .p-glance .buybtn {
      margin-top: 22px;
      width: 100%;
      justify-content: center;
    }

    /* resources: cards keep their own size instead of stretching across the band */
    .res-list {
      grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 330px));
    }

    @media (max-width:1100px) {
      .cpe-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(26px, 4vw, 40px);
      }

      .cpe-copy {
        max-width: none;
      }
    }

    @media (max-width:900px) {
      .p-desc {
        grid-template-columns: minmax(0, 1fr);
      }

      .p-glance {
        position: static;
      }

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

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

    /* ---------------------------------------------------------------
       Shared-header fix, kept here so it is easy to lift into the other
       pages: between 1016px and 1360px the About Us panel is centred on a
       trigger that sits close to the right edge, so the hidden panel pushes
       the document sideways and the whole page gains a horizontal scrollbar.
       Right-aligning it to the trigger keeps it on-screen at every width.
       --------------------------------------------------------------- */
    @media (min-width:1016px) and (max-width:1360px) {
      header.site .mega.mega-sm.ab-menu {
        left: auto;
        right: 0;
        transform: translateY(-8px);
      }

      header.site .has-mega.ab:hover .ab-menu,
      header.site .has-mega.ab:focus-within .ab-menu,
      header.site .has-mega.ab.open .ab-menu {
        transform: none;
      }
    }

    /* Same story one tier down: between the 1030px stop and 1150px the nav
       still uses the roomy 1180px sizing, so the last item runs past the
       viewport on smaller laptops. Borrow the compact tier for that band. */
    @media (min-width:1031px) and (max-width:1150px) {

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

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

    /* ---- "Videos" makes ten top-level items. The one-line ladder above was
       tuned for nine, so from the hamburger breakpoint up to 1250px the row is
       re-interpolated a little tighter instead of stepped, which is where the
       nine items were already closest to the Sales Request button. ---- */
    @media (min-width:1011px) and (max-width:1250px) {

      nav.main>a,
      nav.main .has-mega>a {
        padding-left: clamp(3px, calc(1.05vw - 8.6px), 6px);
        padding-right: clamp(3px, calc(1.05vw - 8.6px), 6px);
        font-size: clamp(11.2px, calc(0.62vw + 4.4px), 12.8px);
        gap: 3px;
      }

      nav.main .caret {
        width: 9px;
      }

      .nav-badge {
        margin-left: 2px;
        padding: 1px 4px;
        font-size: 8.5px;
      }
    }

/* ---- back to top ---- */
/* 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 ==== */

/* ---- the product-card grid and the secondary button, lifted from the Routers listing page ---- */
.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);
    }

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

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

/* "View product" is a secondary link on a card, not a primary CTA — it runs
       a size below the Sales Request / Buy Now buttons */
    .prod .links a.viewbtn,
    .phone-cta a.viewbtn,
    .sw-card .row a.viewbtn,
    .row a.viewbtn {
      height: 25px;
      padding: 0 13px;
      font-size: 11.5px;
      border-radius: 8px;
      box-shadow: 0 5px 14px -7px var(--blue);
    }

/* ---- the form fields, lifted from the Sales Request page ---- */
.qsel {
      appearance: none;
      -webkit-appearance: none;
      font: inherit;
      font-size: 13.2px;
      font-weight: 700;
      color: var(--ink);
      background-color: var(--surface);
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a949c' stroke-width='3' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
      background-repeat: no-repeat;
      background-position: right 10px center;
      background-size: 11px;
      border: 1px solid var(--line);
      border-radius: 30px;
      padding: 6px 29px 6px 12px;
      min-width: 104px;
      cursor: pointer;
      transition: border-color .14s, box-shadow .14s;
    }

.qsel.wide {
      min-width: 300px;
    }

.qsel:hover {
      border-color: color-mix(in srgb, var(--blue) 50%, var(--line));
    }

.qsel:focus-visible {
      outline: none;
      border-color: var(--blue);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 20%, transparent);
    }

/* ---------- contact fields ---------- */
    .qfields {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 13px;
    }

.qfield {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

.qfield.wide {
      grid-column: span 2;
    }

/* the notes field runs the full width on its own row at the bottom */
    .qfield.full {
      grid-column: 1 / -1;
    }

.qfield label {
      font-size: 12.4px;
      font-weight: 700;
      color: var(--ink);
    }

.qfield input,
    .qfield textarea,
    .qfield select {
      font: inherit;
      font-size: 14.2px;
      color: var(--ink);
      background: var(--surface);
      border: 1.5px solid var(--line);
      border-radius: 10px;
      padding: 10px 12px;
      transition: border-color .14s, box-shadow .14s;
    }

/* the details block uses the square field styling, not the pill .qsel used
       on the product rows, so the dropdown matches the inputs beside it */
    .qfield select {
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a949c' stroke-width='3' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
      background-repeat: no-repeat;
      background-position: right 11px center;
      background-size: 12px;
      padding-right: 32px;
      cursor: pointer;
    }

.qfield textarea {
      min-height: 78px;
      resize: vertical;
    }

.qfield input:hover,
    .qfield textarea:hover,
    .qfield select:hover {
      border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
    }

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

.qreq {
      color: var(--magenta-ink);
    }

/* ---------- required-field validation ---------- */
    .qfield.is-error input,
    .qfield.is-error select,
    .qfield.is-error textarea {
      border-color: var(--warn);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 15%, transparent);
    }

.qfield.is-error label {
      color: var(--warn-ink);
    }

.qerr {
      display: none;
      align-items: flex-start;
      gap: 6px;
      margin: 0;
      font-size: 12.3px;
      font-weight: 600;
      line-height: 1.45;
      color: var(--warn-ink);
    }

.qfield.is-error .qerr {
      display: flex;
    }

.qerr svg {
      flex: 0 0 auto;
      width: 13px;
      height: 13px;
      margin-top: 2px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

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

@media (max-width:560px) {
  .qsel.wide {
          min-width: 0;
          width: 100%;
        }

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

  .qfield.wide,
        .qfield.full {
          grid-column: auto;
        }
}

/* ---- the primary action as a <button> ---- */
button.buybtn {
  font: inherit;
  cursor: pointer;
  border: 0;
}

button.buybtn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      height: 30px;
      padding: 0 12px;
      border-radius: 40px;
      color: #fff;
      background: var(--blue);
      border: 0;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .01em;
      text-decoration: none;
      box-shadow: var(--shadow-sm);
      transition: background .14s, transform .12s, box-shadow .14s;
    }

button.buybtn:hover {
      background: var(--blue-deep);
      transform: translateY(-1px);
      box-shadow: var(--shadow-md);
    }

button.buybtn svg {
      width: 14px;
      height: 14px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

button.buybtn {
      height: 30px;
      padding-top: 0;
      padding-bottom: 0;
      align-items: center;
    }

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

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

   Three lines where there is an MSRP to beat:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* --- ../assets/css/commerce.css (linked, inlined by port_page.py) --- */
/* =====================================================================
   COMMERCE — the only CSS on the shop screens not lifted from the site.

   Shared with the Odoo site, which serves the byte-identical file at
   odoo/addons/hbe_product/static/src/css/commerce.css. Change one and
   change the other, or the two storefronts drift.

   Every value below is an existing HBE token: --blue for commerce actions,
   --magenta only where the site already uses it (the eyebrow pill and the
   required-field marker), --line / --line-soft for borders, --shadow-sm,
   --r and the 20px card radius the .sw-card already uses, and the same
   clamp() spacing scale as the bands. No new colours, no gradients, no
   glass, no extra shadow.

   Components: header cart indicator, shop toolbar, card action row, cart
   table, quantity stepper, order summary, checkout column and its payment
   block, and the confirmation panel.
   ===================================================================== */

/* The [hidden] attribute is only a UA rule, so any author rule that sets
   display beats it — .shop-grid{display:grid} and .qfields{display:grid} both
   do, which left the empty-cart grid and the shipping-address fields on screen
   while marked hidden. Everything here toggles visibility through the
   attribute, so make it win. */
[hidden] {
  display: none !important;
}

/* The header cart's own rules used to live here, and they were written for
   the wide "Cart ( 0 )" pill the prototype put in the header — a .cta-btn
   about 120px across. That pill is gone: the button is a 34px circle with a
   badge, and assets/css/cart-indicator.css styles it, sizes it and decides
   where the nav hands over to the hamburger.

   Three blocks went with the pill, and it matters that they are gone rather
   than merely inert:

     .cta-btn.cart-btn sizing, and the rule that dropped its label below
     1700px. The button is not a .cta-btn any more, so these matched nothing.

     An unconditional step-down of the nav to `padding: 0 5px; font-size:
     12.6px` — the spacing the site itself uses below 1080px — to buy back
     the ~120px the pill cost. This one was not inert, and it was the reason
     the nav disappeared on a 1280px laptop. It has no media query, so it
     pinned the nav at its tightest setting at every width, and being more
     specific than the site's own steps it also stopped the narrower ones
     applying. A nav already at its floor cannot compress any further to make
     room, so the row collided and the hamburger took over. The compact
     button costs 48px rather than 120px, and the site's own three steps
     absorb that on their own.

     A copy of the 1360px handover, which cart-indicator.css also carries.
     Two rules for one decision is one rule too many: the copy here kept
     firing after the one there was changed.

   Anything the cart still needs is in cart-indicator.css. Note that the
   equivalent block is still present in the Odoo module's commerce.css, where
   the same pill was replaced by the same compact button — worth taking out
   there too. */

/* ---- shop toolbar ---- */
.shop-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 34px);
  padding-bottom: clamp(18px, 2vw, 24px);
  border-bottom: 1px solid var(--line);
}

.shop-search {
  position: relative;
  flex: 1 1 280px;
  min-width: 0;
}

.shop-search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  color: var(--ink-faint);
  pointer-events: none;
}

.shop-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px 12px 40px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .14s, box-shadow .14s;
}

.shop-search input:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
}

.shop-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* a filter chip is the .chips pill from the product page, made pressable */
.shop-filters button {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 9px 15px;
  cursor: pointer;
  transition: border-color .14s, color .14s, background .14s;
}

.shop-filters button:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.shop-filters button[aria-pressed="true"] {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.shop-count {
  margin: clamp(18px, 2vw, 26px) 0 0;
  font-size: 14px;
  color: var(--ink-faint);
}

/* ---- product card action row ----------------------------------------
   .sw-card and .sw-card .row are the site's; these only fill the row. A
   quote-only card gets the outline button, not a disabled one — it is a
   different route to the same shelf, not a product you cannot have. */
/* The card price uses the site's own MSRP component where there is one, so
   the struck-through figure and the badge come from product-price.css rather
   than from anything written here; this only stacks the two lines. */
.sw-card .card-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sw-card .card-price .price {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.01em;
}

.sw-card .card-price .pricing-msrp {
  font-size: 12px;
}

/* the quote route's one-line explanation, under the price */
.quote-note {
  margin: 16px 0 0;
  max-width: 54ch;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.cpe-copy .pricing {
  margin-top: clamp(18px, 2.2vw, 26px);
}

.sw-card .act {
  font: inherit;
  cursor: pointer;
  border: 0;
}

.sw-card .act.viewbtn {
  padding: 10px 18px;
  font-size: 13.5px;
  /* "Added" is a third of the width of "Add to Cart", and the price sits in
     the same flex row. Without a floor under the button the whole row
     reshuffles twice per click, which reads as the card twitching rather
     than as confirmation. Wide enough for the longer of the two labels. */
  min-width: 118px;
}

/* In flight. Held only for the length of the request, so this marks why a
   second click is not landing rather than announcing a state. */
.sw-card .act.viewbtn:disabled {
  opacity: .72;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* The moment after Odoo confirms the line. The blue stays: a commerce action
   on this site is blue, and a second colour here would be read as a second
   meaning. What changes is the weight — the lift and the cast shadow go, so
   the button sits down where it was raised — and a tick joins the label,
   which the button's own flex gap already spaces. */
.sw-card .act.viewbtn.is-added {
  transform: none;
  box-shadow: none;
}

.sw-card .act.viewbtn.is-added::before {
  content: "\2713";
  font-weight: 800;
  /* The glyph rides high in most UI faces next to a cap-height word. */
  line-height: 1;
}

.sw-card .act.quotebtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .14s, color .14s, transform .12s;
}

.sw-card .act.quotebtn:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-1px);
}

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

/* The site's secondary action is styled unqualified, so a <button> picks the
   look up but not the font — form controls do not inherit it. Two screens use
   it as a real button (Buy Now, Back to cart). */
button.btn-outline {
  font: inherit;
  cursor: pointer;
}

/* the secondary action beside a .buybtn, matched to its height and radius */
.buy-row .btn-outline {
  height: 42px;
  padding: 0 19px;
  border-radius: 40px;
  font-size: 13.5px;
}

/* full-width actions stacked in the order summary */
.summary .btn-wide {
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
  padding: 11px 22px;
  border-radius: 10px;
}

/* ---- quantity stepper ---- */
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}

.qty button {
  width: 38px;
  height: 40px;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-soft);
  background: none;
  border: 0;
  cursor: pointer;
  transition: background .12s, color .12s;
}

.qty button:hover {
  background: var(--surface-2);
  color: var(--blue);
}

.qty input {
  width: 46px;
  height: 40px;
  padding: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  background: none;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  -moz-appearance: textfield;
}

.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---- two-column commerce layout: content left, summary pinned right ---- */
.shop-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, .85fr);
  gap: clamp(26px, 3.2vw, 48px);
  align-items: start;
  margin-top: clamp(26px, 3vw, 38px);
}

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

/* ---- cart lines ---- */
.cart-lines {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.cart-line {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 20px clamp(18px, 2vw, 24px);
  border-bottom: 1px solid var(--line-soft);
}

.cart-line:last-child {
  border-bottom: 0;
}

.cart-line .shot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}

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

.cart-line h3 {
  margin: 0 0 4px;
  font-size: 16.5px;
  line-height: 1.3;
}

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

.cart-line h3 a:hover {
  color: var(--blue);
}

.cart-line .unit {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--ink-faint);
}

.cart-line .ctl {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.cart-line .line-total {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}

.cart-line .drop {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-faint);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cart-line .drop:hover {
  color: var(--warn-ink);
}

@media (max-width:560px) {
  .cart-line {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
  }

  .cart-line .shot {
    height: 72px;
  }

  .cart-line .ctl {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ---- order summary ---- */
.summary {
  position: sticky;
  top: 84px;
  padding: clamp(22px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.summary h2 {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--magenta-ink);
}

.summary dl {
  margin: 0;
}

.summary dl div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}

.summary dt {
  font-size: 14.5px;
  color: var(--ink-soft);
}

.summary dd {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.summary dl div.total {
  border-bottom: 0;
  padding-top: 16px;
}

.summary dl div.total dt {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}

.summary dl div.total dd {
  font-size: 26px;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -.01em;
}

.summary .buybtn,
.summary .btn-outline {
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
  margin-top: 14px;
}

.summary .note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-faint);
}

@media (max-width:900px) {
  .summary {
    position: static;
  }
}

/* ---- checkout ---- */
.co-step {
  margin-top: clamp(26px, 3vw, 36px);
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.co-step:first-child {
  margin-top: 0;
}

.co-step > h2 {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 20px;
  font-size: 19px;
  line-height: 1.3;
}

.co-step > h2 span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  flex: none;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: var(--blue);
  border-radius: 50%;
}

/* radio cards for shipping and payment: the .sw-card border language at
   row scale, so a selected option reads the way a selected filter does */
.opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .14s, background .14s;
}

.opt:first-of-type {
  margin-top: 0;
}

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

.opt input {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--blue);
}

.opt b {
  display: block;
  font-size: 15.5px;
  color: var(--ink);
}

.opt span {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  color: var(--ink-faint);
}

.opt .amt {
  margin-left: auto;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}

.opt:has(input:checked) {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 6%, transparent);
}

/* ---- card payment block ---- */
.pay {
  margin-top: 18px;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
}

.pay-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.pay-head svg {
  width: 16px;
  height: 16px;
  color: var(--good-ink);
}

.pay .qfields {
  margin-top: 0;
}

.mock-flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--warn-ink);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  border-radius: 10px;
}

/* ---- the band the shop screens sit in ----------------------------------

   .yband is the prototype's class and the site's stylesheet has no rule for
   it: the only selector naming it anywhere is `.ppanel .yband`, which is a
   different thing on a different page. So all four shop screens were
   rendering in a band with no padding at all, and their last card sat
   directly on the footer's trust strip with about ten pixels between them.

   Given the site's own `.band` rhythm rather than a number picked here, so
   these screens open and close on the same vertical spacing as every other
   section on the site. Slightly tighter at the top, because every one of
   these screens opens on a breadcrumb, which already carries space under it
   — the full 86px below a breadcrumb reads as a gap rather than as a start.
   --------------------------------------------------------------------- */

.yband {
  padding: clamp(28px, 3.2vw, 44px) 0 clamp(52px, 6vw, 86px);
  background: var(--bg);
  display: flow-root;
}

/* ---- confirmation -------------------------------------------------------

   Composed as a receipt, not as a landing page. Three things drive it:

   The customer has just come through the cart and the checkout, both of
   which put the content on the left and the money in a panel on the right.
   The confirmation used three equal boxes instead, which read as a different
   page rather than the last step of one flow — and it presented the total
   differently from the screen that had just quoted it. It uses .shop-grid
   and the same .summary component now, so the figure is shown the way it was
   shown before.

   The tick, the heading and the order number are one header rather than
   three centred blocks down the page. That is most of the height the old
   version spent: a 62px tick, a 44px heading and a lone pill, each with its
   own margin, on a page whose content is four short facts.

   Section headings are the site's magenta eyebrow, which is what .summary
   already uses. No second accent, no new colour.
   --------------------------------------------------------------------- */

.conf-band .wrap {
  /* A receipt does not need the full 1400px band. Narrower keeps the line
     length of the lead readable and stops the two columns drifting apart. */
  max-width: 1120px;
}

/* ---- header ---- */

.conf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 44px);
  flex-wrap: wrap;
  padding-bottom: clamp(22px, 2.6vw, 30px);
  border-bottom: 1px solid var(--line);
}

.conf-said {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.6vw, 20px);
  /* 62ch or so at this size: past that the lead gets tiring to read, and
     the order number has somewhere to sit. */
  max-width: 660px;
}

.conf-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  /* Optically centred against the cap height of the heading beside it. */
  margin-top: 4px;
  color: #fff;
  background: var(--good-ink);
  border-radius: 50%;
}

.conf-tick svg {
  width: 22px;
  height: 22px;
}

.conf-head h1 {
  margin: 0 0 8px;
  font-size: clamp(26px, 2.9vw, 34px);
  line-height: 1.15;
  letter-spacing: -.015em;
}

.conf-lead {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.conf-lead a {
  color: var(--blue);
  font-weight: 600;
  text-underline-offset: 3px;
}

/* The order number. A labelled field rather than a pill: it reads as a value
   someone is meant to keep and quote, which is what it is. */
.conf-ref {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.conf-ref-k {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--magenta-ink);
}

.conf-ref-v {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--ink);
  /* So the digits do not jitter in width between orders. */
  font-variant-numeric: tabular-nums;
}

.conf-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  padding: 0;
  font: inherit;
  color: var(--ink-faint);
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}

.conf-copy:hover {
  color: var(--blue);
  border-color: var(--blue);
}

.conf-copy:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.conf-copy svg {
  width: 15px;
  height: 15px;
}

/* The tick swaps in for the clipboard once the number has been taken. Both
   glyphs are in the button, so nothing reflows and the width cannot jump. */
.conf-copy .conf-copy-done { display: none; }
.conf-copy.is-done { color: var(--good-ink); border-color: var(--good-ink); }
.conf-copy.is-done svg:first-child { display: none; }
.conf-copy.is-done .conf-copy-done { display: block; }

/* ---- body ---- */

.conf-body {
  margin-top: clamp(24px, 3vw, 34px);
  align-items: start;
}

.conf-main {
  display: grid;
  gap: clamp(16px, 1.8vw, 22px);
}

.conf-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.conf-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 16px clamp(16px, 1.8vw, 22px);
  border-bottom: 1px solid var(--line-soft);
  /* A hair cooler than the card, so the head reads as a label strip rather
     than as the first row of content. */
  background: var(--surface-2);
}

.conf-block-head h2 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--magenta-ink);
}

.conf-block-note {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-faint);
}

/* ---- ordered lines ---- */

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

.ol {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(12px, 1.4vw, 18px);
  padding: 14px clamp(16px, 1.8vw, 22px);
  border-bottom: 1px solid var(--line-soft);
}

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

.ol-shot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 62px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}

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

.ol-id {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ol-name {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.ol-name a {
  color: inherit;
  text-decoration: none;
}

.ol-name a:hover { color: var(--blue); }

.ol-sku {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink-faint);
}

.ol-qty {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* The quantity carries its own word, so the figure is never a bare number
   the reader has to work out from position alone. */
.ol-k {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.ol-money {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 88px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ol-total {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}

.ol-unit {
  font-size: 12px;
  color: var(--ink-faint);
}

.ol-none {
  display: block;
  padding: 18px clamp(16px, 1.8vw, 22px);
  font-size: 14.5px;
  color: var(--ink-faint);
}

/* ---- shipping facts ---- */

.conf-facts {
  margin: 0;
  padding: 4px clamp(16px, 1.8vw, 22px);
}

.conf-facts > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}

.conf-facts > div:last-child { border-bottom: 0; }

.conf-facts dt {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-faint);
}

.conf-facts dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

/* The address reads as an address: one fact per line, name carrying the
   weight, rather than a paragraph to be parsed. */
.ad {
  font-style: normal;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink-soft);
}

.ad-name {
  font-weight: 700;
  color: var(--ink);
}

.conf-facts-note {
  margin: 0;
  padding: 0 clamp(16px, 1.8vw, 22px) 16px;
  font-size: 13px;
  color: var(--ink-faint);
}

/* ---- payment summary ----
   .summary supplies the panel, the rows and the total treatment. Only the
   two things this screen does differently are set here: there is no action
   above the buttons to space them from, and the total is the amount already
   settled rather than one about to be, so it is given a little more air and
   a rule of its own. */

.conf-summary dl div.total {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 2px solid var(--line);
}

/* ---- the closing action row ----
   Aligned with the content column rather than centred under the whole grid:
   the eye is already down the left edge by the time it gets here, and a
   centred pair under an asymmetric two-column layout reads as floating. */

.conf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: clamp(24px, 3vw, 34px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--line);
}

/* The site sizes both of these at 30px for a row of small actions beside
   body copy. This is the page's one call to action, so it is given the
   height and the measure of a primary control. */
.conf-actions .buybtn,
.conf-actions .btn-outline {
  height: 44px;
  padding: 0 26px;
  font-size: 14.5px;
}

/* The site gives .btn-outline its colours in a base rule and its padding and
   radius in the per-page context that uses it. There is no such context
   here, so the pill shape is set to match the primary button beside it. */
.conf-actions .btn-outline {
  justify-content: center;
  border-radius: 40px;
}

.conf-actions .buybtn:focus-visible,
.conf-actions .btn-outline:focus-visible {
  outline: 2px solid var(--blue-deep);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .conf-head {
    /* Centred on a phone: the tick and the heading read as one statement
       rather than as a row that happens to have wrapped. */
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }

  .conf-ref {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }
}

@media (max-width: 560px) {
  .conf-said {
    gap: 12px;
  }

  .conf-tick {
    width: 38px;
    height: 38px;
    margin-top: 2px;
  }

  .conf-tick svg { width: 19px; height: 19px; }

  /* Image, name and money on the first row; the quantity tucks under the
     name rather than squeezing a fourth column onto a phone. */
  .ol {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 12px;
    row-gap: 6px;
  }

  .ol-shot { height: 52px; }

  .ol-qty {
    grid-column: 2;
    grid-row: 2;
  }

  .ol-money {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    min-width: 0;
  }

  .conf-facts > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ---- empty state ---- */
.empty {
  padding: clamp(40px, 6vw, 72px) 26px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 20px;
  background: var(--surface);
}

.empty h2 {
  margin: 0 0 10px;
  font-size: 22px;
}

.empty p {
  margin: 0 0 22px;
  font-size: 15.5px;
  color: var(--ink-soft);
}

/* ---- prototype index ---- */
.proto-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(18px, 2.2vw, 26px);
  margin-top: clamp(26px, 3vw, 36px);
}

.proto-card {
  display: block;
  padding: clamp(20px, 2.2vw, 26px);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color .14s, transform .14s, box-shadow .14s;
}

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

.proto-card .n {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--magenta-ink);
}

.proto-card h3 {
  margin: 8px 0 6px;
  font-size: 19px;
  color: var(--ink);
}

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

/* --- ../assets/css/shop-card.css (linked, inlined by port_page.py) --- */
/* Card alignment on the shop grid, and the shop's opening band.
   ==========================================================================
   The companion to odoo/addons/hbe_product/static/src/css/shop-card.css,
   which carries two extra rules this copy does not need.

   There, the price-and-button row on each card was losing its `margin-top:
   auto` — the rule that pins the row to the bottom so the prices line up
   across a row of cards. The row's class is `row`, which is also Bootstrap's
   grid class, and Bootstrap ships in Odoo's frontend bundle on every page.
   This site has no Bootstrap on it, the site's own rule wins, and re-stating
   it here with !important would only be noise. The clamp below is the half of
   that fix that belongs to the design rather than to the collision.

   Load order matters: after the page's own stylesheet, which is where
   .sw-card is defined. */

/* With the row pinned, the descriptions are what differ, and a card whose
   description runs to four lines pushes its neighbours' text apart. Two
   lines, then an ellipsis: enough to say what the thing is, and the same
   height on every card so the block reads as a grid rather than a ragged
   set of paragraphs. The full description is on the product page. */
.sw-card > p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Two lines at this size and leading, so a one-line description holds the
     same space as a two-line one and the cards stay even. */
  min-height: calc(2 * 1.6 * 14.8px);
}

/* The shop's opening band.
   ==========================================================================
   Heading only. The paragraph that sat here was removed at the client's
   request, and with it the assurance column that had been added to balance
   the empty right-hand third — with no copy to balance, a lone column of
   claims floating beside a heading reads as an afterthought.

   Both are in the history of the Odoo stylesheet if they are wanted back. */

.shop-intro h2 { margin: 0; }

/* --- ../assets/css/account.css (linked, inlined by port_page.py) --- */
/* The customer account screens.
   ==========================================================================
   Loaded only by the account pages. The header's Account control and its
   dropdown are in account-indicator.css, which every page loads.

   This is a CUSTOMER portal, not an admin console. The difference shows up
   in three decisions that run through the whole file:

   The sidebar is navigation, not a control panel — plain text links with one
   current state, no icons competing with the labels, no counts shouting for
   attention. A customer visits this area a few times a year to answer one
   question; the job is to get them to the answer, not to present a system.

   Cards are containers of last resort. A card earns its border when it holds
   a thing a customer acts on as a unit — one order, one address, one saved
   card. Lists of facts inside those cards are plain rows with a rule between
   them, because a card inside a card is how a portal starts looking like a
   dashboard template.

   Status is a word first and a colour second. Every status pill reads
   correctly in greyscale; the tint is reinforcement, and the palette is the
   site's own three colours, not five new ones invented for this screen.

   Spacing is on a 4px grid with four steps — 8 / 14 / 22 / 34 — and the
   gaps between sections use the larger two so the eye can find the seams.
   ========================================================================= */

/* =====================================================================
   1. Shell — sidebar and content
   ===================================================================== */

.acct-wrap-page {
  padding: clamp(26px, 3.4vw, 46px) 0 clamp(52px, 6vw, 84px);
}

.acct-shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(28px, 3.6vw, 52px);
  align-items: start;
}

/* ---- sidebar ----
   One system, three states, two rules and nothing else.

   What it was: three uppercase section labels, an inset blue bar on the
   current item, and a hover that used the same beige fill and the same blue
   text as the active state — so the only thing separating "where I am" from
   "where my mouse is" was a 2px line. Two items read as current at once.

   What it is now. Every row is the same shape: 34px tall, one 16px icon, one
   label, the same padding whether it is Overview or Sign Out. The three
   states are told apart by different properties rather than by degrees of
   the same one —

     rest     quiet ink, fainter icon, no ground
     hover    darker ink, no ground shift worth noticing — it is feedback,
              not a claim about where you are
     current  the page's surface behind it, blue label at full weight, blue
              icon: a filled row, which no hover ever produces

   Grouping is two hairlines. A rule is a pixel; the labels it replaced were
   twenty each, and on a nav this short they were louder than the links.
   ------------------------------------------------------------------- */

.acct-nav {
  position: sticky;
  top: 18px;
  align-self: start;
}

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

/* the two hairlines: after the first run, and before Sign Out */
.acct-nav ul+ul {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.acct-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .12s, background .12s;
}

.acct-nav a svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--ink-faint);
  transition: color .12s;
}

.acct-nav a span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hover is feedback on the pointer, so it moves the ink and barely the
   ground. It must never approach the current row's fill — that was the
   whole bug. */
.acct-nav a:hover {
  color: var(--ink);
  background: rgba(29, 35, 40, .035);
}

.acct-nav a:hover svg {
  color: var(--ink-soft);
}

.acct-nav a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

/* Current: a filled row in the page's own surface, the label in brand blue
   at full weight, the icon with it. No bar, no border — the fill is the
   statement and it is one no other state makes. */
.acct-nav a[aria-current="page"] {
  background: var(--surface);
  color: var(--blue);
  font-weight: 800;
  box-shadow: inset 0 0 0 1px var(--line);
}

.acct-nav a[aria-current="page"] svg {
  color: var(--blue);
}

/* Sign Out keeps the row shape and loses the weight: it is the one item that
   is not a place, and quieter is how that is said. Not red — signing out is
   not destructive. */
.acct-nav .acct-signout {
  color: var(--ink-faint);
  font-weight: 600;
}

.acct-nav .acct-signout:hover {
  color: var(--ink);
  background: rgba(29, 35, 40, .035);
}

/* =====================================================================
   2. Page head
   ===================================================================== */

.acct-head {
  margin: 0 0 clamp(20px, 2.4vw, 30px);
}

.acct-head h1 {
  margin: 0;
  font-size: clamp(25px, 2.9vw, 34px);
  line-height: 1.15;
  letter-spacing: -.015em;
}

.acct-head p {
  margin: 7px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* A row of facts under the greeting on the overview: who the account
   belongs to and since when. Text, separated by rules — not three tiles. */
.acct-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.acct-facts li {
  position: relative;
  padding-right: 22px;
  font-size: 13.5px;
  color: var(--ink-faint);
}

.acct-facts li+li::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 50%;
  width: 1px;
  height: 13px;
  margin-top: -6px;
  background: var(--line);
}

.acct-facts b {
  color: var(--ink-soft);
  font-weight: 700;
}

/* =====================================================================
   3. Cards and sections
   ===================================================================== */

.acct-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: clamp(16px, 1.8vw, 22px);
}

.acct-card+.acct-card {
  margin-top: 14px;
}

.acct-sec {
  margin-top: clamp(28px, 3.2vw, 40px);
}

.acct-sec:first-child {
  margin-top: 0;
}

.acct-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 14px;
}

.acct-sec-head h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -.01em;
}

.acct-sec-head a {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}

.acct-sec-head a:hover {
  text-decoration: underline;
}

/* =====================================================================
   4. Overview tiles
   ---------------------------------------------------------------------
   Four destinations, each with the one number that tells the customer
   whether they need to go there. The number is the point: a tile that
   only repeats the sidebar label is decoration.
   ===================================================================== */

.acct-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.acct-tile {
  display: block;
  padding: 16px 16px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  text-decoration: none;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}

.acct-tile:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.acct-tile-n {
  display: block;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--blue);
}

.acct-tile-l {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.acct-tile-s {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--ink-faint);
}

/* =====================================================================
   5. Status
   ---------------------------------------------------------------------
   Five order states and five return states. Each is a word in a tinted
   pill; the tint distinguishes at a glance and the word is authoritative.
   Greyscale-safe: the two "attention" states are the only saturated ones.
   ===================================================================== */

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* in motion — the site's blue */
.status.is-processing,
.status.is-review {
  background: rgba(0, 118, 175, .1);
  color: var(--blue-ink);
}

.status.is-shipped,
.status.is-approved,
.status.is-in_transit {
  background: rgba(0, 118, 175, .1);
  color: var(--blue);
}

/* settled — green is the one colour outside the palette, and it is here
   because "delivered" and "refunded" are the states a customer scans for
   and blue is already carrying two other meanings above */
.status.is-delivered,
.status.is-refunded {
  background: rgba(22, 128, 92, .1);
  color: #15794f;
}

/* closed without completing */
.status.is-cancelled,
.status.is-declined {
  background: var(--surface-2);
  color: var(--ink-faint);
}

.status.is-returned {
  background: rgba(179, 0, 107, .08);
  color: var(--magenta-ink);
}

/* =====================================================================
   6. Order cards
   ===================================================================== */

.order-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
}

.order-card+.order-card {
  margin-top: 14px;
}

/* The summary strip. Tinted so the order's identity separates from its
   contents without a second border. */
.order-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
  padding: 12px clamp(14px, 1.6vw, 20px);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

.order-top dl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 0;
  flex: 1 1 auto;
}

.order-top div {
  min-width: 0;
}

.order-top dt {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.order-top dd {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.order-top .order-status {
  margin-left: auto;
}

.order-body {
  padding: clamp(14px, 1.6vw, 20px);
}

/* ---- a product line, shared by orders, order details and returns ---- */

.ol {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.ol+.ol {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.ol-img {
  width: 62px;
  height: 62px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  object-fit: contain;
  padding: 4px;
  box-sizing: border-box;
}

.ol-name {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}

.ol-name a {
  color: inherit;
  text-decoration: none;
}

.ol-name a:hover {
  color: var(--blue);
}

.ol-meta {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--ink-faint);
}

.ol-price {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  text-align: right;
}

/* ---- the action row under an order ---- */

.order-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

/* The site styles .btn-outline's LOOK unqualified but its SIZE only inside
   the containers that use it — .sw-actions, .pcta, .buy-row. Outside one of
   those it renders as bordered text with no padding and square corners,
   which is what every secondary action in here did before this rule.

   The numbers are a.buybtn's own, so the pair beside each other is a matched
   pair rather than two buttons that nearly agree. */
.order-acts .btn-outline,
.mini-acts .btn-outline,
.facts .btn-outline,
.acct-empty .btn-outline,
.auth-card .btn-outline,
.acct-menu-cta .btn-outline {
  height: 30px;
  padding: 0 14px;
  border-radius: 40px;
  font-size: 13px;
  box-sizing: border-box;
}

/* =====================================================================
   7. Order detail
   ===================================================================== */

.acct-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(18px, 2.4vw, 30px);
  align-items: start;
}

/* Where an order's money is totalled. Rows, not a card — it sits inside
   one already. */
.money {
  margin: 0;
}

.money div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  font-size: 14.5px;
  color: var(--ink-soft);
}

.money div+div {
  border-top: 1px solid var(--line);
}

.money dt {
  font-weight: 600;
}

.money dd {
  margin: 0;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.money .total {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 2px solid var(--ink);
}

.money .total dt,
.money .total dd {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
}

/* A plain address block, used wherever one is displayed rather than
   managed. */
.addr-lines {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.addr-lines b {
  display: block;
  color: var(--ink);
  font-weight: 700;
}

/* ---- tracking ----
   A vertical run of steps. The rule is drawn behind the dots rather than
   between them, so it does not have to be re-measured when a step's label
   wraps to two lines. */
.track {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.track::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--line);
}

.track li {
  position: relative;
  padding: 0 0 18px 28px;
}

.track li:last-child {
  padding-bottom: 0;
}

.track li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--line);
  box-sizing: border-box;
}

.track li.is-done::before {
  background: var(--blue);
  border-color: var(--blue);
}

.track li.is-now::before {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 118, 175, .16);
}

.track-t {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-faint);
}

.track li.is-done .track-t,
.track li.is-now .track-t {
  color: var(--ink);
}

.track-d {
  display: block;
  margin-top: 1px;
  font-size: 12.5px;
  color: var(--ink-faint);
}

/* =====================================================================
   8. Address, payment, return and saved-item cards
   ===================================================================== */

.acct-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px;
}

.mini-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 16px;
}

.mini-card.is-default {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}

.mini-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  min-height: 22px;
}

.mini-label {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}

/* "Default shipping" and friends. Quieter than .status: this is a property
   of the card, not the state of an order. */
.tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.tag.is-on {
  background: rgba(0, 118, 175, .1);
  border-color: transparent;
  color: var(--blue-ink);
}

.mini-body {
  flex: 1 1 auto;
}

.mini-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

/* A text action inside a card. Not a button: three buttons per card across
   a grid of six cards is eighteen buttons on one screen, and none of them
   is the thing the customer came to do. */
.link-act {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue);
  cursor: pointer;
  text-decoration: none;
}

.link-act:hover {
  text-decoration: underline;
}

.link-act.is-quiet {
  color: var(--ink-faint);
}

.link-act.is-quiet:hover {
  color: var(--magenta-ink);
}

/* A note the customer should read once and not again: what a prototype is
   standing in for, what a form will and will not collect. Dashed rather than
   solid so it reads as an aside rather than as another panel.

   RESTORED. The Payment Methods redesign replaced that whole CSS section in
   one go and took this with it, along with .pay-brand and .paid-with below.
   Nothing complained, because the markup that uses them is built in
   account.js and on the sign-in partial rather than here — so the only
   symptom was an unstyled <svg>, which paints at its intrinsic size and
   default black fill. That is the large black disc that appeared inside the
   Add a payment method form and on the sign-in screen. */
.acct-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.acct-note svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  color: var(--ink-faint);
}

/* The brand chip when the network has no artwork: its name, set small. The
   marks themselves are sized where they are used — on a card face, or in the
   line below. */
.pay-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  flex: none;
}

.pay-brand.is-art {
  border: 0;
  background: none;
  border-radius: 0;
  width: auto;
  height: auto;
}

.pay-brand.is-art svg {
  display: block;
  width: 46px;
  height: 30px;
  border-radius: 4px;
}

/* "ending 5556" on the order detail: the mark reads better than the word,
   but it is a line of body copy, so it sits at that scale. */
.paid-with {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.paid-with .pay-brand.is-art svg {
  width: 34px;
  height: 22px;
}

/* =====================================================================
   Payment methods
   ---------------------------------------------------------------------
   The first version put two small white boxes in a 1100px column and left
   the rest of it empty. Three things fix that, and none of them is
   decoration:

   A saved card is drawn AS A CARD. Real proportions, the brand mark in the
   corner, the number set large and spaced, the holder and expiry as labelled
   columns along the bottom. A white rectangle with "•••• 4242" in it is a
   database row; this is the object the customer recognises from their own
   wallet, and recognition is the whole job of this screen.

   The face is the site's own charcoal — the colour of its footer — so the
   cards read as physical objects against the page rather than as more panels
   on it. The DEFAULT card takes --blue-ink instead, which is how it is
   marked: by the field it is drawn on, visible at a glance from across the
   page, with no border weight and no colour invented for the purpose.

   And the page is two columns, not one. A trust panel sits in the space the
   cards were floating in, carrying what the old beige alert bar said. That
   is not filler — where card details actually live is the question this
   screen raises in a customer's mind, and answering it beside the cards is
   better than a strip above them.
   ===================================================================== */

/* The site has no global visually-hidden helper — the one .sr-only in its
   markup is on a table caption that renders visible — so the account screens
   carry their own. Used where a card's masked number needs a spoken prefix
   that the sighted reader gets from the dots. */
.acct-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pm-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: clamp(22px, 2.6vw, 36px);
  align-items: start;
}

/* ---- header ---- */

.pm-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 22px;
  margin: 0 0 clamp(18px, 2vw, 26px);
  padding-bottom: 16px;
  /* the rule ties the title to what follows it; without one the heading
     floated above the content with no relationship to it */
  border-bottom: 1px solid var(--line);
}

.pm-head h1 {
  margin: 0;
  font-size: clamp(23px, 2.5vw, 29px);
  line-height: 1.15;
  letter-spacing: -.015em;
}

.pm-head p {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 52ch;
}

.pm-count {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
  padding-bottom: 2px;
}

/* ---- the grid of cards ---- */

.pm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(286px, 1fr));
  gap: 18px;
}

.pm-item {
  min-width: 0;
}

/* ---- the card face ----
   Close to a real card's 1.586:1, which is what makes it read as one. Held
   with aspect-ratio rather than a fixed height so it keeps its proportions
   at every column width. */
.pm-face {
  position: relative;
  aspect-ratio: 1.586 / 1;
  min-height: 168px;
  padding: 16px 18px;
  border-radius: 13px;
  background: var(--charcoal);
  color: #fff;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  /* one soft shadow, the site's own, so the face sits above the page rather
     than being drawn onto it */
  box-shadow: var(--shadow-sm);
}

.pm-item.is-default .pm-face {
  background: var(--blue-ink);
}

.pm-face-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* The chip. Drawn, not an emoji or an icon font — three contacts and a
   rounded body is all it takes to be read as one at this size. */
.pm-chip {
  width: 30px;
  height: 23px;
  border-radius: 5px;
  background: linear-gradient(160deg, #e3c77e, #c9a54c);
  position: relative;
  flex: none;
  opacity: .92;
}

.pm-chip::after {
  content: "";
  position: absolute;
  inset: 5px 7px;
  border-left: 1px solid rgba(60, 45, 10, .35);
  border-right: 1px solid rgba(60, 45, 10, .35);
}

.pm-face .pay-brand.is-art svg {
  width: 42px;
  height: 27px;
}

/* The number. Tabular figures so the four groups line up across two cards
   side by side, and wide tracking because that is how a card sets it. */
.pm-no {
  margin: auto 0 0;
  font-size: clamp(16px, 1.5vw, 18px);
  font-weight: 700;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.pm-no .pm-dots {
  opacity: .58;
  margin-right: 8px;
  letter-spacing: .1em;
}

.pm-face-foot {
  display: flex;
  gap: 26px;
  margin-top: 12px;
}

.pm-f-k {
  display: block;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

.pm-f-v {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, .95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-face-foot div {
  min-width: 0;
}

/* The default marker, in the action row rather than on the face.

   It was a pill straddling the card's top edge, which put it in the same
   corner as the brand mark and made the two fight. The field colour is what
   does the at-a-glance work anyway; the word only has to confirm it. Down
   here it also lands in exactly the position where the other cards offer
   "Make default", so the row reads as one control with two states rather
   than as a label on one card and a button on the next. */
.pm-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue-ink);
}

.pm-flag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
}

/* ---- the actions, under the face rather than on it ----
   A card face with buttons on it is a control panel. Keeping the face clean
   and the actions beneath is what lets it read as an object. */
.pm-acts {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 11px;
  padding: 0 4px;
}

.pm-acts .link-act {
  font-size: 13px;
}

.pm-expiring {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--warn-ink);
  white-space: nowrap;
}

/* ---- add a card ----
   A tile the size of a card face, in the grid with them. Chosen over a
   button beside the heading: the action belongs where the cards are, it
   fills the row a two-card account would otherwise leave half empty, and
   there is then one way to add a card rather than two. */
.pm-add {
  /* Spans the grid rather than taking one cell. As a card-shaped tile it
     wrapped onto a second row on its own and left a card-sized hole beside
     it — the exact sparseness this redesign was meant to remove. A full
     width band under the cards closes the block instead of reopening it,
     and it holds whether there are two cards or seven. */
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px;
  border: 1.5px dashed var(--line);
  border-radius: 13px;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color .14s, color .14s, background .14s;
}

.pm-add:hover,
.pm-add:focus-visible {
  border-color: var(--blue);
  color: var(--blue);
  background: rgba(0, 118, 175, .04);
}

.pm-add svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.pm-add span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-faint);
  line-height: 1.45;
}

/* the divider between the label and its qualifier, on one line */
.pm-add span::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin-right: 12px;
  vertical-align: -2px;
  background: var(--line);
}

/* One line, under the cards, in the same quiet voice as the shop's
   "Prices exclude taxes and shipping" footnote. It replaced a panel with a
   shield badge, a heading, a subtitle, three ticked bullets and a closing
   note — four devices saying what one sentence says, on a page where the
   customer came to look at their cards. */
.pm-note {
  /* no rule above it: capped to a readable measure, a border would stop
     two-thirds of the way across the content and read as a mistake. The
     space is enough to make it a footnote. */
  max-width: 78ch;
  margin: clamp(22px, 2.6vw, 34px) 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-faint);
}

/* ---- the trust rail ----
   What the beige alert said, given a shape. Sticky, because it answers a
   question the customer may only think to ask once they are partway down a
   long list of cards. */
.pm-rail {
  position: sticky;
  top: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 18px;
}

/* ---- responsive ---- */

@media (max-width: 1180px) {

  /* The rail goes under the cards rather than squeezing both: at this width
     a 296px rail leaves the card column too narrow to hold two faces, and
     one face per row is a worse trade than a rail lower down the page. */
  .pm-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .pm-rail {
    position: static;
  }
}

@media (max-width: 620px) {
  .pm-head {
    align-items: flex-start;
  }

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

  .pm-face,
  .pm-add {
    /* proportions give way to legibility on a narrow screen: a 1.586:1 face
       at 330px wide is 208px tall, which is fine, but below that the number
       starts crowding the foot */
    aspect-ratio: auto;
    min-height: 0;
  }

  .pm-face {
    padding: 15px 16px 16px;
  }

  .pm-no {
    margin-top: 20px;
  }

  /* stacked on a phone: the label and its qualifier will not sit on one
     line at 330px, and the rule between them then reads as a stray mark */
  .pm-add {
    flex-direction: column;
    gap: 7px;
    padding: 22px 16px;
    text-align: center;
  }

  .pm-add span::before {
    display: none;
  }
}

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

/* ---- saved items ---- */

.wish-card .ol-img {
  width: 100%;
  height: 132px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  margin-bottom: 12px;
}

.wish-price {
  display: block;
  margin: 8px 0 0;
  font-size: 19px;
  font-weight: 800;
  color: var(--blue);
}

.stock {
  font-size: 12.5px;
  font-weight: 700;
  color: #15794f;
}

.stock.is-quote {
  color: var(--ink-faint);
}

/* =====================================================================
   9. Forms
   ---------------------------------------------------------------------
   The site's own field styling comes from the Sales Request page via
   shop.css (.qfield / .qfields). This adds only the account-specific
   arrangement: a two-column grid that collapses, and the row of actions
   that closes a form.
   ===================================================================== */

.acct-form {
  max-width: 660px;
}

.fgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.fgrid .fspan {
  grid-column: 1 / -1;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.fhint {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-faint);
}

/* A checkbox that controls another field group. */
.fcheck {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14.5px;
  color: var(--ink-soft);
  cursor: pointer;
}

.fcheck input {
  margin: 2px 0 0;
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
  flex: none;
}

/* A setting that is not a choice. Reads as a statement of fact, not as a
   control someone might keep trying to click: no box, no tick, nothing that
   invites a press. */
.pref-fixed {
  flex: none;
  align-self: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* Settings rows: a switch and a description, not a form field. */
.pref {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
}

.pref+.pref {
  border-top: 1px solid var(--line);
}

.pref-t {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}

.pref-d {
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-faint);
  max-width: 54ch;
}

/* =====================================================================
   10. Sign in / create account
   ---------------------------------------------------------------------
   Centred, narrow, and with no sidebar: these are the two screens a
   customer reaches before they have an account area to navigate.
   ===================================================================== */

.auth-wrap {
  padding: clamp(30px, 4vw, 60px) 0 clamp(56px, 6vw, 92px);
}

.auth {
  max-width: 452px;
  margin: 0 auto;
}

.auth.is-wide {
  max-width: 720px;
}

.auth-head {
  text-align: center;
  margin-bottom: clamp(20px, 2.4vw, 28px);
}

.auth-head h1 {
  margin: 0;
  font-size: clamp(25px, 2.9vw, 33px);
  letter-spacing: -.015em;
}

.auth-head p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.auth-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  padding: clamp(20px, 2.6vw, 30px);
  box-shadow: var(--shadow-sm);
}

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 14px 0 20px;
  font-size: 13.5px;
}

.auth-foot {
  margin: 18px 0 0;
  text-align: center;
  font-size: 14.5px;
  color: var(--ink-soft);
}

.auth-foot a {
  font-weight: 800;
  color: var(--blue);
  text-decoration: none;
}

.auth-foot a:hover {
  text-decoration: underline;
}

.auth-sep {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.auth-sep::before,
.auth-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* A form-wide message: the mock sign-in's error, the saved confirmation. */
.fmsg {
  margin: 0 0 16px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 600;
}

.fmsg.is-bad {
  background: rgba(179, 0, 107, .07);
  color: var(--magenta-ink);
}

.fmsg.is-good {
  background: rgba(22, 128, 92, .1);
  color: #15794f;
}

/* =====================================================================
   11. Empty states
   ===================================================================== */

.acct-empty {
  padding: clamp(34px, 4vw, 52px) 22px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 14px;
}

.acct-empty h2 {
  margin: 0 0 8px;
  font-size: 19px;
}

.acct-empty p {
  margin: 0 auto 18px;
  max-width: 46ch;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* =====================================================================
   12. Responsive
   ---------------------------------------------------------------------
   One structural change (the sidebar becomes a scrolling row of chips
   above the content) and then size steps. The chip row is a real pattern
   rather than a collapsed menu because the account area has nine
   destinations and a customer on a phone is usually moving between two of
   them — Orders and a specific order — which a dropdown makes slower.
   ===================================================================== */

@media (max-width: 980px) {
  .acct-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  /* The sidebar becomes one scrolling row of chips. The desktop grouping is
     three <ul>s; here they run together, so the scroller moves up to the nav
     itself and the lists only lay out their own items inside it. The rules
     between groups go — a vertical divider in a horizontal row means
     nothing — and so do the icons: at chip size they double every item's
     width for no gain in scanning. */
  .acct-nav {
    position: static;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* the rule runs the full width; the chips scroll over it */
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
  }

  .acct-nav::-webkit-scrollbar {
    display: none;
  }

  .acct-nav ul {
    display: flex;
    gap: 8px;
    flex: none;
  }

  .acct-nav ul+ul {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .acct-nav li {
    flex: none;
  }

  .acct-nav a {
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    box-shadow: none;
    white-space: nowrap;
    font-size: 14px;
  }

  .acct-nav a svg {
    display: none;
  }

  .acct-nav a[aria-current="page"] {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
    box-shadow: none;
  }

  .acct-nav a:hover {
    background: var(--surface-2);
  }

  .acct-nav a[aria-current="page"]:hover {
    background: var(--blue);
  }

  /* Sign Out trails the row rather than sitting among the destinations. */
  .acct-nav .acct-signout {
    border-style: dashed;
  }

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

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

  .order-top {
    gap: 10px 18px;
  }

  .order-top dl {
    gap: 10px 18px;
  }

  .order-top .order-status {
    margin-left: 0;
    width: 100%;
  }

  /* The thumbnail and the price both shrink before the name wraps: the
     name is what the customer is reading. */
  .ol {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 11px;
  }

  .ol-img {
    width: 48px;
    height: 48px;
  }

  .ol-price {
    font-size: 14px;
  }

  .order-acts .buybtn,
  .order-acts .btn-outline {
    flex: 1 1 auto;
    justify-content: center;
  }

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

  .facts .buybtn,
  .facts .btn-outline {
    width: 100%;
    justify-content: center;
  }

  /* Full width already; 30px is the site's desktop height and is under the
     44px a thumb wants, so the account's actions get the extra height on
     touch widths where they are the only thing in the row. */
  .order-acts .buybtn,
  .order-acts .btn-outline,
  .facts .buybtn,
  .facts .btn-outline,
  .acct-empty .buybtn {
    height: 40px;
  }
}

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

  .acct-tile:hover {
    transform: none;
  }
}

/* =====================================================================
   11. Profile
   ---------------------------------------------------------------------
   The profile was two stacked white boxes of inputs in a column that used
   about half the width, with a password form permanently open below it.
   It read as a settings form, not as a customer's account.

   What changed, and why:

   · The page borrows the Payment methods composition — .pm-head for the
     title, .pm-layout for content plus a sticky rail — so the two screens
     are recognisably the same area, and the right-hand space now carries
     the security panel instead of nothing.

   · An identity block sits above the fields. A profile should say who the
     account belongs to before it asks you to edit anything, and it gives
     the page a subject rather than opening on a text input.

   · The fields stay in one card but are grouped — personal, contact,
     business — with a label and a line of context each, divided by rules
     rather than split into separate boxes. Three bordered cards for five
     fields is what made it feel form-heavy.

   · Password moves into the rail, collapsed to a row and a date with one
     action. It only becomes a form when asked for.
   ===================================================================== */

/* ---- identity, as the page header ----
   Spans both columns and carries the rule that ties the title to the content,
   the way .pm-head does on Payment methods. */

.prof-head {
  display: flex;
  align-items: center;
  gap: clamp(15px, 1.7vw, 22px);
  margin: 0 0 clamp(18px, 2vw, 26px);
  padding-bottom: clamp(16px, 1.8vw, 22px);
  border-bottom: 1px solid var(--line);
}

.prof-eyebrow {
  margin: 0 0 2px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.prof-head h1 {
  margin: 0;
  font-size: clamp(25px, 2.9vw, 34px);
  line-height: 1.12;
  letter-spacing: -.018em;
  color: var(--ink);
}

/* A monogram, not an avatar upload: there is nowhere to upload a picture,
   and a grey silhouette would promise one. Initials identify the account
   and give the block a fixed anchor at every width. */
.prof-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  flex: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--blue) 26%, transparent);
  color: var(--blue-ink);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: .02em;
}

.prof-id-b {
  min-width: 0;
}

.prof-id-mail {
  margin: 3px 0 0;
  font-size: 14.5px;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.prof-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 11px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--ink-faint);
}

.prof-badge {
  padding: 4px 11px;
  border-radius: 20px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--ink-soft);
}

/* ---- grouped fields ---- */

/* .acct-form caps at 660px, which is right for a form floating in a column
   and wrong here: this form is the column, beside a 296px rail, and the cap
   left a 70px strip of nothing between the card and the rail. */
.prof-form {
  max-width: none;
}

.prof-card {
  padding: 0;
}

.prof-grp {
  padding: clamp(18px, 2vw, 24px);
  border-bottom: 1px solid var(--line-soft);
}

.prof-grp:last-of-type {
  border-bottom: 0;
}

.prof-grp-h {
  margin-bottom: 14px;
}

.prof-grp-h h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--magenta-ink);
}

.prof-grp-h p {
  margin: 5px 0 0;
  max-width: 62ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-faint);
}

/* the action row closes the card, so it carries the card's own padding and
   a full-width rule rather than the .facts margin that floated it */
.prof-card .facts {
  margin: 0;
  padding: clamp(15px, 1.7vw, 19px) clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--line);
  background: var(--bg);
  border-radius: 0 0 13px 13px;
}

/* The bar says something in both states: nothing to save, or what is
   waiting. An action row that only ever holds one greyed button reads as
   broken rather than as inactive. */
.prof-state {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--ink-faint);
}

.prof-state.is-dirty {
  font-weight: 700;
  color: var(--warn-ink);
}

/* Save is the page's one primary action. Until a field actually differs it
   is inactive, and it says so by going neutral rather than by fading the
   brand blue, which just looks like a rendering fault. */
.prof-card .buybtn[disabled] {
  background: var(--surface-2);
  color: var(--ink-faint);
  border: 1px solid var(--line);
  box-shadow: none;
  transform: none;
  cursor: default;
}

.prof-card .buybtn[disabled]:hover {
  background: var(--surface-2);
  color: var(--ink-faint);
  transform: none;
}

/* ---- the security rail ---- */

/* the same micro-caps label the field groups use, so the rail reads as part
   of this page rather than as a panel borrowed from another one */
.prof-rail-h {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--magenta-ink);
}

.prof-pw-v {
  margin: 10px 0 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--ink);
}

.prof-pw-when {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--ink-faint);
}

.prof-rail .btn-outline,
.prof-rail .buybtn {
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
  margin-top: 14px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13.5px;
}

.prof-pw-form .qfield {
  margin-top: 12px;
}

.prof-pw-cancel {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: center;
}

/* ---- responsive ----
   .pm-layout already drops the rail under the content at 1180px. Below that
   the identity block stacks so the monogram is not competing with a wrapped
   name in a narrow column. */

@media (max-width: 1180px) {
  .prof-rail {
    position: static;
  }
}

@media (max-width: 520px) {
  .prof-head {
    align-items: flex-start;
    gap: 14px;
  }

  .prof-av {
    width: 50px;
    height: 50px;
    font-size: 17px;
  }

  .prof-card .facts {
    flex-direction: column;
    align-items: stretch;
  }

  .prof-card .facts .buybtn {
    justify-content: center;
  }

  .prof-state {
    margin-left: 0;
    text-align: center;
  }
}


/* --- 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; }
.prod .links a.viewbtn:hover { color: #fff !important; text-decoration: none !important; }
.prod .links a.viewbtn:active { color: #fff !important; text-decoration: none !important; }
.prod .links a.viewbtn:focus { color: #fff !important; text-decoration: none !important; }
.prod .links a.viewbtn:hover:hover { color: #fff !important; text-decoration: none !important; }
.prod .links a.viewbtn:hover:active { color: #fff !important; text-decoration: none !important; }
.prod .links a.viewbtn:hover:focus { color: #fff !important; text-decoration: none !important; }
@media (prefers-color-scheme:dark) {
  .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"] .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"] .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; }
a.buybtn:hover { color: #fff !important; text-decoration: none !important; }
a.buybtn:active { color: #fff !important; text-decoration: none !important; }
a.buybtn:focus { color: #fff !important; text-decoration: none !important; }
.res-list a:hover { color: var(--ink) !important; text-decoration: none !important; }
.res-list a:active { color: var(--ink) !important; text-decoration: none !important; }
.res-list a:focus { color: var(--ink) !important; text-decoration: none !important; }
.res-list a:hover:hover { color: var(--magenta-ink) !important; }
.res-list a:hover:active { color: var(--magenta-ink) !important; }
.res-list a:hover:focus { color: var(--magenta-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; }
button.buybtn:hover { color: #fff !important; text-decoration: none !important; }
button.buybtn:active { color: #fff !important; text-decoration: none !important; }
button.buybtn:focus { color: #fff !important; text-decoration: none !important; }
.cart-line h3 a:hover { color: var(--ink) !important; text-decoration: none !important; }
.cart-line h3 a:active { color: var(--ink) !important; text-decoration: none !important; }
.cart-line h3 a:focus { color: var(--ink) !important; text-decoration: none !important; }
.cart-line h3 a:hover:hover { color: var(--blue) !important; }
.cart-line h3 a:hover:active { color: var(--blue) !important; }
.cart-line h3 a:hover:focus { color: var(--blue) !important; }
.conf-lead a:hover { color: var(--blue) !important; }
.conf-lead a:active { color: var(--blue) !important; }
.conf-lead a:focus { color: var(--blue) !important; }
.ol-name a:hover { color: inherit !important; text-decoration: none !important; }
.ol-name a:active { color: inherit !important; text-decoration: none !important; }
.ol-name a:focus { color: inherit !important; text-decoration: none !important; }
.ol-name a:hover:hover { color: var(--blue) !important; }
.ol-name a:hover:active { color: var(--blue) !important; }
.ol-name a:hover:focus { color: var(--blue) !important; }
.acct-nav a:hover { color: var(--ink-soft) !important; text-decoration: none !important; }
.acct-nav a:active { color: var(--ink-soft) !important; text-decoration: none !important; }
.acct-nav a:focus { color: var(--ink-soft) !important; text-decoration: none !important; }
.acct-nav a:hover:hover { color: var(--ink) !important; }
.acct-nav a:hover:active { color: var(--ink) !important; }
.acct-nav a:hover:focus { color: var(--ink) !important; }
.acct-nav a[aria-current="page"]:hover { color: var(--blue) !important; }
.acct-nav a[aria-current="page"]:active { color: var(--blue) !important; }
.acct-nav a[aria-current="page"]:focus { color: var(--blue) !important; }
.acct-sec-head a:hover { color: var(--blue) !important; text-decoration: none !important; }
.acct-sec-head a:active { color: var(--blue) !important; text-decoration: none !important; }
.acct-sec-head a:focus { color: var(--blue) !important; text-decoration: none !important; }
.auth-foot a:hover { color: var(--blue) !important; text-decoration: none !important; }
.auth-foot a:active { color: var(--blue) !important; text-decoration: none !important; }
.auth-foot a:focus { color: var(--blue) !important; text-decoration: none !important; }
@media (max-width: 980px) {
  .acct-nav a[aria-current="page"]:hover { color: #fff !important; }
  .acct-nav a[aria-current="page"]:active { color: #fff !important; }
  .acct-nav a[aria-current="page"]:focus { color: #fff !important; }
}
.prof-card .buybtn[disabled]:hover { color: var(--ink-faint) !important; }
.prof-card .buybtn[disabled]:active { color: var(--ink-faint) !important; }
.prof-card .buybtn[disabled]:focus { color: var(--ink-faint) !important; }
.prof-card .buybtn[disabled]:hover:hover { color: var(--ink-faint) !important; }
.prof-card .buybtn[disabled]:hover:active { color: var(--ink-faint) !important; }
.prof-card .buybtn[disabled]:hover:focus { color: var(--ink-faint) !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)); }
}