/* ==========================================================================
   Salespuzzle shared site navigation.
   One menu on every public page. Loaded by every page via <link>, so the
   menu is styled in ONE place - edit here, not in each page's inline CSS.

   Every class is sp- prefixed and every custom property has a literal
   fallback, because each page carries its own inline CSS and its own
   :root variables. Nothing here depends on the host page.

   2026-08: the Solutions menu presents the six business problems and their
   packages (with a preview panel); "Platform" became "How It Works". The six
   stage colours below match the pricing page's journey colours.
   ========================================================================== */

.sp-nav{
  position:sticky; top:0; z-index:100;
  background:rgba(253,253,250,.88);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft, #E7EAE4);
  /* the six journey stages, in order */
  --sp-s1:#3DA435; --sp-s2:#4E9E86; --sp-s3:#3F8FBF;
  --sp-s4:#6E7FC4; --sp-s5:#9A6FB5; --sp-s6:#C2794E;
}
.sp-nav *{box-sizing:border-box}
.sp-nav-in{
  display:flex; align-items:center; gap:26px;
  height:72px; max-width:var(--wrap, 1180px); margin-inline:auto; padding-inline:24px;
}
.sp-nav-logo{display:block; flex:none; line-height:0}
.sp-nav-logo img{height:34px; width:auto; display:block}

