/* =========================================================
   Benefit landing page styles
   ========================================================= */

/* ---- Hero ---- */
.benefit-hero {
  padding: 64px 0 64px;
  background:
    radial-gradient(900px 500px at 90% 0%, var(--ss-light-blue) 0%, transparent 60%),
    #fff;
}
.benefit-hero .crumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--ss-shadow);
  margin-bottom: 20px;
}
.benefit-hero .crumb a { color: var(--ss-primary-blue); }
.benefit-hero .crumb a:hover { text-decoration: underline; }
.benefit-hero .number {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em;
  color: var(--ss-orange); text-transform: uppercase;
  margin-bottom: 16px;
}
.benefit-hero .number .n {
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--ss-orange); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; letter-spacing: 0;
}
.benefit-hero h1 {
  font-size: clamp(44px, 5vw, 68px);
  font-weight: 800; line-height: 1.04; letter-spacing: -0.025em;
  color: var(--ss-dark-navy);
  margin: 0; text-wrap: balance;
  max-width: 900px;
}
.benefit-hero .lede { margin-top: 20px; max-width: 720px; }
.benefit-hero .cta { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- Hero 2-col grid + shared "Why Stella" nav graphic ---- */
.why-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.95fr);
  gap: 64px;
  align-items: center;
}
.why-hero-grid .benefit-hero-content { min-width: 0; }
.why-hero-grid .benefit-hero-content .lede { max-width: 540px; }

.why-nav {
  width: 100%; max-width: 460px;
  justify-self: end;
  background: #fff;
  border: 1px solid var(--ss-light-gray);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 1px 0 rgba(31,65,104,0.04), 0 12px 32px -16px rgba(31,65,104,0.12);
}
.why-nav-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ss-shadow);
  padding: 4px 6px 14px;
}
.why-nav-row {
  display: grid; grid-template-columns: 32px 1fr 84px auto;
  gap: 14px; align-items: center;
  padding: 12px 14px; border-radius: 10px;
  text-decoration: none; color: inherit;
  transition: opacity 120ms ease, background 120ms ease;
}
.why-nav-row + .why-nav-row { margin-top: 4px; }
.why-nav-row:not(.active) { opacity: 0.55; }
.why-nav-row:not(.active):hover { opacity: 0.9; background: var(--ss-pale-gray); }
.why-nav-row.active { background: var(--ss-light-blue); opacity: 1; }

.why-nav-num {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--ss-pale-gray);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: var(--ss-smoke);
  letter-spacing: -0.01em;
}
.why-nav-row.active .why-nav-num { background: var(--ss-primary-blue); color: #fff; }
.why-nav-title { font-size: 14px; font-weight: 700; color: var(--ss-dark-navy); line-height: 1.3; }
.why-nav-row:not(.active) .why-nav-title { color: var(--ss-shadow); }
.why-nav-row.active .why-nav-title { color: var(--ss-primary-blue); }
.why-nav-sub { font-size: 11px; color: var(--ss-shadow); margin-top: 2px; line-height: 1.4; }
.why-nav-spark { display: flex; align-items: center; color: var(--ss-smoke); }
.why-nav-row.active .why-nav-spark { color: var(--ss-primary-blue); }
.why-nav-arrow { color: var(--ss-medium-gray); font-size: 13px; }
.why-nav-row.active .why-nav-arrow { color: var(--ss-primary-blue); }
.why-nav-here {
  font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ss-primary-blue);
  background: #fff; border: 1px solid color-mix(in srgb, var(--ss-primary-blue) 22%, transparent);
  padding: 3px 6px; border-radius: 4px;
  white-space: nowrap;
}

@media (max-width: 1080px) {
  .why-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .why-nav { justify-self: stretch; max-width: 100%; }
}

