/* Lead nurture funnel: centred on the page so the guide line drops straight through it,
   steps alternate either side of it, then sample messages */
.nurture{padding:110px var(--gutter) 150px;color:var(--green)}
.nurture>*{position:relative;z-index:2}
/* Two equal columns keep a clear central gutter for the line */
.nurture-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(56px,8vw,140px);align-items:end;margin-bottom:110px}
.nurture-head h2{font-size:clamp(42px,4.4vw,72px)}
.nurture-head p{font-size:17px;line-height:1.6;max-width:440px;margin:0 0 6px;color:var(--muted)}

.nurture-flow{position:relative;--fw:clamp(300px,calc(62vw - 330px),540px)}
.nurture-funnel{position:absolute;top:0;bottom:0;left:50%;width:var(--fw);transform:translateX(-50%)}
.nurture-funnel svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;color:var(--green)}
.nurture-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) var(--fw) minmax(0,1fr);column-gap:clamp(28px,3.5vw,56px);grid-auto-rows:minmax(118px,auto)}
.nurture-steps li:nth-child(odd){grid-column:1;text-align:right}
.nurture-steps li:nth-child(odd) p{margin-left:auto}
.nurture-steps li:nth-child(even){grid-column:3}
.nurture-steps li:nth-child(1){grid-row:1}.nurture-steps li:nth-child(2){grid-row:2}.nurture-steps li:nth-child(3){grid-row:3}.nurture-steps li:nth-child(4){grid-row:4}.nurture-steps li:nth-child(5){grid-row:5}.nurture-steps li:nth-child(6){grid-row:6}
.nurture-steps li{padding:22px 0 22px;border-top:1px solid #173e3430;transition:border-color .4s}
.nurture-steps h3{font-size:clamp(24px,2.2vw,31px);font-weight:400;letter-spacing:-.04em;margin:0 0 10px;transition:color .4s}
.nurture-steps p{font-size:16px;line-height:1.55;margin:0;max-width:400px;color:var(--muted)}
.nurture-steps li.is-reached{border-top-color:var(--teal)}
.nurture-steps li.is-hover h3{color:var(--teal)}
/* Each step is a link to its own page, with a small drawing on the outer side, away from the funnel */
.nurture-steps{--art:clamp(72px,8vw,120px);--art-gap:clamp(16px,1.8vw,28px)}
.nurture-steps li{position:relative}
.nurture-step{display:grid;grid-template-columns:var(--art) minmax(0,1fr);column-gap:var(--art-gap);align-items:start;color:inherit;border-radius:6px}
.nurture-steps li:nth-child(even) .nurture-step{grid-template-columns:minmax(0,1fr) var(--art)}
.nurture-steps li:nth-child(even) .nurture-art{order:2}
.nurture-text{display:block}
.nurture-nw{white-space:nowrap}
.nurture-art{margin-top:4px;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.nurture-go{display:inline-block;width:.62em;height:.62em;margin-left:.3em;vertical-align:.06em;opacity:.35;transition:opacity .3s,transform .3s}
.nurture-steps li.is-hover .nurture-art,.nurture-steps li.is-open .nurture-art,.nurture-step:hover .nurture-art,.nurture-step:focus-visible .nurture-art{transform:translateY(-3px)}
.nurture-step:hover h3,.nurture-step:focus-visible h3,.nurture-steps li.is-open h3{color:var(--teal)}
.nurture-step:hover .nurture-go,.nurture-step:focus-visible .nurture-go,.nurture-steps li.is-open .nurture-go{opacity:1;transform:translateX(3px)}
.nurture-steps li.is-open .nurture-step .step-art .sa-ping{animation:sa-ping 1.6s ease-out infinite}

/* Preview card: hover or keyboard focus on desktop, a first tap on touch */
.nurture-preview{display:none;color:var(--green)}
.np-thumb{display:block;aspect-ratio:240/150;border-radius:9px;overflow:hidden;border:1px solid #173e3420;background:var(--cream)}
.np-thumb svg{display:block;width:100%;height:100%}
.np-label{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:4px 6px 0;font-size:13.5px;color:var(--teal);text-align:left}
.np-label .nurture-go{opacity:1;margin:0;width:14px;height:14px;flex:none}
.nurture-preview:hover .nurture-go{transform:translateX(3px)}
@keyframes np-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(min-width:1001px){
  .nurture-preview{display:block;position:absolute;top:calc(100% - 12px);width:min(232px,100%);z-index:6;padding:8px 8px 4px;border:1px solid #173e3430;border-radius:14px;background:#fbf9f2;box-shadow:0 22px 50px #173e341a;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,transform .35s cubic-bezier(.22,1,.36,1),visibility 0s linear .35s}
  .nurture-steps li:nth-child(odd) .nurture-preview{right:0}
  .nurture-steps li:nth-child(even) .nurture-preview{left:0}
}
/* With enough room, the preview sits beside the step on the funnel side, clear of the centre line */
@media(min-width:1240px){
  .nurture-preview{top:16px;width:min(258px,calc(var(--fw)/2 + 8px))}
  .nurture-steps li:nth-child(odd) .nurture-preview{right:auto;left:calc(100% + 14px)}
  .nurture-steps li:nth-child(even) .nurture-preview{left:auto;right:calc(100% + 14px)}
  .nurture-steps li.is-open .nurture-preview{opacity:1;visibility:visible;transform:none;transition-delay:0s}
}
@media(min-width:1001px) and (hover:hover){
  .nurture-steps li:hover .nurture-preview,.nurture-steps li:focus-within .nurture-preview{opacity:1;visibility:visible;transform:none;transition-delay:0s}
}

/* Funnel drawing */
.nurture-funnel .nf-wall,.nurture-funnel .nf-ring,.nurture-funnel .nf-back,.nurture-funnel .nf-lead,.nurture-funnel .nf-rim{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.nurture-funnel .nf-wall{stroke-opacity:.7}
.nurture-funnel .nf-rim{stroke-opacity:.45}
.nurture-funnel .nf-ring{stroke-opacity:.45;transition:stroke .5s,stroke-opacity .5s}
.nurture-funnel .nf-back{stroke-opacity:.14}
.nurture-funnel .nf-lead{stroke-opacity:.25;stroke-dasharray:2 4;transition:stroke .5s,stroke-opacity .5s}
.nurture-funnel .nf-band{fill:var(--teal);fill-opacity:0;transition:fill-opacity .5s}
.nurture-funnel .is-reached .nf-ring{stroke:var(--teal);stroke-opacity:.9}
.nurture-funnel .is-reached .nf-lead{stroke:var(--teal);stroke-opacity:.6}
.nurture-funnel .is-hover .nf-band{fill-opacity:.06}
.nurture-funnel .nf-dot{fill:var(--cream);stroke:currentColor;stroke-width:1.1;vector-effect:non-scaling-stroke}
.nurture-funnel .nf-dot.is-warm{fill:var(--teal);stroke:var(--teal)}
.nurture-funnel .nf-dot.is-out{fill:none;stroke-opacity:.5}

/* Sample messages */
.nurture-examples{margin-top:150px;padding-left:clamp(30px,5vw,80px)}
.nurture-examples-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:56px}
.nurture-examples-head h3{font-size:clamp(32px,3.2vw,50px);font-weight:400;letter-spacing:-.05em;line-height:1;margin:0}
.nurture-examples-head p{font-size:15px;line-height:1.5;margin:0;max-width:330px;color:var(--muted)}
/* Industry switcher: one row of pills, scrolls sideways on small screens */
.msg-tabs{display:flex;gap:8px;margin:0 0 40px;padding:2px 0 6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.msg-tabs::-webkit-scrollbar{display:none}
.msg-tabs button{flex:0 0 auto;scroll-snap-align:start;min-height:44px;padding:0 18px;border:1px solid #173e3440;border-radius:100px;background:transparent;color:var(--green);font-size:14px;cursor:pointer;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.msg-tabs button:hover{border-color:var(--green)}
.msg-tabs button[aria-selected="true"]{background:var(--green);border-color:var(--green);color:var(--cream)}
.msg-tabs button:focus-visible{outline:2px solid var(--rust);outline-offset:3px}
.msg-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-items:start;transition:opacity .22s ease,transform .3s cubic-bezier(.22,1,.36,1)}
.msg-cards:focus-visible{outline:2px solid var(--rust);outline-offset:10px;border-radius:12px}
.msg-cards.is-leaving{opacity:0;transform:translateY(10px)}
.msg-cards.is-entering{opacity:0;transform:translateY(-6px);transition:none}
.msg-card{margin:0;padding:18px 20px 16px;border:1px solid #173e3430;border-radius:16px;background:#fbf9f2;font-size:14.5px;line-height:1.55;color:#33463f;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));transition:transform .6s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .35s}
.msg-card:nth-child(2){margin-top:70px}.msg-card:nth-child(3){margin-top:22px}.msg-card:nth-child(4){margin-top:104px}
.msg-card:hover{border-color:var(--teal);box-shadow:0 18px 40px #173e3414}
.msg-card header{display:flex;justify-content:space-between;gap:12px;font-size:11.5px;letter-spacing:.01em;color:var(--muted);padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid #173e3420}
.msg-card header span:first-child{color:var(--teal)}
.msg-card header span:last-child{text-align:right}
.msg-card p{margin:0 0 10px}
.msg-from{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted)}
.msg-avatar{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#e8ede2;color:var(--green);font-size:11.5px}
.msg-card.is-linkedin .msg-avatar{background:#173e34;color:var(--cream)}
.msg-subject{font-size:16px;letter-spacing:-.02em;color:var(--green)}
.msg-sign{color:var(--muted)}
.msg-bubble{background:#e8ede2;border-radius:14px 14px 14px 4px;padding:12px 14px}
.msg-card.is-linkedin .msg-bubble{background:#fff;border:1px solid #173e3422;border-radius:12px}
.msg-card u{text-decoration-color:var(--teal);text-underline-offset:3px;color:var(--green)}
.msg-card footer{all:unset;display:block;margin-top:14px;padding-top:10px;border-top:1px dashed #173e3426;font-size:11.5px;color:var(--teal)}

@media(max-width:1000px){
  .nurture{padding-bottom:110px}
  .nurture-head{margin-bottom:60px}
  .nurture-funnel{position:relative;top:auto;bottom:auto;left:auto;transform:none;width:min(100%,520px);height:340px;margin:0 auto 70px}
  .nurture-steps{display:block;margin-left:8%}
  .nurture-steps li:nth-child(n){text-align:left}
  .nurture-steps li:nth-child(n) p{margin-left:0}
  .nurture-steps{--art:76px}
  .nurture-steps li:nth-child(n) .nurture-step{grid-template-columns:var(--art) minmax(0,1fr)}
  .nurture-steps li:nth-child(n) .nurture-art{order:0}
  .nurture-go{opacity:.6}
  .nurture-steps li.is-open .nurture-preview{display:block;max-width:300px;margin:16px 0 4px calc(var(--art) + var(--art-gap));padding:8px 8px 2px;border:1px solid #173e3430;border-radius:14px;background:#fbf9f2;animation:np-in .35s cubic-bezier(.22,1,.36,1)}
  .nurture-steps li:last-child{border-bottom:1px solid #173e3430}
  .nurture-examples{margin-top:100px;padding-left:0}
  .nurture-examples-head{display:block}
  .nurture-examples-head p{margin-top:16px}
  .msg-cards{grid-template-columns:repeat(2,minmax(0,1fr));margin-left:8%}
  .msg-tabs{margin-left:8%;margin-right:calc(var(--gutter)*-1);padding-right:var(--gutter)}
  .msg-card:nth-child(n){margin-top:0}
  .msg-card:nth-child(2n){margin-top:40px}
}
@media(max-width:600px){
  .nurture{padding-top:20px}
  .nurture-head{column-gap:40px;align-items:start}
  .nurture-head h2{font-size:8.4vw}
  .nurture-head p{font-size:14px;line-height:1.5;margin-top:4px}
  .nurture-funnel{height:280px}
  .nurture-steps{margin-left:8%}
  .nurture-steps h3{font-size:24px}
  .nurture-steps{--art:58px;margin-left:4%}
  .msg-cards{grid-template-columns:1fr;margin-left:4%}
  .msg-tabs{margin-left:4%;margin-bottom:28px}
  .msg-card:nth-child(2n){margin-top:0}
}
@media(prefers-reduced-motion:reduce){.msg-card{transform:none}.msg-cards{transition:none}}

/* Sample messages hidden for now: remove the hidden attribute on .msg-examples in index.html to bring it back */
.msg-examples[hidden]{display:none!important}