/*
 * 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.
 */
/* ---------- hero glow ----------
 * A soft Webdev-orange light that follows the pointer (wd-hero-glow.js writes
 * --wd-hero-x / --wd-hero-y; this draws it).
 *
 * WHERE IT SITS MATTERS. z-index -1 puts it in the same layer as the artwork
 * and, being later in the DOM, above it — but still beneath .wd-hero__inner,
 * so it can never wash out the headline. The scrim that guarantees text
 * contrast lives in .wd-hero__bg, underneath this.
 *
 * `screen` blending is what makes it read as light rather than orange paint:
 * on the near-black hero it brightens what is already there instead of tinting
 * it. .wd-hero carries `isolation: isolate`, so the blend cannot reach the rest
 * of the page.
 *
 * Invisible until the script adds .is-lit — which happens only for a real
 * mouse, never touch, and never under reduced motion.
 */
.wd-hero__glow {
  background: radial-gradient(
    circle at var(--wd-hero-x, 72%) var(--wd-hero-y, 38%),
    rgb(244 124 32 / 34%) 0%,
    rgb(244 124 32 / 16%) 20%,
    rgb(244 124 32 / 5%) 38%,
    transparent 58%
  );
  inset: 0;
  mix-blend-mode: screen;
  opacity: 0;
  position: absolute;
  transition: opacity 450ms var(--wd-ease);
  z-index: -1;
}

.wd-hero.is-lit .wd-hero__glow {
  opacity: 1;
}

/* Belt and braces: the script already refuses to run, but if the preference
   changes mid-visit the glow fades out and stops transitioning. */
@media (prefers-reduced-motion: reduce) {
  .wd-hero__glow,
  .wd-hero.is-lit .wd-hero__glow {
    opacity: 0;
    transition: none;
  }
}

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

/* Hero stat counters (wd-herostats.js) need no styles: the script only rewrites
   the text inside .wd-herostat__num, which inherits everything from the li. */

/* 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;
  /* Wider gap than the old pills needed: without borders and padding the
     extensions need the space to read as separate items (QA3 #25). */
  gap: 0.375rem 0.875rem;
  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;
}

/* Plain text, not buttons (QA3 #25): the border, pill radius and padding
   that used to make these read as tappable chips are gone. */
.wd-domain__tlds dd {
  color: var(--wd-grey-700);
  font-size: 0.8125rem;
  margin: 0;
}

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

/* ---------- lane header row ----------
 * Audience tag on the left, direction arrow on the right, per the client's
 * reference. The outline icon plates these lanes used before are gone: the
 * illustration below now carries the visual weight, and two marks in one card
 * competed.
 */
