/* ==========================================================================
   WizeTek components
   --------------------------------------------------------------------------
   Every selector is a single class, so nothing here can win an argument with
   anything else by accident. Spacing between siblings comes from the parent's
   `gap`, never from per-element margins that collapse or double.
   Depends on tokens.css and base.css.
   ========================================================================== */

/* ==========================================================================
   Layout
   ========================================================================== */

.wz-shell {
    width: 100%;
    max-width: var(--wz-shell);
    margin-inline: auto;
    padding-inline: var(--wz-gutter);
}

.wz-shell--narrow {
    max-width: var(--wz-shell-narrow);
}

.wz-section {
    padding-block: var(--wz-section-y);
    background: var(--wz-white);
    color: var(--wz-ink);
}

.wz-section--tint {
    background: var(--wz-ground);
}

/* ---- light-ground decoration -------------------------------------------
   Light sections took their air from whitespace alone, which read as unfinished
   next to the dark bands. Section heads are capped at 44ch, so the space beside
   one is always empty - that is where these sit.

   Two treatments, alternated down a page so consecutive light sections do not
   become wallpaper: a node lattice from the top right, and hairline arcs from
   the bottom left. Both are drawn with gradients rather than an image, so they
   cost no request, stay sharp at any size, and re-tint from a token.

   `isolation: isolate` plus `z-index: -1` puts them above the section's own
   background and behind everything in the section, without needing a z-index on
   the content. */
.wz-section--deco,
.wz-section--deco-arcs {
    position: relative;
    isolation: isolate;
}

