/*
 * Webdev Zimbabwe — homepage (v2026) block layout
 * Load AFTER webdev-base.css, which owns the shared primitives (shell, section
 * rhythm, headings, icons, card surface, theme overrides).
 * Tokens come from webdev-antler-design.css. Do not hard-code colours here.
 * Block letters match Homepage_Brief_v1_4 §4 (A hero, B router, C categories,
 * D trusted-by, F compliance, G support).
 */

/* ---------- homepage-only theme overrides ---------- */

.wd-home .wd-channel:hover {
  color: var(--wd-white) !important;
}

.wd-home .wd-lane--existing .wd-lane__link:hover,
.wd-home .wd-lane--existing .wd-lane__link:focus-visible {
  color: var(--wd-orange-500) !important;
}

.wd-home .wd-lane__link:hover,
.wd-home .wd-lane__link:focus-visible,
.wd-home .wd-support__note a {
  text-decoration: underline !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

/* ---------- BLOCK A — hero + domain search ---------- */

.wd-hero {
  background: var(--wd-charcoal-950);
  color: var(--wd-white);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

/*
 * Decorative artwork layer. Right-anchored so the subject never sits under the
 * copy, with a left-to-right scrim so text contrast comes from the gradient
 * rather than from the image — the art can be replaced without retesting text.
 *
 * salessupport.jpg is a 149 KB re-encode of the supplied indexed PNG (509 KB);
 * it is the largest paint on the page, so the original is not shipped. Shared
 * with /contact-us, where it is declared as .wd-subhero--contact in
 * webdev-contact.css — different component, same file, so a visitor who sees
 * both pages downloads it once.
 *
 * hero-developer.jpg, which this replaced, is still in use by /careers
 * (.wd-subhero--developer) and /certificates (.wd-subhero--certs). Do not
 * remove it.
 *
 * The scrim holds opaque further right than it did for the previous abstract
 * artwork: this is a photograph with monitors and detail behind the headline,
 * and a busy image needs more cover than a sparse one to keep type clean.
 */
.wd-hero__bg {
  background-image:
    linear-gradient(
      100deg,
      var(--wd-charcoal-950) 0%,
      var(--wd-charcoal-950) 30%,
      rgb(17 20 22 / 88%) 46%,
      rgb(17 20 22 / 45%) 66%,
      rgb(17 20 22 / 8%) 100%
    ),
    url("../img/salessupport.jpg");
  background-position: center, right 28%;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  inset: 0;
  position: absolute;
  z-index: -1;
}

/* padding-top only — a `padding: X 0 0` shorthand here would reset the
   horizontal padding .wd-shell provides, which removed the side gutters
   at every width below the 1240px container max. */
.wd-hero__inner {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  position: relative;
}

.wd-hero__eyebrow {
  color: var(--wd-orange-500);
  font-size: clamp(0.8125rem, 1vw, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0 0 clamp(0.875rem, 1.5vw, 1.25rem);
  text-transform: uppercase;
}

.wd-hero h1 {
  max-width: 22ch;
}

.wd-hero__lead {
  color: var(--wd-grey-200);
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  margin: clamp(1rem, 2vw, 1.5rem) 0 0;
  max-width: 56ch;
}

/* Stats sit inside the hero on the dark surface. */
.wd-herostats {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: clamp(1.5rem, 2.5vw, 2rem) 0 0;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) 0 clamp(1.75rem, 3vw, 2.25rem);
}

.wd-herostats li {
  align-items: center;
  color: var(--wd-white);
  display: flex;
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  gap: 0.875rem;
  padding-right: 1rem;
}

.wd-herostats li + li {
  border-left: 1px solid rgb(255 255 255 / 18%);
  padding-left: clamp(1rem, 2.5vw, 2rem);
}

.wd-herostats .wd-icon {
  color: var(--wd-white);
  stroke-width: 1.25;
}

/* Domain search — visually one group, separately focusable controls */
.wd-domain {
  background: var(--wd-white);
  border-radius: var(--wd-radius-md);
  box-shadow: var(--wd-shadow-md);
  color: var(--wd-charcoal-900);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  max-width: 54rem;
  padding: clamp(1.25rem, 2vw, 1.75rem);
}

.wd-domain__title {
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0 0 0.875rem;
}

.wd-domain__row {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.wd-domain__name {
  flex: 1 1 15rem;
  min-width: 0;
}

.wd-domain__row .wd-field__control {
  min-height: 52px;
}

.wd-domain__row .wd-btn {
  min-height: 52px;
  white-space: nowrap;
}

/* Separates "search for a new domain" from "transfer one in". */
.wd-domain__divider {
  align-self: center;
  background: var(--wd-grey-200);
  flex: 0 0 1px;
  height: 32px;
  width: 1px;
}

.wd-domain__tlds {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.875rem 0 0;
}

.wd-domain__tlds dt {
  color: var(--wd-grey-500);
  font-size: 0.8125rem;
  font-weight: 600;
  margin-right: 0.25rem;
}

.wd-domain__tlds dd {
  border: 1px solid var(--wd-grey-200);
  border-radius: var(--wd-radius-pill, 999px);
  color: var(--wd-grey-700);
  font-size: 0.8125rem;
  margin: 0;
  padding: 0.25rem 0.6875rem;
}

/* ---------- BLOCK B — three-lane ICP router ---------- */

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

/* Card shape, icon treatment and pill buttons all come from webdev-base.css. */
.wd-lane {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
}

/* The router lanes lead the page, so their mark sits a step larger than the
   2.75rem default used on the smaller product cards. */
.wd-lane .wd-icon-plate,
.wd-lane .wd-icon-plate .wd-icon {
  height: 56px;
  width: 56px;
}

.wd-lane h3 {
  font-size: clamp(1.375rem, 2vw, 1.625rem);
  font-weight: 700;
}

.wd-lane .wd-btn {
  font-size: 1rem;
  font-weight: 700;
  margin-top: auto;
  min-height: 52px;
  padding: 0.9375rem 1.875rem;
}

.wd-lane__actions {
  display: grid;
  gap: 0.5rem;
  margin-top: auto;
}

.wd-lane__actions .wd-btn {
  margin-top: 0;
}

/* Lane 1 — existing customers. Visually distinct per brief non-negotiable 3.
   Doubled class deliberately: this must outrank `.wd-card`'s white surface
   whatever order the stylesheets end up in. */
.wd-lane.wd-lane--existing {
  background: var(--wd-slate-600);
  border-color: var(--wd-slate-600);
  color: var(--wd-white);
}

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

/* Same bare 60px mark as the light lanes, in orange so it reads on charcoal.
   Must stay as specific as `.wd-lane .wd-icon-plate` or the plate returns. */
.wd-lane--existing .wd-icon-plate {
  background: none;
  color: var(--wd-orange-500);
}

.wd-lane--existing .wd-lane__link {
  color: var(--wd-orange-500);
  font-weight: 600;
  justify-content: center;
  text-decoration-color: var(--wd-orange-500);
}

.wd-lane__link {
  align-items: center;
  border-radius: var(--wd-radius-sm);
  display: inline-flex;
  gap: 0.5rem;
  justify-content: center;
  min-height: 44px;
  text-decoration: none;
}

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

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

/* ---------- BLOCK C — product category tiles ---------- */

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

.wd-category {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/*
 * Overrides the generic .wd-page .wd-card padding (0,2,0 — matched here with
 * .wd-categories .wd-category, also 0,2,0, and later in the cascade so it
 * wins). These tiles hold an entire offer panel, so the roomy card padding
 * squeezes the content that matters.
 */
.wd-categories .wd-category {
  padding: clamp(1.25rem, 1.7vw, 1.625rem);
}

.wd-category h3 {
  font-size: 1.1875rem;
}

/*
 * The offer panel. margin-top:auto pins it to the bottom of the card so all
 * four panels align across the row however long the description copy runs.
 */
.wd-category__offer {
  /* background: var(--wd-orange-050); */
  /* border: 1px solid rgb(244 124 32 / 22%); */
  border-radius: var(--wd-radius-md);
  margin-top: auto;
  padding: 1rem;
  position: relative;
}

/* The short orange tab riding the top edge, per the design. Decorative only. */
.wd-category__offer::before {
  background: var(--wd-orange-500);
  border-radius: var(--wd-radius-pill);
  content: "";
  height: 5px;
  left: 1rem;
  position: absolute;
  top: -3px;
  width: 46px;
}

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

/*
 * inherit keeps the figure the same near-black as the headings — those use
 * color:inherit too, so a hardcoded hex here would drift from them.
 * Baseline alignment sits the unit on the price's baseline rather than centring
 * it against a 2.25rem line.
 */
.wd-category__price {
  --wd-price-size: clamp(1.625rem, 2.4vw, 2.125rem);

  align-items: baseline;
  color: inherit;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0 0 0.375rem;

  /* Reserve the full figure height even when the text inside is smaller, so
     the four bottom-aligned panels start at the same y. */
  min-height: calc(var(--wd-price-size) * 1.05);
}

.wd-category__price b {
  font-size: var(--wd-price-size);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

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

.wd-category__note {
  color: var(--wd-grey-500);
  font-size: 0.8125rem;
  line-height: 1.45;
  margin: 0 0 0.875rem;
}

/*
 * Not .wd-btn: this one is full-bleed inside the panel with the label pushed
 * left and the arrow disc right, which the shared button does not do.
 */
.wd-category__cta {
  align-items: center;
  background: var(--wd-orange-600);
  border-radius: var(--wd-radius-pill);
  color: var(--wd-white);
  display: flex;
  font-size: 0.875rem;
  font-weight: 600;
  gap: 0.5rem;
  justify-content: space-between;
  padding: 0.5625rem 0.5625rem 0.5625rem 0.875rem;
  transition: background 0.15s ease;
}

.wd-category__cta-arrow {
  align-items: center;
  background: var(--wd-white);
  border-radius: 50%;
  color: var(--wd-orange-700);
  display: inline-flex;
  flex: none;
  height: 1.75rem;
  justify-content: center;
  width: 1.75rem;
}

@media (hover: hover) and (pointer: fine) {
  .wd-category__cta:hover {
    background: var(--wd-orange-700);
    color: var(--wd-white) !important;
  }
}

.wd-category__cta:focus-visible {
  outline: 2px solid var(--wd-orange-700);
  outline-offset: 2px;
}

/* ---------- BLOCK D — trusted by ---------- */

.wd-proof {
  background: var(--wd-warm-050);
}

.wd-proof__head {
  max-width: 52rem;
}

/*
 * Two logo belts that scroll in OPPOSITE directions. Replaces the static
 * six-across grid: the roster outgrew a tidy two-row block, and counter-motion
 * reads as one component rather than two unrelated strips.
 *
 * How the loop is seamless: each belt holds the same track THREE times and
 * travels exactly -33.3333%, one full copy. At the end of the cycle copy 2 sits
 * exactly where copy 1 started, so the reset is invisible. Any other distance
 * visibly jumps. The duplicates are aria-hidden — a screen reader gets each
 * logo once.
 *
 * Three copies, not two, because two only works while ONE copy is wider than
 * the viewport. The shorter belt is 7 cards (~1540px) and would leave dead space
 * on a 1920px screen. With three copies, two copies' worth is always on screen,
 * which covers viewports up to ~3000px. The extra copies cost no bandwidth:
 * every URL is already in cache from copy 1.
 *
 * Full-bleed: .wd-proof__marquee is pulled out of .wd-shell's gutters so the
 * belts run edge to edge. A marquee that stops short of the viewport edge looks
 * like a bug rather than a design.
 */
.wd-proof__marquee {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  /* Room for the card shadows. `overflow: hidden` clips vertically as well as
     horizontally, and without this the shadow is sliced off flat at the top and
     bottom of each belt. Padding sits inside the box, so it shows. */
  padding-block: 0.875rem;
  /* Fades the belts into the section background at both edges instead of
     slicing a card in half. Progressive: browsers without mask just show the
     hard edge, which is merely plainer, not broken. */
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.wd-proof__belt {
  display: flex;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  width: max-content;
  will-change: transform;
  animation: wd-belt-left 64s linear infinite;
}

.wd-proof__belt--reverse {
  animation-name: wd-belt-right;
}

/*
 * No pause-on-hover. Pausing earns its keep when the cards are links and the
 * visitor needs a still target to click — these are plain images, so there is
 * nothing to aim at, and stopping the belt under the cursor only makes the
 * strip feel like it has jammed. Nothing inside is focusable either, so a
 * focus-within pause could never have fired.
 */

@keyframes wd-belt-left {
  from { transform: translateX(0); }
  to { transform: translateX(-33.3333%); }
}

@keyframes wd-belt-right {
  from { transform: translateX(-33.3333%); }
  to { transform: translateX(0); }
}

/* One track. Two of these sit inside each belt. */
.wd-proof__logos {
  display: flex;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Fixed card height reserves space, so logo loading causes no layout shift.
   Fixed WIDTH too now the cards sit on a belt rather than in a grid track —
   without it a wide wordmark and a square crest get different-sized cards and
   the belt reads as ragged. */
.wd-proof__logos li {
  align-items: center;
  background: var(--wd-white);
  border: 1px solid var(--wd-grey-100);
  border-radius: var(--wd-radius-md);
  box-shadow: 0 5px 10px 0 rgb(41 61 102 / 20%);
  display: flex;
  flex: 0 0 clamp(9.5rem, 13vw, 12.5rem);
  flex-direction: column;
  gap: 0.625rem;
  height: 164px;
  justify-content: center;
  padding: clamp(0.875rem, 1.6vw, 1.25rem);
}

/*
 * The hover lift went with the pause, for the same reason plus one of its own:
 * with the belt always moving, a stationary cursor has cards sliding under it
 * continuously, so the highlight strobes on and off card after card. It read as
 * a rendering fault rather than feedback. Restore both together, or neither.
 */

/*
 * Caption under each mark. Several of these logos are crests or initials that
 * do not name the organisation on their own — RBZ, NSSA, the Parliament arms —
 * so the strip only reads as proof if the names are written out.
 *
 * The <img> above it carries alt="" ON PURPOSE. The name is right here in real
 * text, so giving the image the same name as alt would make a screen reader
 * announce every organisation twice.
 */
.wd-proof__name {
  color: var(--wd-grey-500);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}

/*
 * Full colour, as approved. No grayscale filter, no mix-blend-mode: several
 * source files are opaque (JPEG/WebP) and multiply blending muddied them.
 * The white card supplies the consistent treatment instead.
 *
 * The box fills the card and `object-fit: contain` scales the mark inside it.
 * `width/height: auto` was leaving small files (NSSA is 134x64) at their
 * intrinsic size, so they read as tiny next to the 600px-wide ones.
 */
/*
 * `height` needs !important here. custom.css carries a global
 * `@media (min-width: 768px) { li img { height: 42px !important } }`, which
 * clamped every logo in this grid to 42px tall regardless of its source size.
 * Scoped to this grid rather than unpicking the vendor rule, which other
 * pages may rely on.
 */
.wd-proof__logos img {
  display: block;
  height: 4.5rem !important;
  object-fit: contain;
  width: 100%;
}

/* ---------- BLOCK F — compliance and local trust ---------- */

.wd-compliance {
  background: var(--wd-slate-600);
  color: var(--wd-white);
}

.wd-compliance h2,
.wd-support h2 {
  color: inherit;
}

.wd-compliance .wd-section__head p {
  color: var(--wd-grey-200);
}

/* Wide enough to keep the pillar heading on one line at desktop. */
.wd-compliance .wd-section__head {
  max-width: 52rem;
}

/* .wd-pillars lives in webdev-base.css — shared with the category pages. */

/* ---------- BLOCK G — support transition ---------- */

.wd-support {
  background: var(--wd-orange-500);
  color: var(--wd-white);
}

.wd-support .wd-section__head p {
  color: rgb(255 255 255 / 92%);
}

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

.wd-support__channels li {
  display: flex;
}

.wd-channel {
  flex: 1;
  align-items: center;
  background: rgb(255 255 255 / 12%);
  border: 1px solid rgb(255 255 255 / 42%);
  border-radius: var(--wd-radius-md);
  color: var(--wd-white);
  display: flex;
  gap: 0.875rem;
  min-height: 72px;
  padding: 1rem 1.125rem;
  text-decoration: none;
  transition:
    background-color var(--wd-duration) var(--wd-ease),
    border-color var(--wd-duration) var(--wd-ease),
    transform var(--wd-duration) var(--wd-ease);
}

.wd-channel strong {
  display: block;
  font-size: 1rem;
}

.wd-channel span {
  color: rgb(255 255 255 / 88%);
  font-size: 0.8125rem;
}

@media (hover: hover) and (pointer: fine) {
  .wd-channel:hover {
    background: rgb(255 255 255 / 20%);
    border-color: var(--wd-white);
    color: var(--wd-white);
    transform: translateY(-2px);
  }
}

.wd-channel:focus-visible {
  box-shadow: 0 0 0 2px var(--wd-charcoal-950), 0 0 0 5px var(--wd-white);
  outline: 0;
}

/* WhatsApp AI stays low-emphasis, support zone only (brief non-negotiable 6). */
.wd-support__note {
  align-items: center;
  color: rgb(255 255 255 / 92%);
  display: flex;
  font-size: 0.875rem;
  gap: 0.5rem;
  justify-content: center;
  margin: clamp(1.25rem, 2vw, 1.75rem) auto 0;
  text-align: center;
}

.wd-support__note .wd-icon {
  height: 1.125rem;
  width: 1.125rem;
}

.wd-support__note a {
  color: var(--wd-white);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

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

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

@media (max-width: 1099.98px) {


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

@media (max-width: 991.98px) {
  /* The artwork's subject is on the right, so at narrow widths pull the focal
     point in and deepen the scrim rather than cropping to empty background. */
  .wd-hero__bg {
    background-image:
      linear-gradient(
        170deg,
        var(--wd-charcoal-950) 0%,
        rgb(17 20 22 / 90%) 45%,
        rgb(17 20 22 / 68%) 100%
      ),
      url("../img/hero-developer.jpg");
    /* Bias to the subject rather than the empty wall once the frame narrows. */
    background-position: center, 82% center;
  }

  .wd-herostats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 1.5rem;
  }

  .wd-herostats li:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }

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

  /*
   * Mobile commercial order (page-architecture §5 / design-system §12):
   * Existing -> SMB -> Enterprise. Desktop DOM order stays Existing,
   * Enterprise, SMB for equal left-to-right weight.
   */
  .wd-lane--existing {
    order: 1;
  }

  .wd-lane--smb {
    order: 2;
  }

  .wd-lane--enterprise {
    order: 3;
  }

}

@media (max-width: 767.98px) {
  /* Stack the search group: input, TLD, Search, then Transfer as its own action. */
  .wd-domain__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

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

  .wd-domain__divider {
    display: none;
  }

  .wd-categories,
  .wd-support__channels {
    grid-template-columns: minmax(0, 1fr);
  }

  .wd-proof__logos li {
    height: 148px;
  }

  .wd-proof__logos img {
    height: 3.5rem !important;
  }

  .wd-proof__name {
    font-size: 0.6875rem;
  }
}

@media (max-width: 575.98px) {
  .wd-herostats {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.125rem;
  }

  .wd-herostats li,
  .wd-herostats li + li {
    border-left: 0;
    padding-left: 0;
  }

}

@media (prefers-reduced-motion: reduce) {
  .wd-channel,
  .wd-proof__logos li {
    transform: none !important;
    transition-duration: 0.01ms !important;
  }

  /*
   * Continuous scrolling is exactly what this setting is asking us not to do,
   * so the belts stop and the strip falls back to the static wrapped grid it
   * used before. The duplicate track is removed rather than merely stopped —
   * left in place it would show every logo twice.
   */
  .wd-proof__belt {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
  }

  .wd-proof__belt > [aria-hidden="true"] {
    display: none;
  }

  .wd-proof__logos {
    flex-wrap: wrap;
    justify-content: center;
  }

  .wd-proof__marquee {
    margin-inline: 0;
    mask-image: none;
  }
}