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

/*
 * ART variant -- a tinted band holding a transparent illustration, above each
 * reason.
 *
 * Separate from --media (on /microsoft-365), which is built for PHOTOGRAPHS:
 * that one crops to 3/2 with object-fit: cover on a grey ground. These are
 * transparent PNGs, so they need a tint behind them and must not be cropped at
 * all. Two variants rather than one doing both jobs badly.
 *
 * The fifth card here is .wd-why__card, the dark one. Its band takes the dark
 * tint so the illustration is not floating on a peach rectangle inside a
 * charcoal card.
 */
.wd-why--art .wd-why__item,
.wd-why--art .wd-why__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.wd-why__band {
  align-items: center;
  aspect-ratio: 16 / 9;
  background: var(--wd-orange-050);
  display: flex;
  justify-content: center;
  padding: clamp(0.5rem, 1.2vw, 0.875rem);
}

.wd-why__band--dark {
  background: rgb(255 255 255 / 6%);
}

/*
 * FLUSH band, layered on --art.
 *
 * --art pads the band and tints it, which is right for /zoho-mail: those
 * illustrations are TRANSPARENT PNGs, so the tint is what they sit on. The
 * /google-workspace set is opaque -- sampled at #fefefd on four of them and
 * #1d252d on the dark one -- and already 16:9. Padding them would draw a peach
 * frame around a white picture, so the image fills the band edge to edge and the
 * band colour is never seen.
 */
.wd-why--flush .wd-why__band {
  padding: 0;
}

/* Numbered marker above the heading, as on the /zoho-mail use cases. */
.wd-why__no {
  color: var(--wd-orange-600);
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 0.375rem;
}

/* On the dark card the 600 tint goes muddy against charcoal. */
.wd-why__card .wd-why__no {
  color: var(--wd-orange-500);
}

/* contain, not cover: the sources are 16:9 and the band is 16:9, so nothing is
   cropped -- the padding above simply insets the artwork a little. */
.wd-why__band img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.wd-why__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: clamp(1.125rem, 2vw, 1.5rem);
}

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

/*
 * MEDIA variant — a photograph above each reason.
 *
 * A modifier because .wd-why__item is shared by six product pages and only
 * /microsoft-365 has the photography for it.
 *
 * The padding moves off the item and onto __body so the picture can reach the
 * card edge; `overflow: hidden` clips it to the card radius. The sources are
 * 1536x1024 and the band is declared 3/2 to match exactly, so nothing is
 * cropped — which matters here, because three of the four are portraits.
 */