.wz-section--deco::before,
.wz-section--deco-arcs::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.wz-section--deco::before {
    top: 0;
    right: 0;
    width: min(56%, 720px);
    height: min(100%, 460px);
    background-image: radial-gradient(
        circle at 1px 1px,
        var(--wz-deco-node) 1.5px,
        transparent 1.5px
    );
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(120% 88% at 100% 0%, #000 6%, transparent 66%);
    mask-image: radial-gradient(120% 88% at 100% 0%, #000 6%, transparent 66%);
}

.wz-section--deco-arcs::before {
    bottom: 0;
    left: 0;
    width: min(52%, 660px);
    height: min(100%, 520px);
    background-image: repeating-radial-gradient(
        circle at 0% 100%,
        transparent 0 71px,
        var(--wz-deco-line) 71px 72px
    );
    -webkit-mask-image: radial-gradient(105% 92% at 0% 100%, #000 4%, transparent 70%);
    mask-image: radial-gradient(105% 92% at 0% 100%, #000 4%, transparent 70%);
}

/* Below the tablet breakpoint the head no longer has space beside it, so the
   decoration would sit under the copy instead of next to it. */
@media (max-width: 720px) {
    .wz-section--deco::before,
    .wz-section--deco-arcs::before {
        display: none;
    }
}

.wz-section--tint-2 {
    background: var(--wz-ground-2);
}

/* Dark bands carry the brand. `.wz-on-dark` is also the hook that flips focus
   ring and component colours, so it must sit on the same element. */
.wz-section--dark {
    background: var(--wz-navy);
    color: var(--wz-on-dark);
}

/* The dark body bands are the quiet relative of the hero. They sit behind cards
   and paragraphs, so they take the nodes without the joining lines - the same
   vocabulary, with nothing crossing the text - plus a soft glow off one corner
   for depth. The connected, animated mesh stays reserved for heroes, which is
   what keeps "this is the top of a page" meaning something. */
.wz-section--mesh {
    position: relative;
    overflow: hidden;
    --wz-band-glow: radial-gradient(
        110% 80% at 82% 8%,
        rgba(46, 123, 246, 0.22) 0%,
        rgba(46, 123, 246, 0) 62%
    );
    --wz-band-gradient: linear-gradient(
        160deg,
        var(--wz-navy) 0%,
        var(--wz-navy-900) 100%
    );
    background:
        var(--wz-band-glow),
        url("../img/mesh/dots-panel.51c0a15e9ee0.svg") center / cover no-repeat,
        var(--wz-band-gradient);
    color: var(--wz-on-dark);
}

/* Same handover as the hero: drop only the still field, keep the ground. */
.wz-section--mesh[data-mesh-live="true"] {
    background-image: var(--wz-band-glow), var(--wz-band-gradient);
}

/* Sections alternate grounds, but Insights only renders when posts exist - so a
   collapsed section can leave two identical grounds touching, which reads as one
   long block. This restores the boundary for whichever pair ends up adjacent,
   without changing any section's colour. */
.wz-section--tint + .wz-section--tint,
.wz-trustbar + .wz-section--tint,
.wz-section:not(.wz-section--tint):not(.wz-section--dark):not(.wz-section--mesh)
    + .wz-section:not(.wz-section--tint):not(.wz-section--dark):not(.wz-section--mesh) {
    border-top: 1px solid var(--wz-rule);
}

.wz-section--dark + .wz-section--dark,
.wz-section--dark + .wz-section--mesh,
.wz-section--mesh + .wz-section--dark,
.wz-section--mesh + .wz-section--mesh,
.wz-section--dark + .wz-cta,
.wz-section--mesh + .wz-cta {
    border-top: 1px solid var(--wz-on-dark-rule);
}

.wz-on-dark h1,
.wz-on-dark h2,
.wz-on-dark h3,
.wz-on-dark h4 {
    color: var(--wz-white);
}

.wz-stack {
    display: flex;
    flex-direction: column;
    gap: var(--wz-s-5);
}

.wz-stack--tight {
    gap: var(--wz-s-3);
}

.wz-stack--loose {
    gap: var(--wz-s-7);
}

/* Action row beneath a grid or prose block. */
.wz-section-actions {
    margin-top: var(--wz-s-7);
}

/* Numbered list that keeps the design system's rhythm. */
.wz-numlist {
    display: flex;
    flex-direction: column;
    gap: var(--wz-s-2);
    margin: 0;
    padding-left: 20px;
    font-size: var(--wz-fs-sm);
}

.wz-numlist li::marker {
    color: var(--wz-blue);
    font-weight: 600;
}

/* ==========================================================================
   Section header
   ========================================================================== */

.wz-section-head {
    display: flex;
    flex-direction: column;
    gap: var(--wz-s-4);
    margin-bottom: var(--wz-s-8);
    max-width: 44ch;
}

/* A head with a standfirst was a 44ch column with the whole right of the row
   left empty, which read as an unfinished page rather than a deliberate one.
   Above the tablet breakpoint it splits instead: label and heading on the left,
   standfirst beside them.

   Only heads that are a direct child of the shell. The ones inside an aside
   layout are nested a level deeper and already sit in a narrow column, so they
   have no width to split.

   Placement lives on the children, outside the query, because `grid-area` is
   simply ignored while the head is still a flex column - which saves repeating
   this selector three more times. Without :has() the stacked layout stands,
   which is what this was before. */
@supports selector(:has(*)) {
    @media (min-width: 900px) {
        .wz-shell > .wz-section-head:has(.wz-section-head__text):not(.wz-section-head--center) {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            grid-template-areas:
                "eyebrow ."
                "heading standfirst";
            column-gap: var(--wz-s-9);
            row-gap: var(--wz-s-4);
            align-items: start;
            max-width: none;
        }
    }
}

.wz-section-head > .wz-eyebrow {
    grid-area: eyebrow;
}

.wz-section-head > h2,
.wz-section-head > h3 {
    grid-area: heading;
}

.wz-section-head > .wz-section-head__text {
    grid-area: standfirst;
    max-width: 46ch;
}

.wz-section-head--center {
    align-items: center;
    text-align: center;
    margin-inline: auto;
}

.wz-section-head__text {
    color: var(--wz-ink-muted);
    font-size: var(--wz-fs-lead);
    margin: 0;
}

.wz-on-dark .wz-section-head__text {
    color: var(--wz-on-dark-muted);
}

/* The eyebrow: a short rule then a tracked uppercase label. Used as the
   section marker everywhere on the site. */
.wz-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--wz-s-3);
    font-family: var(--wz-font-body);
    font-size: var(--wz-fs-label);
    font-weight: 600;
    letter-spacing: var(--wz-tracking-label);
    text-transform: uppercase;
    color: var(--wz-blue);
    margin: 0;
}

.wz-eyebrow::before {
    content: "";
    flex: none;
    width: 28px;
    height: 2px;
    background: currentColor;
}

.wz-on-dark .wz-eyebrow {
    color: var(--wz-sky);
}

.wz-section-head--center .wz-eyebrow {
    justify-content: center;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.wz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wz-s-2);
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: var(--wz-r-pill);
    font-family: var(--wz-font-body);
    font-size: var(--wz-fs-sm);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color var(--wz-dur) var(--wz-ease),
        border-color var(--wz-dur) var(--wz-ease),
        color var(--wz-dur) var(--wz-ease),
        transform var(--wz-dur-fast) var(--wz-ease);
}

.wz-btn:active {
    transform: translateY(1px);
}

.wz-btn__arrow {
    transition: transform var(--wz-dur) var(--wz-ease);
}

.wz-btn:hover .wz-btn__arrow {
    transform: translateX(3px);
}

.wz-btn--primary {
    background: var(--wz-blue);
    color: var(--wz-white);
}

.wz-btn--primary:hover {
    background: var(--wz-azure);
    color: var(--wz-white);
}

/* The quiet partner to the primary pill, on dark grounds. */
.wz-btn--secondary {
    background: rgba(232, 240, 251, 0.06);
    border-color: var(--wz-on-dark-rule);
    color: var(--wz-on-dark);
}

.wz-btn--secondary:hover {
    background: rgba(232, 240, 251, 0.12);
    border-color: var(--wz-sky);
    color: var(--wz-white);
}

/* The same role on light grounds. */
.wz-btn--outline {
    background: transparent;
    border-color: var(--wz-rule-strong);
    color: var(--wz-ink);
}

.wz-btn--outline:hover {
    border-color: var(--wz-blue);
    color: var(--wz-blue);
}

.wz-btn--ghost {
    background: transparent;
    color: var(--wz-blue);
    padding-inline: 0;
}

.wz-btn--ghost:hover {
    color: var(--wz-azure);
}

.wz-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wz-s-3);
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.wz-breadcrumb {
    font-size: var(--wz-fs-xs);
    color: var(--wz-ink-muted);
}

