/* ==========================================================================
   WAREHOUSE BRIDGE — PRODUCT FAMILY PATTERN
   Locked 2026-05-19. Palette verified against real product logos.

   DockSnap royal blue is the bright end of the real logo gradient.
   Scorecard emerald matches the real Scorecard logo (replaces earlier amber).
   Heatmap indigo is close to the real gradient and kept as-is.
   Hardware grey kept; pairs with Banner's industrial palette.
   ========================================================================== */

:root {
    /* Per-product solid accents (real-logo-sampled) */
    --wb-accent-docsnap:   #3b82f6;  /* DockSnap royal blue */
    --wb-accent-heatmap:   #6366f1;  /* Warehouse Heatmap indigo */
    --wb-accent-scorecard: #119971;  /* Client Scorecard emerald */
    --wb-accent-hardware:  #6b7280;  /* Hardware industrial grey */

    /* Per-product brand gradients (for sections that can carry the full gradient) */
    --wb-gradient-docsnap:   linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
    --wb-gradient-heatmap:   linear-gradient(135deg, #a381f4 0%, #6758db 100%);
    --wb-gradient-scorecard: linear-gradient(135deg, #64d59d 0%, #067a57 100%);
    --wb-gradient-hardware:  linear-gradient(135deg, #9ca3af 0%, #4b5563 100%);
}

/* Per-card accent helpers (alternative to inline --product-accent style) */
.wb-product-card--docsnap   { --product-accent: var(--wb-accent-docsnap); }
.wb-product-card--heatmap   { --product-accent: var(--wb-accent-heatmap); }
.wb-product-card--scorecard { --product-accent: var(--wb-accent-scorecard); }
.wb-product-card--hardware  { --product-accent: var(--wb-accent-hardware); }

/* ==========================================================================
   PRODUCT CARD — Dashboard Cards pattern (Treatment A)
   3-up grid, pulse-dot accent, card lift on hover.
   ========================================================================== */

.wb-product-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 992px) {
    .wb-product-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .wb-product-card-grid { grid-template-columns: 1fr; }
}

.wb-product-card {
    background: var(--wb-bg-white);
    border: 1px solid var(--wb-border);
    border-top: 4px solid var(--product-accent, var(--wb-accent));
    padding: 32px 24px 28px;
    border-radius: var(--wb-radius-lg);
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    min-height: 280px;
}

.wb-product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--wb-shadow-md);
    text-decoration: none;
    color: inherit;
}

.wb-product-card__dot {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--product-accent, var(--wb-accent));
    animation: wb-pulse-accent 1.8s infinite cubic-bezier(0.16, 1, 0.3, 1);
}

.wb-product-card:hover .wb-product-card__dot {
    animation: none;
    opacity: 1;
    transform: scale(1.2);
}

@keyframes wb-pulse-accent {
    0%, 100% { opacity: 0.65; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.15); }
}

.wb-product-card__icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--product-accent, var(--wb-accent));
    color: #ffffff;
    border-radius: var(--wb-radius-md);
    margin-bottom: 18px;
    font-size: 1.4rem;
}

.wb-product-card__name {
    font-family: var(--wb-font-primary);
    font-size: var(--wb-text-xl);
    font-weight: var(--wb-weight-bold);
    color: var(--wb-slate-dark);
    margin: 0 0 6px;
}

.wb-product-card__tagline {
    font-size: var(--wb-text-xs);
    color: var(--product-accent, var(--wb-accent));
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wider);
    font-weight: var(--wb-weight-bold);
    margin: 0 0 14px;
}

.wb-product-card__description {
    font-size: var(--wb-text-base);
    color: var(--wb-text-secondary);
    line-height: 1.6;
    margin: 0 0 22px;
    flex: 1;
}

.wb-product-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--product-accent, var(--wb-accent));
    font-weight: var(--wb-weight-semibold);
    font-size: var(--wb-text-base);
    text-decoration: none;
    margin-top: auto;
}

.wb-product-card__cta i,
.wb-product-card__cta svg {
    transition: transform 200ms ease;
}

.wb-product-card:hover .wb-product-card__cta i,
.wb-product-card:hover .wb-product-card__cta svg {
    transform: translateX(4px);
}

/* ==========================================================================
   FAMILY SWITCHER (cross-site app-switcher, Adobe CC pattern)
   Triggered from /templates/partials/family-switcher.html
   ========================================================================== */

.wb-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.wb-switcher__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    /* Visible chip on dark navy nav. Background isn't transparent, so the */
    /* button doesn't read as a "hole" with only the border showing. */
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--wb-radius-md);
    color: #ffffff;
    font-family: var(--wb-font-primary);
    font-size: var(--wb-text-sm);
    font-weight: var(--wb-weight-semibold);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    line-height: 1;
}

.wb-switcher__trigger:hover,
.wb-switcher__trigger[aria-expanded="true"] {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

.wb-switcher__trigger:focus-visible {
    outline: 2px solid var(--wb-accent-highlight);
    outline-offset: 2px;
}

.wb-switcher__grid-icon {
    display: grid;
    grid-template-columns: repeat(3, 4px);
    gap: 2px;
    width: 16px;
    height: 16px;
}
.wb-switcher__grid-icon span {
    width: 4px;
    height: 4px;
    background-color: currentColor;
    border-radius: 1px;
    opacity: 0.85;
}

.wb-switcher__label { line-height: 1; }

@media (max-width: 600px) {
    .wb-switcher__label { display: none; }
    .wb-switcher__trigger { padding: 0.45rem 0.5rem; }
}

.wb-switcher__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-width: calc(100vw - 32px);
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--wb-radius-xl);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    padding: 0.5rem;
    z-index: 1100;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.wb-switcher__panel[hidden] { display: none !important; }

.wb-switcher__panel.wb-switcher__panel--open {
    opacity: 1;
    transform: translateY(0);
}

.wb-switcher__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 0.75rem 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 0.25rem;
}
.wb-switcher__header strong {
    font-size: 0.95rem;
    color: var(--wb-slate-dark);
}
.wb-switcher__header span {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wb-text-muted);
    font-weight: var(--wb-weight-bold);
}

.wb-switcher__list { list-style: none; margin: 0; padding: 0; }

.wb-switcher__item {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--wb-radius-md);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.12s ease;
}

.wb-switcher__item:hover,
.wb-switcher__item:focus-visible {
    background-color: rgba(15, 23, 42, 0.05);
    outline: none;
    text-decoration: none;
    color: inherit;
}

.wb-switcher__item--current { background-color: rgba(26, 24, 60, 0.08); }
.wb-switcher__item--current:hover { background-color: rgba(26, 24, 60, 0.12); }