/* ---- Section header ---- */
.bsec { padding: 96px 0; }
.bsec.tint { background: var(--ss-pale-blue); }
.bsec.pale { background: var(--ss-pale-gray); }
.bsec.dark { background: var(--ss-dark-navy); color: #fff; }
.bsec.dark .h-section, .bsec.dark h2 { color: #fff; }

.bsec h2 { margin: 0 0 16px; }
.bsec .intro { font-size: 18px; line-height: 1.55; color: var(--ss-charcoal); max-width: 760px; }
.bsec.dark .intro { color: #B7C9DF; }

/* ---- Friction cards (3-item enumerated lists in markdown) ---- */
.friction-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.friction-card {
  background: #fff;
  border: 1px solid var(--ss-light-gray);
  border-radius: 14px;
  padding: 28px;
  position: relative;
}
.friction-card .step {
  font-size: 12px; font-weight: 800; letter-spacing: 0.18em;
  color: var(--ss-orange); text-transform: uppercase;
}
.friction-card h3 {
  margin: 8px 0 12px;
  font-size: 18px; font-weight: 800; color: var(--ss-dark-navy);
  letter-spacing: -0.01em; line-height: 1.25;
  text-wrap: balance;
}
.friction-card p {
  margin: 0;
  font-size: 14px; line-height: 1.55; color: var(--ss-charcoal);
}

/* ---- Big segment cards (OEM / High-Frequency / Specialty) ---- */
.segments { display: grid; gap: 24px; margin-top: 48px; }
.segment {
  background: #fff;
  border: 1px solid var(--ss-light-gray);
  border-radius: 16px;
  padding: 36px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
  align-items: start;
}
.segment .seg-head .tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ss-light-blue); color: var(--ss-primary-blue);
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
}
.segment.accent .seg-head .tag { background: color-mix(in srgb, var(--ss-accent) 10%, transparent); color: var(--ss-accent); }
.segment h3 {
  margin: 18px 0 10px;
  font-size: 26px; font-weight: 800; line-height: 1.15;
  color: var(--ss-dark-navy); letter-spacing: -0.01em;
  text-wrap: balance;
}
.segment .pitch { font-size: 15px; line-height: 1.55; color: var(--ss-charcoal); margin: 0; }
.segment .seg-feats { display: grid; gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; }
.segment .seg-feats li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; line-height: 1.5; color: var(--ss-charcoal);
}
.segment .seg-feats li i { color: var(--ss-primary-blue); font-size: 16px; margin-top: 2px; flex-shrink: 0; }
.segment.accent .seg-feats li i { color: var(--ss-orange); }
.segment .powered {
  font-size: 12px; color: var(--ss-shadow);
  border-top: 1px dashed var(--ss-medium-gray);
  padding-top: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.segment .powered strong {
  color: var(--ss-dark-navy); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px;
}
.segment .powered-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.segment .powered-pills .pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  font-size: 12px; font-weight: 600;
  color: var(--ss-primary-blue);
  background: var(--ss-light-blue);
  border: 1px solid color-mix(in srgb, var(--ss-primary-blue) 18%, transparent);
  border-radius: 999px;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.segment .powered-pills .pill i {
  font-size: 10px; opacity: 0.7;
  transition: transform 120ms ease, opacity 120ms ease;
}
.segment .powered-pills .pill:hover {
  background: var(--ss-primary-blue);
  color: #fff;
  border-color: var(--ss-primary-blue);
}
.segment .powered-pills .pill:hover i { opacity: 1; transform: translate(1px, -1px); }
.segment.accent .powered-pills .pill {
  color: var(--ss-orange);
  background: color-mix(in srgb, var(--ss-orange) 10%, transparent);
  border-color: color-mix(in srgb, var(--ss-orange) 22%, transparent);
}
.segment.accent .powered-pills .pill:hover {
  background: var(--ss-orange);
  color: #fff;
  border-color: var(--ss-orange);
}

/* Top-align the right column with the heading (skip the eyebrow tag's height) */
@media (min-width: 1081px) {
  .segment > div:nth-child(2) { padding-top: 46px; }
}

/* ---- Outcome callouts (3-up grid w/ checkmark+bold-label+paragraph) ---- */
.outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.outcome {
  background: #fff;
  border: 1px solid var(--ss-light-gray);
  border-radius: 12px;
  padding: 24px;
}
.outcome .ico {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--ss-light-blue); color: var(--ss-primary-blue);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.outcome .ico i { font-size: 18px; }
.outcome.accent .ico { background: color-mix(in srgb, var(--ss-accent) 10%, transparent); color: var(--ss-accent); }
.outcome h3 {
  margin: 0 0 8px;
  font-size: 17px; font-weight: 800; color: var(--ss-dark-navy);
  letter-spacing: -0.005em;
}
.outcome p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ss-charcoal); }