.wz-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wz-s-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wz-breadcrumb li {
    display: flex;
    align-items: center;
    gap: var(--wz-s-2);
}

.wz-breadcrumb li + li::before {
    content: "→";
    color: var(--wz-ink-faint);
}

.wz-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.wz-breadcrumb a:hover {
    color: var(--wz-blue);
    text-decoration: underline;
}

.wz-breadcrumb [aria-current="page"] {
    color: var(--wz-ink);
    font-weight: 500;
}

.wz-on-dark .wz-breadcrumb {
    color: var(--wz-on-dark-muted);
}

.wz-on-dark .wz-breadcrumb a:hover {
    color: var(--wz-sky);
}

.wz-on-dark .wz-breadcrumb [aria-current="page"] {
    color: var(--wz-on-dark);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.wz-hero {
    position: relative;
    isolation: isolate;
    /* Held in a variable because the animated variant below has to re-declare
       the gradient on its own: background-image takes the whole layer list, so
       setting it to `none` would drop the gradient along with the mesh. */
    --wz-hero-gradient: linear-gradient(
        150deg,
        var(--wz-navy) 0%,
        var(--wz-navy-900) 58%,
        #061631 100%
    );
    background:
        url("../img/mesh/mesh-hero.d4b4304954c7.svg") right center / cover no-repeat,
        var(--wz-hero-gradient);
    color: var(--wz-on-dark);
    padding-block: calc(var(--wz-header-h) + var(--wz-s-9)) var(--wz-s-10);
    overflow: hidden;
}

/* The animated mesh only replaces the still image once mesh.js is actually
   running - it sets this attribute itself. Without JS, or under reduced motion,
   the still field below stays exactly as it is.

   The gradient is restated rather than dropped: background-image replaces every
   layer at once, so `none` would take the ground away too and leave the hero
   white with unreadable light text on it. */
.wz-hero[data-mesh-live="true"] {
    background-image: var(--wz-hero-gradient);
}

/* mesh.js inserts this into the hero, the dark bands and the footer. */
.wz-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.wz-hero > .wz-shell,
.wz-section--mesh > .wz-shell {
    position: relative;
    z-index: 1;
}

.wz-hero__inner {
    display: flex;
    flex-direction: column;
    gap: var(--wz-s-5);
    max-width: 60ch;
}

.wz-hero__title {
    font-size: var(--wz-fs-display);
    line-height: var(--wz-lh-tight);
    font-weight: 700;
    color: var(--wz-white);
    max-width: 16ch;
    margin: 0;
}

.wz-hero__text {
    font-size: var(--wz-fs-lead);
    color: var(--wz-on-dark-muted);
    max-width: 54ch;
    margin: 0;
}

/* A hero that runs to two paragraphs: they belong together, so they sit closer
   than the gap the hero column puts between heading, copy and buttons. */
.wz-hero__lede {
    display: flex;
    flex-direction: column;
    gap: var(--wz-s-3);
}

.wz-hero__actions {
    margin-top: var(--wz-s-3);
}

/* Compact variant for interior pages that lead with content, not a statement. */
.wz-hero--compact {
    padding-block: calc(var(--wz-header-h) + var(--wz-s-7)) var(--wz-s-8);
}

.wz-hero--compact .wz-hero__title {
    font-size: var(--wz-fs-h1);
    max-width: 20ch;
}

/* ==========================================================================
   Grid — the 4 → 2 → 1 rule, defined once
   ========================================================================== */

.wz-grid {
    display: grid;
    gap: var(--wz-s-5);
    grid-template-columns: repeat(var(--wz-cols, 3), minmax(0, 1fr));
}

.wz-grid--4 {
    --wz-cols: 4;
}
.wz-grid--3 {
    --wz-cols: 3;
}
.wz-grid--2 {
    --wz-cols: 2;
}

@media (max-width: 1024px) {
    .wz-grid--4,
    .wz-grid--3 {
        --wz-cols: 2;
    }
}

@media (max-width: 680px) {
    .wz-grid {
        --wz-cols: 1;
    }
}

/* ==========================================================================
   Cards
   ========================================================================== */

.wz-card {
    display: flex;
    flex-direction: column;
    gap: var(--wz-s-3);
    background: var(--wz-white);
    border: 1px solid var(--wz-rule);
    border-radius: var(--wz-r);
    padding: var(--wz-s-6);
    transition:
        border-color var(--wz-dur) var(--wz-ease),
        box-shadow var(--wz-dur) var(--wz-ease),
        transform var(--wz-dur) var(--wz-ease);
}

/* Cards that are links lift under the cursor. These are not links, so they get
   the same colour response without the lift: a card that rises implies something
   to click, and there is nothing here to click. Same reasoning for role groups. */
.wz-card:not(.wz-card--link):hover,
.wz-rolegroup:hover {
    border-color: var(--wz-rule-strong);
    box-shadow: var(--wz-shadow-sm);
}

.wz-card:not(.wz-card--link):hover .wz-card__icon,
.wz-rolegroup:hover .wz-card__icon {
    background: var(--wz-blue);
    color: var(--wz-white);
}

.wz-card__title {
    margin: 0;
}

.wz-card__text {
    margin: 0;
    color: var(--wz-ink-muted);
    font-size: var(--wz-fs-sm);
}

.wz-card__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--wz-r-sm);
    background: rgba(22, 87, 199, 0.08);
    color: var(--wz-blue);
    margin-bottom: var(--wz-s-2);
}