.wb-switcher__swatch {
    width: 36px;
    height: 36px;
    border-radius: var(--wb-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.wb-switcher__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wb-switcher__name {
    font-size: var(--wb-text-base);
    font-weight: var(--wb-weight-bold);
    color: var(--wb-slate-dark);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.wb-switcher__here {
    display: inline-block;
    padding: 1px 6px;
    background-color: var(--wb-accent);
    color: #fff;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: var(--wb-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.wb-switcher__tagline {
    font-size: 0.78rem;
    color: var(--wb-text-secondary);
    line-height: 1.3;
}

.wb-switcher__open {
    color: #9aa3ad;
    font-weight: var(--wb-weight-bold);
    font-size: 1.1rem;
}

.wb-switcher__item:hover .wb-switcher__open { color: var(--wb-accent); }

.wb-switcher__footer {
    display: block;
    text-align: center;
    padding: 0.625rem;
    margin-top: 0.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 0.8rem;
    font-weight: var(--wb-weight-semibold);
    color: var(--wb-accent);
    text-decoration: none;
}
.wb-switcher__footer:hover {
    background-color: rgba(26, 24, 60, 0.06);
    border-radius: 0 0 var(--wb-radius-lg) var(--wb-radius-lg);
}

/* ==========================================================================
   FOOTER FAMILY BLOCK + NEWSLETTER + LEGAL ACCORDION
   Same across all 4 family sites.
   ========================================================================== */

.wb-footer__newsletter {
    display: flex;
    gap: 8px;
    margin-top: 1rem;
    align-items: stretch;
}
.wb-footer__newsletter input[type="email"] {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border-radius: var(--wb-radius-md);
    border: 1px solid var(--wb-border);
    font-size: var(--wb-text-sm);
    background: var(--wb-bg-white);
    color: var(--wb-text-primary);
    font-family: var(--wb-font-primary);
}
.wb-footer__newsletter input[type="email"]:focus {
    outline: 2px solid var(--wb-accent);
    outline-offset: 1px;
    border-color: var(--wb-accent);
}
.wb-footer__newsletter .btn { white-space: nowrap; }

/* Footer Field Notes button — override .btn-primary navy fill so it stands */
/* out on the dark footer (was navy-on-navy and almost invisible). */
.wb-footer__newsletter .btn-primary,
.wb-footer__newsletter button[type="submit"] {
    background-color: #ffffff;
    border-color: #ffffff;
    color: var(--wb-accent);
}
.wb-footer__newsletter .btn-primary:hover,
.wb-footer__newsletter .btn-primary:focus,
.wb-footer__newsletter .btn-primary:focus-visible,
.wb-footer__newsletter .btn-primary:active,
.wb-footer__newsletter button[type="submit"]:hover,
.wb-footer__newsletter button[type="submit"]:focus,
.wb-footer__newsletter button[type="submit"]:active {
    background-color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.9);
    color: var(--wb-accent);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.wb-footer__newsletter-fine {
    font-size: var(--wb-text-xs);
    /* Was --wb-text-muted (#8694a5) — readable on dark footer (~5.5:1). */
    color: var(--wb-text-on-dark-muted);
    margin: 0.5rem 0 0;
}

.wb-footer__legal-accordion { margin-top: 1rem; }
.wb-footer__legal-accordion summary {
    cursor: pointer;
    font-size: var(--wb-text-sm);
    font-weight: var(--wb-weight-semibold);
    color: var(--wb-text-secondary);
    list-style: none;
    padding: 0.25rem 0;
}
.wb-footer__legal-accordion summary::-webkit-details-marker { display: none; }
.wb-footer__legal-accordion summary::before {
    content: '\25B8';
    display: inline-block;
    margin-right: 0.4rem;
    transition: transform 0.2s ease;
    color: var(--wb-text-muted);
}
.wb-footer__legal-accordion[open] summary::before { transform: rotate(90deg); }

.wb-footer__links--legal {
    margin-top: 0.5rem;
    columns: 2;
    column-gap: 1rem;
}
.wb-footer__links--legal li { break-inside: avoid; }

.wb-footer__family {
    padding: 1.5rem 0 0.5rem;
    border-top: 1px solid var(--wb-border);
    margin-top: 2.5rem;
}

.wb-footer__family-title {
    font-size: var(--wb-text-xs);
    font-weight: var(--wb-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wider);
    color: var(--wb-text-muted);
    margin: 0 0 0.85rem;
}

.wb-footer__family-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.wb-footer__family-list li {
    font-size: var(--wb-text-sm);
    /* Fix 2026-05-19: was --wb-text-secondary (dark grey) on dark footer = unreadable. */
    color: var(--wb-text-on-dark-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.wb-footer__family-list a {
    font-weight: var(--wb-weight-semibold);
    /* Fix 2026-05-19: was --wb-slate-dark (navy) on dark navy footer = unreadable. */
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.wb-footer__family-list a:hover,
.wb-footer__family-list a:focus-visible {
    border-bottom-color: var(--wb-accent-highlight);
    color: var(--wb-accent-highlight);
}

.wb-footer__family-swatch {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    color: #ffffff;
    font-family: var(--wb-font-primary);
    font-size: 11px;
    font-weight: var(--wb-weight-bold);
    letter-spacing: 0.02em;
}

.wb-footer__family-swatch img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    box-sizing: border-box;
}

.wb-footer__family-legal {
    font-size: var(--wb-text-xs);
    color: var(--wb-text-muted);
    margin: 0.5rem 0 0;
    line-height: 1.5;
}

/* Screen reader only */
.wb-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   THE 3PL OPERATING SYSTEM — 5-step preview block
   Renders on the existing .wb-heat-gradient-dark section.
   ========================================================================== */

.wb-os__overline {
    font-size: var(--wb-text-xs);
    color: var(--wb-accent);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wider);
    font-weight: var(--wb-weight-bold);
    margin: 0 0 0.5rem;
}

.wb-os__steps {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

@media (max-width: 1100px) {
    .wb-os__steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .wb-os__steps { grid-template-columns: 1fr; }
}

.wb-os__step {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 4px solid var(--product-accent, var(--wb-accent));
    border-radius: var(--wb-radius-lg);
    padding: 1.5rem 1.25rem;
    color: #fff;
    transition: background-color 0.2s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.wb-os__step:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-4px);
}

.wb-os__number {
    display: inline-block;
    font-family: var(--wb-font-primary);
    font-weight: var(--wb-weight-extrabold);
    font-size: 1.15rem;
    color: var(--product-accent, var(--wb-accent));
    margin-bottom: 0.4rem;
    letter-spacing: 0.05em;
}

.wb-os__step-title {
    font-family: var(--wb-font-primary);
    font-weight: var(--wb-weight-bold);
    font-size: var(--wb-text-xl);
    color: #fff;
    margin: 0 0 0.4rem;
    line-height: 1.15;
}

.wb-os__step-tool {
    font-size: var(--wb-text-xs);
    color: var(--product-accent, var(--wb-accent));
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wider);
    font-weight: var(--wb-weight-bold);
    margin: 0 0 0.65rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1.2;
}

.wb-os__step-tool i {
    font-size: 1rem;
    color: var(--product-accent, var(--wb-accent));
}

.wb-os__step-body {
    font-size: var(--wb-text-sm);
    color: var(--wb-text-on-dark-secondary);
    line-height: 1.55;
    margin: 0;
}

/* ==========================================================================
   HARDWARE BAND — dark industrial band on homepage
   ========================================================================== */

.wb-hardware-band {
    background: var(--wb-slate-dark);
    color: var(--wb-text-on-dark);
    padding: 4.5rem 0;
}

/* CTA on dark sections — fix the blue-on-blue contrast issue. */
/* The default .btn-primary / .btn-accent fill is the deep-navy --wb-accent, */
/* which sits inside .wb-hardware-band (--wb-slate-dark) and .wb-page-hero */
/* (#1a183c) and effectively disappears. Use the steel-blue highlight tone */
/* so the button stands out against the navy. */
.wb-hardware-band .btn-primary,
.wb-hardware-band .btn-accent,
.wb-page-hero .btn-primary,
.wb-page-hero .btn-accent,
.wb-page-hero__ctas .btn-primary,
.wb-page-hero__ctas .btn-accent {
    background-color: var(--wb-accent-highlight);
    border-color: var(--wb-accent-highlight);
    color: #ffffff;
}
.wb-hardware-band .btn-primary:hover,
.wb-hardware-band .btn-primary:focus,
.wb-hardware-band .btn-primary:focus-visible,
.wb-hardware-band .btn-accent:hover,
.wb-hardware-band .btn-accent:focus,
.wb-hardware-band .btn-accent:focus-visible,
.wb-page-hero .btn-primary:hover,
.wb-page-hero .btn-primary:focus,
.wb-page-hero .btn-primary:focus-visible,
.wb-page-hero .btn-accent:hover,
.wb-page-hero .btn-accent:focus,
.wb-page-hero .btn-accent:focus-visible,
.wb-page-hero__ctas .btn-primary:hover,
.wb-page-hero__ctas .btn-primary:focus,
.wb-page-hero__ctas .btn-primary:focus-visible,
.wb-page-hero__ctas .btn-accent:hover,
.wb-page-hero__ctas .btn-accent:focus,
.wb-page-hero__ctas .btn-accent:focus-visible {
    /* Darker on hover — improves contrast against the dark section (Linear */
    /* pattern). Same hue family as --wb-accent-highlight (#4a90a4). */
    background-color: #3d7a8c;
    border-color: #3d7a8c;
    color: #ffffff;
}

/* Outline buttons on dark sections — explicit white-bordered chip pattern. */
.wb-hardware-band .btn-outline-primary,
.wb-page-hero .btn-outline-primary,
.wb-page-hero__ctas .btn-outline-primary {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}
.wb-hardware-band .btn-outline-primary:hover,
.wb-hardware-band .btn-outline-primary:focus,
.wb-page-hero .btn-outline-primary:hover,
.wb-page-hero .btn-outline-primary:focus,
.wb-page-hero__ctas .btn-outline-primary:hover,
.wb-page-hero__ctas .btn-outline-primary:focus {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: #ffffff;
    color: #ffffff;
}

.wb-hardware-band__tagline {
    font-size: var(--wb-text-xs);
    color: var(--wb-accent-hardware);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wider);
    font-weight: var(--wb-weight-bold);
    margin: 0 0 0.5rem;
}

.wb-hardware-band__title {
    font-family: var(--wb-font-primary);
    font-weight: var(--wb-weight-extrabold);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    color: #fff;
    margin: 0 0 1rem;
}

.wb-hardware-band__lede {
    font-size: var(--wb-text-md);
    color: var(--wb-text-on-dark-secondary);
    line-height: 1.6;
    margin: 0 0 1.5rem;
    max-width: 540px;
}

.wb-hardware-band__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 1.5rem;
}

.wb-hardware-band__tile {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.1rem 1.25rem;
    border-radius: var(--wb-radius-lg);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: var(--wb-weight-semibold);
    font-size: var(--wb-text-base);
    color: #fff;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.wb-hardware-band__tile:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.wb-hardware-band__tile i {
    font-size: 1.4rem;
    color: var(--wb-accent-hardware);
    background: rgba(107, 114, 128, 0.18);
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wb-radius-md);
    flex-shrink: 0;
}

/* ==========================================================================
   /our-tools/ — full product expansion sections
   ========================================================================== */

.wb-our-tools__product {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 3rem;
    align-items: start;
    padding-top: 2rem;
    border-top: 4px solid var(--product-accent, var(--wb-accent));
}

@media (max-width: 900px) {
    .wb-our-tools__product {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.wb-our-tools__overline {
    font-size: var(--wb-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wider);
    font-weight: var(--wb-weight-bold);
    margin: 0 0 0.75rem;
}

.wb-our-tools__heading {
    font-family: var(--wb-font-primary);
    font-weight: var(--wb-weight-extrabold);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    line-height: 1.15;
    color: var(--wb-slate-dark);
    margin: 0;
}

.wb-our-tools__step {
    display: inline-block;
    color: var(--product-accent, var(--wb-accent));
    font-family: var(--wb-font-mono, monospace);
    font-weight: var(--wb-weight-extrabold);
    font-size: 0.85em;
    margin-right: 0.5rem;
    letter-spacing: 0.05em;
}

.wb-our-tools__body p {
    font-size: var(--wb-text-base);
    line-height: 1.7;
    color: var(--wb-text-secondary);
    margin: 0 0 1.1rem;
}

.wb-our-tools__body p:last-child {
    margin-bottom: 0;
}

.wb-our-tools__body strong {
    color: var(--wb-slate-dark);
}

.wb-our-tools__spec {
    background: rgba(0, 0, 0, 0.04);
    border-left: 3px solid var(--product-accent, var(--wb-accent));
    padding: 0.6rem 1rem;
    border-radius: 0 var(--wb-radius-md) var(--wb-radius-md) 0;
    font-size: var(--wb-text-sm) !important;
    color: var(--wb-text-secondary) !important;
    margin: 1.1rem 0 !important;
}

.wb-our-tools__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: var(--wb-weight-bold);
    font-size: var(--wb-text-md);
    text-decoration: none;
    border-bottom: 2px solid currentColor;
    padding-bottom: 2px;
    transition: opacity 0.15s ease;
    margin-top: 0.75rem;
}

.wb-our-tools__link:hover {
    opacity: 0.85;
}

/* Dark variant for the Hardware section on /our-tools/ */
.wb-our-tools__product--dark .wb-our-tools__body p {
    color: var(--wb-text-on-dark-secondary);
}

.wb-our-tools__product--dark .wb-our-tools__body strong {
    color: #fff;
}

.wb-our-tools__product--dark .wb-our-tools__spec {
    background: rgba(255, 255, 255, 0.06);
    color: var(--wb-text-on-dark-secondary) !important;
}

/* ==========================================================================
   ABOUT PAGE V1 — Operator-built sections
   ========================================================================== */

.wb-about__prose p {
    font-size: var(--wb-text-md);
    line-height: 1.7;
    color: var(--wb-text-secondary);
    margin: 0 0 1.2rem;
}
.wb-about__prose strong { color: var(--wb-slate-dark); }

.wb-about__quote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--quote-accent, var(--wb-accent));
    background: rgba(0, 0, 0, 0.03);
    border-radius: 0 var(--wb-radius-md) var(--wb-radius-md) 0;
}
.wb-about__quote p {
    font-size: var(--wb-text-md);
    line-height: 1.6;
    color: var(--wb-text-secondary);
    font-style: italic;
    margin: 0;
}
.wb-about__quote strong {
    font-style: normal;
    color: var(--wb-slate-dark);
}