/* ---- Split layout with sticky lead column + stacked scroll column ---- */
.split-sticky {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 80px;
  align-items: start;
}
.split-sticky-lead {
  position: sticky;
  top: 96px;
  align-self: start;
}
.split-sticky-lead .intro { max-width: 520px; }
.split-sticky-stack {
  display: grid;
  gap: 48px;
}
.split-sticky-stack .outcome {
  padding: 40px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.split-sticky-stack .outcome .ico {
  width: 44px; height: 44px; border-radius: 10px;
  margin-bottom: 18px;
}
.split-sticky-stack .outcome .ico i { font-size: 22px; }
.split-sticky-stack .outcome h3 { font-size: 20px; margin-bottom: 10px; }
.split-sticky-stack .outcome p { font-size: 15px; line-height: 1.6; }
@media (max-width: 1080px) {
  .split-sticky { grid-template-columns: 1fr; gap: 40px; }
  .split-sticky-lead { position: static; }
  .split-sticky-stack { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .split-sticky-stack { grid-template-columns: 1fr; }
}

/* ---- Stat row (proof) ---- */
.proof {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 40px;
  background: #fff;
  border: 1px solid var(--ss-light-gray);
  border-radius: 16px;
  overflow: hidden;
}
.proof > div {
  padding: 28px 24px;
  border-right: 1px solid var(--ss-light-gray);
}
.proof > div:last-child { border-right: none; }
.proof .num {
  font-size: 44px; font-weight: 900; letter-spacing: -0.02em;
  color: var(--ss-orange); line-height: 1;
}
.proof .num small { font-size: 22px; color: var(--ss-orange); font-weight: 800; margin-left: 2px; }
.proof .label {
  margin-top: 10px;
  font-size: 13px; line-height: 1.45; color: var(--ss-charcoal); font-weight: 600;
}

/* ---- Numbered lever cards (Quote faster / Price w/ confidence / etc.) ---- */
.lever-stack { display: grid; gap: 28px; margin-top: 40px; }
.lever-card {
  background: #fff;
  border: 1px solid var(--ss-light-gray);
  border-radius: 16px;
  padding: 36px;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 28px;
}
.lever-card .ord {
  font-size: 64px; font-weight: 900; letter-spacing: -0.04em;
  color: var(--ss-orange); line-height: 1;
}
.lever-card h3 {
  margin: 0 0 10px;
  font-size: 24px; font-weight: 800; color: var(--ss-dark-navy);
  letter-spacing: -0.01em; text-wrap: balance;
}
.lever-card .body { font-size: 15px; line-height: 1.6; color: var(--ss-charcoal); margin: 0 0 18px; }
.lever-card blockquote {
  margin: 0 0 18px; padding: 14px 18px;
  background: var(--ss-pale-blue);
  border-left: 3px solid var(--ss-primary-blue);
  border-radius: 0 8px 8px 0;
  font-size: 14px; font-style: italic; color: var(--ss-charcoal);
}
.lever-card .feats { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lever-card .feats li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14px; line-height: 1.55; color: var(--ss-charcoal);
}
.lever-card .feats li i { color: var(--ss-primary-blue); font-size: 16px; margin-top: 2px; flex-shrink: 0; }
.lever-card .feats li strong { color: var(--ss-dark-navy); font-weight: 700; }

/* ---- Manager / quote callout box ---- */
.callout {
  background: var(--ss-dark-navy);
  color: #fff;
  border-radius: 20px;
  padding: 56px;
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center;
  position: relative; overflow: hidden;
}
.callout::before {
  content: ''; position: absolute; top: -100px; right: -100px;
  width: 360px; height: 360px; border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--ss-accent) 20%, transparent) 0%, transparent 70%);
}
.callout h3 {
  position: relative; z-index: 1;
  font-size: 32px; font-weight: 800; color: #fff;
  line-height: 1.15; letter-spacing: -0.02em;
  margin: 0; text-wrap: balance;
}
.callout p, .callout .body { position: relative; z-index: 1; font-size: 15px; color: #B7C9DF; line-height: 1.6; margin: 12px 0 0; }
.callout .feats {
  position: relative; z-index: 1;
  margin: 20px 0 0; padding: 0; display: grid; gap: 12px; list-style: none;
}
.callout .feats li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.55; color: #E1EAF5; }
.callout .feats li i { color: var(--ss-orange); font-size: 16px; margin-top: 2px; flex-shrink: 0; }
.callout .feats li strong { color: #fff; font-weight: 700; }
.callout .eyebrow { color: var(--ss-orange); letter-spacing: 0.18em; }

/* ---- Capabilities (Powered by) bottom strip ---- */
.cap-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.cap-strip a {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fff;
  border: 1px solid var(--ss-light-gray);
  border-radius: 12px;
  padding: 20px;
  text-decoration: none; color: inherit;
}
.cap-strip a:hover { border-color: var(--ss-primary-blue); }
.cap-strip .ico {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--ss-light-blue); color: var(--ss-primary-blue);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cap-strip .ico i { font-size: 18px; }
.cap-strip h4 { margin: 0 0 4px; font-size: 14px; font-weight: 800; color: var(--ss-dark-navy); }
.cap-strip p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ss-shadow); }