.wz-card__icon svg {
    width: 24px;
    height: 24px;
}

/* Only cards that are themselves a link lift on hover. */
.wz-card--link:hover {
    border-color: var(--wz-azure);
    box-shadow: var(--wz-shadow);
    transform: translateY(-2px);
}

.wz-card--link {
    text-decoration: none;
    color: inherit;
}

.wz-card--dark {
    background: var(--wz-on-dark-panel);
    border-color: var(--wz-on-dark-rule);
    color: var(--wz-on-dark);
}

.wz-card--dark .wz-card__text {
    color: var(--wz-on-dark-muted);
}

.wz-card--dark .wz-card__icon {
    background: rgba(90, 182, 255, 0.12);
    color: var(--wz-sky);
}

/* Azure is too dim to read as a hover state against the navy ground. */
.wz-card--dark.wz-card--link:hover {
    border-color: var(--wz-sky);
}

/* Marks the two lead offerings without shouting. */
.wz-card--feature {
    border-color: var(--wz-rule-strong);
    box-shadow: var(--wz-shadow-sm);
}

.wz-card__flag {
    align-self: flex-start;
    font-size: var(--wz-fs-label);
    font-weight: 600;
    letter-spacing: var(--wz-tracking-label);
    text-transform: uppercase;
    color: var(--wz-blue);
    background: rgba(22, 87, 199, 0.09);
    border-radius: var(--wz-r-pill);
    padding: 4px 12px;
}