.wb-about__tool-list {
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
}
.wb-about__tool-list li {
    background: var(--wb-bg-white);
    border: 1px solid var(--wb-border);
    border-left: 4px solid var(--product-accent, var(--wb-accent));
    padding: 1rem 1.25rem;
    border-radius: var(--wb-radius-md);
    font-size: var(--wb-text-base);
    line-height: 1.55;
    color: var(--wb-text-secondary);
}
.wb-about__tool-list li strong {
    color: var(--wb-slate-dark);
    font-weight: var(--wb-weight-bold);
}
.wb-about__tool-list a {
    color: var(--product-accent, var(--wb-accent));
    font-weight: var(--wb-weight-semibold);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

/* Plain contact methods list — no coloured-bar accent, no card chrome.
   For methods that aren't tools (email, phone, mail, response-time). */
.wb-contact-methods {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}
.wb-contact-methods li {
    font-size: var(--wb-text-base);
    line-height: 1.55;
    color: var(--wb-text-secondary);
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.wb-contact-methods li:last-child {
    border-bottom: 0;
}
.wb-contact-methods li strong {
    color: var(--wb-slate-dark);
    font-weight: var(--wb-weight-bold);
    display: inline;
}
.wb-contact-methods a {
    color: var(--wb-accent);
    font-weight: var(--wb-weight-semibold);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.wb-about__wont-do {
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}
.wb-about__wont-do li {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 0.85rem;
    align-items: start;
    background: var(--wb-bg-alt);
    padding: 1.1rem 1.25rem;
    border-radius: var(--wb-radius-md);
}
.wb-about__wont-do li > i {
    color: var(--wb-error);
    font-size: 1.5rem;
    line-height: 1;
}
.wb-about__wont-do li strong {
    color: var(--wb-slate-dark);
    display: block;
    margin-bottom: 0.25rem;
}
.wb-about__wont-do li > div {
    font-size: var(--wb-text-base);
    line-height: 1.55;
    color: var(--wb-text-secondary);
}

.wb-about__promises {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.wb-about__promise {
    background: var(--wb-bg-white);
    border: 1px solid var(--wb-border);
    border-top: 4px solid var(--wb-accent);
    padding: 1.5rem 1.25rem;
    border-radius: var(--wb-radius-lg);
}
.wb-about__promise-number {
    display: inline-block;
    font-family: var(--wb-font-primary);
    font-weight: var(--wb-weight-extrabold);
    font-size: 1.1rem;
    color: var(--wb-accent);
    margin-bottom: 0.4rem;
    letter-spacing: 0.05em;
}
.wb-about__promise h3 {
    font-family: var(--wb-font-primary);
    font-weight: var(--wb-weight-bold);
    font-size: var(--wb-text-lg);
    color: var(--wb-slate-dark);
    margin: 0 0 0.5rem;
}
.wb-about__promise p {
    font-size: var(--wb-text-sm);
    line-height: 1.55;
    color: var(--wb-text-secondary);
    margin: 0;
}

/* Founder detail card */
.wb-founder-detail {
    background: var(--wb-bg-white);
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-lg);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.wb-founder-detail__photo {
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: center 20%;
}
.wb-founder-detail__body {
    padding: 1.5rem 1.5rem 2rem;
}
.wb-founder-detail__body h3 {
    font-family: var(--wb-font-primary);
    font-weight: var(--wb-weight-extrabold);
    font-size: var(--wb-text-2xl);
    color: var(--wb-slate-dark);
    margin: 0 0 0.25rem;
}
.wb-founder-detail__tagline {
    font-size: var(--wb-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wider);
    font-weight: var(--wb-weight-bold);
    color: var(--wb-accent);
    margin: 0 0 0.4rem;
}
.wb-founder-detail__role {
    font-size: var(--wb-text-sm);
    font-weight: var(--wb-weight-semibold);
    color: var(--wb-text-secondary);
    margin: 0 0 1rem;
}
.wb-founder-detail__body p:not(.wb-founder-detail__tagline):not(.wb-founder-detail__role) {
    font-size: var(--wb-text-base);
    line-height: 1.65;
    color: var(--wb-text-secondary);
    margin: 0 0 1rem;
}
.wb-founder-detail__creds {
    list-style: none;
    margin: 1rem 0 0;
    padding-top: 1rem;
    padding-left: 0;
    border-top: 1px solid var(--wb-border);
}
.wb-founder-detail__creds li {
    font-size: var(--wb-text-sm);
    line-height: 1.5;
    color: var(--wb-text-secondary);
    margin-bottom: 0.4rem;
    padding-left: 1.25rem;
    position: relative;
}
.wb-founder-detail__creds li::before {
    content: '\203A';
    position: absolute;
    left: 0;
    color: var(--wb-accent);
    font-weight: var(--wb-weight-bold);
}

/* ==========================================================================
   LM-V3: The 3PL Operating Scorecard quiz + result UI
   ========================================================================== */

.wb-scorecard__dim {
    background: var(--wb-bg-white);
    border: 1px solid var(--wb-border);
    border-left: 4px solid var(--product-accent, var(--wb-accent));
    border-radius: var(--wb-radius-lg);
    padding: 1.5rem 1.75rem 1.25rem;
    margin: 0 0 1.25rem;
}

.wb-scorecard__dim legend {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    margin-bottom: 1rem;
    padding: 0;
    width: 100%;
    line-height: 1.2;
}

.wb-scorecard__dim-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: var(--product-accent, var(--wb-accent));
    color: #fff;
    font-family: var(--wb-font-primary);
    font-weight: 800;
    font-size: 0.9rem;
    line-height: 1;
    flex-shrink: 0;
}

.wb-scorecard__dim-label {
    font-family: var(--wb-font-primary);
    font-weight: 800;
    font-size: var(--wb-text-xl);
    color: var(--wb-slate-dark);
}

.wb-scorecard__dim-tag {
    font-size: var(--wb-text-xs);
    color: var(--product-accent, var(--wb-accent));
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wider);
    font-weight: var(--wb-weight-bold);
    margin-left: auto;
}

.wb-scorecard__dim--tiebreak,
.wb-scorecard__dim--profile {
    border-style: dashed;
    background: var(--wb-bg-alt);
}

.wb-scorecard__question {
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--wb-border);
}
.wb-scorecard__dim > .wb-scorecard__question:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

.wb-scorecard__q-text {
    font-size: var(--wb-text-md);
    color: var(--wb-slate-dark);
    margin: 0 0 0.75rem;
    line-height: 1.4;
}

.wb-scorecard__options {
    display: grid;
    gap: 0.4rem;
}

.wb-scorecard__options label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    background: var(--wb-bg-alt);
    border: 1px solid transparent;
    border-radius: var(--wb-radius-md);
    font-size: var(--wb-text-base);
    color: var(--wb-text-secondary);
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
    line-height: 1.45;
}

.wb-scorecard__options label:hover {
    background: rgba(26, 24, 60, 0.06);
    border-color: rgba(26, 24, 60, 0.2);
}

.wb-scorecard__options input[type="radio"] {
    margin-top: 0.2rem;
    flex-shrink: 0;
    accent-color: var(--product-accent, var(--wb-accent));
}

.wb-scorecard__options input[type="radio"]:checked + * { color: var(--wb-slate-dark); }
.wb-scorecard__options label:has(input[type="radio"]:checked) {
    background: var(--wb-bg-white);
    border-color: var(--product-accent, var(--wb-accent));
    color: var(--wb-slate-dark);
    font-weight: var(--wb-weight-semibold);
}

.wb-scorecard__submit {
    text-align: center;
    margin: 2rem 0 0;
    padding: 1.5rem 0;
    border-top: 1px solid var(--wb-border);
}
.wb-scorecard__submit-fine {
    margin: 1rem 0 0;
    font-size: var(--wb-text-sm);
    color: var(--wb-text-muted);
}

/* ---- Results UI ---- */

.wb-scorecard__diagnosis {
    text-align: center;
    background: var(--wb-bg-white);
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-xl);
    padding: 2.5rem 1.5rem;
    margin: 0 0 2rem;
}

.wb-scorecard__diagnosis-label {
    font-size: var(--wb-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wider);
    font-weight: var(--wb-weight-bold);
    color: var(--wb-text-muted);
    margin: 0 0 0.5rem;
}

.wb-scorecard__diagnosis-score {
    font-family: var(--wb-font-primary);
    font-weight: 800;
    font-size: clamp(3rem, 8vw, 5rem);
    line-height: 1;
    color: var(--wb-slate-dark);
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
}
.wb-scorecard__diagnosis-score span { color: var(--wb-accent); }

.wb-scorecard__diagnosis-tier {
    font-family: var(--wb-font-primary);
    font-weight: 800;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.1;
    color: var(--wb-slate-dark);
    margin: 0 0 0.75rem;
}

.wb-scorecard__diagnosis-blurb {
    font-size: var(--wb-text-md);
    line-height: 1.6;
    color: var(--wb-text-secondary);
    margin: 0 auto;
    max-width: 580px;
}

/* Breakdown: chart + per-dimension bars */
.wb-scorecard__breakdown {
    display: grid;
    grid-template-columns: minmax(280px, 400px) 1fr;
    gap: 2rem;
    align-items: center;
    background: var(--wb-bg-white);
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-xl);
    padding: 2rem;
    margin: 0 0 2rem;
}

@media (max-width: 768px) {
    .wb-scorecard__breakdown { grid-template-columns: 1fr; }
}

.wb-scorecard__chart-wrap {
    position: relative;
    min-height: 320px;
    max-width: 400px;
    margin: 0 auto;
}

.wb-scorecard__dim-list {
    display: grid;
    gap: 0.85rem;
}

.wb-scorecard__dim-row { font-size: var(--wb-text-sm); }
.wb-scorecard__dim-row-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.35rem;
}
.wb-scorecard__dim-row-name {
    font-weight: var(--wb-weight-bold);
    color: var(--wb-slate-dark);
    font-size: var(--wb-text-base);
}
.wb-scorecard__dim-row-score {
    color: var(--product-accent, var(--wb-accent));
    font-weight: var(--wb-weight-bold);
    font-size: var(--wb-text-sm);
    font-family: var(--wb-font-mono, monospace);
}
.wb-scorecard__dim-row-bar {
    height: 8px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 999px;
    overflow: hidden;
}
.wb-scorecard__dim-row-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Recommendation block */
.wb-scorecard__rec {
    background: var(--wb-bg-white);
    border: 1px solid var(--wb-border);
    border-top: 4px solid var(--product-accent, var(--wb-accent));
    border-radius: var(--wb-radius-xl);
    padding: 2rem;
    margin: 0 0 2rem;
}
.wb-scorecard__rec-label {
    font-size: var(--wb-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wider);
    font-weight: var(--wb-weight-bold);
    color: var(--product-accent, var(--wb-accent));
    margin: 0 0 0.5rem;
}
.wb-scorecard__rec-dim {
    font-family: var(--wb-font-primary);
    font-weight: 800;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.15;
    color: var(--wb-slate-dark);
    margin: 0 0 0.75rem;
}
.wb-scorecard__rec-blurb {
    font-size: var(--wb-text-md);
    line-height: 1.6;
    color: var(--wb-text-secondary);
    margin: 0 0 1.5rem;
    max-width: 660px;
}

.wb-scorecard__rec-tool {
    background: var(--wb-bg-alt);
    border-left: 4px solid var(--product-accent, var(--wb-accent));
    border-radius: 0 var(--wb-radius-lg) var(--wb-radius-lg) 0;
    padding: 1.5rem;
}
.wb-scorecard__rec-tool-tag {
    display: inline-block;
    font-size: var(--wb-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wider);
    font-weight: var(--wb-weight-bold);
    color: var(--product-accent, var(--wb-accent));
    margin-bottom: 0.4rem;
}
.wb-scorecard__rec-tool h4 {
    font-family: var(--wb-font-primary);
    font-weight: 800;
    font-size: var(--wb-text-2xl);
    color: var(--wb-slate-dark);
    margin: 0 0 0.5rem;
}
.wb-scorecard__rec-tool p {
    font-size: var(--wb-text-base);
    line-height: 1.55;
    color: var(--wb-text-secondary);
    margin: 0 0 1.25rem;
}

/* Roadmap */
.wb-scorecard__roadmap {
    background: var(--wb-bg-white);
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-xl);
    padding: 2rem;
    margin: 0 0 2rem;
}
.wb-scorecard__roadmap-title {
    font-family: var(--wb-font-primary);
    font-weight: 800;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.15;
    color: var(--wb-slate-dark);
    margin: 0.25rem 0 1.5rem;
}

.wb-scorecard__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
}
@media (max-width: 768px) {
    .wb-scorecard__steps { grid-template-columns: 1fr; }
}

