/*
 * Webdev Zimbabwe — transactional product template (v2026)
 * Load AFTER webdev-base.css. Shared by the standard product pages:
 *   /zoho-mail · /microsoft-365 · /google-workspace · /web-hosting
 *   /wordpress-hosting · /managed-vps · /domain-registration
 *
 * Block order follows page-architecture "Transactional":
 *   1 outcome-led hero with a price anchor · 2 sales story / use cases
 *   3 buyer-facing features and comparison · 4 tier anchors with WHMCS handoff
 *   5 local trust · 6 FAQs · 7 final CTA
 *
 * Hero, chips, plan cards, process steps, FAQ and the .wd-final banner all come
 * from webdev-base.css. This file adds only what is specific to a product page.
 */

/* ---------- hero price anchor ---------- */

/*
 * Sits between the lead and the buttons. Dynamic token only — never a
 * remembered dollar value (content-guardrails §1).
 */
.wd-hero__price {
  color: var(--wd-grey-200);
  font-size: 1.0625rem;
  margin: clamp(1rem, 2vw, 1.25rem) 0 0;
}

.wd-hero__price b {
  color: var(--wd-orange-500);
  font-size: 1.25rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* ---------- tier cards on a product page ---------- */

/*
 * The migration template puts the price last and pushes it down with
 * `margin-top: auto`. A product page puts price directly under the tier name,
 * with the feature list below it — so the auto margin is moved to the actions,
 * which keeps every button aligned along the bottom of the row instead.
 */
.wd-product .wd-plan__price {
  border-bottom: 1px solid var(--wd-grey-100);
  border-top: 0;
  margin-top: 0;
  padding-bottom: 0.875rem;
  padding-top: 0;
}

.wd-product .wd-plan__price b {
  display: block;
  font-size: 1.25rem;
}

.wd-product .wd-plan__actions {
  margin-top: auto;
}

/* ---------- why buy it here ---------- */

/*
 * Four reasons plus a closing accountability card. The card is the fifth grid
 * cell rather than a separate block, so it stays level with the reasons.
 */
.wd-why {
  align-items: stretch;
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.05fr);
}

/*
 * The reasons used to be bare text beside the slate card, which left the row
 * reading as four loose columns plus one card. They take the same surface as
 * .wd-why__card below -- matching radius and padding -- so the band reads as
 * five cards, four light and one dark.
 */
.wd-why__item {
  background: var(--wd-white);
  border: 1px solid var(--wd-grey-200);
  border-radius: var(--wd-card-radius);
  padding: clamp(1.25rem, 2vw, 1.75rem);
}

.wd-why__item .wd-icon {
  color: var(--wd-orange-600);
  margin-bottom: 0.75rem;
}

.wd-why__item h3 {
  font-size: 1rem;
}

.wd-why__item p {
  color: var(--wd-grey-700);
  font-size: 0.9375rem;
  margin: 0.375rem 0 0;
}

.wd-why__card {
  align-content: center;
  background: var(--wd-slate-600);
  border-radius: var(--wd-card-radius);
  color: var(--wd-white);
  display: grid;
  gap: 0.75rem;
  padding: clamp(1.25rem, 2vw, 1.75rem);
}

.wd-why__card h3 {
  font-size: 1.0625rem;
}

.wd-why__card p {
  color: var(--wd-grey-200);
  font-size: 0.9375rem;
  margin: 0;
}

.wd-why__card .wd-icon {
  color: var(--wd-orange-500);
}

/* ---------- use cases ---------- */