/* ==========================================================================
   Pillar card — the four positioning statements
   ========================================================================== */

.wz-pillar {
    display: flex;
    flex-direction: column;
    gap: var(--wz-s-3);
    padding: var(--wz-s-6);
    border: 1px solid var(--wz-rule);
    border-top: 3px solid var(--wz-blue);
    border-radius: var(--wz-r);
    background: var(--wz-white);
    text-decoration: none;
    color: inherit;
    transition:
        border-color var(--wz-dur) var(--wz-ease),
        box-shadow var(--wz-dur) var(--wz-ease),
        transform var(--wz-dur) var(--wz-ease);
}

.wz-pillar:hover {
    /* Three sides, not `border-color`. The shorthand repaints all four, and the
       fourth is the 3px blue accent along the top - the one border that should
       not go grey when you point at the card. It brightens instead. */
    border-inline-color: var(--wz-rule-strong);
    border-bottom-color: var(--wz-rule-strong);
    border-top-color: var(--wz-azure);
    background: linear-gradient(180deg, rgba(46, 123, 246, 0.05) 0%, var(--wz-white) 55%);
    box-shadow: var(--wz-shadow);
    transform: translateY(-3px);
}

.wz-pillar:hover .wz-pillar__rank,
.wz-pillar:focus-visible .wz-pillar__rank {
    color: var(--wz-blue);
}

.wz-pillar:hover .wz-card__icon {
    background: var(--wz-blue);
    color: var(--wz-white);
}

.wz-pillar__rank,
.wz-pillar .wz-card__icon {
    transition:
        background-color var(--wz-dur) var(--wz-ease),
        color var(--wz-dur) var(--wz-ease);
}

.wz-pillar__rank {
    font-family: var(--wz-font-display);
    font-size: var(--wz-fs-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--wz-ink-faint);
    font-variant-numeric: tabular-nums;
}

.wz-pillar__title {
    margin: 0;
}

.wz-pillar__text {
    margin: 0;
    color: var(--wz-ink-muted);
    font-size: var(--wz-fs-sm);
}