.wb-scorecard__steps li {
    background: var(--wb-bg-alt);
    border: 2px solid transparent;
    border-radius: var(--wb-radius-lg);
    padding: 1rem 0.85rem;
    text-align: center;
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.wb-scorecard__steps li strong {
    display: block;
    font-family: var(--wb-font-primary);
    font-weight: 800;
    font-size: var(--wb-text-md);
    color: var(--wb-slate-dark);
    margin: 0.4rem 0 0.2rem;
}
.wb-scorecard__steps li span:not(.wb-scorecard__step-marker) {
    font-size: var(--wb-text-xs);
    color: var(--wb-text-muted);
}
.wb-scorecard__step-marker {
    display: inline-block;
    font-family: var(--wb-font-primary);
    font-weight: 800;
    font-size: 1rem;
    color: var(--product-accent, var(--wb-accent));
    letter-spacing: 0.05em;
}

.wb-scorecard__step--complete {
    background: rgba(26, 24, 60, 0.05);
    opacity: 0.7;
}
.wb-scorecard__step--complete::after {
    content: '\2713';
    display: block;
    color: var(--wb-success);
    font-weight: 800;
    margin-top: 0.25rem;
}

.wb-scorecard__step--current {
    background: var(--wb-bg-white);
    border-color: var(--product-accent, var(--wb-accent));
    transform: translateY(-4px);
    box-shadow: var(--wb-shadow-md);
}

.wb-scorecard__roadmap-note {
    margin: 1.5rem 0 0;
    font-size: var(--wb-text-md);
    color: var(--wb-text-secondary);
    text-align: center;
    line-height: 1.55;
}

/* Email gate */
.wb-scorecard__email-gate {
    background: var(--wb-slate-dark);
    color: #fff;
    border-radius: var(--wb-radius-xl);
    padding: 2.5rem 2rem;
    text-align: center;
}
.wb-scorecard__email-gate h3 {
    font-family: var(--wb-font-primary);
    font-weight: 800;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.15;
    color: #fff;
    margin: 0 0 1rem;
}
.wb-scorecard__email-gate p {
    font-size: var(--wb-text-md);
    line-height: 1.6;
    color: var(--wb-text-on-dark-secondary);
    margin: 0 auto 1.5rem;
    max-width: 580px;
}
.wb-scorecard__email-gate form {
    display: flex;
    gap: 0.5rem;
    max-width: 460px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
}
.wb-scorecard__email-gate input[type="email"] {
    flex: 1;
    min-width: 220px;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: var(--wb-radius-md);
    font-size: var(--wb-text-base);
    font-family: var(--wb-font-primary);
}
.wb-scorecard__email-gate input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.6); }
.wb-scorecard__email-gate input[type="email"]:focus {
    outline: 2px solid var(--wb-accent-light);
    background: rgba(255, 255, 255, 0.15);
}
.wb-scorecard__email-fine {
    font-size: var(--wb-text-xs);
    color: var(--wb-text-on-dark-muted);
    margin: 1rem auto 0;
    max-width: 460px;
}

/* ==========================================================================
   FAQ — collapsible <details> pattern used on homepage + product pages
   ========================================================================== */

.wb-faq__item {
    background: var(--wb-bg-white);
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-lg);
    margin-bottom: 0.85rem;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wb-faq__item[open] {
    border-color: var(--wb-accent);
    box-shadow: var(--wb-shadow-sm);
}

.wb-faq__item summary {
    cursor: pointer;
    padding: 1.1rem 1.5rem 1.1rem 1.25rem;
    font-size: var(--wb-text-md);
    color: var(--wb-slate-dark);
    list-style: none;
    position: relative;
    line-height: 1.4;
}

.wb-faq__item summary::-webkit-details-marker { display: none; }

.wb-faq__item summary::after {
    content: '\002B';
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: var(--wb-accent);
    font-weight: 700;
    transition: transform 0.2s ease;
    line-height: 1;
}

.wb-faq__item[open] summary::after {
    content: '\2212';
}

.wb-faq__item p {
    margin: 0;
    padding: 0 1.5rem 1.25rem 1.25rem;
    font-size: var(--wb-text-base);
    line-height: 1.65;
    color: var(--wb-text-secondary);
}

.wb-faq__item p a {
    color: var(--wb-accent);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    font-weight: var(--wb-weight-semibold);
}

/* ==========================================================================
   HOMEPAGE PASS 3 — Locked 2026-05-19
   Hero, Built-by-Operators, Mosaic, OS spine, Stat strip, Hardware band, Closing.
   ========================================================================== */

/* Scroll-reveal helper (paired with IntersectionObserver in base.html) */
.wb-scroll-reveal,
.wb-os-stage,
.wb-mosaic-tile {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.wb-scroll-reveal.is-visible,
.wb-os-stage.is-visible,
.wb-mosaic-tile.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .wb-scroll-reveal,
    .wb-os-stage,
    .wb-mosaic-tile {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Shared display helpers used across the new homepage sections */
.wb-eyebrow-mono {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--product-accent, var(--wb-accent));
    margin: 0 0 1rem;
    font-weight: 500;
}

.wb-display-h2 {
    font-family: var(--wb-font-primary);
    font-size: var(--wb-display-xl);
    line-height: 1.1;
    letter-spacing: -0.015em;
    font-weight: 600;
    color: var(--wb-slate-dark);
    margin: 0 0 1.25rem;
}

.wb-lede {
    font-size: var(--wb-body-lg);
    line-height: 1.55;
    color: var(--wb-text-secondary);
    margin: 0 0 1.25rem;
    max-width: 56ch;
}

.wb-body {
    font-size: var(--wb-body-md);
    line-height: 1.6;
    color: var(--wb-text-secondary);
    margin: 0 0 1.25rem;
    max-width: 64ch;
}

/* --------------------------------------------------------------------------
   Section 1 — Hero (full-bleed)
   -------------------------------------------------------------------------- */
.wb-hero--full-bleed {
    position: relative;
    min-height: min(85vh, 720px);
    background-image: url('/static/img/warehouse/loading-dock-golden-hour.webp');
    background-size: cover;
    background-position: center right;
    background-color: #1a183c;
    color: #ffffff;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 96px 0 64px;
}

.wb-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(26, 24, 60, 0.92) 0%,
        rgba(26, 24, 60, 0.78) 40%,
        rgba(26, 24, 60, 0.35) 75%,
        rgba(26, 24, 60, 0.1) 100%);
    z-index: 1;
}

.wb-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
}

.wb-hero__eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 1.5rem;
    font-weight: 500;
}

.wb-hero__h1 {
    font-family: var(--wb-font-primary);
    font-size: var(--wb-display-xxl);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 1.5rem;
    max-width: 22ch;
}

.wb-hero__sub {
    font-size: var(--wb-body-lg);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 2rem;
    max-width: 64ch;
}

.wb-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    margin: 0 0 3rem;
}

.wb-hero__secondary-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--wb-body-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding-bottom: 2px;
    transition: border-color 0.2s ease;
}
.wb-hero__secondary-link:hover {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

.wb-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    max-width: 880px;
}

.wb-hero__stat {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.wb-hero__stat-value {
    font-family: var(--wb-font-primary);
    font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
    font-weight: 600;
    color: #ffffff;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.wb-hero__stat-label {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

@media (max-width: 768px) {
    .wb-hero--full-bleed { padding: 72px 0 48px; min-height: 80vh; }
    .wb-hero__overlay {
        background: linear-gradient(180deg,
            rgba(26, 24, 60, 0.94) 0%,
            rgba(26, 24, 60, 0.85) 60%,
            rgba(26, 24, 60, 0.6) 100%);
    }
    .wb-hero__stats { gap: 1.75rem; }
}

/* --------------------------------------------------------------------------
   Section 2 — Built by Operators
   -------------------------------------------------------------------------- */
.wb-built-by__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}
@media (max-width: 992px) {
    .wb-built-by__layout { grid-template-columns: 1fr; gap: 2.5rem; }
}

.wb-built-by__image {
    margin: 0;
    position: sticky;
    top: 96px;
}
@media (max-width: 992px) {
    .wb-built-by__image { position: static; top: auto; }
}

.wb-built-by__image img {
    width: 100%;
    height: auto;
    border-radius: var(--wb-radius-md);
    border: 1px solid rgba(0, 0, 0, 0.08);
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.wb-built-by__caption {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--wb-text-muted);
    margin-top: 0.75rem;
    text-transform: uppercase;
}

.wb-built-by__body { display: flex; flex-direction: column; gap: 0; }

.wb-built-by__proof {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1rem 0 2.5rem;
}

.wb-built-by__proof-card {
    background: var(--wb-bg-white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--wb-radius-md);
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wb-built-by__proof-num {
    font-family: var(--wb-font-primary);
    font-size: clamp(1.5rem, 2vw + 0.25rem, 2rem);
    font-weight: 600;
    color: var(--wb-accent);
    margin: 0;
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.wb-built-by__proof-body {
    font-size: var(--wb-body-md);
    line-height: 1.55;
    color: var(--wb-text-secondary);
    margin: 0;
}
.wb-built-by__proof-body strong { color: var(--wb-slate-dark); font-weight: 600; }

.wb-built-by__founders {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 2rem;
    margin-top: 0.5rem;
}

.wb-built-by__sub-h {
    font-family: var(--wb-font-primary);
    font-size: var(--wb-display-lg);
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-weight: 600;
    color: var(--wb-slate-dark);
    margin: 0 0 1rem;
}

.wb-built-by__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.wb-built-by__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-size: var(--wb-body-md);
    color: var(--wb-text-secondary);
}
.wb-built-by__chip img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.wb-built-by__chip strong { color: var(--wb-slate-dark); font-weight: 600; }

.wb-built-by__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--wb-accent);
    font-weight: 600;
    font-size: var(--wb-body-md);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    align-self: flex-start;
}

/* --------------------------------------------------------------------------
   Section 3 + 4 — Mosaic intro + 2x2 grid
   -------------------------------------------------------------------------- */
.wb-mosaic-intro__h2 { max-width: 18ch; }
.wb-mosaic-intro__sub { max-width: 70ch; margin-bottom: 0; }

.wb-mosaic-section { padding-top: 2rem; }

.wb-mosaic {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
@media (max-width: 768px) { .wb-mosaic { grid-template-columns: 1fr; } }

.wb-mosaic-tile {
    background: var(--wb-bg-white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 200ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.wb-mosaic-tile:hover {
    border-color: var(--product-accent, var(--wb-accent));
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(26, 24, 60, 0.08);
    color: inherit;
}

.wb-mosaic-tile__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.wb-mosaic-tile__logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}
.wb-mosaic-tile__wordmark {
    font-family: var(--wb-font-primary);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--wb-slate-dark);
    letter-spacing: -0.005em;
}
.wb-mosaic-tile__wordmark--display {
    font-size: 1.25rem;
}

.wb-mosaic-tile__image {
    background: #f5f5fa;
    border-radius: var(--wb-radius-md);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wb-mosaic-tile__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.wb-mosaic-tile__image--diagram {
    background: linear-gradient(135deg, #1a183c 0%, #2a2750 100%);
    color: #ffffff;
}

.wb-mini-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem;
    width: 100%;
}
.wb-mini-diagram__node {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    padding: 0.5rem 0.9rem;
    border-radius: 6px;
    text-transform: uppercase;
    text-align: center;
}
.wb-mini-diagram__node--wb {
    background: var(--wb-accent);
    border-color: var(--wb-accent);
}
.wb-mini-diagram__arrow {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1rem;
    line-height: 1;
}

.wb-mosaic-tile__body { display: flex; flex-direction: column; gap: 0.85rem; flex: 1; }

.wb-mosaic-tile__title {
    font-family: var(--wb-font-primary);
    font-size: 1.375rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--wb-slate-dark);
    margin: 0;
    letter-spacing: -0.01em;
}

.wb-mosaic-tile__bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: var(--wb-body-md);
    color: var(--wb-text-secondary);
}
.wb-mosaic-tile__bullets li {
    position: relative;
    padding-left: 1rem;
    line-height: 1.5;
}
.wb-mosaic-tile__bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--product-accent, var(--wb-accent));
}

