/* Section 6 — three lanes, one system.
 *
 * The unit is the hero object: one photograph, full width of the section,
 * with three overlays cut at the seams measured off the asset. Hovering a
 * lane lifts its channel and settles the other two; nothing moves, nothing
 * pulses, and the meters are a photograph rather than an animation.
 */

.sblane {
  --ln-ink: var(--sb-ground);
  --ln-brass: var(--sb-gold);
  --ln-brass-lit: var(--sb-gold-bright);
  --ln-ivory: var(--sb-ink);
  --ln-muted: var(--sb-ink-2);
  --ln-line: rgb(201 168 106 / 0.24);

  background: var(--ln-ink);
  color: var(--ln-ivory);
  padding: clamp(60px, 8vw, 116px) 0 clamp(52px, 6vw, 88px);
}

/* The page's shared container and gutter. Was 1560px / 52px. */
.sblane-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}

/* --- head ---------------------------------------------------------------- */
.sblane-head { text-align: center; }

.sblane-eyebrow {
  margin: 0;
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ln-brass);
}

.sblane-title {
  margin: 16px 0 0;
  font-size: clamp(1.8rem, 3.1vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--ln-ivory);
}
.sblane-title span { display: block; }

.sblane-support {
  margin: 18px auto 0;
  max-width: 740px;
  font-size: clamp(14px, 1vw, 16.5px);
  line-height: 1.6;
  color: var(--ln-muted);
}

/* --- the unit ------------------------------------------------------------ */
.sblane-rail { margin-top: clamp(30px, 4vw, 60px); }

.sblane-unit {
  position: relative;
  isolation: isolate;
}
.sblane-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1626 / 892;
}

/* Three overlays cut at the real seams, so the light lands on the
   channel the reader is pointing at rather than on a rough third. */
.sblane-channels { position: absolute; inset: 0; display: flex; }
.sblane-channel {
  display: block;
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.sblane-channel:nth-child(1) { width: calc(var(--sblane-seam-1) * 100%); }
.sblane-channel:nth-child(2) { width: calc((var(--sblane-seam-2) - var(--sblane-seam-1)) * 100%); }
.sblane-channel:nth-child(3) { width: calc((1 - var(--sblane-seam-2)) * 100%); }

/* --- the summaries ------------------------------------------------------- */
.sblane-summaries {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
@media (min-width: 860px) {
  /* Aligned to the channels above rather than to equal thirds. */
  .sblane-summaries {
    grid-template-columns:
      calc(var(--sblane-seam-1, 0.337) * 100%)
      calc((var(--sblane-seam-2, 0.6553) - var(--sblane-seam-1, 0.337)) * 100%)
      auto;
    gap: 0;
  }
}

.sblane-summary { min-width: 0; }

.sblane-link {
  display: grid;
  gap: 0;
  height: 100%;
  padding: 22px clamp(14px, 1.6vw, 28px) 24px;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid var(--ln-line);
  transition: background-color 200ms ease, border-color 200ms ease;
}
.sblane-summary + .sblane-summary .sblane-link { border-left: 1px solid rgb(238 233 223 / 0.08); }

.sblane-num {
  font-size: clamp(11px, 0.8vw, 12.5px);
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--ln-brass);
}
.sblane-name {
  margin-top: 8px;
  font-size: clamp(17px, 1.5vw, 23px);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--ln-ivory);
}
.sblane-subline {
  margin-top: 3px;
  font-size: clamp(12px, 0.85vw, 13.5px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ln-brass);
  opacity: 0.75;
  transition: opacity 200ms ease;
}
.sblane-desc {
  margin-top: 12px;
  max-width: 46ch;
  font-size: clamp(13px, 0.92vw, 14.5px);
  line-height: 1.6;
  color: var(--ln-muted);
  transition: color 200ms ease;
}
.sblane-cta {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: clamp(11.5px, 0.82vw, 13px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ln-brass);
  transition: color 200ms ease;
}
.sblane-cta svg { width: 14px; height: 14px; }

/* --- one lane at a time -------------------------------------------------- */
/* The selected channel takes a warm lift; the other two settle. Both are
   a few per cent - this is a photograph of metal, not a light show. */