.wd-why--media .wd-why__item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.wd-why__media {
  aspect-ratio: 3 / 2;
  background: var(--wd-grey-100);
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.wd-why__body {
  padding: clamp(1.25rem, 2vw, 1.75rem);
}

/*
 * HOVER on the photo cards.
 *
 * Scoped to --media, not to .wd-why__item, so the plain text reasons on the
 * other five product pages are untouched. One line widens it if they should all
 * behave the same.
 *
 * 2px and an orange edge, matching the content cards on /websites: these cards
 * lead nowhere, and the 4px lift stays reserved for things that do.
 *
 * NOTE: .wd-why__item is NOT a .wd-card, so the blanket reduced-motion rule in
 * webdev-base.css (`.wd-page .wd-card { transform: none !important }`) does not
 * reach it. Hence the explicit guard at the bottom — without it this is the one
 * card on the site that still moves for someone who asked it not to.
 */
@media (hover: hover) and (pointer: fine) {
  .wd-why--media .wd-why__item {
    /* The hand is for consistency with the cards on /websites. These have no
       link either, so it promises a click nothing answers — delete this line to
       make them read as inert. */
    cursor: pointer;
    transition:
      border-color var(--wd-duration) var(--wd-ease),
      box-shadow var(--wd-duration) var(--wd-ease),
      transform var(--wd-duration) var(--wd-ease);
  }

  .wd-why--media .wd-why__item:hover {
    border-color: var(--wd-orange-500);
    box-shadow: 0 12px 26px 0 rgb(17 20 22 / 14%);
    transform: translateY(-2px);
  }

  /* Slow push on the photograph. The item already clips to its radius for the
     band, so the scale has something to be cropped by. */
  .wd-why--media .wd-why__media {
    transition: transform 500ms var(--wd-ease);
  }

  .wd-why--media .wd-why__item:hover .wd-why__media {
    transform: scale(1.05);
  }

  .wd-why--media .wd-why__item h3,
  .wd-why--media .wd-why__item .wd-icon {
    transition: color var(--wd-duration) var(--wd-ease);
  }

  .wd-why--media .wd-why__item:hover h3 {
    color: var(--wd-orange-600);
  }

  .wd-why--media .wd-why__item:hover .wd-icon {
    color: var(--wd-orange-500);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wd-why--media .wd-why__item,
  .wd-why--media .wd-why__item:hover,
  .wd-why--media .wd-why__media,
  .wd-why--media .wd-why__item:hover .wd-why__media {
    transform: none !important;
    transition: none;
  }
}

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

/*
 * MEDIA variant — an illustration band above each use-case card.
 *
 * A modifier because .wd-usecase is shared by the three email product pages and
 * only /microsoft-365 has the artwork.
 *
 * The card's own three-column row (plate, copy, arrow) moves into __body so the
 * picture can reach the card edge; `overflow: hidden` clips it to the radius.
 * The .wd-page prefix is needed to outrank `.wd-page .wd-card` (0,2,0), which
 * sets the padding this removes.
 *
 * 16/10 against a 4:3 source, so the band crops. Measured first: the artwork in
 * all three files sits between 17% and 85% of image height, and a 16/10 window
 * keeps 8%-92%. Re-measure before swapping any of these images.
 */
.wd-page .wd-usecases--media .wd-usecase {
  display: block;
  overflow: hidden;
  padding: 0;
}

.wd-usecase__media {
  aspect-ratio: 16 / 10;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.wd-usecase__body {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: auto 1fr auto;
  padding: clamp(1.25rem, 2vw, 1.75rem);
}

/*
 * WIDE band + numbered marker, layered on top of --media.
 *
 * --media alone crops to 16/10, which suits the 4:3 photographs on
 * /microsoft-365. The /zoho-mail illustrations are already 16:9, so cropping
 * them to 16/10 would shave 10% off the height -- and the first one carries its
 * "yourdomain.co.zw" pill near the top edge, which is exactly what that would
 * eat. Matching the band to the source means nothing is cropped.
 */
.wd-usecases--wide .wd-usecase__media {
  aspect-ratio: 16 / 9;
  /* Only ever seen while the picture loads: every --wide source is opaque and
     exactly 16:9, so it covers the band completely. */
  background: var(--wd-warm-050);
}

/*
 * The number replaces the icon plate: the illustration already carries the
 * meaning the mark did, and repeating it would say the same thing twice. Sized
 * and positioned to sit in the plate's old grid column.
 */
.wd-usecase__no {
  align-items: center;
  background: var(--wd-orange-050);
  border-radius: var(--wd-radius-pill);
  color: var(--wd-orange-700);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.8125rem;
  font-weight: 700;
  height: 2rem;
  justify-content: center;
  letter-spacing: 0.04em;
  min-width: 2.5rem;
  padding: 0 0.625rem;
}

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

  .wd-usecases--apps > .wd-usecase {
    flex-basis: 100%;
  }
}

@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.
 */
/* ---------- choose-what-fits cross-sell ----------
 * Replaces .wd-crosssell, which was a divided row inside one black panel. Shared
 * by /microsoft-365, /google-workspace and /zoho-mail; each page lists the other
 * two platforms plus the comparison and never itself.
 *
 * Copy on the left, the options on the right, the same shape as .wd-paysplit.
 */
.wd-choose {
  align-items: center;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr);
}

.wd-choose__intro h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.wd-choose__intro .wd-body {
  color: var(--wd-grey-700);
  margin: 0.625rem 0 0;
}

.wd-choose__list {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The whole card is the link, so it carries the padding and the stacking. */
.wd-page .wd-choose__card {
  display: grid;
  gap: 0.375rem;
  justify-items: start;
  padding: clamp(1rem, 1.8vw, 1.25rem);
  text-decoration: none;
}

/* The last card is the fallback for people who have not decided. The orange
   edge marks it as the safe choice rather than a fourth equal platform. */
.wd-page .wd-choose__card--accent {
  border-color: var(--wd-orange-500);
}

/*
 * Tile behind the mark. The three brand logos have wildly different canvases --
 * Gmail is 800x636, Zoho 1024x1024, the M365 suite mark 465x512 -- so the tile
 * is a fixed square and `object-fit: contain` sizes each one inside it. Without
 * that the row reads as three different components.
 */
.wd-choose__mark {
  align-items: center;
  background: var(--wd-grey-050);
  border-radius: var(--wd-radius-md);
  color: var(--wd-orange-500);
  display: inline-flex;
  height: 2.75rem;
  justify-content: center;
  margin-bottom: 0.375rem;
  width: 2.75rem;
}

/*
 * !important for the same reason as .wd-perfgrid__band img: these tiles sit
 * inside <li> elements and Antler's custom.css forces `li img` to 42px above
 * 768px, which blew each logo past the 44px tile holding it.
 */
.wd-choose__mark img {
  height: 1.625rem !important;
  object-fit: contain;
  width: 1.625rem;
}

.wd-choose__card--accent .wd-choose__mark {
  background: var(--wd-orange-050);
}

.wd-choose__eyebrow {
  color: var(--wd-grey-500);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.wd-choose__name {
  color: var(--wd-charcoal-900);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
}

.wd-choose__go {
  align-items: center;
  color: var(--wd-orange-700);
  display: inline-flex;
  font-size: 0.9375rem;
  font-weight: 600;
  gap: 0.4375rem;
  margin-top: 0.25rem;
}

@media (hover: hover) and (pointer: fine) {
  .wd-choose__go .wd-icon {
    transition: transform var(--wd-duration) var(--wd-ease);
  }

  .wd-choose__card:hover .wd-choose__go .wd-icon {
    transform: translateX(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wd-choose__go .wd-icon {
    transform: none !important;
    transition: none;
  }
}

/* Intro above the row before the two halves get too narrow to read. */
@media (max-width: 991.98px) {
  .wd-choose {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

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

/* ---------- five equal reasons ----------
 * /vps-hosting has five reasons, and in the --six grid they left the sixth
 * track empty, so the row stopped short of the shell edge. Five tracks fill it.
 *
 * Below 1200px the grid is six tracks with spans rather than a plain column
 * count: 3 + 2 and then 2 + 2 + 1, with the short row widened to fill, so no
 * breakpoint leaves a gap beside the last card.
 *
 * Must stay after the .wd-why @media blocks, for the reason given on --six.
 */
.wd-why--five {
  gap: clamp(1rem, 1.6vw, 1.5rem);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.wd-why--five .wd-why__item {
  box-shadow: 0 1px 2px 0 rgb(17 20 22 / 4%), 0 8px 24px -12px rgb(17 20 22 / 12%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Accent rule along the top edge, drawn in on hover. */
.wd-why--five .wd-why__item::before {
  background: var(--wd-orange-500);
  content: "";
  height: 3px;
  inset: 0 0 auto;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left;
}

/* The mark sits on a tinted tile. Padding on the svg insets the drawing, so
   the markup needs no wrapper. */
.wd-why--five .wd-why__item .wd-icon {
  background: var(--wd-orange-050);
  border-radius: 12px;
  box-sizing: border-box;
  height: 3rem;
  margin-bottom: 1rem;
  padding: 0.6875rem;
  width: 3rem;
}

@media (hover: hover) and (pointer: fine) {
  .wd-why--five .wd-why__item {
    transition:
      border-color var(--wd-duration) var(--wd-ease),
      box-shadow var(--wd-duration) var(--wd-ease),
      transform var(--wd-duration) var(--wd-ease);
  }

  .wd-why--five .wd-why__item::before {
    transition: transform 300ms var(--wd-ease);
  }

  .wd-why--five .wd-why__item:hover {
    border-color: var(--wd-grey-300);
    box-shadow: 0 1px 2px 0 rgb(17 20 22 / 4%), 0 16px 32px -14px rgb(17 20 22 / 22%);
    transform: translateY(-2px);
  }

  .wd-why--five .wd-why__item:hover::before {
    transform: scaleX(1);
  }
}

/* .wd-why__item is not a .wd-card, so base's reduced-motion rule misses it. */
@media (prefers-reduced-motion: reduce) {
  .wd-why--five .wd-why__item,
  .wd-why--five .wd-why__item:hover {
    transform: none !important;
    transition: none;
  }

  .wd-why--five .wd-why__item::before {
    transition: none;
  }
}

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

  .wd-why--five .wd-why__item {
    grid-column: span 2;
  }

  .wd-why--five .wd-why__item:nth-child(n + 4) {
    grid-column: span 3;
  }
}

@media (max-width: 767.98px) {
  .wd-why--five .wd-why__item,
  .wd-why--five .wd-why__item:nth-child(n + 4) {
    grid-column: span 3;
  }

  .wd-why--five .wd-why__item:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 479.98px) {
  .wd-why--five .wd-why__item,
  .wd-why--five .wd-why__item:nth-child(n + 4) {
    grid-column: 1 / -1;
  }
}

/* ---------- 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);
  }
}
/*
 * Six ILLUSTRATED cards do not fit across. --six is six columns at 1200px+,
 * which is right for /managed-vps and /vps-hosting where the cards are an icon
 * and two lines of text; give each one a picture and the band lands at roughly
 * 170px wide. Two rows of three instead.
 *
 * Scoped to the combination so those two pages keep their six-across row.
 *
 * The breakpoints have to be restated rather than inherited: .wd-why--six.wd-why--art
 * is (0,2,0) and beats the plain .wd-why--six (0,1,0) rules INSIDE the media
 * queries too, so without these the grid would stay at three columns on a phone.
 */
.wd-why--six.wd-why--art {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

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

/* ---------- art cards: finish ----------
 * Layered on every --art row (/google-workspace, /zoho-mail, /web-hosting).
 * Everything is scoped to .wd-why--art, so the plain, --media and --five rows
 * on the other product pages are untouched.
 *
 * Kept after the --six.--art block and after the .wd-why @media blocks, for
 * the specificity reason given on --six.
 */
.wd-why--art {
  gap: clamp(1rem, 1.6vw, 1.5rem);
}

/* Five EQUAL columns. The base grid gives the dark card 1.05fr, which made its
   16:9 band a few pixels taller than the other four and pushed its text out of
   line with theirs. min-width, so the two-column rule below 1200px still wins. */
@media (min-width: 1200px) {
  .wd-why--art:not(.wd-why--six) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.wd-why--art .wd-why__item,
.wd-why--art .wd-why__card {
  border-radius: 20px;
  box-shadow:
    0 1px 2px 0 rgb(17 20 22 / 4%),
    0 14px 30px -18px rgb(17 20 22 / 22%);
  /* .wd-why__card sets a grid gap, which as a flex gap sat between the band
     and the body and was the other half of the misalignment. */
  gap: 0;
}

.wd-why--art .wd-why__card {
  background: linear-gradient(160deg, var(--wd-charcoal-800), var(--wd-charcoal-900));
}

/* The band becomes an inset tile with its own radius, rather than a strip
   welded to the top edge of the card. */
.wd-why--art .wd-why__band {
  border-radius: 14px;
  margin: 0.5rem 0.5rem 0;
  overflow: hidden;
}

/*
 * The /google-workspace and /web-hosting pictures are opaque near-white, so on
 * a white card the tile had no edge at all. multiply lets the tile's grey show
 * through the white of the picture and leaves the artwork's own colours alone.
 * Light cards only: the dark picture on the dark card is left as it is.
 */
.wd-why--art.wd-why--flush .wd-why__item .wd-why__band {
  background: var(--wd-grey-050);
}

.wd-why--art.wd-why--flush .wd-why__item .wd-why__band img {
  mix-blend-mode: multiply;
}

/*
 * Icon and number share one row -- icon chip left, number right -- instead of
 * stacking as two small orange marks. A grid, so it needs no wrapper: where a
 * page has no number (/zoho-mail, /web-hosting) the chip simply sits alone.
 */
.wd-why--art .wd-why__body {
  align-content: start;
  column-gap: 0.75rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  padding: clamp(1.125rem, 1.8vw, 1.5rem);
}

.wd-why--art .wd-why__body .wd-icon {
  background: var(--wd-orange-050);
  border-radius: 12px;
  box-sizing: border-box;
  color: var(--wd-orange-600);
  grid-column: 1;
  grid-row: 1;
  height: 2.75rem;
  margin-bottom: 1rem;
  padding: 0.6875rem;
  width: 2.75rem;
}

.wd-why--art .wd-why__card .wd-icon {
  background: rgb(244 124 32 / 16%);
  color: var(--wd-orange-500);
}

.wd-why--art .wd-why__no {
  color: var(--wd-grey-300);
  font-size: 1.375rem;
  font-variant-numeric: tabular-nums;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  letter-spacing: -0.01em;
  line-height: 2.75rem;
  margin: 0;
}

.wd-why--art .wd-why__card .wd-why__no {
  color: rgb(255 255 255 / 26%);
}

.wd-why--art .wd-why__body h3 {
  font-size: 1.0625rem;
  grid-column: 1 / -1;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
}

.wd-why--art .wd-why__body p {
  grid-column: 1 / -1;
  line-height: 1.6;
  margin: 0.5rem 0 0;
}

/*
 * Between 576px and 1200px the dark card spans both columns, and a 16:9 band
 * across that width came out some 480px tall. It lies on its side instead:
 * picture left, text right.
 */
@media (min-width: 576px) and (max-width: 1199.98px) {
  .wd-why--art:not(.wd-why--six) .wd-why__card {
    align-items: center;
    flex-direction: row;
  }

  .wd-why--art:not(.wd-why--six) .wd-why__card .wd-why__band {
    flex: 0 0 42%;
    margin: 0.5rem 0 0.5rem 0.5rem;
  }
}

/* Same 2px lift and orange edge as the --media cards on /microsoft-365. */
@media (hover: hover) and (pointer: fine) {
  .wd-why--art .wd-why__item,
  .wd-why--art .wd-why__card {
    transition:
      border-color var(--wd-duration) var(--wd-ease),
      box-shadow var(--wd-duration) var(--wd-ease),
      transform var(--wd-duration) var(--wd-ease);
  }

  .wd-why--art .wd-why__item:hover,
  .wd-why--art .wd-why__card:hover {
    box-shadow:
      0 1px 2px 0 rgb(17 20 22 / 4%),
      0 22px 38px -18px rgb(17 20 22 / 30%);
    transform: translateY(-2px);
  }

  .wd-why--art .wd-why__item:hover {
    border-color: var(--wd-orange-500);
  }

  .wd-why--art .wd-why__band img {
    transition: transform 500ms var(--wd-ease);
  }

  .wd-why--art .wd-why__item:hover .wd-why__band img,
  .wd-why--art .wd-why__card:hover .wd-why__band img {
    transform: scale(1.04);
  }
}

/* .wd-why__item is not a .wd-card, so base's reduced-motion rule misses it. */
@media (prefers-reduced-motion: reduce) {
  .wd-why--art .wd-why__item,
  .wd-why--art .wd-why__card,
  .wd-why--art .wd-why__item:hover,
  .wd-why--art .wd-why__card:hover,
  .wd-why--art .wd-why__band img,
  .wd-why--art .wd-why__item:hover .wd-why__band img,
  .wd-why--art .wd-why__card:hover .wd-why__band img {
    transform: none !important;
    transition: none;
  }
}

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

/*
 * MEDIA variant -- an illustration band above each card, replacing the icon
 * plate. A modifier even though /managed-websites is the only page using
 * .wd-cardgrid today, so a second page can take the plain version.
 *
 * .wd-page is needed on the padding rule to outrank `.wd-page .wd-card` (0,2,0).
 *
 * The sources are 1672x941 -- exactly 16:9 -- and the band is declared 16/9, so
 * `cover` has nothing to crop. Re-check that if these files are ever swapped.
 */
.wd-page .wd-cardgrid--media .wd-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.wd-cardgrid__media {
  aspect-ratio: 16 / 9;
  background: var(--wd-orange-050);
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.wd-cardgrid__body {
  padding: clamp(1.25rem, 2vw, 1.5rem);
}

/* Short brand rule between the picture and the heading, so the copy reads as a
   caption to the illustration rather than floating under it. */
.wd-cardgrid__body::before {
  background: var(--wd-orange-500);
  border-radius: 2px;
  content: "";
  display: block;
  height: 3px;
  margin-bottom: 0.875rem;
  width: 2rem;
}

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


/* ---------- performance mosaic ----------
 * Five cards where the first leads: AccelerateWP spans both rows of the left
 * column, the other four sit two-by-two beside it.
 *
 * A component of its own rather than another .wd-pillars modifier, because
 * /wordpress-hosting runs .wd-pillars--five TWICE -- performance here and
 * protection further down on a dark panel -- and only this one becomes a
 * mosaic. Touching the shared modifier would have moved both.
 */
.wd-perfgrid {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  grid-template-columns: 1.15fr 1fr 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
 * GRID, not flex. As a column flex container the band was a flex item with
 * aspect-ratio and the default flex-shrink: 1, so it was crushed to a sliver
 * while `flex: 1 1 auto` on the body swallowed the rest as white space.
 * Explicit rows cannot do that: the band gets its track, the body gets what is
 * left.
 */
.wd-page .wd-perfgrid__item {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  padding: 0;
}

/*
 * The hero is two rows tall, so its rows are the other way round: the picture
 * takes the slack and the copy sits under it. Left as auto/1fr it would be a
 * small band over a tall empty body.
 */
.wd-perfgrid__item--hero {
  grid-column: 1;
  grid-row: span 2;
  grid-template-rows: 1fr auto;
}

.wd-perfgrid__band {
  display: block;
  /* Lets the track shrink below the image's intrinsic height instead of
     forcing the card taller. */
  min-height: 0;
  overflow: hidden;
}

/*
 * 16:9 matches the sources exactly, so the small cards crop nothing. The hero
 * has no ratio: it fills whatever height two rows give it, and cover handles
 * the rest.
 */
.wd-perfgrid__item:not(.wd-perfgrid__item--hero) .wd-perfgrid__band {
  aspect-ratio: 16 / 9;
}

/*
 * `height` is !important for the reason it is on ten other components here:
 * Antler's custom.css ships `li img { height: 42px !important }` above 768px,
 * and these cards are <li> elements. Without it every band collapses to a 42px
 * sliver -- which is precisely what it did.
 */
.wd-perfgrid__band img {
  display: block;
  height: 100% !important;
  object-fit: cover;
  width: 100%;
}

.wd-perfgrid__body {
  align-content: start;
  display: grid;
  gap: 0.375rem;
  min-height: 0;
  padding: clamp(1rem, 1.8vw, 1.375rem);
}

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

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

/* The hero carries the section, so its type steps up and its band is allowed
   more room before the copy. */
.wd-perfgrid__item--hero .wd-perfgrid__body h3 {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
}

.wd-perfgrid__item--hero .wd-perfgrid__body p {
  font-size: 1rem;
}

/*
 * Two across, and the hero stops spanning: at this width a 1.15fr column is
 * too narrow to carry a picture AND display type, and a card that is two rows
 * tall next to single-row neighbours leaves a hole in the grid.
 */
@media (max-width: 991.98px) {
  .wd-perfgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wd-perfgrid__item--hero {
    grid-column: 1 / -1;
    grid-row: auto;
    /* No longer two rows tall, so the band goes back to leading the card. */
    grid-template-rows: auto 1fr;
  }

  .wd-perfgrid__item--hero .wd-perfgrid__band {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 575.98px) {
  .wd-perfgrid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ---------- setup & migration panel (email product pages) ---------- */

/*
 * Replaces the wide "Setup & migration" add-on card: art beside the heading,
 * one tile per licence tier, then the service notes as a row of cards.
 * Tile fees are VAT-inclusive markup that wd-vat.js flips with the switch.
 */
.wd-migrate {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
}

.wd-migrate__head {
  align-items: center;
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
}

.wd-migrate__pill {
  background: var(--wd-orange-050);
  border-radius: var(--wd-radius-pill, 999px);
  color: var(--wd-orange-700);
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0;
  padding: 0.375rem 0.875rem;
  text-transform: uppercase;
}

.wd-migrate__head h3 {
  font-size: clamp(1.625rem, 3vw, 2.375rem);
  line-height: 1.1;
  margin: 0.875rem 0 0.375rem;
}

.wd-migrate__lead {
  color: var(--wd-grey-500);
  font-size: 1.0625rem;
  margin: 0;
}

/* Sampled from the artwork's own ground (#feefe2), so the corners never show a seam. */
.wd-migrate__art {
  background: #feefe2;
  border-radius: var(--wd-radius-md);
  display: block;
  overflow: hidden;
}

.wd-migrate__art img {
  display: block;
  height: auto;
  width: 100%;
}

.wd-migrate__tiers {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.wd-migrate__tiers li {
  background: var(--wd-white);
  border: 1px solid var(--wd-grey-200);
  border-radius: var(--wd-radius-md);
  display: grid;
  gap: 0.25rem;
  padding: clamp(1rem, 2vw, 1.375rem);
}

.wd-migrate__tiers h4 {
  font-size: 1.1875rem;
  margin: 0;
}

.wd-migrate__label {
  color: var(--wd-grey-500);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.wd-migrate__price {
  margin: 0.125rem 0 0.625rem;
}

.wd-migrate__price b {
  color: var(--wd-orange-600);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.wd-migrate__free {
  align-items: center;
  background: var(--wd-success-050);
  border-radius: var(--wd-radius-sm);
  color: var(--wd-success-800);
  display: flex;
  font-size: 0.8125rem;
  gap: 0.5rem;
  margin: auto 0 0;
  padding: 0.5rem 0.625rem;
}

.wd-migrate__free .wd-icon {
  color: var(--wd-success-600);
  flex: none;
  height: 1.25rem;
  width: 1.25rem;
}

.wd-migrate__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

.wd-migrate__ask {
  color: var(--wd-charcoal-900);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.wd-migrate__ask:hover,
.wd-migrate__ask:focus-visible {
  color: var(--wd-orange-700);
}

/* .wd-page prefix: a generic heading reset otherwise zeroes this margin. */
.wd-page .wd-servicenotes__title {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  margin: clamp(2rem, 3.5vw, 2.75rem) 0 1rem;
}

.wd-servicenotes {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.wd-servicenotes li {
  align-items: start;
  background: var(--wd-white);
  border: 1px solid var(--wd-grey-200);
  border-radius: var(--wd-radius-md);
  display: grid;
  gap: 1rem;
  grid-template-columns: auto minmax(0, 1fr);
  padding: clamp(1rem, 2vw, 1.375rem);
}

.wd-servicenotes__icon {
  align-items: center;
  background: var(--wd-orange-050);
  border-radius: 50%;
  color: var(--wd-orange-600);
  display: inline-flex;
  height: 3rem;
  justify-content: center;
  width: 3rem;
}

.wd-servicenotes h4 {
  font-size: 1.0625rem;
  margin: 0 0 0.25rem;
}

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

.wd-servicenotes__more summary {
  color: var(--wd-orange-700);
  cursor: pointer;
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  list-style: none;
  margin-top: 0.5rem;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.wd-servicenotes__more summary::-webkit-details-marker {
  display: none;
}

.wd-servicenotes__more summary::after {
  content: " →";
}

.wd-servicenotes__more[open] summary::after {
  content: " ↑";
}

.wd-servicenotes__more summary:focus-visible {
  border-radius: var(--wd-radius-sm);
  box-shadow: var(--wd-focus);
  outline: 0;
}

.wd-servicenotes__more p {
  margin-top: 0.5rem;
}

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

  .wd-migrate__art {
    max-width: 32rem;
  }
}

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