.wb-mosaic-tile__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--product-accent, var(--wb-accent));
    font-weight: 600;
    font-size: var(--wb-body-md);
    margin-top: auto;
}
.wb-mosaic-tile__cta i {
    transition: transform 200ms ease;
}
.wb-mosaic-tile:hover .wb-mosaic-tile__cta i { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Section 5 — Operating System spine (per-stage viewport sections)
   -------------------------------------------------------------------------- */
.wb-os-intro { padding-bottom: 2rem; }
.wb-os-intro__sub { max-width: 70ch; margin-bottom: 0; }

.wb-os-stage {
    background-color: var(--wb-bg-white);
    padding: clamp(64px, 8vw, 120px) 0;
    min-height: 90vh;
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}
.wb-os-stage--alt { background-color: #f8f8fa; border-top-color: transparent; }
.wb-os-stage--tint { background-color: #f5f5fa; border-top-color: transparent; }
.wb-os-stage--dark {
    background-color: #1a183c;
    color: #ffffff;
    border-top-color: rgba(255, 255, 255, 0.06);
}

@media (max-width: 992px) {
    .wb-os-stage { min-height: auto; padding: 64px 0; }
}

.wb-os-stage__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    width: 100%;
}
@media (max-width: 992px) {
    .wb-os-stage__layout { grid-template-columns: 1fr; gap: 2.5rem; }
}

.wb-os-stage--reverse .wb-os-stage__layout > .wb-os-stage__image { order: 0; }
.wb-os-stage--reverse .wb-os-stage__layout > .wb-os-stage__copy { order: 1; }
@media (max-width: 992px) {
    .wb-os-stage--reverse .wb-os-stage__layout > .wb-os-stage__image { order: 1; }
    .wb-os-stage--reverse .wb-os-stage__layout > .wb-os-stage__copy { order: 0; }
}

.wb-os-stage__eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--product-accent, var(--wb-accent));
    margin: 0 0 1.25rem;
    font-weight: 500;
}
.wb-os-stage__eyebrow--on-dark { color: rgba(255, 255, 255, 0.85); }
.wb-os-stage--dark .wb-os-stage__eyebrow {
    color: #ffffff;
}

.wb-os-stage__h2 {
    font-family: var(--wb-font-primary);
    font-size: var(--wb-display-xl);
    line-height: 1.1;
    letter-spacing: -0.015em;
    font-weight: 600;
    color: var(--wb-slate-dark);
    margin: 0 0 1.25rem;
    max-width: 22ch;
}
.wb-os-stage--dark .wb-os-stage__h2 { color: #ffffff; }

.wb-os-stage__sub {
    font-size: var(--wb-body-lg);
    line-height: 1.55;
    color: var(--wb-text-secondary);
    margin: 0 0 1.75rem;
    max-width: 56ch;
}
.wb-os-stage--dark .wb-os-stage__sub { color: rgba(255, 255, 255, 0.78); }

.wb-os-stage__product {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 1.5rem;
}
.wb-os-stage__product img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}
.wb-os-stage__wordmark {
    font-family: var(--wb-font-primary);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--wb-slate-dark);
    letter-spacing: -0.005em;
}
.wb-os-stage--dark .wb-os-stage__wordmark { color: #ffffff; }

.wb-os-stage__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.wb-os-stage--dark .wb-os-stage__image img { border-color: rgba(255, 255, 255, 0.1); }
.wb-os-stage__image--diagram {
    /* container only; diagram styles its own card */
}

.wb-os-stage__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--product-accent, var(--wb-accent));
    font-weight: 600;
    font-size: var(--wb-body-md);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}
.wb-os-stage__cta--on-dark {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.5);
}
.wb-os-stage__cta--on-dark:hover { color: #ffffff; border-bottom-color: #ffffff; }
.wb-os-stage__cta i { transition: transform 200ms ease; }
.wb-os-stage__cta:hover i { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Hardware system diagram (used in Stage 04 and Section 7 Hardware band)
   -------------------------------------------------------------------------- */
.wb-hw-diagram {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    color: var(--wb-slate-dark);
}
.wb-os-stage--dark .wb-hw-diagram {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.wb-hw-diagram--card {
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

.wb-hw-diagram__row {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    background: #f5f5fa;
    border: 1px solid rgba(0, 0, 0, 0.05);
    gap: 0.25rem;
}
.wb-os-stage--dark .wb-hw-diagram__row {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}

.wb-hw-diagram__node {
    font-family: var(--wb-font-primary);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: -0.005em;
    color: var(--wb-slate-dark);
}
.wb-os-stage--dark .wb-hw-diagram__node { color: #ffffff; }

.wb-hw-diagram__node--external {
    color: var(--wb-text-secondary);
}
.wb-os-stage--dark .wb-hw-diagram__node--external { color: rgba(255, 255, 255, 0.7); }

.wb-hw-diagram__node--wb {
    color: var(--wb-accent);
}
.wb-os-stage--dark .wb-hw-diagram__node--wb { color: #a3a0d6; }
.wb-hw-diagram__row:has(.wb-hw-diagram__node--wb) {
    background: rgba(26, 24, 60, 0.06);
    border-color: rgba(26, 24, 60, 0.2);
}
.wb-os-stage--dark .wb-hw-diagram__row:has(.wb-hw-diagram__node--wb) {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.wb-hw-diagram__node--banner { color: #4b5563; }
.wb-os-stage--dark .wb-hw-diagram__node--banner { color: #d1d5db; }

.wb-hw-diagram__node--operator { color: #b9355a; }
.wb-os-stage--dark .wb-hw-diagram__node--operator { color: #f4a4b9; }

.wb-hw-diagram__node-detail {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wb-text-muted);
}
.wb-os-stage--dark .wb-hw-diagram__node-detail { color: rgba(255, 255, 255, 0.55); }

.wb-hw-diagram__edge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.4rem 0;
    position: relative;
}
.wb-hw-diagram__edge::before {
    content: '';
    width: 1px;
    height: 14px;
    background: rgba(0, 0, 0, 0.15);
}
.wb-os-stage--dark .wb-hw-diagram__edge::before { background: rgba(255, 255, 255, 0.2); }
.wb-hw-diagram__edge::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid rgba(0, 0, 0, 0.2);
    margin-top: -1px;
}
.wb-os-stage--dark .wb-hw-diagram__edge::after { border-top-color: rgba(255, 255, 255, 0.25); }

.wb-hw-diagram__edge--up::after {
    border-top: none;
    border-bottom: 5px solid rgba(0, 0, 0, 0.2);
    margin-top: 0;
    margin-bottom: -1px;
    order: -1;
}

.wb-hw-diagram__protocol {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wb-text-muted);
    background: rgba(0, 0, 0, 0.04);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    margin: 0.15rem 0;
}
.wb-os-stage--dark .wb-hw-diagram__protocol {
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.06);
}

/* --------------------------------------------------------------------------
   Section 6 — Stat strip
   -------------------------------------------------------------------------- */
.wb-stat-strip {
    background-color: #1a183c;
    color: #ffffff;
    padding: 64px 0;
}

.wb-stat-strip__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    align-items: start;
}
@media (max-width: 992px) {
    .wb-stat-strip__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
@media (max-width: 600px) {
    .wb-stat-strip__grid { grid-template-columns: 1fr; gap: 1.75rem; }
}

.wb-stat-strip__item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wb-stat-strip__value {
    font-family: var(--wb-font-primary);
    font-size: var(--wb-display-xl);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.015em;
    color: #ffffff;
}

.wb-stat-strip__unit {
    font-size: 0.55em;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    margin-left: 0.15em;
    letter-spacing: 0;
}

.wb-stat-strip__label {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Section 7 — Hardware band
   -------------------------------------------------------------------------- */
.wb-hw-band {
    position: relative;
    padding: clamp(80px, 10vw, 140px) 0;
    color: #ffffff;
    overflow: hidden;
    background-color: #1a183c;
}

.wb-hw-band__bg {
    position: absolute;
    inset: 0;
    background-image: url('/static/img/warehouse/pallets-staged-dock.webp');
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.wb-hw-band__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(26, 24, 60, 0.92) 0%,
        rgba(26, 24, 60, 0.78) 60%,
        rgba(26, 24, 60, 0.65) 100%);
    z-index: 1;
}

.wb-hw-band__inner {
    position: relative;
    z-index: 2;
}

.wb-hw-band__layout {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 4rem;
    align-items: center;
}
@media (max-width: 992px) {
    .wb-hw-band__layout { grid-template-columns: 1fr; gap: 2.5rem; }
}

.wb-hw-band__eyebrow { color: rgba(255, 255, 255, 0.85); }
.wb-hw-band__h2 { color: #ffffff; max-width: 20ch; }
.wb-hw-band__lede { color: rgba(255, 255, 255, 0.85); max-width: 56ch; }

/* --------------------------------------------------------------------------
   Section 8 — Closing CTA / paths
   -------------------------------------------------------------------------- */
.wb-closing { padding-top: clamp(64px, 8vw, 96px); padding-bottom: clamp(64px, 8vw, 96px); }

.wb-closing__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 2.5rem 0 2.5rem;
}
@media (max-width: 992px) { .wb-closing__grid { grid-template-columns: 1fr; } }

.wb-closing-card {
    background: var(--wb-bg-white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 200ms ease,
                transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.wb-closing-card:hover {
    border-color: var(--wb-accent);
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(26, 24, 60, 0.08);
    color: inherit;
}

.wb-closing-card__label {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--wb-accent);
    margin: 0;
    font-weight: 500;
}

.wb-closing-card__h {
    font-family: var(--wb-font-primary);
    font-size: 1.375rem;
    line-height: 1.25;
    font-weight: 600;
    color: var(--wb-slate-dark);
    margin: 0;
    letter-spacing: -0.01em;
}

.wb-closing-card__body {
    font-size: var(--wb-body-md);
    line-height: 1.6;
    color: var(--wb-text-secondary);
    margin: 0;
    flex: 1;
}

.wb-closing-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--wb-accent);
    font-weight: 600;
    font-size: var(--wb-body-md);
    margin-top: auto;
}
.wb-closing-card__cta i { transition: transform 200ms ease; }
.wb-closing-card:hover .wb-closing-card__cta i { transform: translateX(4px); }

.wb-closing__trust {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--wb-text-muted);
    font-weight: 500;
    justify-content: center;
}
.wb-closing__trust li {
    position: relative;
    padding-left: 1rem;
}
.wb-closing__trust li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wb-accent);
}

/* ==========================================================================
   PASS 5 — INDUSTRIES IA (locked 2026-05-19)
   Hub: 3 lenses x 10 verticals (5 launched, 5 coming-soon).
   Page: hero (full-bleed photo + navy gradient) + 5 sections + dual CTA.
   ========================================================================== */

/* --- Hub: intro + lens groups --- */

.wb-industries-hub__intro p {
    font-size: var(--wb-text-lg);
    line-height: 1.55;
    color: var(--wb-text-secondary);
    margin: 0 0 0.9rem;
    max-width: 720px;
}

.wb-industries-hub__intro blockquote {
    border-left: 3px solid var(--wb-accent);
    padding: 0.25rem 0 0.25rem 1.1rem;
    margin: 1.25rem 0 0;
    font-size: var(--wb-text-lg);
    line-height: 1.5;
    color: var(--wb-slate-dark);
    font-style: italic;
    max-width: 720px;
}

.wb-industry-lens {
    padding: 4rem 0;
}

.wb-industry-lens__header {
    max-width: 760px;
    margin: 0 0 2.5rem;
}

.wb-industry-lens__eyebrow {
    font-size: var(--wb-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wb-accent);
    margin: 0 0 0.5rem;
}

.wb-industry-lens__h2 {
    font-family: var(--wb-font-primary);
    font-weight: 800;
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    line-height: 1.1;
    color: var(--wb-slate-dark);
    margin: 0 0 0.75rem;
}

.wb-industry-lens__blurb {
    font-size: var(--wb-text-md);
    line-height: 1.6;
    color: var(--wb-text-secondary);
    margin: 0;
    max-width: 640px;
}

/* --- Hub: card grid --- */

.wb-industry-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 992px) {
    .wb-industry-card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .wb-industry-card-grid { grid-template-columns: 1fr; }
}

.wb-industry-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1.75rem 1.6rem 1.6rem;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
    position: relative;
    overflow: hidden;
}