.wd-lane__top {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.wd-lane__tag {
  background: var(--wd-grey-100);
  border-radius: var(--wd-radius-pill);
  color: var(--wd-grey-700);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.375rem 0.75rem;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Decorative, and aria-hidden in the markup. The card's button is the real
   action — this only signals which way the lane leads. */
.wd-lane__arrow {
  color: var(--wd-charcoal-900);
  flex: 0 0 auto;
  transition: transform var(--wd-duration) var(--wd-ease);
}

/* Illustration. Fixed ratio so the three cards keep their headings on the same
   line whatever artwork is dropped in. */
.wd-lane__media {
  aspect-ratio: 16 / 9;
  border-radius: var(--wd-radius-md);
  display: block;
  overflow: hidden;
}

.wd-lane__media img {
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--wd-ease);
  width: 100%;
}

/*
 * The lift itself lives in webdev-base.css with the other card variants. These
 * two are the detail on top: the illustration eases in and the arrow leans the
 * way the lane leads — the same pair of moves the route cards on /upgrades/
 * and the choice cards on /websites/ already make, so the site behaves
 * consistently rather than inventing a homepage-only gesture.
 */
@media (hover: hover) and (pointer: fine) {
  .wd-lane:hover .wd-lane__media img {
    transform: scale(1.04);
  }

  .wd-lane:hover .wd-lane__arrow {
    transform: translateX(4px);
  }
}

/* The card lift is already neutralised by the reduced-motion block in
   webdev-base.css; these two are not cards, so they need saying here. */
@media (prefers-reduced-motion: reduce) {
  .wd-lane__media img,
  .wd-lane__arrow,
  .wd-lane:hover .wd-lane__media img,
  .wd-lane:hover .wd-lane__arrow {
    transform: none;
    transition: none;
  }
}

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

/* Tag and arrow inherit the dark lane rather than the light default: a grey
   pill and charcoal arrow disappear on slate. */
.wd-lane--existing .wd-lane__tag {
  background: rgb(255 255 255 / 12%);
  color: var(--wd-white);
}

.wd-lane--existing .wd-lane__arrow {
  color: var(--wd-white);
}

/* Lane 3 — new business. White, matching the enterprise lane: it briefly took a
   warm tint to sit under artwork that had a warm background baked in, and the
   replacement illustrations are transparent cut-outs, so the tint had nothing
   left to match and the client asked for white. Nothing to declare — it
   inherits .wd-card. */

.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.
 *
 * The hairline gives the tile an edge on the pale section background; the base
 * card keeps its border transparent for exactly this, so nothing shifts.
 */
.wd-categories .wd-category {
  border-color: var(--wd-grey-100);
  padding: clamp(1.375rem, 1.9vw, 1.75rem);
  transition:
    border-color var(--wd-duration) var(--wd-ease),
    box-shadow var(--wd-duration) var(--wd-ease),
    transform var(--wd-duration) var(--wd-ease);
}

/* Tinted plate with a compact icon, in place of the large bare line icon. */
.wd-category .wd-icon-plate {
  background: var(--wd-orange-050);
  border-radius: var(--wd-radius-md);
  color: var(--wd-orange-700);
  height: 3rem;
  justify-content: center;
  margin-bottom: 0.25rem;
  transition:
    background var(--wd-duration) var(--wd-ease),
    color var(--wd-duration) var(--wd-ease);
  width: 3rem;
}

.wd-category .wd-icon-plate .wd-icon {
  height: 1.5rem;
  stroke-width: 1.6;
  width: 1.5rem;
}

.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.
 * No side padding: the figure and button line up with the heading above.
 */
.wd-category__offer {
  border-top: 1px solid var(--wd-grey-100);
  margin-top: auto;
  padding-top: 1.125rem;
  position: relative;
}

/* The short orange tab riding the divider. Runs the full width on hover.
   Decorative only. */
.wd-category__offer::before {
  background: var(--wd-orange-500);
  border-radius: var(--wd-radius-pill);
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  top: -2px;
  transition: width 0.35s var(--wd-ease);
  width: 2.5rem;
}

.wd-category__label {
  color: var(--wd-orange-700);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 0.375rem;
  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, on the same line.
 */
.wd-category__price {
  --wd-price-size: clamp(2rem, 2.7vw, 2.5rem);

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

  /* 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.03em;
  line-height: 1.05;
  white-space: nowrap;
}

/*
 * The cents, set small and raised to the top of the figure. wd-price-cents.js
 * wraps them; without it the price simply reads "$2.00" at full size.
 */
.wd-category__cents {
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  margin-left: 0.08em;
  vertical-align: 0.82em;
}

/* Beside the figure, not under it: outranks the base rule on source order. */
.wd-category__price .wd-category__unit {
  color: var(--wd-grey-500);
  flex-basis: auto;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

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

/*
 * 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.5rem 0.5rem 0.5rem 1.125rem;
  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: 2rem;
  justify-content: center;
  transition: transform var(--wd-duration) var(--wd-ease);
  width: 2rem;
}

@media (hover: hover) and (pointer: fine) {
  .wd-categories .wd-category:hover {
    border-color: rgb(244 124 32 / 40%);
  }

  .wd-category:hover .wd-icon-plate {
    background: var(--wd-orange-500);
    color: var(--wd-white);
  }

  .wd-category:hover .wd-category__offer::before {
    width: 100%;
  }

  .wd-category__cta:hover {
    background: var(--wd-orange-700);
    color: var(--wd-white) !important;
  }

  .wd-category__cta:hover .wd-category__cta-arrow {
    transform: translateX(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wd-category__offer::before,
  .wd-category__cta-arrow {
    transition: none;
  }

  .wd-category__cta:hover .wd-category__cta-arrow {
    transform: none;
  }
}

.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.75rem 2rem;
  /* 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. */
/*
 * Card = logo stage on top, caption band below. The stage is a fixed share of
 * the card, so every mark sits on the same centre line whether its caption
 * runs to one line or two. The band fades from the white stage into a warm
 * tint with a hairline that dissolves at both ends, so the eye travels from
 * mark to name without a hard edge.
 *
 * Shadow is layered (contact + key + ambient) and tinted with the charcoal
 * brand neutral rather than blue, so it reads as soft lift, not a halo.
 */
.wd-proof__logos li {
  background: var(--wd-white);
  border: 1px solid rgb(17 20 22 / 6%);
  border-radius: var(--wd-radius-lg);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 90%),
    0 1px 1px rgb(17 20 22 / 4%),
    0 2px 4px -1px rgb(17 20 22 / 5%),
    0 8px 16px -6px rgb(17 20 22 / 8%),
    0 18px 32px -14px rgb(17 20 22 / 12%);
  display: grid;
  flex: 0 0 clamp(9.5rem, 13vw, 12.5rem);
  grid-template-rows: minmax(0, 1fr) auto;
  height: 172px;
  overflow: hidden;
  position: relative;
}

/*
 * 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 {
  align-items: center;
  background: linear-gradient(180deg, rgb(250 250 248 / 0%), var(--wd-warm-050) 55%);
  color: var(--wd-grey-700);
  display: flex;
  font-size: 0.75rem;
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0.01em;
  line-height: 1.3;
  /* Two lines of room, always, so one-line and two-line names give the same
     band height and the logos above stay aligned across the belt. */
  min-height: calc(2 * 1.3em + 1.25rem);
  padding: 0.625rem 0.875rem;
  position: relative;
  text-align: center;
  text-wrap: balance;
}

/* Hairline between mark and name, faded out at both ends. */
.wd-proof__name::before {
  background: linear-gradient(90deg, transparent, rgb(17 20 22 / 10%) 30%, rgb(17 20 22 / 10%) 70%, transparent);
  content: "";
  height: 1px;
  inset: 0 12% auto;
  position: absolute;
}

/*
 * 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 {
  align-self: center;
  box-sizing: border-box;
  display: block;
  height: 4.5rem !important;
  object-fit: contain;
  padding-inline: clamp(0.875rem, 1.6vw, 1.25rem);
  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;
}

/* ---------- local-advantage cards ----------
 * MOVED to webdev-base.css. /email-office needed the same photo cards and does
 * not load this file. Class names unchanged.
 */

.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(3, 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: 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, 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;
  }
}

/* Ownership note under the client logo belts. Quiet by design: it is a legal
   nicety, not a claim, and must not compete with the marks above it. */
.wd-proof__note {
  color: var(--wd-grey-500);
  font-size: 0.8125rem;
  margin: clamp(1rem, 2vw, 1.5rem) 0 0;
  text-align: center;
}