/* ---- Phase / launch cards ---- */
.phases { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
.phase-card {
  background: #fff;
  border: 1px solid var(--ss-light-gray);
  border-radius: 14px;
  padding: 28px;
  position: relative;
}
.phase-card .ph {
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em;
  color: var(--ss-primary-blue); text-transform: uppercase;
}
.phase-card.accent .ph { color: var(--ss-orange); }
.phase-card h3 {
  margin: 6px 0 12px;
  font-size: 20px; font-weight: 800; color: var(--ss-dark-navy);
  letter-spacing: -0.01em;
}
.phase-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ss-charcoal); }

.kit-list {
  margin-top: 32px; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px;
}
.kit-list li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--ss-light-gray);
  border-radius: 10px;
  font-size: 14px; line-height: 1.5; color: var(--ss-charcoal);
}
.kit-list li i { color: var(--ss-orange); font-size: 18px; margin-top: 1px; flex-shrink: 0; }
.kit-list li strong { color: var(--ss-dark-navy); font-weight: 700; }

/* ---- Closing rail (e.g. proactive call / strategic accounts / etc.) ---- */
.closing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 32px; }
.closing-card {
  background: #fff;
  border: 1px solid var(--ss-light-gray);
  border-radius: 12px;
  padding: 24px;
}
.closing-card h4 {
  margin: 0 0 8px;
  font-size: 16px; font-weight: 800; color: var(--ss-dark-navy);
  display: flex; align-items: center; gap: 10px;
}
.closing-card h4 i { color: var(--ss-orange); font-size: 18px; }
.closing-card p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ss-charcoal); }

/* ---- Responsive ---- */
@media (max-width: 1080px) {
  .friction-grid, .outcomes, .cap-strip { grid-template-columns: 1fr 1fr; }
  .proof { grid-template-columns: 1fr 1fr; }
  .proof > div { border-right: none; border-bottom: 1px solid var(--ss-light-gray); }
  .segment { grid-template-columns: 1fr; gap: 24px; }
  .lever-card { grid-template-columns: 56px 1fr; gap: 20px; padding: 28px; }
  .lever-card .ord { font-size: 44px; }
  .callout { grid-template-columns: 1fr; padding: 40px; }
  .phases, .kit-list, .closing-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .friction-grid, .outcomes, .cap-strip, .proof { grid-template-columns: 1fr; }
  .bsec { padding: 64px 0; }
}