.wb-industry-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--wb-accent);
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 220ms ease;
}

.wb-industry-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 0, 0, 0.16);
    box-shadow: 0 10px 28px -16px rgba(26, 24, 60, 0.35);
}

.wb-industry-card:hover::before {
    transform: scaleX(1);
}

.wb-industry-card__tool {
    font-size: var(--wb-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wb-accent);
}

.wb-industry-card__badge {
    display: inline-block;
    width: max-content;
    font-size: var(--wb-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7a6d2e;
    background: #fff6d6;
    border: 1px solid #f1e3a0;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
}

.wb-industry-card__name {
    font-family: var(--wb-font-primary);
    font-weight: 700;
    font-size: var(--wb-text-xl);
    line-height: 1.2;
    color: var(--wb-slate-dark);
    margin: 0;
}

.wb-industry-card__description {
    font-size: var(--wb-text-base);
    line-height: 1.55;
    color: var(--wb-text-secondary);
    margin: 0;
    flex: 1;
}

.wb-industry-card__cta {
    margin-top: 0.4rem;
    font-size: var(--wb-text-sm);
    font-weight: 600;
    color: var(--wb-accent);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.wb-industry-card__cta i {
    transition: transform 180ms ease;
}

.wb-industry-card:hover .wb-industry-card__cta i {
    transform: translateX(3px);
}

.wb-industry-card--soon {
    background: #fcfbf6;
    border-style: dashed;
}

.wb-industry-card--soon::before { background: #d4b94f; }

.wb-industry-card--soon .wb-industry-card__cta { color: #7a6d2e; }

/* --- Hub: cross-cutting matrix --- */

.wb-industries-matrix {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

@media (max-width: 992px) {
    .wb-industries-matrix { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .wb-industries-matrix { grid-template-columns: 1fr; }
}

.wb-industries-matrix__cell {
    padding: 1.5rem 1.4rem;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-top: 3px solid var(--product-accent, var(--wb-accent));
}

.wb-industries-matrix__tool {
    font-size: var(--wb-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--product-accent, var(--wb-accent));
    margin: 0 0 0.4rem;
}

.wb-industries-matrix__where {
    font-size: var(--wb-text-base);
    line-height: 1.55;
    color: var(--wb-text-secondary);
    margin: 0;
}

/* --- Industry page: hero (full-bleed photo + navy gradient overlay) --- */

.wb-industry-hero {
    position: relative;
    min-height: 480px;
    padding: 6rem 0 4.5rem;
    background-color: #1a183c;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #ffffff;
}

@media (max-width: 768px) {
    .wb-industry-hero {
        min-height: 380px;
        padding: 4.5rem 0 3rem;
    }
}

.wb-industry-hero__crumbs {
    font-size: var(--wb-text-sm);
    margin-bottom: 2.5rem;
    color: rgba(255, 255, 255, 0.75);
}

.wb-industry-hero__crumbs a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
}

.wb-industry-hero__crumbs a:hover { color: #ffffff; }

.wb-industry-hero__crumbs span {
    margin: 0 0.45rem;
    color: rgba(255, 255, 255, 0.45);
}

.wb-industry-hero__crumbs span.is-current {
    margin: 0;
    color: #ffffff;
    font-weight: 600;
}

.wb-industry-hero__inner {
    max-width: 820px;
}

.wb-industry-hero__eyebrow {
    font-size: var(--wb-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 1rem;
}

.wb-industry-hero__h1 {
    font-family: var(--wb-font-primary);
    font-weight: 800;
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    line-height: 1.05;
    color: #ffffff;
    margin: 0 0 1.25rem;
    letter-spacing: -0.01em;
}

.wb-industry-hero__lede {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
    max-width: 760px;
}

/* --- Industry page: section heads --- */

.wb-industry-section { padding: 4.5rem 0; }

.wb-industry-section__head {
    max-width: 720px;
    margin: 0 0 2.25rem;
}

.wb-industry-section__eyebrow {
    font-size: var(--wb-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wb-accent);
    margin: 0 0 0.5rem;
}

.wb-industry-section__h2 {
    font-family: var(--wb-font-primary);
    font-weight: 800;
    font-size: clamp(1.6rem, 2.8vw, 2.15rem);
    line-height: 1.1;
    color: var(--wb-slate-dark);
    margin: 0;
}

/* --- Industry page: realities (asymmetric numbered paragraphs) --- */

.wb-industry-realities {
    counter-reset: reality;
    max-width: 820px;
}

.wb-industry-realities p {
    counter-increment: reality;
    position: relative;
    padding-left: 4rem;
    font-size: var(--wb-text-lg);
    line-height: 1.65;
    color: var(--wb-text-secondary);
    margin: 0 0 2rem;
}

.wb-industry-realities p::before {
    content: "0" counter(reality);
    position: absolute;
    left: 0;
    top: 0.05em;
    font-family: var(--wb-font-primary);
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--wb-accent);
    letter-spacing: -0.02em;
}

.wb-industry-realities p:nth-of-type(2) { max-width: 680px; }
.wb-industry-realities p:nth-of-type(3) { max-width: 620px; }

/* --- Industry page: SLAs (3 stacked emphasised items) --- */

.wb-industry-slas ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

@media (max-width: 900px) {
    .wb-industry-slas ul { grid-template-columns: 1fr; }
}

.wb-industry-slas li {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-top: 3px solid var(--wb-accent);
    border-radius: 10px;
    padding: 1.4rem 1.3rem;
    font-size: var(--wb-text-base);
    line-height: 1.55;
    color: var(--wb-text-secondary);
}

.wb-industry-slas li strong {
    display: block;
    color: var(--wb-slate-dark);
    font-weight: 700;
    margin-bottom: 0.4rem;
    font-size: var(--wb-text-md);
}

/* --- Industry page: tool fit (paragraphs with strong-led callouts) --- */

.wb-industry-toolfit {
    max-width: 820px;
}

.wb-industry-toolfit p {
    font-size: var(--wb-text-md);
    line-height: 1.65;
    color: var(--wb-text-secondary);
    margin: 0 0 1.2rem;
    padding-left: 1rem;
    border-left: 3px solid rgba(0, 0, 0, 0.08);
}

.wb-industry-toolfit p:nth-of-type(1) { border-left-color: #009DDF; }
.wb-industry-toolfit p:nth-of-type(2) { border-left-color: #6366f1; }
.wb-industry-toolfit p:nth-of-type(3) { border-left-color: #119971; }
.wb-industry-toolfit p:nth-of-type(4) { border-left-color: #6b7280; }

.wb-industry-toolfit p strong { color: var(--wb-slate-dark); font-weight: 700; }

/* --- Industry page: discovery questions (operator voice) --- */

.wb-industry-questions ul {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 820px;
}

.wb-industry-questions li {
    position: relative;
    padding: 1.2rem 0 1.2rem 2.75rem;
    font-size: var(--wb-text-lg);
    line-height: 1.55;
    color: var(--wb-slate-dark);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-style: italic;
}

.wb-industry-questions li:last-child { border-bottom: 0; }

.wb-industry-questions li::before {
    content: '\201C';
    position: absolute;
    left: 0;
    top: 0.6rem;
    font-family: Georgia, serif;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--wb-accent);
}

/* --- Industry page: credibility hook --- */

.wb-industry-credibility {
    max-width: 820px;
    padding: 2rem 2rem 2.1rem;
    background: #f8f7fb;
    border-left: 4px solid var(--wb-accent);
    border-radius: 4px;
}

.wb-industry-credibility__eyebrow {
    font-size: var(--wb-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wb-accent);
    margin: 0 0 0.65rem;
}

.wb-industry-credibility__body p {
    font-size: var(--wb-text-md);
    line-height: 1.65;
    color: var(--wb-slate-dark);
    margin: 0;
}

/* ==========================================================================
   Pass 7 — Cross-page polish (locked 2026-05-19)
   New shared patterns: full-bleed page heroes, half-bleed founder hero,
   mosaic-style product cards on /our-tools/, hardware diagram card on
   /hardware/ hub, footer industrial-credibility band.
   ========================================================================== */

/* --- Shared page hero (full-bleed image + navy overlay) --- */
/* Used by /our-tools/, /the-3pl-operating-system/, /hardware/ — mirrors the
   homepage hero pattern (.wb-hero--full-bleed) without the stats row. */

.wb-page-hero {
    position: relative;
    min-height: min(62vh, 540px);
    background-color: #1a183c;
    background-size: cover;
    background-position: center;
    color: #ffffff;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 88px 0 64px;
}

.wb-page-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(26, 24, 60, 0.92) 0%,
        rgba(26, 24, 60, 0.78) 45%,
        rgba(26, 24, 60, 0.4) 80%,
        rgba(26, 24, 60, 0.15) 100%);
    z-index: 1;
}

.wb-page-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 880px;
}

.wb-page-hero__eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 1.25rem;
    font-weight: 500;
}

.wb-page-hero__h1 {
    font-family: var(--wb-font-primary);
    font-size: var(--wb-display-xl);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 1.25rem;
    max-width: 22ch;
}

.wb-page-hero__sub {
    font-size: var(--wb-body-lg);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.86);
    margin: 0 0 2rem;
    max-width: 62ch;
}

.wb-page-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
}

.wb-page-hero__secondary-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--wb-body-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding-bottom: 2px;
    transition: border-color 0.2s ease;
}
.wb-page-hero__secondary-link:hover,
.wb-page-hero__secondary-link:focus-visible {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

/* --------------------------------------------------------------------------
   Standardised secondary hero link (Linear / Vercel pattern)
   Used on every hero section where we want a plain text link + arrow icon
   to sit next to a primary button. Two variants: on-dark and on-light.
   -------------------------------------------------------------------------- */
.wb-secondary-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--wb-accent, #1a183c);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--wb-body-md, 17px);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: gap 0.2s ease, opacity 0.2s ease;
}
.wb-secondary-link:hover,
.wb-secondary-link:focus-visible {
    color: var(--wb-accent, #1a183c);
    text-decoration: none;
    gap: 10px;
    opacity: 0.85;
}
.wb-secondary-link i {
    transition: transform 0.2s ease;
}
.wb-secondary-link:hover i {
    transform: translateX(2px);
}

/* On-dark variant — white text, white underline */
.wb-secondary-link--on-dark {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.4);
}
.wb-secondary-link--on-dark:hover,
.wb-secondary-link--on-dark:focus-visible {
    color: #ffffff;
    border-bottom-color: #ffffff;
    opacity: 1;
}

/* On-light variant — slate-dark text */
.wb-secondary-link--on-light {
    color: var(--wb-slate-dark, #1e2530);
    border-bottom-color: rgba(30, 37, 48, 0.3);
}
.wb-secondary-link--on-light:hover,
.wb-secondary-link--on-light:focus-visible {
    color: var(--wb-slate-dark, #1e2530);
    border-bottom-color: var(--wb-slate-dark, #1e2530);
    opacity: 1;
}

/* --- Half-bleed founder hero (/about/ + /the-3pl-operating-system/) --- */
/* Image right, copy left. 1px border, 12px radius, no drop shadow. */

.wb-founder-hero {
    padding: clamp(72px, 8vw, 112px) 0;
    background-color: #ffffff;
}

.wb-founder-hero__layout {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

@media (max-width: 992px) {
    .wb-founder-hero__layout { grid-template-columns: 1fr; }
}

.wb-founder-hero__copy { display: flex; flex-direction: column; }

.wb-founder-hero__eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--wb-accent);
    margin: 0 0 1rem;
    font-weight: 500;
}

.wb-founder-hero__h1 {
    font-family: var(--wb-font-primary);
    font-size: var(--wb-display-xl);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 600;
    color: var(--wb-slate-dark);
    margin: 0 0 1.25rem;
    max-width: 18ch;
}

.wb-founder-hero__sub {
    font-size: var(--wb-body-lg);
    line-height: 1.55;
    color: var(--wb-text-secondary);
    margin: 0 0 1.75rem;
    max-width: 52ch;
}

.wb-founder-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
}

.wb-founder-hero__image {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #f3f3f6;
}

.wb-founder-hero__image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.wb-founder-hero__caption {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--wb-text-secondary);
    margin: 0.85rem 0 0;
    font-weight: 500;
}

/* --- /our-tools/ : mosaic-style product cards --- */
/* Mirrors homepage .wb-mosaic / .wb-mosaic-tile but at single-column
   alternating layout (image + copy) on desktop, stacked on mobile.
   Each card carries 1px border at rest, --product-accent on hover. */

.wb-tools-section {
    padding: clamp(48px, 6vw, 80px) 0;
}

.wb-tools-section--tint { background-color: #f8f8fa; }
.wb-tools-section--white { background-color: #ffffff; }

.wb-tool-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
    padding: clamp(2rem, 3.5vw, 3rem);
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    transition: border-color 200ms ease, transform 200ms ease;
}

.wb-tool-card:hover {
    border-color: var(--product-accent, var(--wb-accent));
    transform: translateY(-2px);
}

.wb-tool-card--dark {
    background: #1a183c;
    border-color: rgba(255, 255, 255, 0.08);
}
.wb-tool-card--dark:hover {
    border-color: var(--product-accent, #ffffff);
}

@media (max-width: 992px) {
    .wb-tool-card { grid-template-columns: 1fr; }
}

.wb-tool-card--reverse .wb-tool-card__copy { order: 1; }
.wb-tool-card--reverse .wb-tool-card__image { order: 0; }
@media (max-width: 992px) {
    .wb-tool-card--reverse .wb-tool-card__copy { order: 1; }
    .wb-tool-card--reverse .wb-tool-card__image { order: 0; }
}

.wb-tool-card__head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0 0 1.25rem;
}

.wb-tool-card__logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 6px;
}

.wb-tool-card__wordmark {
    font-family: var(--wb-font-primary);
    font-size: 18px;
    font-weight: 600;
    color: var(--wb-slate-dark);
    letter-spacing: -0.01em;
}

.wb-tool-card--dark .wb-tool-card__wordmark { color: #ffffff; }

.wb-tool-card__eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--product-accent, var(--wb-accent));
    margin: 0 0 0.85rem;
    font-weight: 500;
}

.wb-tool-card__title {
    font-family: var(--wb-font-primary);
    font-size: var(--wb-display-md);
    line-height: 1.18;
    letter-spacing: -0.005em;
    font-weight: 600;
    color: var(--wb-slate-dark);
    margin: 0 0 1rem;
}

.wb-tool-card--dark .wb-tool-card__title { color: #ffffff; }

.wb-tool-card__body p {
    font-size: var(--wb-body-md);
    line-height: 1.65;
    color: var(--wb-text-secondary);
    margin: 0 0 1rem;
}

.wb-tool-card--dark .wb-tool-card__body p { color: rgba(255, 255, 255, 0.82); }

.wb-tool-card__benefit-num {
    font-family: var(--wb-font-primary);
    font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--product-accent, var(--wb-accent));
    margin: 1.25rem 0 0.5rem;
}
.wb-tool-card__benefit-num-label {
    display: block;
    font-family: var(--wb-font-body, 'Inter', system-ui, sans-serif);
    font-size: var(--wb-body-md, 17px);
    font-weight: 400;
    color: var(--wb-text-secondary);
    line-height: 1.55;
    letter-spacing: 0;
    margin-top: 0.25rem;
}
.wb-tool-card--dark .wb-tool-card__benefit-num-label {
    color: rgba(255, 255, 255, 0.82);
}

.wb-tool-card__spec {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    letter-spacing: 0.02em;
    color: var(--wb-text-secondary);
    background: #f8f8fa;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
    margin: 1rem 0 1.25rem;
}

.wb-tool-card--dark .wb-tool-card__spec {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

.wb-tool-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: var(--wb-body-md);
    color: var(--product-accent, var(--wb-accent));
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: gap 200ms ease;
}
.wb-tool-card__cta:hover,
.wb-tool-card__cta:focus-visible {
    gap: 10px;
    color: var(--product-accent, var(--wb-accent));
}

.wb-tool-card__image {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #f3f3f6;
}

.wb-tool-card--dark .wb-tool-card__image {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.wb-tool-card__image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* --- Hardware hub diagram card (re-used .wb-hw-diagram, in light context) --- */

.wb-hub-diagram-band {
    padding: clamp(56px, 6vw, 96px) 0;
    background-color: #ffffff;
}

.wb-hub-diagram-band__layout {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

@media (max-width: 992px) {
    .wb-hub-diagram-band__layout { grid-template-columns: 1fr; }
}

.wb-hub-diagram-band__copy { display: flex; flex-direction: column; }

.wb-hub-diagram-band__eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--wb-accent-hardware, #6b7280);
    margin: 0 0 1rem;
    font-weight: 500;
}

.wb-hub-diagram-band__h2 {
    font-family: var(--wb-font-primary);
    font-size: var(--wb-display-lg);
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-weight: 600;
    color: var(--wb-slate-dark);
    margin: 0 0 1.25rem;
    max-width: 20ch;
}

.wb-hub-diagram-band__sub {
    font-size: var(--wb-body-md);
    line-height: 1.65;
    color: var(--wb-text-secondary);
    margin: 0 0 1.25rem;
    max-width: 56ch;
}

.wb-hub-diagram-band__credit {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wb-text-secondary);
    margin: 0.5rem 0 0;
}

.wb-hub-diagram-band__diagram-wrap {
    background: #f8f8fa;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    padding: clamp(1.5rem, 3vw, 2.5rem);
}

/* --- Hardware product page: 1px card discipline on specs + pairs-with --- */

.wb-hardware-specs {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: #ffffff;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    margin: 0;
}

.wb-hardware-specs table,
.wb-hardware-specs ul {
    margin-bottom: 0;
}

.wb-hardware-specs td,
.wb-hardware-specs th {
    border-color: rgba(0, 0, 0, 0.06);
}

.wb-hardware-pairs {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: #ffffff;
    padding: clamp(1.5rem, 2.5vw, 2rem);
}

/* --- Method stages list — numbered eyebrow markers, no arrows ---
   For the about-page "The method" section. Five-row vertical list with
   mono numbers + named tools. Replaces the 2014 arrow-chain. */
.wb-method-stages {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 540px;
    display: grid;
    gap: 0.75rem;
    text-align: left;
}
.wb-method-stages__step {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: baseline;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}
.wb-method-stages__num {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.65);
}
.wb-method-stages__sep {
    color: rgba(255, 255, 255, 0.35);
}
.wb-method-stages__name {
    font-family: var(--wb-font-primary);
    font-weight: 700;
    font-size: var(--wb-body-lg, 18px);
    color: #ffffff;
}
.wb-method-stages__tool {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.55);
    text-align: right;
}
@media (max-width: 600px) {
    .wb-method-stages__step {
        grid-template-columns: auto auto 1fr;
    }
    .wb-method-stages__tool {
        grid-column: 1 / -1;
        text-align: left;
        padding-left: 2rem;
        margin-top: 0.15rem;
    }
}