/* Bottom-anchored "read more" line, shared by pillars and cards.
   Cards in a stretched grid hold different amounts of content; anchoring this to
   the bottom turns the leftover space into deliberate padding rather than a gap
   that reads as a mistake. */
.wz-more {
    margin-top: auto;
    padding-top: var(--wz-s-4);
    /* Flex items are blockified, so this stretches the full card width and reads
       as a footer rule rather than an underline on the label. */
    display: inline-flex;
    align-items: center;
    gap: var(--wz-s-2);
    border-top: 1px solid var(--wz-rule);
    font-size: var(--wz-fs-sm);
    font-weight: 600;
    color: var(--wz-blue);
}

.wz-on-dark .wz-more {
    border-top-color: var(--wz-on-dark-rule);
    color: var(--wz-sky);
}

/* ==========================================================================
   Stats
   ========================================================================== */

/* Three of these sat on a tint band as bare text, with nothing marking where one
   ended and the next began. The rule does that job and gives the number a stem
   to sit on; it picks up the brand blue when the group is hovered. */
.wz-stat {
    display: flex;
    flex-direction: column;
    gap: var(--wz-s-1);
    padding-left: var(--wz-s-5);
    border-left: 2px solid var(--wz-rule);
    transition: border-color var(--wz-dur) var(--wz-ease);
}

.wz-stat:hover {
    border-left-color: var(--wz-blue);
}

.wz-stat__value {
    font-family: var(--wz-font-display);
    font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
    font-weight: 700;
    line-height: 1;
    color: var(--wz-blue);
    font-variant-numeric: tabular-nums;
}

.wz-on-dark .wz-stat__value {
    color: var(--wz-sky);
}

.wz-stat__label {
    font-size: var(--wz-fs-sm);
    color: var(--wz-ink-muted);
}

.wz-on-dark .wz-stat__label {
    color: var(--wz-on-dark-muted);
}

/* ==========================================================================
   Role groups and chips
   ========================================================================== */

.wz-rolegroup {
    display: flex;
    flex-direction: column;
    gap: var(--wz-s-4);
    padding: var(--wz-s-6);
    background: var(--wz-white);
    border: 1px solid var(--wz-rule);
    border-radius: var(--wz-r);
}

.wz-rolegroup__head {
    display: flex;
    align-items: center;
    gap: var(--wz-s-3);
}

.wz-rolegroup__title {
    margin: 0;
}

