/*
 * Webdev Zimbabwe — migration template (v2026)
 * Load AFTER webdev-base.css. Shared by all four upgrade child pages:
 *   /email-office-upgrade · /wordpress-hosting-upgrade
 *   /managed-website-upgrade · /managed-vps-upgrade
 *
 * Block order follows page-architecture "Migration":
 *   A reassurance hero · B what changes / what stays · C new options with price
 *   tokens · D migration process · E cohort FAQs · F one action + human fallback
 *
 * Timing language is renewal-paced throughout. Never render an internal
 * enforcement date in this template.
 */

/* Hero uses the shared .wd-subhero component in webdev-base.css.
   The dark-surface secondary button also comes from there via .wd-on-dark. */

/* ---------- recommendation panel ---------- */

.wd-reco {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  padding: clamp(1.5rem, 2.5vw, 2rem);
}

.wd-reco__ask h2 {
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
}

.wd-reco__ask .wd-btn {
  margin-top: 1.25rem;
  width: 100%;
}

.wd-reco__secure {
  align-items: center;
  color: var(--wd-grey-500);
  display: flex;
  font-size: 0.8125rem;
  gap: 0.4375rem;
  margin: 0.75rem 0 0;
}

/*
 * Signed-out state. The personalised recommendation needs WHMCS auto-auth, so
 * this panel shows WHICH details will appear rather than inventing any — never
 * render placeholder account data that could read as real.
 */
.wd-reco__preview {
  background: var(--wd-grey-050);
  border: 1px dashed var(--wd-grey-300);
  border-radius: var(--wd-radius-md);
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: clamp(1.125rem, 2vw, 1.5rem);
}