.wd-usecases {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wd-usecase {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: auto 1fr auto;
}

.wd-usecase .wd-icon-plate {
  height: 2.25rem;
  width: 2.25rem;
}

.wd-usecase .wd-icon-plate .wd-icon {
  height: 2.25rem;
  width: 2.25rem;
}

.wd-usecase h3 {
  font-size: 1rem;
}

.wd-usecase p {
  color: var(--wd-grey-700);
  font-size: 0.9375rem;
  margin: 0.375rem 0 0;
}

.wd-usecase__arrow {
  align-self: end;
  color: var(--wd-orange-600);
}

@media (hover: hover) and (pointer: fine) {
  .wd-usecase:hover .wd-usecase__arrow {
    transform: translateX(4px);
  }
}

.wd-usecase__arrow {
  transition: transform var(--wd-duration) var(--wd-ease);
}

/* ---------- full-width closing CTA ----------
 * MOVED to webdev-base.css — the consultative template
 * (/enterprise-infrastructure) needed it too. Its @media rules moved with
 * it, and the class names are unchanged, so the product pages did not have
 * to change.
 */


/* ---------- responsive ---------- */

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

  /* Card drops below the reasons and spans them. */
  .wd-why__card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 991.98px) {
  .wd-usecases {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 575.98px) {
  .wd-why {
    grid-template-columns: minmax(0, 1fr);
  }
  /* .wd-ctaband__actions .wd-btn went to base with the rest of the band. */
}

/* Qualifier under a consultation-only tier's button. */
.wd-plan__note {
  color: var(--wd-grey-500);
  font-size: 0.8125rem;
  margin: 0.5rem 0 0;
  text-align: center;
}

/* ---------- per-page hero artwork ----------
 * Only the image changes; the scrim comes from .wd-subhero in base so text
 * contrast stays consistent across every page.
 */
/*
 * Client-supplied artwork, re-encoded from PNG to JPEG (307KB indexed 256
 * colour -> 145KB full colour; the original palette banded across the flat wall
 * behind the heading). The source PNG is left in place.
 *
 * NOTE: the supplied zohomailandworkplace.png is byte-identical to
 * emailandoffice.png, so /zoho-mail and /email-office currently share this
 * photograph. Flagged to the client -- if a distinct Zoho image arrives, drop it
 * in and only this url changes.
 *
 * Only /zoho-mail uses this variant, so retargeting it affects nothing else.
 */
.wd-subhero--mail {
  --wd-subhero-art: url("../img/zohomail.png");
}

/* ---------- highlighted comparison column ---------- */

/*
 * Marks the recommended tier in the table. The column is also labelled
 * "Recommended" in its header cell — the tint is reinforcement, never the only
 * signal (design-system §13: no state through colour alone).
 */
.wd-ctable__col--featured {
  background: var(--wd-orange-050);
}

.wd-ctable thead .wd-ctable__col--featured {
  background: var(--wd-orange-050);
  box-shadow: inset 0 3px 0 var(--wd-orange-500);
}

.wd-ctable__col--featured .wd-ctable__hi {
  color: var(--wd-orange-700);
  font-weight: 600;
}

.wd-ctable__head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ---------- inline CTA bar ---------- */

/*
 * Slim outlined bar for a secondary audience inside a dark section — used for
 * the existing-customer intercept so it does not compete with the main CTA.
 */
.wd-inlinecta {
  align-items: center;
  border: 1px solid var(--wd-orange-500);
  border-radius: var(--wd-radius-pill, 999px);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin: clamp(2rem, 3.5vw, 3rem) auto 0;
  max-width: 56rem;
  padding: 0.75rem 0.75rem 0.75rem 1.75rem;
}

.wd-inlinecta p {
  color: var(--wd-white);
  font-weight: 600;
  margin: 0;
}

@media (max-width: 575.98px) {
  .wd-inlinecta {
    border-radius: var(--wd-radius-md);
    padding: 1.25rem;
    text-align: center;
  }

  .wd-inlinecta .wd-btn {
    width: 100%;
  }
}

/* Raster product logo inside a use-case card. `height` is !important for the
   same reason as the other logo rules — custom.css clamps `li img` to 42px. */
.wd-usecase__logo {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  height: 2.25rem;
  justify-content: flex-start;
  max-width: 7rem;
}

.wd-usecase__logo img {
  height: 100% !important;
  max-width: 100%;
  object-fit: contain;
  width: auto;
}

/*
 * Dark wall on the left, laptop on the right — the default .wd-subhero scrim
 * suits it as-is, so no --light-art variant here.
 */
.wd-subhero--workspace {
  --wd-subhero-art: url("../img/workspace-hero.jpg");
}

/* ---------- alternative-product cross-sell ---------- */

/*
 * Three sideways routes on a dark bar, for visitors this product does not suit.
 * Sending the wrong-fit buyer to the right page beats capturing them here and
 * losing them at checkout.
 */
.wd-crosssell {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.wd-crosssell li {
  align-items: center;
  display: flex;
  gap: 0.875rem;
  padding: 0.5rem clamp(1rem, 2vw, 1.75rem);
}

.wd-crosssell li + li {
  border-left: 1px solid rgb(255 255 255 / 14%);
}

.wd-crosssell__mark {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  height: 1.75rem;
  justify-content: center;
  width: 1.75rem;
}

.wd-crosssell__mark img {
  height: 100% !important;
  max-width: 100%;
  object-fit: contain;
  width: auto;
}

.wd-crosssell__mark .wd-icon {
  color: var(--wd-orange-500);
  height: 1.75rem;
  width: 1.75rem;
}

.wd-crosssell p {
  color: var(--wd-grey-200);
  font-size: 0.875rem;
  margin: 0;
}

.wd-crosssell a {
  align-items: center;
  color: var(--wd-orange-500);
  display: inline-flex;
  font-size: 0.9375rem;
  font-weight: 600;
  gap: 0.375rem;
}

.wd-crosssell a:hover,
.wd-crosssell a:focus-visible {
  color: var(--wd-orange-500) !important;
  text-decoration: underline !important;
  text-underline-offset: 0.22em;
}

@media (max-width: 767.98px) {
  .wd-crosssell {
    grid-template-columns: minmax(0, 1fr);
  }

  .wd-crosssell li + li {
    border-left: 0;
    border-top: 1px solid rgb(255 255 255 / 14%);
  }
}

/* Four reasons with no closing card -- the fifth grid cell is not used here. */
.wd-why--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/*
 * Same trap the .wd-why--six comment below describes, and this modifier fell
 * into it: declared AFTER the .wd-why @media blocks at (0,1,0), it tied and won
 * on source order, so a phone kept four 73px columns and the page scrolled
 * sideways. It needs its own ladder.
 */
@media (max-width: 1199.98px) {
  .wd-why--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2rem;
  }
}

@media (max-width: 575.98px) {
  .wd-why--four {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * Dark studio background with the laptop and app icons on the right — the
 * default .wd-subhero scrim suits it, so no --light-art variant.
 */
.wd-subhero--microsoft {
  --wd-subhero-art: url("../img/microsoft-hero.jpg");
}

/*
 * .wd-subhero--wordpress MOVED to webdev-base.css — /wordpress-hosting-upgrade
 * shares the artwork and runs the migration template, so base is the only layer
 * both pages load.
 */

/* ---------- six commodity reasons ----------
 * Six short reassurances rather than four reasons plus a card: on an
 * entry-level commodity page the buyer is ticking off table stakes, not reading
 * an argument.
 *
 * These overrides MUST come after every .wd-why @media block above. Media
 * queries add no specificity, so .wd-why--six (0,1,0) and .wd-why (0,1,0) tie
 * and source order decides — a --six rule placed before them would be beaten
 * inside those viewports and leave six columns on a phone.
 */
.wd-why--six {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

@media (max-width: 1199.98px) {
  .wd-why--six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 2rem;
  }
}

@media (max-width: 767.98px) {
  .wd-why--six {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 479.98px) {
  .wd-why--six {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- resource specification rows ----------
 * MOVED to webdev-base.css — the consultative template
 * (/enterprise-infrastructure) needed it too. Its @media rules moved with
 * it, and the class names are unchanged, so the product pages did not have
 * to change.
 */

/* ---------- responsibility split ----------
 * MOVED to webdev-base.css — the consultative template
 * (/enterprise-infrastructure) needed it too. Its @media rules moved with
 * it, and the class names are unchanged, so the product pages did not have
 * to change.
 */


/* ---------- add-on tiles ----------
 * A menu, not a price list: availability and pricing are confirmed during
 * configuration, so these carry names only.
 */
.wd-addons {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
 * `height` on the icon is !important because custom.css carries a global
 * `li img { height: 42px !important }` above 768px, and these tiles ARE list
 * items — any brand mark dropped in here would otherwise be clamped.
 */
.wd-addons li {
  align-items: center;
  background: var(--wd-white);
  border-radius: var(--wd-card-radius);
  box-shadow: var(--wd-card-shadow);
  display: flex;
  font-size: 0.9375rem;
  font-weight: 600;
  gap: 0.875rem;
  min-height: 4rem;
  padding: 0.875rem 1.125rem;
}

.wd-addons .wd-icon {
  color: var(--wd-orange-600);
  flex: 0 0 auto;
}

.wd-addons img {
  flex: 0 0 auto;
  height: 1.5rem !important;
  width: auto;
}

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

@media (max-width: 479.98px) {
  .wd-addons {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- five-across feature rows ----------
 * /wordpress-hosting runs the same row twice — performance on a light section,
 * protection on a dark one. Reusing .wd-pillars for both means one set of
 * divider and responsive rules rather than two components that drift apart.
 *
 * These overrides MUST come after base's .wd-pillars @media blocks. Media
 * queries add no specificity, so .wd-pillars--five (0,1,0) and .wd-pillars
 * (0,1,0) tie and source order decides — a --five rule that landed before them
 * would be beaten inside those viewports. Loading order does that for us here
 * (product.css after base.css), and the breakpoints mirror base's exactly so
 * base's `li:nth-child(odd)` and `li + li` divider resets still line up.
 */
.wd-pillars--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1099.98px) {
  .wd-pillars--five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2rem;
  }
}

@media (max-width: 575.98px) {
  .wd-pillars--five {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * The same row on a LIGHT section. Base .wd-pillars is written for dark panels —
 * its body copy is --wd-grey-200 and its dividers are white at 12%, both of
 * which vanish on white.
 */
.wd-pillars--light {
  color: var(--wd-charcoal-900);
}

.wd-pillars--light li + li {
  border-left-color: var(--wd-grey-200);
}

.wd-pillars--light p {
  color: var(--wd-grey-700);
}

/* ---------- inline CTA on a light section ----------
 * The base .wd-inlinecta is built for a dark panel and sets its copy white.
 * This variant puts it on a light section: tinted fill, dark copy.
 */
/*
 * Wider than the dark original: this one carries a full sentence plus a button
 * and, at the base 56rem, the button wrapped onto a second row — which reads
 * badly inside a pill.
 */
.wd-inlinecta--light {
  background: var(--wd-orange-050);
  max-width: 68rem;
  padding-left: 1.25rem;
}

.wd-inlinecta--light p {
  color: var(--wd-charcoal-900);
  font-weight: 400;
}

.wd-inlinecta--light .wd-icon {
  color: var(--wd-orange-600);
  flex: 0 0 auto;
}

/*
 * `flex: 1 1 20rem`, not `auto`. Flexbox decides where to break a line from each
 * item's flex-basis, not from how far it could shrink — so a content-sized body
 * pushed the button onto a second row inside the pill even though there was room
 * for it once the text wrapped. A small basis keeps both on one line, then the
 * body grows to fill whatever is left.
 */
.wd-inlinecta__body {
  align-items: center;
  display: flex;
  flex: 1 1 20rem;
  gap: 1rem;
  min-width: 0;
}

.wd-inlinecta--light .wd-btn {
  flex: 0 0 auto;
}

/* Stacked pair: the base component's top margin is section-sized, which would
   open a gap between two bars that belong together. */
.wd-inlinecta + .wd-inlinecta {
  margin-top: 0.75rem;
}

/* ---------- included-mailboxes qualifier ----------
 * States plainly what the bundled mailboxes are and are not for, and names the
 * three approved email destinations. Honest scoping here prevents the support
 * load that comes from selling hosting email as a mail platform.
 */
.wd-lightmail {
  align-items: center;
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.wd-lightmail h2 {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
}

.wd-lightmail .wd-btn {
  margin-top: 1.25rem;
}

/*
 * A WHITE card, not an outlined box on the dark panel. Every one of these is a
 * third-party asset drawn for a light background — the Google Workspace lockup's
 * wordmark is near-black and the Microsoft file carries its own light backing
 * square, so on slate the first disappears and the second shows as a pale
 * rectangle. A white surface is the only honest way to show all three unaltered.
 */
.wd-lightmail__brands {
  background: var(--wd-white);
  border-radius: var(--wd-card-radius);
  box-shadow: var(--wd-card-shadow);
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0.25rem 1.5rem;
}

.wd-lightmail__brands li + li {
  border-top: 1px solid var(--wd-grey-100);
}

.wd-lightmail__brands li {
  align-items: center;
  color: var(--wd-charcoal-900);
  display: flex;
  font-weight: 600;
  gap: 0.875rem;
  height: 4.25rem;
}

/*
 * Zoho and Microsoft supply a square mark with no wordmark, so the product name
 * is set as text beside it. Google supplies a full lockup whose wordmark IS the
 * name, so that row carries the image alone.
 *
 * Both heights are !important because custom.css carries a global
 * `li img { height: 42px !important }` above 768px, and these images ARE inside
 * list items — without the override all three are clamped to the same 42px.
 */
.wd-lightmail__mark {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  height: 1.75rem;
  width: 1.75rem;
}

.wd-lightmail__mark img {
  height: 100% !important;
  object-fit: contain;
  width: auto;
}

.wd-lightmail__lockup {
  height: 1.5rem !important;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  width: auto;
}

@media (max-width: 991.98px) {
  .wd-lightmail {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- billing-cycle toggle ----------
 * Monthly vs annual. Built as progressive enhancement: BOTH prices are in the
 * markup and both are legible with no JavaScript at all — the toggle only
 * changes which one is emphasised. Nothing is display:none, so a visitor whose
 * scripts fail still sees the full price picture rather than an empty card.
 *
 * CURRENTLY UNUSED - do not delete. /managed-websites/ was the only page with
 * a billing toggle, and it went monthly-only on 1 Sep 2026 because the live
 * products carry no annual cycle, so the annual anchors rendered as raw
 * {PRICE:...} text. These rules are kept so restoring annual is a markup-only
 * change once the figures exist.
 */
.wd-billtoggle {
  align-items: center;
  background: var(--wd-grey-100);
  border-radius: 999px;
  display: inline-flex;
  gap: 0.25rem;
  margin: 0 auto;
  padding: 0.25rem;
}

.wd-billtoggle button {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--wd-grey-700);
  font-family: var(--wd-font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  min-height: 40px;
  padding: 0 1.25rem;
}

.wd-billtoggle button[aria-pressed="true"] {
  background: var(--wd-white);
  box-shadow: var(--wd-shadow-sm);
  color: var(--wd-charcoal-900);
}

.wd-billtoggle .wd-billtoggle__save {
  color: var(--wd-success-600);
  font-size: 0.75rem;
  font-weight: 700;
  margin-left: 0.375rem;
}

/* Both cycles, stacked. */
.wd-plan__prices {
  border-bottom: 1px solid var(--wd-grey-100);
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding-bottom: 0.875rem;
}

.wd-plan__cycle {
  margin: 0;
}

.wd-plan__cycle > span {
  color: var(--wd-grey-500);
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wd-plan__cycle b {
  color: var(--wd-orange-700);
  font-size: 1.125rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/*
 * The de-emphasised cycle. `opacity` rather than `display: none` so the figure
 * stays selectable, findable and readable to assistive tech — the toggle is a
 * convenience, not a gate on the information.
 */
.wd-plans.is-annual .wd-plan__cycle--monthly,
.wd-plans.is-monthly .wd-plan__cycle--annual {
  opacity: 0.45;
}

.wd-plans.is-annual .wd-plan__cycle--monthly b,
.wd-plans.is-monthly .wd-plan__cycle--annual b {
  font-size: 1rem;
}

/* ---------- three-across card grid ----------
 * Six inclusions in two rows of three. The product template's .wd-why puts six
 * items on ONE row, which is right for short reassurances and wrong for these,
 * which each carry a sentence.
 */
.wd-cardgrid {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Base leaves .wd-icon-plate grey and only brightens it on dark panels. This
   grid sits on the light tint, so the mark is set here. */
.wd-cardgrid .wd-icon-plate {
  color: var(--wd-orange-600);
  height: 2.25rem;
  width: 2.25rem;
}

.wd-cardgrid h3 {
  font-size: 1rem;
  margin-top: 0.75rem;
}

.wd-cardgrid p {
  color: var(--wd-grey-700);
  font-size: 0.9375rem;
  margin: 0.375rem 0 0;
}

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

@media (max-width: 575.98px) {
  .wd-cardgrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- optional add-on band ---------- */

.wd-addonband {
  align-items: center;
  background: var(--wd-charcoal-950);
  border-radius: var(--wd-card-radius);
  color: var(--wd-white);
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr) auto;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.wd-addonband h2 {
  font-size: clamp(1.25rem, 2vw, 1.625rem);
}

.wd-addonband .wd-body {
  color: var(--wd-grey-200);
}

.wd-addonband__price {
  color: var(--wd-grey-200);
  font-size: 0.9375rem;
  margin: 0.75rem 0 0;
}

.wd-addonband__price b {
  color: var(--wd-orange-500);
  font-weight: 700;
  overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
  .wd-addonband {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* .wd-fit__yes--dark and .wd-fit__label MOVED to webdev-base.css -- the
 * consultative template needed them too. */

/* ---------- build-fee note ---------- */

/*
 * `margin-top` matters here. Elsewhere a .wd-final banner sits in its own
 * .wd-section--tight, which supplies the separation. This one lives inside the
 * plans section, directly after the .wd-plans grid, so without a top margin it
 * butts straight up against the bottom of the plan cards.
 */
.wd-buildfee {
  display: grid;
  gap: clamp(1rem, 2vw, 2rem);
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.wd-buildfee h3 {
  font-size: 1.0625rem;
}

.wd-buildfee p {
  color: var(--wd-grey-700);
  font-size: 0.9375rem;
  margin: 0.375rem 0 0;
}

.wd-buildfee__tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wd-buildfee__tiers li {
  border: 1px solid var(--wd-grey-200);
  border-radius: var(--wd-radius-sm);
  font-size: 0.8125rem;
  min-width: 7rem;
  padding: 0.5rem 0.75rem;
}

.wd-buildfee__tiers b {
  color: var(--wd-charcoal-900);
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wd-buildfee__tiers span {
  color: var(--wd-grey-700);
}

@media (max-width: 991.98px) {
  .wd-buildfee {
    grid-template-columns: minmax(0, 1fr);
  }
}