/* ==========================================================================
   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;

  /* ONE type scale for every dropdown. Solutions used to run at 16.5/13 and
     Salespuzzle121 at 13.5/11.5, so the two menus looked like different
     components. Both now read these four, which are the tighter 121 sizes -
     a menu is a list of choices, not a page of content. Change a size here
     and every panel moves together. */
  --sp-dd-label:11px;    /* uppercase eyebrow: the stage word, "Across the journey" */
  --sp-dd-name:13.5px;   /* the thing you are choosing */
  --sp-dd-desc:11.5px;   /* the line under it */
  --sp-dd-cta:12.5px;    /* "Explore X ->" */
}
.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 outcome areas, nothing else
   ========================================================================== */
.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;
}
/* Six outcome areas, three across. Each card is one link: area word, the
   family behind it, what it achieves, and a way in. There is no hover
   preview any more - there is nothing left to preview, and the whole point
   of the menu now is that it fits in one glance. */
/* Five columns so the five stages read left-to-right as the journey itself.
   Falls back to 3 then 2 before the cards get too narrow to read. */
.sp-area-grid{
  max-width:var(--wrap, 1180px); margin-inline:auto;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px 18px;
  align-items:start;
}
.sp-area{
  display:block; padding:12px 12px 16px; border-radius:10px; text-decoration:none;
  transition:background .12s;
}
.sp-area:hover, .sp-area:focus-visible{background:var(--paper, #F4F7F1)}
.sp-area-stage{
  display:block; padding-bottom:9px; margin-bottom:10px;
  border-bottom:1px solid var(--line-soft, #E7EAE4);
  font-size:var(--sp-dd-label); letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--ink, #1B2A20);
}
.sp-area:hover .sp-area-stage{border-bottom-color:var(--tint-line, #CFE3C4)}
.sp-area-name{
  display:block; font-family:var(--display, inherit); font-size:var(--sp-dd-name);
  font-weight:650; color:var(--ink, #1B2A20); line-height:1.25;
}
.sp-area-line{
  display:block; margin-top:6px; font-size:var(--sp-dd-desc); line-height:1.5;
  color:var(--muted, #5C6B60);
}
.sp-area-go{
  display:block; margin-top:12px; font-size:var(--sp-dd-cta); font-weight:650;
  color:var(--brand-d, #2C7D28);
}
.sp-area:hover .sp-area-go{text-decoration:underline}
/* Across the journey - Sales Masters. Deliberately NOT an .sp-area card: it
   reads as a full-width band under the five stages so the menu can never be
   mistaken for a six-stage sequence. */
.sp-across-band{
  max-width:var(--wrap, 1180px); margin:14px auto 0; padding:0 8px;
}
.sp-across{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:13px 16px; border-radius:10px; text-decoration:none;
  background:var(--tint, rgba(61,164,53,.07));
  border:1px solid var(--tint-line, rgba(61,164,53,.22));
  transition:background .12s;
}
.sp-across:hover, .sp-across:focus-visible{background:rgba(61,164,53,.12)}
.sp-across-k{
  font-size:var(--sp-dd-label); letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--brand-d, #2C7D28); white-space:nowrap;
}
.sp-across-n{
  font-family:var(--display, inherit); font-size:var(--sp-dd-name); font-weight:650;
  color:var(--ink, #1B2A20); line-height:1.25;
}
.sp-across-l{font-size:var(--sp-dd-desc); color:var(--muted, #5C6B60); line-height:1.5}
.sp-across-go{margin-left:auto; color:var(--brand-d, #2C7D28); font-weight:700}
.sp-across:hover .sp-across-go{transform:translateX(2px)}
@media (max-width:640px){
  .sp-across-go{margin-left:0}
}
/* Mobile: same separation, tinted so it reads as supporting the five above. */
.sp-marea-across{
  background:var(--tint, rgba(61,164,53,.07));
  border:1px solid var(--tint-line, rgba(61,164,53,.22));
  border-radius:10px; margin-top:6px;
}
.sp-marea-across i{color:var(--brand-d, #2C7D28)}

.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:var(--sp-dd-desc); letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted, #5C6B60); font-weight:600;
}
/* These three are links now: the How It Works panel that used to carry them
   has gone, so the strip is their way in from the menu. */
.sp-mega-inc a{color:var(--ink, #1B2A20); text-decoration:none; font-weight:700}
.sp-mega-inc a:hover{color:var(--brand-d, #2C7D28); text-decoration:underline}
.sp-mega-inc a:focus-visible{outline:2px solid var(--brand, #3DA435); outline-offset:2px; border-radius:3px}
.sp-mega-feat{
  font-size:var(--sp-dd-name); font-weight:650; color:var(--brand-d, #2C7D28); text-decoration:none;
}
.sp-mega-feat:hover{text-decoration:underline}
@media (max-width:1180px){
  /* Five across stops being readable - go three, still one screen. */
  .sp-area-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px 26px}
}
@media (max-width:1024px){
  .sp-area-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 24px}
}

/* The HOW IT WORKS dropdown styles lived here until 2 Sep 2026. The dropdown
   was removed from the menu (see _build/build-nav.js), so every .sp-hiw-*
   rule became unmatchable on all 70 pages and has been deleted with it. The
   /how-it-works PAGE is unaffected and still carries its own CSS. */

/* ==========================================================================
   SALESPUZZLE121 - the four consultancy services

   Same component as the Solutions mega-menu: full-bleed panel, the shared
   .sp-area card, the shared strip. It used to be a narrow 380px portrait card,
   because a 560px panel anchored under the wrong trigger - going full width
   removes that problem rather than working around it, exactly as Solutions
   does, and the two menus now read as one thing.

   The only difference is the eyebrow: an area has a stage word, a service does
   not, so a green rule sits across the card top instead. Both panels use one
   colour configuration - ink name, muted line, green accent.
   ========================================================================== */
.sp-area-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* A flat inset bar rather than border-top: the card is rounded, so a real
   border curves down at both ends and reads as half a box. */
.sp-area-svc{position:relative; padding-top:16px}
.sp-area-svc::before{
  content:""; position:absolute; left:12px; right:12px; top:0; height:3px;
  border-radius:0 0 2px 2px; background:var(--brand, #3DA435);
}

.sp-121-links{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
@media (max-width:1180px){
  .sp-area-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .sp-area-grid-4{grid-template-columns:1fr}
}

/* ---- 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 .sp-colh{
  margin:16px 0 6px; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint, #8A988D); font-weight:700;
}
.sp-mob .sp-colh: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) ---- */
/* The mobile Solutions list is the same six areas. Nothing expands, because
   there are no tools underneath any more - a tap goes to the area page. */
.sp-marea{
  display:block; padding:12px; border-bottom:1px solid var(--line-soft, #E7EAE4);
  text-decoration:none;
}
.sp-marea i{
  display:block; font-style:normal; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:700; color:var(--brand-d, #2C7D28);
  margin-bottom:3px;
}
.sp-marea b{
  display:block; font-family:var(--display, inherit); font-size:16px;
  font-weight:650; color:var(--ink, #1B2A20);
}
.sp-marea span{
  display:block; margin-top:3px; font-size:13.5px; line-height:1.45;
  color:var(--muted, #5C6B60);
}
.sp-marea:hover{background:var(--paper, #F4F7F1)}
.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;
}
/* ---- mobile: the four Salespuzzle121 services ---- */
/* Same shape as .sp-marea, coloured by service so the menu, the landing cards
   and the service page all agree. */
.sp-m121{
  display:block; padding:11px 13px; margin-bottom:6px; text-decoration:none;
  border:1px solid var(--line-soft, #E7EAE4);
  border-left:3px solid var(--brand, #3DA435); border-radius:11px;
}
.sp-m121 b{display:block; font-size:15px; font-weight:700; color:var(--ink, #1B2A20); line-height:1.25}
.sp-m121 span{display:block; margin-top:2px; font-size:12.5px; font-weight:600; color:var(--muted, #5C6B60); line-height:1.4}
.sp-m121-hd{background:var(--paper, #F4F7F1)}

.sp-mob a:focus-visible, .sp-burger:focus-visible,
.sp-dd-t:focus-visible, .sp-nav-links > a:focus-visible, .sp-cta:focus-visible,
.sp-area:focus-visible, .sp-mega-feat:focus-visible,
.sp-121-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}
}
@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}
}