/* ==========================================================================
   bl-path: connected step cards (Design Baseline, 2026-10-24)
   Reference: dovystudio.com "how it works" (screenshot from Lauren). Pattern only.
   Brightly filled cards, staggered, joined by one continuous line drawn on scroll.
   Standalone: needs no baseline.css. A site sets the --path-* variables on .bl-path
   (or a wrapper) and that's the whole re-skin.
   Rules kept: full colour fills, no border (#13), no top/side stripes, no gradients,
   no glow, no emoji, text on colour >= 4.5:1, max one badge.
   ========================================================================== */
.bl-path {
  /* palette: each site overrides these */
  --path-bg: #0A211F;            /* section background (dark reads best, light works) */
  --path-ink: #F7F9F2;           /* head text on --path-bg */
  --path-ink-2: #C9D3CF;         /* dek on --path-bg (AA on default bg) */
  --path-line: #F7F9F2;          /* connector colour */
  --path-line-w: 5;              /* connector width, px (unitless, used in SVG) */
  --path-1: #D8FF85; --on-path-1: #0A211F;
  --path-2: #FFA3C4; --on-path-2: #2A0E1A;
  --path-3: #2F55D4; --on-path-3: #FFFFFF;
  --path-4: #F26B2E; --on-path-4: #1C0A02;
  --path-5: #8DFDBA; --on-path-5: #0A211F;
  --path-6: #A9C6FF; --on-path-6: #0E1E45;
  --path-badge-bg: #FFFFFF; --path-badge-ink: #111111;
  --path-radius: 20px;
  --path-font: var(--font-sans, "Inter Tight", system-ui, sans-serif);
  --path-pad-y: clamp(72px, 9vw, 128px);

  background: var(--path-bg);
  color: var(--path-ink);
  padding: var(--path-pad-y) 0;
  overflow: clip; overflow-clip-margin: 0px; /* the full-bleed line runs off both page edges (and, on phones, past top/bottom); the section clips it, so no horizontal scroll */
  font-family: var(--path-font);
}
.bl-path-wrap { max-width: var(--container, 1216px); margin: 0 auto; padding: 0 32px; }

/* head: split, left-weighted (not centred) */
.bl-path-head { display: grid; gap: 16px 64px; margin-bottom: clamp(48px, 6vw, 80px); align-items: end; }
.bl-path-head .bl-path-eyebrow { margin: 0; font: 400 14px/1.54 var(--path-font); letter-spacing: .15em; text-transform: uppercase; color: var(--path-ink-2); }
.bl-path-head h2 { margin: 0; font: 400 clamp(32px, 4vw, 48px)/1.17 var(--path-font); letter-spacing: .1px; max-width: 22ch; text-wrap: balance; color: var(--path-ink); }
.bl-path-head .bl-path-dek { margin: 0; font: 400 18px/1.5 var(--path-font); max-width: 46ch; color: var(--path-ink-2); text-wrap: pretty; }
@media (min-width: 900px) { .bl-path-head { grid-template-columns: 1.1fr 1fr; } .bl-path-head .bl-path-eyebrow { grid-column: 1 / -1; } }

/* stage = line layer + list */
.bl-path-stage { position: relative; }
.bl-path-line { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; max-height: none; /* JS widens it to the full viewport: left = -stage offset, width = 100vw (beats svg{max-width:100%} resets) */ overflow: visible; pointer-events: none; z-index: 0; }
.bl-path-line path { fill: none; stroke: var(--path-line); stroke-linecap: round; stroke-linejoin: round; }
.bl-path-list { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 32px; counter-reset: none; }
.bl-path-item { position: relative; }

/* colour per card: auto by position, or .c1-.c6 to pin */
.bl-path-item:nth-child(6n+1), .bl-path-item.c1 { --c: var(--path-1); --on: var(--on-path-1); }
.bl-path-item:nth-child(6n+2), .bl-path-item.c2 { --c: var(--path-2); --on: var(--on-path-2); }
.bl-path-item:nth-child(6n+3), .bl-path-item.c3 { --c: var(--path-3); --on: var(--on-path-3); }
.bl-path-item:nth-child(6n+4), .bl-path-item.c4 { --c: var(--path-4); --on: var(--on-path-4); }
.bl-path-item:nth-child(6n+5), .bl-path-item.c5 { --c: var(--path-5); --on: var(--on-path-5); }
.bl-path-item:nth-child(6n+6), .bl-path-item.c6 { --c: var(--path-6); --on: var(--on-path-6); }

.bl-path-card {
  position: relative; display: flex; flex-direction: column; gap: 16px;
  background: var(--c); color: var(--on);
  border: 0; border-radius: var(--path-radius); box-shadow: none;
  padding: 24px; min-height: 260px; text-decoration: none;
  transition: transform 200ms cubic-bezier(.4,0,.2,1);
}
a.bl-path-card:hover { transform: translateY(-4px); }
a.bl-path-card:focus-visible { outline: 3px solid var(--path-line); outline-offset: 4px; }
.bl-path-num { font: 600 14px/1 var(--path-font); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.bl-path-media { margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--on) 12%, var(--c)); }
.bl-path-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bl-path-body { margin-top: auto; display: grid; gap: 8px; }
.bl-path-body h3 { margin: 0; font: 500 clamp(24px, 2.2vw, 30px)/1.1 var(--path-font); letter-spacing: -.01em; text-wrap: balance; color: inherit; }
.bl-path-body p { margin: 0; font: 400 15px/1.45 var(--path-font); max-width: 34ch; text-wrap: pretty; color: inherit; }
.bl-path-go { position: absolute; right: 20px; bottom: 20px; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: var(--on); color: var(--c); }
.bl-path-go svg { width: 16px; height: 16px; }
a.bl-path-card .bl-path-body { padding-right: 48px; }

