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