.sblane-unit[data-active] .sblane-channel { background: rgb(10 10 9 / 0.42); }
.sblane-unit[data-active="distribution"] .sblane-channel:nth-child(1),
.sblane-unit[data-active="development"] .sblane-channel:nth-child(2),
.sblane-unit[data-active="partnership"] .sblane-channel:nth-child(3) {
  background: rgb(201 168 106 / 0.10);
  box-shadow: inset 0 0 40px rgb(224 196 140 / 0.16);
}

.sblane-link:hover,
.sblane-link:focus-visible,
.sblane-summary.is-active .sblane-link {
  background: rgb(201 168 106 / 0.05);
  border-top-color: var(--ln-brass);
}
.sblane-link:hover .sblane-desc,
.sblane-link:focus-visible .sblane-desc,
.sblane-summary.is-active .sblane-desc { color: var(--ln-ivory); }
.sblane-link:hover .sblane-subline,
.sblane-link:focus-visible .sblane-subline,
.sblane-summary.is-active .sblane-subline { opacity: 1; }
.sblane-link:hover .sblane-cta,
.sblane-link:focus-visible .sblane-cta { color: var(--ln-brass-lit); }
.sblane-link:focus-visible {
  outline: 2px solid var(--ln-brass);
  outline-offset: -2px;
}

/* --- controls ------------------------------------------------------------ */
.sblane-ctas {
  margin-top: clamp(26px, 3vw, 40px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.sblane-primary, .sblane-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border-radius: var(--sb-r-control);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.sblane-primary { background: var(--ln-brass); color: var(--sb-surface-2); border: 1px solid var(--ln-brass); }
.sblane-primary:hover { background: var(--ln-brass-lit); border-color: var(--ln-brass-lit); }
.sblane-secondary { background: transparent; color: var(--ln-ivory); border: 1px solid var(--ln-line); }
.sblane-secondary:hover { border-color: var(--ln-brass); color: var(--ln-brass); }
.sblane-primary:focus-visible, .sblane-secondary:focus-visible {
  outline: 2px solid var(--ln-brass);
  outline-offset: 3px;
}

/* --- the comparison ------------------------------------------------------ */
.sblane-comparison { margin-top: clamp(24px, 3vw, 40px); }
.sblane-compare-grid {
  display: grid;
  gap: 1px;
  background: rgb(238 233 223 / 0.08);
  border: 1px solid var(--ln-line);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .sblane-compare-grid { grid-template-columns: repeat(3, 1fr); }
}
.sblane-compare-col { background: var(--sb-ground); padding: 20px clamp(16px, 1.6vw, 26px) 24px; }
.sblane-compare-title {
  margin: 0;
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--ln-ivory);
}
.sblane-compare-title span { color: var(--ln-brass); margin-right: 6px; letter-spacing: 0.18em; }
.sblane-compare-for {
  margin: 8px 0 0;
  font-size: clamp(12.5px, 0.9vw, 14px);
  line-height: 1.6;
  color: var(--ln-brass);
  opacity: 0.85;
}
.sblane-compare-col ul { margin: 14px 0 0; padding: 0; list-style: none; }
.sblane-compare-col li {
  position: relative;
  padding-left: 16px;
  margin-top: 9px;
  font-size: clamp(12.5px, 0.9vw, 14px);
  line-height: 1.55;
  color: var(--ln-muted);
}
.sblane-compare-col li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 1px;
  background: var(--ln-brass);
}

/* --- small screens ------------------------------------------------------- */
@media (max-width: 859px) {
  /* The engraving on this unit is the size of the unit. Rather than
     shrink it until the channel names are three pixels tall, the rail
     scrolls and each channel is a snap point. */
  .sblane-rail {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(clamp(20px, 4vw, 52px) * -1);
    padding-inline: clamp(20px, 4vw, 52px);
  }
  .sblane-rail::-webkit-scrollbar { display: none; }
  .sblane-unit { width: 175vw; max-width: 900px; }
  .sblane-channel { scroll-snap-align: center; }

  .sblane-link { border-left: 0 !important; }
  .sblane-primary, .sblane-secondary { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sblane-channel, .sblane-link, .sblane-desc, .sblane-subline,
  .sblane-cta, .sblane-primary, .sblane-secondary { transition: none; }
  .sblane-rail { scroll-behavior: auto; }
}