/* the one badge: plain wording, solid fill, no gradient, no outline, no glow */
.bl-path-badge { position: absolute; top: -14px; right: 18px; padding: 8px 14px; border-radius: 999px; background: var(--path-badge-bg); color: var(--path-badge-ink); font: 600 13px/1 var(--path-font); letter-spacing: .02em; transform: rotate(4deg); white-space: nowrap; }

/* ---- phone (< 720): stack, line runs down the left gutter and branches into each card ---- */
@media (max-width: 719.98px) {
  .bl-path-wrap { padding: 0 16px; }
  .bl-path-list { padding-left: 36px; gap: 24px; }
  .bl-path-card { min-height: 0; }
  .bl-path-body h3 { font-size: 24px; }
  .bl-path-head .bl-path-dek { font-size: 16px; }
  .bl-path-head { margin-bottom: 40px; gap: 16px; }
  .bl-path:not(.bl-path--no-line) .bl-path-head { padding-left: 36px; } /* head sits in line with the cards, clear of the full-height spine */
}

/* ---- mid (720-1023, and 5-6 cards up to 1279): vertical zigzag, two lanes ---- */
@media (min-width: 720px) {
  .bl-path-list { gap: 28px; }
  .bl-path-item { width: 60%; }
  .bl-path-item:nth-child(even) { align-self: flex-end; }
  .bl-path-item:nth-child(odd) { transform: rotate(-1.2deg); }
  .bl-path-item:nth-child(even) { transform: rotate(1.2deg); }
}

/* ---- wide (>= 1024 for 3-4 cards, >= 1280 for 5-6): one staggered row ---- */
@media (min-width: 1024px) {
  .bl-path[data-n="3"] .bl-path-list, .bl-path[data-n="4"] .bl-path-list,
  .bl-path:not([data-n]) .bl-path-list {
    display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 44px; padding-bottom: 88px;
  }
  .bl-path[data-n="3"] .bl-path-item, .bl-path[data-n="4"] .bl-path-item, .bl-path:not([data-n]) .bl-path-item { width: auto; align-self: start; }
  .bl-path[data-n="3"] .bl-path-item:nth-child(even), .bl-path[data-n="4"] .bl-path-item:nth-child(even),
  .bl-path:not([data-n]) .bl-path-item:nth-child(even) { transform: translateY(88px) rotate(2deg); }
  .bl-path[data-n="3"] .bl-path-item:nth-child(odd), .bl-path[data-n="4"] .bl-path-item:nth-child(odd),
  .bl-path:not([data-n]) .bl-path-item:nth-child(odd) { transform: rotate(-2deg); }
  .bl-path[data-n="3"] .bl-path-card, .bl-path[data-n="4"] .bl-path-card { min-height: 340px; }
  .bl-path[data-n="3"] { --n: 3; } .bl-path[data-n="4"] { --n: 4; }
}
/* 5-6 cards: never one cramped row; a two-lane brick zigzag that tightens on wide screens */
@media (min-width: 1024px) {
  .bl-path[data-n="5"] .bl-path-item, .bl-path[data-n="6"] .bl-path-item { width: 44%; }
  .bl-path[data-n="5"] .bl-path-item + .bl-path-item, .bl-path[data-n="6"] .bl-path-item + .bl-path-item { margin-top: -96px; }
  .bl-path[data-n="5"] .bl-path-item:nth-child(even), .bl-path[data-n="6"] .bl-path-item:nth-child(even) { margin-right: 2%; }
  .bl-path[data-n="5"] .bl-path-item:nth-child(odd), .bl-path[data-n="6"] .bl-path-item:nth-child(odd) { margin-left: 2%; }
  .bl-path[data-n="5"] .bl-path-card, .bl-path[data-n="6"] .bl-path-card { min-height: 220px; }
}
/* opt out of the tilt */
.bl-path[data-tilt="off"] .bl-path-item { rotate: none; }
@media (min-width: 720px) {
  .bl-path[data-tilt="off"] .bl-path-item:nth-child(odd) { transform: none; }
  .bl-path[data-tilt="off"] .bl-path-item:nth-child(even) { transform: none; }
}
@media (min-width: 1024px) {
  .bl-path[data-tilt="off"][data-n="3"] .bl-path-item:nth-child(even), .bl-path[data-tilt="off"][data-n="4"] .bl-path-item:nth-child(even) { transform: translateY(88px); }
}

/* scroll arming (only when JS runs and motion is allowed) */
.bl-path-card { opacity: 1; } /* never hidden by default: no-JS, crawlers and full-page captures see every card */
.bl-path.is-armed .bl-path-item.is-in .bl-path-card { animation: bl-path-in 560ms cubic-bezier(0,0,.2,1) both; }
@keyframes bl-path-in { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) {
  .bl-path .bl-path-card, .bl-path.is-armed .bl-path-card { opacity: 1 !important; transform: none !important; transition: none !important; }
}