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

    /* the certification mark pulls inward toward the headline; the headline
       is centred in the space between it and the account button */
    .util .badge-hipaa {
      height: 54px;
      width: auto;
      display: block;
      margin-left: clamp(9px, 2.25vw, 45px);
      opacity: .96;
    }


    /* centered serif headline */
    /* flex:1 makes the headline span the whole gap between the HIPAA badge and
       the account button, so centring inside it puts the text exactly midway
       between them. Under space-between alone it sat wherever the 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;
      /* letter-spacing also follows the last letter, which pushes the visible
         text .07em left of centre; the indent puts it back */
      text-indent: .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 {
        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;
      }
    }


    /* The utility bar runs out of room before the phone does.

       At 360px the logo plate takes 142 of the 360, leaving 218 for the
       controls on its right — and they want 241: the account button (38),
       the cart (30) and Contact Us (121). The bar is overflow:hidden, so
       nothing scrolls sideways and the excess is simply cut: "Contact Us"
       reaches a phone as "Conta". It fits from about 440px up, which is
       above every common phone width and below every tablet.

       Contact Us loses its label and becomes the third circle in the row,
       drawn exactly like the two beside it. The destination is unchanged and
       the label is hidden from the eye rather than removed, so the link is
       still called "Contact Us" by a screen reader — and the anchor's title,
       which carries the phone number and the address, stays as it was. */
    @media (max-width: 460px) {
      .util-right .contact-us {
        width: 34px;
        height: 34px;
        gap: 0;
        padding: 0;
        justify-content: center;
        box-sizing: border-box;
        border: 1px solid rgba(255, 255, 255, .38);
        border-radius: 50%;
        background: rgba(255, 255, 255, .08);
      }

      .util-right .contact-us span {
        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;
      }

      .util-right .contact-us svg {
        width: 18px;
        height: 18px;
        margin: 0;
      }
    }

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