/* ============================================================================
   product-price.css — what a product costs, on the product's own page.

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

   Three lines where there is an MSRP to beat:

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

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

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

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

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

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

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

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

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

.pricing-msrp-value {
  font-size: 21px;
  font-weight: 600;
  /* charcoal, not the page's faint ink: this figure has to be read, not just
     sensed, and #374151 holds up against the pale hero backgrounds */
  color: #374151;
  text-decoration: line-through;
  /* 1px. At 21px the digits' own stems are about 2.5px, so a 2px rule sat
     almost as heavy as the numerals and closed up the counters — the figure
     read as cancelled before it read as $299.00, which defeats the point of
     showing it. 1px stays plainly visible against charcoal this size while
     leaving the number legible underneath. */
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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