/* ---- desktop links ---- */
.sp-nav-links{display:flex; align-items:center; gap:24px; margin-left:4px}
.sp-nav-links > a,
.sp-dd-t{
  font-family:inherit; font-size:14.5px; font-weight:550;
  color:var(--muted, #5C6B60); text-decoration:none; cursor:pointer;
  background:none; border:0; padding:0; transition:color .15s;
  white-space:nowrap;
}
.sp-nav-links > a:hover, .sp-dd-t:hover, .sp-dd:hover .sp-dd-t{color:var(--ink, #1B2A20)}
.sp-nav-links > a[aria-current="page"]{color:var(--ink, #1B2A20); font-weight:650}

/* ---- dropdowns ---- */
.sp-dd{position:relative; display:inline-flex; align-items:center}
.sp-dd-t{display:inline-flex; align-items:center; gap:7px}
.sp-cv{
  width:6px; height:6px; margin-top:-3px; opacity:.55;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(45deg); transition:transform .2s, margin-top .2s;
}
.sp-dd:hover .sp-cv, .sp-dd.sp-open .sp-cv{transform:rotate(225deg); margin-top:2px}
.sp-dd-m{
  position:absolute; top:100%; left:0; padding-top:20px; width:320px;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease; z-index:110;
}
/* :focus-within is scoped to the PANEL, not the whole dropdown - see sp-nav.js
   Escape handling for why. */
.sp-dd:hover .sp-dd-m, .sp-dd-m:focus-within, .sp-dd.sp-open .sp-dd-m{
  opacity:1; visibility:visible; transform:translateY(0);
}

/* ==========================================================================
   SOLUTIONS mega-menu - six families, every tool, one preview
   ========================================================================== */
.sp-dd.sp-mega{position:static}
.sp-mega .sp-dd-m{left:0; right:0; width:auto; padding-top:0}
/* hover bridge between the trigger and the full-width panel */
.sp-mega .sp-dd-t{position:relative}
.sp-mega .sp-dd-t::after{
  content:""; position:absolute; left:-18px; right:-18px; top:100%; height:32px;
}
.sp-mega-in{
  background:#fff; border-top:1px solid var(--line-soft, #E7EAE4);
  border-bottom:1px solid var(--line, #DFE4DA);
  box-shadow:0 22px 44px -20px rgba(27,42,32,.28);
  padding:22px 24px 0;
  max-height:calc(100vh - 72px); overflow-y:auto; overscroll-behavior:contain;
}
/* Three family columns + one fixed preview column spanning both rows. The
   preview is a single reserved region, not a floating tooltip, so nothing
   reflows on hover and the navigation is never obscured. */
.sp-mega-grid{
  max-width:var(--wrap, 1180px); margin-inline:auto;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) 264px; gap:14px 26px;
  align-items:start;
}
.sp-mcol > a{
  display:block; padding:6px 8px; border-radius:8px; text-decoration:none;
  line-height:1.3; font-size:13.5px; font-weight:550; color:var(--muted, #5C6B60);
  transition:background .12s, color .12s;
}
.sp-mcol > a:hover, .sp-mcol > a:focus-visible, .sp-mcol > a.sp-on{
  background:var(--paper, #F4F7F1); color:var(--ink, #1B2A20);
}

/* ---- the fixed preview panel ---- */
/* A distinct tinted card so it reads as a preview surface rather than more
   menu. Deepens slightly while a tool is being previewed. */
.sp-mprev{
  grid-column:4; grid-row:1 / span 2; align-self:stretch;
  background:var(--paper, #F4F7F1); border:1px solid var(--line-soft, #E7EAE4);
  border-radius:14px; padding:18px; min-height:190px;
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.sp-mprev.sp-live{
  background:#EDF3E9; border-color:var(--tint-line, #CFE3C4);
  box-shadow:inset 0 0 0 1px rgba(61,164,53,.06);
}
.sp-mprev-idle{
  margin:0; font-size:12.5px; line-height:1.6; color:var(--faint, #8A988D);
}
/* Quick, not showy - it must keep up with the pointer. */
@keyframes spPrevIn{
  from{opacity:0; transform:translateY(5px)}
  to  {opacity:1; transform:none}
}
.sp-mprev-card.sp-in{animation:spPrevIn .16s ease-out both}
@media (prefers-reduced-motion:reduce){
  .sp-mprev-card.sp-in{animation:none}
}
.sp-mprev-fam{
  display:block; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brand-d, #2C7D28); font-weight:700; margin-bottom:3px;
}
.sp-mprev-name{
  display:block; font-family:var(--display, inherit); font-size:17px; font-weight:650;
  color:var(--ink, #1B2A20); line-height:1.2;
}
.sp-mprev-desc{
  margin:7px 0 0; font-size:12.5px; line-height:1.55; color:var(--muted, #5C6B60);
}
.sp-mprev-bens{margin:10px 0 0; padding:0; list-style:none}
.sp-mprev-bens li{
  position:relative; padding-left:16px; margin-top:5px;
  font-size:12px; line-height:1.45; color:var(--ink-soft, #28382D);
}
.sp-mprev-bens li::before{
  content:"\2713"; position:absolute; left:0; top:-1px;
  color:var(--brand, #3DA435); font-weight:700; font-size:11px;
}
.sp-mprev-cta{
  display:inline-block; margin-top:12px; font-size:12.5px; font-weight:650;
  color:var(--brand-d, #2C7D28); text-decoration:none;
}
.sp-mprev-cta:hover{text-decoration:underline}
.sp-mhead{
  border-bottom:1px solid var(--line-soft, #E7EAE4); margin-bottom:6px;
  padding-bottom:8px !important; border-radius:8px 8px 0 0;
  font-family:var(--display, inherit); font-size:16px; font-weight:650;
  color:var(--ink, #1B2A20) !important;
}
.sp-mhead .sp-mstage{
  display:block; font-size:9.5px !important; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brand-d, #2C7D28) !important; font-weight:700; margin-bottom:2px;
}
.sp-mega-strip{
  max-width:var(--wrap, 1180px); margin:22px auto 0;
  border-top:1px solid var(--line-soft, #E7EAE4); padding:14px 8px 16px;
  display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; justify-content:space-between;
}
.sp-mega-inc{
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted, #5C6B60); font-weight:600;
}
.sp-mega-feat{
  font-size:13.5px; font-weight:650; color:var(--brand-d, #2C7D28); text-decoration:none;
}
.sp-mega-feat:hover{text-decoration:underline}
@media (max-width:1180px){
  /* Not enough width for a preview column - drop it and keep three families. */
  .sp-mega-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 20px}
  .sp-mprev{display:none}
}

/* ==========================================================================
   HOW IT WORKS - journey, foundation, ways to start
   ========================================================================== */
.sp-hiw .sp-dd-m{width:min(720px, calc(100vw - 40px))}
.sp-hiw-in{
  background:#fff; border:1px solid var(--line, #DFE4DA); border-radius:16px;
  box-shadow:0 18px 40px -12px rgba(27,42,32,.22); padding:18px;
  display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:18px;
}
.sp-hiw-h{
  display:block; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint, #8A988D); font-weight:700; margin-bottom:9px;
}
.sp-hiw-j p{margin:9px 0 0; font-size:12.5px; line-height:1.55; color:var(--muted, #5C6B60)}
.sp-hiw-row{display:flex; flex-wrap:wrap; gap:4px; align-items:center}
.sp-hiw-st{
  font-size:10.5px; font-weight:700; color:var(--st, #2C7D28);
  background:color-mix(in srgb, var(--st, #3DA435) 9%, #fff);
  border:1px solid color-mix(in srgb, var(--st, #3DA435) 28%, #fff);
  border-radius:999px; padding:4px 9px; white-space:nowrap;
}
@supports not (background:color-mix(in srgb, red 9%, #fff)){
  .sp-hiw-st{background:rgba(61,164,53,.08); border-color:rgba(61,164,53,.25)}
}
.sp-hiw-arr{color:var(--faint, #8A988D); font-size:10px}
.sp-hiw-cta{
  display:inline-block; margin-top:11px; font-size:12.5px; font-weight:700;
  color:var(--brand-d, #2C7D28); text-decoration:none;
}
.sp-hiw-cta:hover{text-decoration:underline}
.sp-hiw-f a, .sp-hiw-s a:not(.sp-hiw-cta){
  display:flex; flex-direction:column; gap:1px;
  padding:8px 10px; border-radius:10px; text-decoration:none;
}
.sp-hiw-f a:hover, .sp-hiw-s a:not(.sp-hiw-cta):hover{background:var(--paper, #F4F7F1)}
.sp-hiw-in .sp-ddt{font-size:13.5px; font-weight:650; color:var(--ink, #1B2A20)}
.sp-hiw-in .sp-ddd{font-size:11.5px; color:var(--muted, #5C6B60); line-height:1.4}

/* ---- right-hand actions ---- */
.sp-nav-cta{margin-left:auto; display:flex; align-items:center; gap:14px}
.sp-login{
  font-size:14.5px; font-weight:600; color:var(--muted, #5C6B60);
  text-decoration:none; transition:color .15s; white-space:nowrap;
}
.sp-login:hover{color:var(--ink, #1B2A20)}
.sp-cta{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  padding:6px 8px 6px 14px; border-radius:12px;
  background:linear-gradient(180deg,#5E6366,#474C4F);
  border:1.5px solid var(--brand-l, #7DBE3C);
  box-shadow:0 0 14px -2px rgba(125,190,60,.45), inset 0 0 8px rgba(125,190,60,.12);
  transition:transform .18s ease, box-shadow .18s ease;
}
.sp-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 0 22px -2px rgba(125,190,60,.65), inset 0 0 10px rgba(125,190,60,.18);
}
.sp-cta-txt{display:flex; flex-direction:column; line-height:1.12}
.sp-cta-k{
  font-size:8.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--brand-l, #7DBE3C); font-weight:700;
}
.sp-cta-h{font-size:14.5px; font-weight:650; color:#fff; letter-spacing:-.01em; white-space:nowrap}
.sp-cta-go{
  width:26px; height:26px; border-radius:50%; flex:none;
  display:grid; place-items:center; color:#fff;
  background:radial-gradient(circle at 35% 30%, #8ACB4C, #2C7D28);
  border:2px solid #fff; box-shadow:0 0 0 2px #2C7D28;
  transition:transform .18s ease;
}
.sp-cta:hover .sp-cta-go{transform:scale(1.1) translateX(2px)}
.sp-cta-go svg{width:12px; height:12px}

/* ---- burger (mobile only) ---- */
.sp-burger{
  display:none; width:42px; height:38px; flex:none;
  border:1px solid var(--line, #DFE4DA); border-radius:10px;
  background:#fff; cursor:pointer; padding:0;
}
.sp-burger span{
  display:block; width:18px; height:2px; margin:3.5px auto; border-radius:2px;
  background:var(--ink, #1B2A20); transition:transform .2s ease, opacity .2s ease;
}
.sp-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.sp-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.sp-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ---- mobile panel ---- */
.sp-mob{
  display:none; border-top:1px solid var(--line-soft, #E7EAE4);
  background:#fff; max-height:calc(100vh - 60px); overflow-y:auto;
  padding:14px 24px 22px;
}
.sp-mob.sp-open{display:block}
.sp-mob h4{
  margin:16px 0 6px; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint, #8A988D); font-weight:700;
}
.sp-mob h4:first-child{margin-top:2px}
.sp-mob a{
  display:block; padding:11px 12px; border-radius:10px; text-decoration:none;
  font-size:15.5px; font-weight:600; color:var(--ink, #1B2A20);
}
.sp-mob a:hover, .sp-mob a[aria-current="page"]{background:var(--paper, #F4F7F1)}
/* package entries: stage + dominant name + price, no tool lists */
.sp-mob .sp-mpk{
  border:1px solid var(--line-soft, #E7EAE4); border-left:3px solid var(--st, #3DA435);
  border-radius:11px; margin-bottom:7px; padding:10px 13px;
}
.sp-mpk i{
  display:block; font-style:normal; font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--st, #2C7D28); font-weight:700;
}
.sp-mpk b{display:block; font-size:16px; font-weight:700; color:var(--ink, #1B2A20); line-height:1.25}
.sp-mpk span{display:block; font-size:12px; font-weight:600; color:var(--muted, #5C6B60); margin-top:1px}
.sp-mpk-w{--st:#3DA435}
.sp-mob-foot{
  display:flex; flex-direction:column; gap:10px;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line-soft, #E7EAE4);
}
.sp-mob-foot .sp-mob-cta{
  display:block; text-align:center; padding:13px 16px; border-radius:12px;
  background:var(--brand, #3DA435); color:#fff; font-weight:700; font-size:15px;
  text-decoration:none;
}
.sp-mob-foot .sp-mob-login{
  display:block; text-align:center; padding:12px 16px; border-radius:12px;
  border:1px solid var(--line, #DFE4DA); color:var(--ink, #1B2A20);
  font-weight:650; font-size:15px; text-decoration:none;
}
/* ---- mobile accordions (one per package) ---- */
.sp-acc{border-bottom:1px solid var(--line-soft, #E7EAE4)}
.sp-acc-t{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; padding:13px 12px; background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:15.5px; font-weight:650; color:var(--ink, #1B2A20);
  text-align:left;
}
.sp-acc-t i{
  display:block; font-style:normal; font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brand-d, #2C7D28); font-weight:700; margin-bottom:1px;
}
.sp-acc-t:hover{background:var(--paper, #F4F7F1)}
.sp-acc-cv{
  width:8px; height:8px; flex:none; margin-top:-4px; opacity:.5;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .2s, margin-top .2s;
}
.sp-acc-t[aria-expanded="true"] .sp-acc-cv{transform:rotate(225deg); margin-top:3px}
.sp-acc-p{padding:0 12px 12px}
.sp-acc-p a{padding:9px 12px; font-size:14.5px; font-weight:500}
.sp-acc-p .sp-acc-go{font-weight:700; color:var(--brand-d, #2C7D28)}
.sp-mob-inc{
  margin:14px 12px 4px; padding:11px 12px; border-radius:10px;
  background:var(--paper, #F4F7F1);
  font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted, #5C6B60); font-weight:600; line-height:1.5;
}
.sp-mob a:focus-visible, .sp-acc-t:focus-visible, .sp-burger:focus-visible,
.sp-dd-t:focus-visible, .sp-nav-links > a:focus-visible, .sp-cta:focus-visible,
.sp-mcol > a:focus-visible, .sp-mprev-cta:focus-visible, .sp-mega-feat:focus-visible,
.sp-hiw-in a:focus-visible{
  outline:2px solid var(--brand, #3DA435); outline-offset:2px; border-radius:6px;
}

/* ---- breakpoints ---- */
@media (max-width:1080px){
  .sp-nav-in{gap:18px}
  .sp-nav-links{gap:16px}
  .sp-nav-links > a, .sp-dd-t{font-size:13.5px}
  .sp-login{display:none}
  /* Two full CTA buttons plus the burger no longer fit once the nav links have
     collapsed away - keep the one that starts the journey and drop the demo
     shortcut, which is one tap away from that CTA's own destination anyway. */
  .sp-cta-demo{display:none}
  .sp-hiw-in{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .sp-nav-in{height:60px; padding-inline:18px}
  .sp-nav-logo img{height:29px}
  .sp-nav-links{display:none}
  .sp-burger{display:block}
  .sp-cta{padding:5px 7px 5px 12px}
  .sp-cta-h{font-size:13px}
}
@media (max-width:430px){
  .sp-nav-in{gap:10px; padding-inline:14px}
  .sp-nav-logo img{height:26px}
  .sp-cta{padding:5px 6px 5px 10px; gap:7px}
  .sp-cta-k{font-size:7.5px; letter-spacing:.18em}
  .sp-cta-h{font-size:12px}
  .sp-cta-go{width:22px; height:22px}
  .sp-burger{width:38px; height:34px}
}
@media (max-width:340px){
  .sp-cta{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sp-nav *, .sp-dd-m{transition:none !important}
}