.wz-chips {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: var(--wz-s-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Inside a card, the chip list takes the slack so a trailing .wz-more sits on
   the baseline of every card in the row regardless of how many chips it holds. */
.wz-card .wz-chips {
    flex: 1;
}

.wz-chip {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid var(--wz-rule);
    border-radius: var(--wz-r-pill);
    background: var(--wz-ground);
    font-size: var(--wz-fs-xs);
    color: var(--wz-ink-muted);
}

/* The light chip is a near-white pill. On a navy card that reads as a row of
   buttons competing with the card itself, so dark sections get their own pair. */
.wz-on-dark .wz-chip {
    border-color: var(--wz-on-dark-rule);
    background: rgba(90, 182, 255, 0.07);
    color: var(--wz-on-dark-muted);
}


/* ==========================================================================
   Process steps — a real sequence, so the numbering carries information
   ========================================================================== */

.wz-steps {
    display: grid;
    gap: 0;
    counter-reset: wz-step;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wz-step {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: var(--wz-s-5);
    padding-block: var(--wz-s-5);
    border-top: 1px solid var(--wz-rule);
}

.wz-step:last-child {
    border-bottom: 1px solid var(--wz-rule);
}

/* Six rows of equal weight gave no sense of moving through a sequence. The wash
   picks out the row under the cursor and the number steps up to full brand blue,
   so the eye can walk the process one step at a time. */
.wz-step {
    /* Pulled out and padded back in, so the wash has room either side of the
       text instead of stopping hard against it. Alignment is unchanged. */
    padding-inline: var(--wz-s-4);
    margin-inline: calc(var(--wz-s-4) * -1);
    transition: background-color var(--wz-dur) var(--wz-ease);
}

.wz-step:hover {
    background: var(--wz-deco-wash);
}

.wz-step__n {
    transition: color var(--wz-dur) var(--wz-ease);
}

.wz-step:hover .wz-step__n {
    color: var(--wz-azure);
}

.wz-step__n {
    counter-increment: wz-step;
    font-family: var(--wz-font-display);
    font-size: var(--wz-fs-sm);
    font-weight: 700;
    color: var(--wz-blue);
    font-variant-numeric: tabular-nums;
    padding-top: 2px;
}

.wz-step__n::before {
    content: "0" counter(wz-step);
}

.wz-step__title {
    margin: 0 0 var(--wz-s-2);
}

.wz-step__text {
    margin: 0;
    color: var(--wz-ink-muted);
    font-size: var(--wz-fs-sm);
    max-width: var(--wz-measure);
}

@media (max-width: 560px) {
    .wz-step {
        grid-template-columns: 1fr;
        gap: var(--wz-s-2);
    }
}

/* ==========================================================================
   Checklist
   ========================================================================== */

.wz-checklist {
    display: flex;
    flex-direction: column;
    gap: var(--wz-s-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wz-checklist li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: var(--wz-s-3);
    align-items: start;
    font-size: var(--wz-fs-sm);
}

.wz-checklist svg {
    width: 20px;
    height: 20px;
    color: var(--wz-blue);
    margin-top: 2px;
}

.wz-on-dark .wz-checklist svg {
    color: var(--wz-sky);
}

/* ==========================================================================
   CTA band
   ========================================================================== */

/* The node mesh is the hero's. A CTA band carrying the same picture made the two
   read as the same surface, so this takes the arc field instead: same sky palette
   and hairline weight, curves rather than segments. It is brightest across the
   middle of the band, which is the gap between the copy and the buttons. */
.wz-cta {
    background:
        url("../img/mesh/arcs-cta.ea90e70aed7f.svg") center / cover no-repeat,
        linear-gradient(110deg, var(--wz-blue) 0%, var(--wz-navy) 78%);
    color: var(--wz-on-dark);
    padding-block: var(--wz-s-9);
}

.wz-cta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--wz-s-6);
}

.wz-cta__title {
    margin: 0 0 var(--wz-s-3);
    color: var(--wz-white);
}

.wz-cta__text {
    margin: 0;
    color: #cfe2f9;
    max-width: 48ch;
}

.wz-cta__copy {
    max-width: 56ch;
}

/* ==========================================================================
   Placeholder marker — makes unwritten copy impossible to ship by accident
   ========================================================================== */

.wz-lorem {
    position: relative;
}

.wz-lorem::after {
    content: "Placeholder copy";
    display: inline-block;
    margin-left: var(--wz-s-2);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wz-warning);
    background: rgba(154, 98, 6, 0.12);
    border-radius: var(--wz-r-sm);
    padding: 1px 6px;
    vertical-align: middle;
}

/* ==========================================================================
   Platform tablist — the multi-cloud panel
   --------------------------------------------------------------------------
   Ships with the strip hidden and every panel visible, so the content is all
   readable before tabs.js runs. The script sets data-enhanced="true", which is
   what turns it into a tablist.
   ========================================================================== */

.wz-platforms__strip {
    display: none;
    gap: var(--wz-s-3);
    margin-bottom: var(--wz-s-6);
    overflow-x: auto;
    padding-bottom: var(--wz-s-2);
    scrollbar-width: thin;
}

.wz-platforms[data-enhanced="true"] .wz-platforms__strip {
    display: flex;
}

.wz-platform-tab {
    display: flex;
    align-items: center;
    gap: var(--wz-s-3);
    flex: none;
    padding: 12px 18px;
    border: 1px solid var(--wz-on-dark-rule);
    border-radius: var(--wz-r);
    background: var(--wz-on-dark-panel);
    color: var(--wz-on-dark-muted);
    font-family: var(--wz-font-display);
    font-size: var(--wz-fs-sm);
    font-weight: 600;
    white-space: nowrap;
    transition:
        background-color var(--wz-dur) var(--wz-ease),
        border-color var(--wz-dur) var(--wz-ease),
        color var(--wz-dur) var(--wz-ease);
}

.wz-platform-tab img {
    width: 26px;
    height: 26px;
    flex: none;
}

.wz-platform-tab:hover {
    border-color: var(--wz-sky);
    color: var(--wz-white);
}

.wz-platform-tab[aria-selected="true"] {
    background: rgba(90, 182, 255, 0.14);
    border-color: var(--wz-sky);
    color: var(--wz-white);
}

/* Azure, AWS and Google Cloud carry the most work, so they read first. */
.wz-platform-tab--lead::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wz-sky);
}

