/* Fleet components v1 (2026-11-05). Pair with tokens.css. All colours come from --nx* tokens, so one component set
   serves every niche. Centered by default; orphan items on a wrapped last row are centered (flex + justify-content:center).
   No decorative numerals: process steps use motif icons + a plan line, never 01/02/03. Motion: one ease, reduced-motion safe. */

/* niche badge: two motif icons + the niche hook, sits above the hero eyebrow */
.nx-badge{display:inline-flex;align-items:center;gap:12px;margin:0 auto 1.4rem;padding:8px 18px 8px 8px;border:1px solid var(--nx-line);border-radius:999px;background:var(--nx-soft);color:inherit;max-width:100%}
.nx-badge__ics{display:inline-flex;align-items:center;flex:none}
.nx-badge__ic{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--nx);color:var(--nx-on)}
.nx-badge__ic+.nx-badge__ic{margin-left:-8px;box-shadow:0 0 0 2px var(--nx-ring,#0e0f11)}
.nx-badge__ic .nxm{width:20px;height:20px}
.nx-badge__t{font-weight:600;font-size:.95rem;line-height:1.3;text-align:left}
@media(max-width:420px){.nx-badge{gap:10px;padding-right:14px}.nx-badge__t{font-size:.86rem}}

/* motif entrance: the one orchestrated moment (badge icons settle in) */
@media (prefers-reduced-motion:no-preference){
  .nx-badge__ic{animation:nx-pop .7s var(--nx-ease) both}
  .nx-badge__ic+.nx-badge__ic{animation-delay:.12s}
  @keyframes nx-pop{from{transform:translateY(8px) scale(.85);opacity:0}to{transform:none;opacity:1}}
}

/* section divider: niche pattern band (lemons, road line, lanes, timecard ticks, hazard stripes, paws, smiles, vertebrae) */
.nx-div{height:28px;background-image:var(--nx-div);background-repeat:repeat-x;background-position:center;opacity:.85}
[data-niche="wc"] .nx-div{height:10px;background-image:repeating-linear-gradient(-45deg,var(--nx) 0 12px,transparent 12px 24px);opacity:.9}
.nx-div--hair{height:1px;background:var(--nx-line)}

/* motif tiles (icon chips that echo the niche) */
.nx-ic{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--nx-soft);color:var(--nx);flex:none}
.nx-ic .nxm{width:24px;height:24px}

/* process steps (sequence is real content, so the order is shown by the plan line, not numerals) */
.nx-steps{display:flex;flex-wrap:wrap;justify-content:center;gap:28px;position:relative}
.nx-steps>li{list-style:none;flex:0 1 280px;text-align:center;position:relative;padding-top:8px}
.nx-steps>li .nx-ic{margin:0 auto 14px}
@media(min-width:900px){.nx-steps::before{content:"";position:absolute;left:14%;right:14%;top:30px;height:1px;background:var(--nx-line)}
  .nx-steps>li .nx-ic{position:relative;z-index:1;box-shadow:0 0 0 8px var(--nx-step-bg,#fff)}}

/* sticky mobile CTA: phone-width only; fleet.js hides it while the form is on screen */
.nx-mcta{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:10px;justify-content:center;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--nx-mcta-bg,rgba(14,15,17,.92));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--nx-line);transition:transform .28s var(--nx-ease)}
.nx-mcta a{flex:1 1 0;max-width:340px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 16px;border-radius:12px;font-weight:600;text-decoration:none;background:var(--nx);color:var(--nx-on)}
.nx-mcta a.nx-mcta__alt{background:transparent;color:inherit;border:1px solid var(--nx-line)}
.nx-mcta a .nxm,.nx-mcta a svg{width:18px;height:18px}
.nx-mcta.is-hidden{transform:translateY(110%)}
@media(min-width:900px){.nx-mcta{display:none}}
@media(max-width:899px){body.has-mcta{padding-bottom:76px}}