/* --- Pricing benchmark — clearly NOT our price (italic, lighter, labelled) --- */
.wb-pricing-benchmark {
    margin: 1.25rem 0 0;
    padding: 1rem 1.25rem;
    background: rgba(15, 23, 42, 0.03);
    border-left: 3px solid rgba(15, 23, 42, 0.15);
    border-radius: 0 8px 8px 0;
}
.wb-pricing-benchmark__label {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--wb-text-muted, #5c6b7f);
    margin: 0 0 0.5rem;
}
.wb-pricing-benchmark__body {
    font-size: var(--wb-text-base, 15px);
    font-style: italic;
    line-height: 1.6;
    color: var(--wb-text-secondary);
}
.wb-pricing-benchmark__body p {
    margin: 0;
}
.wb-pricing-benchmark__body p + p {
    margin-top: 0.5rem;
}
.wb-pricing-benchmark__body strong {
    font-style: normal;
    color: var(--wb-slate-dark);
}

/* --- About page: 1px card discipline + small polish --- */

.wb-about__prose blockquote.wb-about__quote {
    border-left-color: var(--quote-accent, var(--wb-accent));
    border-radius: 0 8px 8px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.wb-about__avatar-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin-top: 1.5rem;
}

.wb-about__avatar-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-size: var(--wb-body-sm, 14px);
    color: var(--wb-text-secondary);
}

.wb-about__avatar-chip img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.wb-about__avatar-chip strong {
    color: var(--wb-slate-dark);
    font-weight: 600;
}

/* Founder detail cards — 1px discipline */
.wb-founder-detail {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: #ffffff;
    padding: clamp(1.5rem, 2.5vw, 2rem);
    height: 100%;
    transition: border-color 200ms ease;
}
.wb-founder-detail:hover {
    border-color: rgba(26, 24, 60, 0.4);
}

/* --- Footer industrial-credibility band (Move 14) --- */

.wb-footer__industrial {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 0;
    margin: 24px 0 16px;
}

.wb-footer__industrial-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
}

.wb-footer__industrial-credit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.wb-footer__industrial-credit strong {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 600;
}

.wb-footer__industrial-divider {
    color: rgba(255, 255, 255, 0.25);
    user-select: none;
}

/* --- Methodology page (TOPS) per-stage thumbnail cards --- */
/* Re-uses .wb-os-stage pattern; thin five-step preview rail at top. */

.wb-method-preview {
    padding: clamp(48px, 6vw, 80px) 0;
    background-color: #f8f8fa;
}

.wb-method-preview__intro {
    max-width: 720px;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.wb-method-preview__eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--wb-accent);
    margin: 0 0 1rem;
    font-weight: 500;
}

.wb-method-preview__h2 {
    font-family: var(--wb-font-primary);
    font-size: var(--wb-display-lg);
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-weight: 600;
    color: var(--wb-slate-dark);
    margin: 0;
}