.wz-platform-panel {
    display: flex;
    flex-direction: column;
    gap: var(--wz-s-5);
}

/* Before enhancement each panel needs its own heading and spacing, because they
   are all on screen at once. */
.wz-platform-panel + .wz-platform-panel {
    margin-top: var(--wz-s-7);
    padding-top: var(--wz-s-7);
    border-top: 1px solid var(--wz-on-dark-rule);
}

.wz-platforms[data-enhanced="true"] .wz-platform-panel + .wz-platform-panel {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.wz-platform-panel__head {
    display: flex;
    align-items: center;
    gap: var(--wz-s-4);
}

.wz-platform-panel__head img {
    width: 40px;
    height: 40px;
    flex: none;
}

.wz-platform-panel__title {
    margin: 0;
}

.wz-platform-panel__blurb {
    margin: 2px 0 0;
    color: var(--wz-on-dark-muted);
    font-size: var(--wz-fs-sm);
}

.wz-capability {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: var(--wz-s-3);
    align-items: start;
    padding: var(--wz-s-4);
    border: 1px solid var(--wz-on-dark-rule);
    border-radius: var(--wz-r);
    background: var(--wz-on-dark-panel);
}

.wz-capability__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--wz-r-sm);
    background: rgba(90, 182, 255, 0.13);
    color: var(--wz-sky);
}

.wz-capability__icon svg {
    width: 20px;
    height: 20px;
}

/* A vendor icon brings its own colour, so it sits on a plain surface rather
   than the tinted tile the monochrome sprite marks need. */
.wz-capability__icon--logo {
    background: rgba(255, 255, 255, 0.9);
}

.wz-capability__icon--logo img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.wz-capability__name {
    margin: 0 0 2px;
    font-family: var(--wz-font-display);
    font-size: var(--wz-fs-h4);
    font-weight: 600;
    color: var(--wz-white);
}

.wz-capability__text {
    margin: 0;
    font-size: var(--wz-fs-sm);
    color: var(--wz-on-dark-muted);
}

/* ==========================================================================
   Service detail
   ========================================================================== */

.wz-prose {
    max-width: var(--wz-measure);
}

.wz-prose p {
    margin-bottom: var(--wz-s-4);
}

.wz-service-body {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--wz-s-8);
    align-items: start;
}

@media (max-width: 900px) {
    .wz-service-body {
        grid-template-columns: 1fr;
        gap: var(--wz-s-7);
    }
}

.wz-panel {
    display: flex;
    flex-direction: column;
    gap: var(--wz-s-4);
    padding: var(--wz-s-6);
    border: 1px solid var(--wz-rule);
    border-radius: var(--wz-r);
    background: var(--wz-ground);
}

.wz-panel__title {
    margin: 0;
    font-family: var(--wz-font-body);
    font-size: var(--wz-fs-label);
    font-weight: 600;
    letter-spacing: var(--wz-tracking-label);
    text-transform: uppercase;
    color: var(--wz-ink-faint);
}