.wd-reco__preview > p {
  color: var(--wd-grey-500);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.wd-reco__fields {
  display: grid;
  gap: 0.625rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wd-reco__fields li {
  align-items: baseline;
  border-bottom: 1px solid var(--wd-grey-200);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: space-between;
  padding-bottom: 0.625rem;
}

.wd-reco__fields li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.wd-reco__fields dfn {
  color: var(--wd-charcoal-900);
  font-style: normal;
  font-weight: 600;
}

.wd-reco__fields span {
  color: var(--wd-grey-500);
  font-size: 0.875rem;
}

/* ---------- before / after comparison ---------- */

/*
 * The "what changes" block rendered as today vs after. Difference is carried by
 * the icon and the wording, never by colour alone.
 */
.wd-compare {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wd-compare__col {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.wd-compare h3 {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
}

.wd-compare ul {
  display: grid;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wd-compare li {
  color: var(--wd-grey-700);
  display: grid;
  font-size: 0.9375rem;
  gap: 0.75rem;
  grid-template-columns: 1.25rem 1fr;
}

.wd-compare .wd-icon {
  height: 1.25rem;
  margin-top: 0.125rem;
  width: 1.25rem;
}

.wd-compare__col--now .wd-icon {
  color: var(--wd-grey-500);
}

.wd-compare__col--managed .wd-icon {
  color: var(--wd-success-600);
}

/* Tints the preferred column without changing its tick colour. */
.wd-compare__col--highlight {
  background: var(--wd-orange-050);
}

/* ---------- BLOCK B — what stays / what changes ---------- */

.wd-keeps {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

/*
 * Each promise is its own tile. The band used to sit on an orange-050 stripe,
 * which carried the structure; now that every section shares one ground, the
 * tiles have to provide it themselves -- hairline card, orange icon disc.
 */
.wd-keeps li {
  background: var(--wd-white);
  border: 1px solid var(--wd-grey-200);
  border-radius: var(--wd-radius-md);
  display: grid;
  gap: 0.875rem;
  justify-items: center;
  padding: clamp(1.25rem, 2vw, 1.625rem) 1rem;
}

/* Orange mark on a soft orange disc -- the same accent the icon plates use
   elsewhere, sized to sit comfortably above a two-line label. */
.wd-keeps li > .wd-icon {
  background: var(--wd-orange-050);
  border-radius: 50%;
  box-sizing: content-box;
  color: var(--wd-orange-600);
  flex: none;
  padding: 0.75rem;
}

.wd-keeps p {
  color: var(--wd-charcoal-900);
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0;
}

/* Reads as a stamp under the tiles rather than a floating line of text --
   slate-600, the same grey as the stuck header and the .wd-steps band. */
.wd-keeps__note {
  align-items: center;
  background: var(--wd-slate-600);
  border-radius: var(--wd-radius-pill);
  color: var(--wd-white);
  display: flex;
  font-weight: 700;
  gap: 0.5rem;
  justify-content: center;
  margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
  padding: 0.625rem 1.25rem;
  width: fit-content;
}

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

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

.wd-changes__list {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}

.wd-changes__list li {
  color: var(--wd-grey-700);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1.25rem 1fr;
}

.wd-changes__list .wd-icon {
  color: var(--wd-orange-600);
  height: 1.25rem;
  margin-top: 0.1875rem;
  width: 1.25rem;
}

/* Website reassurance card — email migration does not touch the website. */
/*
 * Was an orange-050 block. The client asked for one consistent surface across
 * the upgrade pages, so this aside is now a plain white card like every other
 * card on the page; the link rows below take the grey fill so they still read
 * as rows against it.
 */
.wd-sitecard {
  background: var(--wd-white);
  border: 1px solid var(--wd-grey-200);
  border-radius: var(--wd-radius-md);
  padding: clamp(1.25rem, 2vw, 1.75rem);
}

.wd-sitecard__links {
  display: grid;
  gap: 0.5rem;
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}

.wd-sitecard__links a {
  align-items: center;
  background: var(--wd-grey-050);
  border-radius: var(--wd-radius-sm);
  color: var(--wd-charcoal-900);
  display: flex;
  font-size: 0.9375rem;
  font-weight: 600;
  gap: 0.75rem;
  justify-content: space-between;
  min-height: 48px;
  padding: 0.625rem 0.875rem;
  text-decoration: none;
  transition: box-shadow var(--wd-duration) var(--wd-ease);
}

@media (hover: hover) and (pointer: fine) {
  .wd-sitecard__links a:hover {
    box-shadow: var(--wd-shadow-sm);
  }
}

.wd-sitecard__links a:focus-visible {
  box-shadow: var(--wd-focus);
  outline: 0;
}

.wd-sitecard__links .wd-icon {
  color: var(--wd-orange-600);
}

/* ---------- feature grid ---------- */

/* "What managed really means" — explanatory, three across. */
.wd-features {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.wd-features li {
  background: var(--wd-white);
  border-radius: var(--wd-radius-md);
  box-shadow: var(--wd-shadow-xs);
  padding: clamp(1.125rem, 2vw, 1.5rem);
}

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

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

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

/* ---------- fit / not-a-fit ----------
 * MOVED to webdev-base.css — the product template needed it for /web-hosting.
 * Its `@media (max-width: 991.98px)` collapse moved with it, and .wd-fit has
 * been dropped from the 991.98px block below. Class names are unchanged, so the
 * markup on this template's pages did not have to change.
 */

/* FAQ accordion and the .wd-final banner live in webdev-base.css — shared with
   the router templates. .wd-final--brand modifier is below. */

.wd-final--brand {
  background: var(--wd-orange-050);
}

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

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

  .wd-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

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

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


/*
 * ART variant of the stays/improves comparison -- an illustration band on each
 * column with a pill label, instead of a plain white card beside an orange one.
 *
 * A modifier: .wd-compare__col is shared with /managed-vps-upgrade and
 * /managed-website-upgrade, which keep the original treatment.
 *
 * The right column no longer takes .wd-on-brand. Both cards are now white and
 * the distinction is carried by the band tint and the pill -- which reads as a
 * before/after pair rather than one option being sold over the other.
 */
.wd-page .wd-compare--art .wd-compare__col {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  padding: 0;
}

.wd-compare__band {
  aspect-ratio: 16 / 9;
  display: block;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

/* Sampled from the sources: the stays illustration sits on a paler ground than
   the improves one, so each band matches its own picture. */
.wd-compare__col--stays .wd-compare__band {
  background: #fdf4ec;
}

.wd-compare__col--improves .wd-compare__band {
  background: var(--wd-orange-050);
}

/* !important for the usual reason -- custom.css clamps `li img` to 42px above
   768px and this component sits directly above a list. */
.wd-compare__band img {
  display: block;
  height: 100% !important;
  object-fit: cover;
  width: 100%;
}

.wd-compare__pill {
  border-radius: var(--wd-radius-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  left: clamp(0.75rem, 1.5vw, 1rem);
  letter-spacing: 0.08em;
  padding: 0.375rem 0.75rem;
  position: absolute;
  text-transform: uppercase;
  top: clamp(0.75rem, 1.5vw, 1rem);
}

.wd-compare__col--stays .wd-compare__pill {
  background: var(--wd-success-050, #e9f6ec);
  color: var(--wd-success-600);
}

.wd-compare__col--improves .wd-compare__pill {
  background: var(--wd-orange-050);
  color: var(--wd-orange-700);
}

.wd-compare__body {
  align-content: start;
  display: grid;
  gap: 0.75rem;
  min-height: 0;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
}

/*
 * The improves column used to inherit white type from .wd-on-brand. On a white
 * card its marks need the brand colour back, and the stays ticks stay green.
 */
.wd-compare__col--improves .wd-icon {
  color: var(--wd-orange-600);
}

.wd-compare__col--stays .wd-icon {
  color: var(--wd-success-600);
}

/*
 * ART variant of the feature list -- illustration left, numbered copy right,
 * two across.
 *
 * A modifier: .wd-features is shared with /managed-vps-upgrade and
 * /managed-website-upgrade, which keep the plain icon cards.
 *
 * No new artwork: all four pictures already exist on /wordpress-hosting and
 * /web-hosting for the same four subjects.
 */
.wd-features--art {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wd-page .wd-features--art li {
  align-items: stretch;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  overflow: hidden;
  padding: 0;
}

.wd-feature__art {
  background: var(--wd-orange-050);
  display: block;
  min-height: 0;
  overflow: hidden;
}

/*
 * `height` is !important because these cards are <li> elements and Antler's
 * custom.css forces `li img` to 42px above 768px -- the trap that collapsed the
 * mosaic on /wordpress-hosting.
 */
.wd-feature__art img {
  display: block;
  height: 100% !important;
  object-fit: cover;
  width: 100%;
}

.wd-feature__body {
  align-content: center;
  display: grid;
  gap: 0.375rem;
  min-height: 0;
  padding: clamp(1.125rem, 2vw, 1.625rem);
}

.wd-feature__no {
  color: var(--wd-orange-600);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/*
 * One across below 992px -- at two columns the internal split leaves both
 * halves too narrow. The art becomes a band above the copy below 576px.
 */
@media (max-width: 991.98px) {
  .wd-features--art {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

  .wd-feature__art {
    aspect-ratio: 16 / 9;
  }
}

/*
 * ART variant of the recommendation panel -- illustration, the ask, then the
 * signed-out preview.
 *
 * The preview still lists WHICH details appear rather than inventing any; the
 * guard comment in the markup explains why, and the added marks are decorative
 * (aria-hidden) so nothing new is announced.
 */
.wd-page .wd-reco--art {
  align-items: stretch;
  gap: 0;
  grid-template-columns: minmax(0, 0.64fr) minmax(0, 0.82fr) minmax(0, 1fr);
  overflow: hidden;
  padding: 0;
}

/*
 * The illustration is contained, not cropped. The source is trimmed to the
 * artwork and the cell carries the peach the artwork sits on (#ffe9d4, sampled
 * from the file -- it is warmer than --wd-orange-050), so the letterbox is
 * invisible whatever shape the column ends up.
 */
.wd-reco__art {
  background: #ffe9d4;
  display: grid;
  min-height: 0;
  overflow: hidden;
  padding: clamp(1rem, 2vw, 1.75rem);
  place-items: center;
}

/* !important for the usual reason: custom.css clamps `li img` to 42px above
   768px and this panel sits beside list markup. */
.wd-reco__art img {
  display: block;
  height: 100% !important;
  object-fit: contain;
  width: 100%;
}

.wd-reco--art .wd-reco__ask {
  align-content: center;
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

/* The ask is the panel's headline, so it is sized like a section heading
   rather than a card title. */
.wd-reco--art .wd-reco__ask h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  line-height: 1.15;
}

.wd-reco--art .wd-reco__ask .wd-body {
  font-size: 1.0625rem;
}

.wd-reco--art .wd-reco__preview {
  gap: 1rem;
  margin: clamp(1.25rem, 2.5vw, 2rem);
  margin-left: 0;
}

/* The preview heading gains a lock on the same tile the rows use. */
.wd-reco--art .wd-reco__preview > p {
  align-items: center;
  display: flex;
  gap: 0.75rem;
}

/*
 * Each row: tile, then label above value.
 *
 * Label and value side by side needs about 1900px of card; inside the 1320px
 * shell the longest label wraps to three ragged lines while its value sits on
 * one. Stacking gives every row the same shape at any width.
 */
.wd-reco--art .wd-reco__fields {
  gap: 0;
}

.wd-reco--art .wd-reco__fields li {
  align-items: center;
  column-gap: 0.875rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 0.8125rem 0;
  row-gap: 0.125rem;
}

.wd-reco--art .wd-reco__fields li:first-child {
  padding-top: 0;
}

/* The tile spans both rows so the label and value stack beside it. */
.wd-reco--art .wd-reco__mark {
  grid-row: span 2;
}

.wd-reco--art .wd-reco__fields dfn {
  font-size: 0.9375rem;
}

.wd-reco__mark {
  align-items: center;
  align-self: center;
  background: var(--wd-orange-050);
  border-radius: var(--wd-radius-md);
  color: var(--wd-orange-600);
  display: inline-flex;
  flex: 0 0 auto;
  height: 2.625rem;
  justify-content: center;
  width: 2.625rem;
}

.wd-reco__mark .wd-icon {
  height: 1.25rem;
  width: 1.25rem;
}

/*
 * Two columns below 1200px (the picture goes), then one. Three columns with an
 * illustration leaves the ask too narrow to read.
 */
@media (max-width: 1199.98px) {
  .wd-page .wd-reco--art {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  }

  .wd-reco__art {
    display: none;
  }
}

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

  .wd-reco--art .wd-reco__preview {
    margin: 0 clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 2.5vw, 2rem);
  }
}

/*
 * ART variant of the "what doesn't change" row -- a picture above each promise.
 *
 * A modifier: .wd-keeps is shared with three other upgrade pages, which keep
 * the plain icon row.
 *
 * Five across is right for an icon and one line; with a picture each it drops
 * to three, then two, then one.
 */
/*
 * Six tracks with each tile spanning two, so the trailing row can be centred on
 * the half column. Five tiles in a plain three-column grid leave the last two
 * hanging off the left edge.
 */
.wd-keeps--art {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  text-align: left;
}

.wd-keeps--art li {
  grid-column: auto / span 2;
}

.wd-keeps--art li:nth-child(4) {
  grid-column: 2 / span 2;
}

.wd-page .wd-keeps--art li {
  background: var(--wd-white);
  border: 1px solid var(--wd-grey-200);
  border-radius: var(--wd-card-radius);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

.wd-keep__band {
  aspect-ratio: 16 / 9;
  background: var(--wd-orange-050);
  display: block;
  min-height: 0;
  overflow: hidden;
}

/*
 * `height` is !important because these are <li> elements and Antler's
 * custom.css forces `li img` to 42px above 768px.
 */
.wd-keep__band img {
  display: block;
  height: 100% !important;
  object-fit: cover;
  width: 100%;
}

.wd-keeps--art li > p {
  align-self: center;
  color: var(--wd-charcoal-900);
  font-weight: 650;
  margin: 0;
  padding: clamp(1rem, 1.8vw, 1.25rem);
}

/* Two per row, so the fifth becomes the one to centre. */
@media (max-width: 991.98px) {
  .wd-keeps--art {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .wd-keeps--art li:nth-child(4) {
    grid-column: auto / span 2;
  }

  .wd-keeps--art li:nth-child(5) {
    grid-column: 2 / span 2;
  }
}

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

  .wd-keeps--art li:nth-child(5) {
    grid-column: auto / span 2;
  }
}