.wb-method-rail {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

@media (max-width: 1100px) {
    .wb-method-rail { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .wb-method-rail { grid-template-columns: 1fr; }
}

.wb-method-rail__step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1.25rem 1.25rem 1.5rem;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-top: 3px solid var(--product-accent, var(--wb-accent));
    border-radius: 10px;
    transition: transform 200ms ease, border-color 200ms ease;
}
.wb-method-rail__step:hover { transform: translateY(-2px); }

.wb-method-rail__number {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--product-accent, var(--wb-accent));
    font-weight: 500;
    text-transform: uppercase;
}

.wb-method-rail__h3 {
    font-family: var(--wb-font-primary);
    font-size: 22px;
    line-height: 1.18;
    font-weight: 600;
    color: var(--wb-slate-dark);
    margin: 0.25rem 0 0.5rem;
    letter-spacing: -0.005em;
}

.wb-method-rail__product {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 13px;
    color: var(--wb-text-secondary);
    margin: 0;
}
.wb-method-rail__product img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 4px;
}

.wb-method-rail__body {
    font-size: 14px;
    line-height: 1.5;
    color: var(--wb-text-secondary);
    margin: 0.5rem 0 0;
}

/* --- Generic 1px card discipline override for any leftover .wb-our-tools__product --- */

.wb-our-tools__product {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    background: #ffffff;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    transition: border-color 200ms ease;
}

.wb-section .wb-our-tools__product:hover {
    border-color: var(--product-accent, rgba(26, 24, 60, 0.4));
}

.wb-our-tools__product--dark {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}
.wb-our-tools__product--dark:hover {
    border-color: var(--product-accent, rgba(255, 255, 255, 0.4));
}

/* ==========================================================================
   /3pl-assessment/ — Priestley carousel
   Locked 2026-05-19. One question per screen, persistent progress bar,
   auto-advance on answer, localStorage state preservation.
   ========================================================================== */

/* Intro band — tight, deliberately quiet so the carousel does the work */
.wb-scorecard-intro {
    background: var(--wb-slate-dark);
    color: #ffffff;
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
}

.wb-scorecard-intro__inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 var(--wb-container-padding, 32px);
}

/* The eyebrow that was reading blue-on-navy. Force white + white icon. */
.wb-scorecard-intro__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0.4rem 0.85rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #ffffff;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.wb-scorecard-intro__eyebrow i {
    color: #ffffff;
    font-size: 14px;
    line-height: 1;
}

.wb-scorecard-intro__h1 {
    font-family: var(--wb-font-primary);
    font-weight: 800;
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    line-height: 1.06;
    letter-spacing: -0.015em;
    color: #ffffff;
    margin: 0 0 1rem;
}

.wb-scorecard-intro__lede {
    font-size: var(--wb-text-md);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
    max-width: 680px;
}

@media (max-width: 600px) {
    .wb-scorecard-intro__lede { font-size: var(--wb-text-base); }
}

/* The stage — wraps progress bar + carousel + nav into one card */
.wb-scorecard-section { padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 5rem); }

.wb-scorecard-stage {
    max-width: 780px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-xl);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.04);
}

/* Header: progress bar + counter, then dimension eyebrow */
.wb-scorecard-stage__head {
    margin: 0 0 clamp(1.5rem, 3vw, 2rem);
}

.wb-scorecard-stage__progress {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1rem;
}

.wb-scorecard-stage__bar {
    flex: 1;
    height: 6px;
    background: rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

.wb-scorecard-stage__fill {
    display: block;
    height: 100%;
    background: var(--product-accent, var(--wb-accent));
    border-radius: 999px;
    transition: width 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.25s ease;
    /* Pick up the active slide's product accent through the eyebrow's --product-accent */
}

.wb-scorecard-stage__counter {
    margin: 0;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--wb-text-secondary);
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.wb-scorecard-stage__counter-sep { color: var(--wb-text-muted); margin: 0 0.1rem; }

/* Dimension eyebrow — sits under the progress bar, picks up product accent */
.wb-scorecard-stage__eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    font-family: var(--wb-font-primary);
    font-size: var(--wb-text-sm);
    color: var(--wb-text-secondary);
}
.wb-scorecard-stage__eyebrow-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 0.45rem;
    border-radius: 6px;
    background: var(--product-accent, var(--wb-accent));
    color: #ffffff;
    font-weight: 800;
    font-size: 12px;
    line-height: 1;
}
.wb-scorecard-stage__eyebrow-label {
    font-weight: 800;
    color: var(--wb-slate-dark);
    font-size: 0.95rem;
    letter-spacing: -0.005em;
}
.wb-scorecard-stage__eyebrow-tag {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 10px;
    color: var(--product-accent, var(--wb-accent));
    font-weight: 600;
    margin-left: auto;
}

@media (max-width: 520px) {
    .wb-scorecard-stage__eyebrow-tag {
        margin-left: 0;
        width: 100%;
        order: 3;
    }
}

/* Carousel viewport */
.wb-scorecard-carousel {
    position: relative;
    overflow: hidden;
    /* Slides position themselves with display: none / display: block — */
    /* the slide transition animates via opacity + transform on the active one */
}

/* The single-question slide */
.wb-q {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
    display: none; /* hidden by default */
    /* Animate enter via the .wb-q--active modifier */
}

.wb-q--active {
    display: block;
    animation: wb-q-enter 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.wb-scorecard-carousel--back .wb-q--active {
    animation-name: wb-q-enter-back;
}

@keyframes wb-q-enter {
    0%   { opacity: 0; transform: translateX(18px); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes wb-q-enter-back {
    0%   { opacity: 0; transform: translateX(-18px); }
    100% { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .wb-q--active { animation: none; }
}

/* Subtle horizontal shake when user tries to advance without an answer */
.wb-q--nudge { animation: wb-q-nudge 360ms ease-in-out; }
@keyframes wb-q-nudge {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    50% { transform: translateX(6px); }
    75% { transform: translateX(-3px); }
}
@media (prefers-reduced-motion: reduce) {
    .wb-q--nudge { animation: none; }
}

/* The question legend (display heading) */
.wb-q__legend {
    display: block;
    padding: 0;
    margin: 0 0 1.5rem;
    width: 100%;
}

.wb-q__index {
    display: inline-block;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--wb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 0.65rem;
}

.wb-q__prompt {
    display: block;
    font-family: var(--wb-font-primary);
    font-weight: 700;
    font-size: clamp(1.5rem, 3.5vw, var(--wb-display-lg));
    line-height: 1.18;
    letter-spacing: -0.015em;
    color: var(--wb-slate-dark);
    margin: 0;
}

/* Answer options — large tappable cards */
.wb-q__options {
    display: grid;
    gap: 0.55rem;
}

.wb-q__opt {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.95rem 1.1rem;
    background: #ffffff;
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-lg);
    color: var(--wb-text-secondary);
    cursor: pointer;
    font-size: var(--wb-text-base);
    line-height: 1.45;
    transition: border-color 0.15s ease, background-color 0.15s ease,
                box-shadow 0.15s ease, transform 0.15s ease;
}
.wb-q__opt:hover {
    border-color: var(--product-accent, var(--wb-accent));
    background: rgba(15, 23, 42, 0.02);
}
.wb-q__opt:focus-within {
    outline: 2px solid var(--product-accent, var(--wb-accent));
    outline-offset: 2px;
}
.wb-q__opt input[type="radio"] {
    margin-top: 0.25rem;
    flex-shrink: 0;
    accent-color: var(--product-accent, var(--wb-accent));
    width: 18px;
    height: 18px;
}
.wb-q__opt span { display: block; }

/* Selected state */
.wb-q__opt:has(input[type="radio"]:checked) {
    background: rgba(15, 23, 42, 0.025);
    border-color: var(--product-accent, var(--wb-accent));
    color: var(--wb-slate-dark);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--product-accent, var(--wb-accent));
}

/* Email gate slide */
.wb-q--gate {
    text-align: left;
}
.wb-q__gate-blurb {
    margin: 0 0 1.25rem;
    font-size: var(--wb-text-md);
    line-height: 1.6;
    color: var(--wb-text-secondary);
    max-width: 580px;
}
.wb-q__gate-form {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 0 0 1rem;
}
.wb-q__gate-form input[type="email"] {
    flex: 1 1 280px;
    min-width: 0;
    padding: 0.85rem 1rem;
    font-size: var(--wb-text-md);
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-md);
    background: #ffffff;
    color: var(--wb-slate-dark);
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wb-q__gate-form input[type="email"]:focus {
    outline: none;
    border-color: var(--wb-accent);
    box-shadow: 0 0 0 3px rgba(26, 24, 60, 0.12);
}
.wb-q__gate-form .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}
.wb-q__gate-fine {
    margin: 0;
    font-size: var(--wb-text-sm);
    color: var(--wb-text-muted);
    max-width: 580px;
}

/* Persistent nav row */
.wb-scorecard-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.75rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--wb-border);
}

.wb-scorecard-nav__back,
.wb-scorecard-nav__next {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 1rem;
    border-radius: var(--wb-radius-md);
    border: 1px solid var(--wb-border);
    background: #ffffff;
    color: var(--wb-text-secondary);
    font-family: var(--wb-font-primary);
    font-size: var(--wb-text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.wb-scorecard-nav__back {
    margin-right: auto;
}
.wb-scorecard-nav__back:hover {
    color: var(--wb-slate-dark);
    border-color: var(--wb-text-muted);
}

.wb-scorecard-nav__next {
    margin-left: auto;
    color: var(--wb-slate-dark);
    border-color: var(--wb-slate-dark);
}
.wb-scorecard-nav__next:hover {
    background: var(--wb-slate-dark);
    color: #ffffff;
}

.wb-scorecard-nav__back[hidden],
.wb-scorecard-nav__next[hidden] {
    display: none;
}

/* Fine-print under the stage */
.wb-scorecard-stage__assurance {
    max-width: 780px;
    margin: 1.5rem auto 0;
    text-align: center;
    font-size: var(--wb-text-sm);
    color: var(--wb-text-muted);
    line-height: 1.55;
}

/* Email confirmation block on results page */
.wb-scorecard__email-confirm {
    background: var(--wb-bg-white);
    border: 1px solid var(--wb-border);
    border-left: 4px solid var(--wb-success, #34a853);
    border-radius: var(--wb-radius-xl);
    padding: 1.5rem 1.75rem;
    margin: 0 0 1.5rem;
}
.wb-scorecard__email-confirm h3 {
    font-family: var(--wb-font-primary);
    font-weight: 800;
    font-size: var(--wb-text-xl);
    color: var(--wb-slate-dark);
    margin: 0 0 0.4rem;
}
.wb-scorecard__email-confirm h3 span {
    color: var(--wb-accent);
}
.wb-scorecard__email-confirm p {
    margin: 0;
    font-size: var(--wb-text-base);
    line-height: 1.55;
    color: var(--wb-text-secondary);
}

/* Screen-reader-only utility (reused if not already defined elsewhere) */
.wb-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Mobile refinements */
@media (max-width: 600px) {
    .wb-scorecard-stage {
        padding: 1.25rem;
        border-radius: var(--wb-radius-lg);
    }
    .wb-q__prompt {
        font-size: clamp(1.35rem, 6vw, 1.75rem);
    }
    .wb-q__opt {
        padding: 0.85rem 0.95rem;
    }
    .wb-scorecard-nav {
        margin-top: 1.25rem;
        padding-top: 1rem;
    }
}

/* Reduced-motion compliance is already handled at top with the IO targets. */