/* "How it works" timeline, rendered by HowItWorks.ascx on the home page (both programs, with a
   picker) and on /campaigns/ and /maintenance/ (one program each). Class names keep the hp- prefix
   from the home page where it was built. */
/* ---- Timeline: "How it works for many locations". Replaces the Why / Choose / Rollout trio.
   A line down the middle, numbered dots on it, cards alternating left and right; on phones the
   line moves to the left edge and every card sits to its right. Steps and chips use kp-reveal. */
.hp-timeline{background:#fff}
.hp-tl{list-style:none;margin:36px 0 0;padding:0;position:relative}
.hp-tl:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:linear-gradient(to bottom,#cfe3d8,var(--kp-g,#2f9e63) 12%,var(--kp-g,#2f9e63) 88%,#cfe3d8)}
.hp-tl-step{position:relative;display:grid;grid-template-columns:1fr 72px 1fr;align-items:start;margin:0 0 28px}
.hp-tl-step:last-child{margin-bottom:0}
.hp-tl-dot{grid-column:2;justify-self:center;width:40px;height:40px;border-radius:50%;background:var(--kp-g,#2f9e63);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;box-shadow:0 0 0 6px #fff,0 0 0 7px #cfe3d8;position:relative;z-index:1;margin-top:22px}
.hp-tl-card{grid-column:1;background:#fff;border:1px solid var(--kp-line,#e4e7ec);border-radius:16px;padding:24px 26px 24px;box-shadow:0 14px 34px -24px rgba(16,24,40,.25);position:relative}
.hp-tl-step.hp-tl-r .hp-tl-card{grid-column:3}
.hp-tl-step.hp-tl-l .hp-tl-card{grid-row:1}
.hp-tl-step.hp-tl-r .hp-tl-dot{grid-row:1}
.hp-tl-card:after{content:"";position:absolute;top:30px;width:14px;height:14px;background:#fff;border:1px solid var(--kp-line,#e4e7ec);transform:rotate(45deg)}
.hp-tl-step.hp-tl-l .hp-tl-card:after{right:-8px;border-left:0;border-bottom:0}
.hp-tl-step.hp-tl-r .hp-tl-card:after{left:-8px;border-right:0;border-top:0}
.hp-tl-k{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--kp-g,#2f9e63);margin-bottom:8px}
.hp-tl-card h3{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0 0 8px;color:var(--ink,#0b1220)}
.hp-tl-card p{font-size:15px;line-height:1.6;color:#475467;margin:0}
.hp-tl-tags{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hp-tl-tags li{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:#eaf6ef;color:#166534;font-size:13px;font-weight:600;line-height:1.2}
.hp-tl-tags li:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--kp-g,#2f9e63);flex:none}
.hp-tl-fork{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.hp-tl-fork a{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--kp-line,#e4e7ec);border-radius:12px;background:#fafbfc;color:var(--ink,#0b1220);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.hp-tl-fork a:hover{border-color:var(--kp-g,#2f9e63);box-shadow:0 10px 24px -18px rgba(16,24,40,.35);transform:translateY(-2px)}
.hp-tl-fork strong{font-size:15.5px;font-weight:700}
.hp-tl-fork span{font-size:13.5px;color:#475467;line-height:1.45}
.hp-tl-fork em{font-style:normal;font-size:13px;font-weight:700;color:var(--kp-g,#2f9e63);margin-top:auto}
.hp-tl-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.hp-tl-actions .hp-btn{font-size:14.5px}
@media(max-width:900px){
.hp-tl:before{left:19px;margin-left:0}
.hp-tl-step{grid-template-columns:40px 1fr;column-gap:16px}
.hp-tl-dot{grid-column:1;grid-row:1;margin-top:18px}
.hp-tl-card,.hp-tl-step.hp-tl-r .hp-tl-card{grid-column:2;grid-row:1}
.hp-tl-card:after{display:none}
.hp-tl-fork{grid-template-columns:1fr}
}
@media(max-width:600px){
.hp-tl{margin-top:26px}
.hp-tl:before{left:15px}
.hp-tl-step{grid-template-columns:32px 1fr;column-gap:12px;margin-bottom:20px}
.hp-tl-dot{width:32px;height:32px;font-size:13px;box-shadow:0 0 0 4px #fff,0 0 0 5px #cfe3d8}
.hp-tl-card{padding:18px 16px}
.hp-tl-card h3{font-size:19px}
.hp-tl-card p{font-size:14px}
}

/* Steps 2-4 split into the two programs so a reader can follow one column down the page. */
.hp-tl-two{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:6px}
.hp-tl-two>div{padding-top:12px;border-top:2px solid #eaf6ef}
.hp-tl-lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#166534;margin-bottom:6px}
.hp-tl-two p{font-size:14.5px}
.hp-tl-two .hp-tl-tags{margin-top:12px}
@media(max-width:600px){.hp-tl-two{grid-template-columns:1fr;gap:14px}}

/* Step 1 is a choice: two toggle buttons. The chosen program's column is the only one shown in
   steps 2-4; choosing again replays the reveal and scrolls to step 2. */
.hp-tl-pick,.hp-tl-pick strong,.hp-tl-pick span,.hp-tl-pick em{text-transform:none;letter-spacing:0}
.hp-tl-pick{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;margin:0;padding:18px 16px 16px;font:inherit;text-align:left;cursor:pointer;appearance:none;-webkit-appearance:none;border:2px solid var(--kp-line,#e4e7ec);border-radius:14px;background:#fff;color:var(--ink,#0b1220);transition:border-color .15s,box-shadow .15s,transform .15s,background .15s}
.hp-tl-pick:hover,.hp-tl-pick:focus-visible{border-color:var(--kp-g,#2f9e63);box-shadow:0 12px 28px -18px rgba(16,24,40,.35);transform:translateY(-2px);background:#fff;outline:none}
.hp-tl-pick.is-on{border-color:var(--kp-g,#2f9e63);background:#f2faf5;box-shadow:0 0 0 4px rgba(47,158,99,.12)}
.hp-tl-pick strong{font-size:16px;font-weight:700;padding-right:34px;line-height:1.3}
.hp-tl-pick span{font-size:13.5px;color:#475467;line-height:1.45}
.hp-tl-pick em{font-style:normal;font-size:13px;font-weight:700;color:var(--kp-g,#2f9e63);margin-top:6px;display:inline-flex;align-items:center;gap:4px}
.hp-tl-pick em i{font-style:normal;transition:transform .2s}
.hp-tl-pick:hover em i{transform:translateY(2px)}
.hp-tl-pick-ic{position:absolute;top:14px;right:14px;width:26px;height:26px;border-radius:50%;border:2px solid #cfd8d2;background:#fff;color:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.hp-tl-pick-ic svg{width:14px;height:14px;display:block}
.hp-tl-pick.is-on .hp-tl-pick-ic{background:var(--kp-g,#2f9e63);border-color:var(--kp-g,#2f9e63)}
.hp-tl-showing{margin:14px 0 0!important;font-size:13.5px;color:#475467}
.hp-tl-showing b{color:var(--ink,#0b1220);font-weight:700}
.hp-tl-showing a{color:var(--kp-g,#2f9e63);font-weight:700;text-decoration:none}
.hp-tl-showing a:hover{text-decoration:underline}
.hp-tl[data-program="campaigns"] .hp-tl-two>div[data-program="maintenance"],
.hp-tl[data-program="maintenance"] .hp-tl-two>div[data-program="campaigns"]{display:none}
.hp-tl[data-program] .hp-tl-two{grid-template-columns:1fr}
.hp-tl[data-program] .hp-tl-two>div{border-top:0;padding-top:0}
.hp-tl[data-program] .hp-tl-two p{font-size:15px}

/* Nothing is picked by default. Steps 2-4 show a dashed prompt until a program is chosen, and
   scrolling past step 1 without picking wiggles the two cards. Hover must keep the text readable:
   a global button:hover rule paints it white. */
.hp .hp-tl-pick,.hp .hp-tl-pick:hover,.hp .hp-tl-pick:focus,.hp .hp-tl-pick:focus-visible{color:var(--ink,#0b1220)!important}
.hp .hp-tl-pick strong,.hp .hp-tl-pick:hover strong,.hp .hp-tl-pick:focus strong{color:var(--ink,#0b1220)!important}
.hp .hp-tl-pick span,.hp .hp-tl-pick:hover span,.hp .hp-tl-pick:focus span{color:#475467!important}
.hp .hp-tl-pick em,.hp .hp-tl-pick:hover em{color:var(--kp-g,#2f9e63)!important}
.hp .hp-tl-pick-ic,.hp .hp-tl-pick:hover .hp-tl-pick-ic{color:#fff!important}
.hp-tl-empty{display:none;border:2px dashed #cfe3d8;border-radius:12px;padding:18px 18px 16px;background:#fafcfb;margin-top:6px}
.hp-tl-empty p{font-size:14.5px;color:#475467;margin:0 0 10px}
.hp-tl-empty b{color:var(--ink,#0b1220)}
.hp-tl-up,.hp .hp-tl-up:hover{display:inline-flex;align-items:center;gap:6px;margin:0;padding:0;border:0;background:none;font:inherit;font-size:14px;font-weight:700;color:var(--kp-g,#2f9e63)!important;cursor:pointer;text-transform:none;letter-spacing:0}
.hp .hp-tl-up:hover{text-decoration:underline}
.hp-tl:not([data-program]) .hp-tl-empty{display:block}
.hp-tl:not([data-program]) .hp-tl-two{display:none}
@keyframes hpNudge{0%,100%{transform:translateX(0)}15%{transform:translateX(-7px)}30%{transform:translateX(7px)}45%{transform:translateX(-5px)}60%{transform:translateX(5px)}75%{transform:translateX(-2px)}}
.hp-tl-fork.is-nudge .hp-tl-pick{animation:hpNudge .7s ease;border-color:var(--kp-g,#2f9e63)}

/* Each program column in steps 2-4: text on the left, a small picture on the right. */
.hp-tl-col{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:22px;align-items:start}
.hp-tl-vis{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:4px}
.hp-mk-cap{font-size:11.5px;color:#6b7280;text-align:center;line-height:1.3}
/* poster */
.hp-mk-poster{width:118px;padding:9px 9px 8px;background:#fff;border-radius:6px;border-top:5px solid var(--kp-g,#2f9e63);box-shadow:0 10px 24px -12px rgba(17,17,17,.35),0 1px 2px rgba(17,17,17,.08);display:flex;flex-direction:column;align-items:center;text-align:center;transform:rotate(-2deg)}
.hp-mk-poster .l{font-size:6.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--kp-g,#2f9e63);border:1px dashed #b7d4c3;border-radius:3px;padding:2px 6px}
.hp-mk-poster .h{font-size:10.5px;font-weight:800;line-height:1.15;color:var(--ink,#0b1220);margin-top:7px;letter-spacing:-.01em}
.hp-mk-poster .s{font-size:6px;color:#475467;margin-top:3px}
.hp-mk-poster img{width:52px;height:52px;margin-top:7px;display:block}
.hp-mk-poster .loc{font-size:7px;font-weight:700;color:var(--ink,#0b1220);margin-top:6px;padding-top:5px;border-top:1px solid #e5e7eb;width:100%}
/* machine with label */
.hp-mk-machine{width:170px;padding:12px 10px 10px;border-radius:10px;background:linear-gradient(180deg,#e9edf0,#d6dce2);border:1px solid #c9d1d9;box-shadow:inset 0 1px 0 #fff}
.hp-mk-machine-t{display:block;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6b7280;margin-bottom:8px}
.hp-mk-label{display:flex;align-items:center;gap:8px;padding:8px 9px;background:#fff;border:1px dashed #c4c9d0;border-radius:6px;transform:rotate(-1.5deg);box-shadow:0 6px 14px -8px rgba(17,17,17,.4)}
.hp-mk-label img{width:40px;height:40px;flex:none;display:block}
.hp-mk-label b{display:block;font-size:16px;font-weight:900;line-height:1;color:var(--ink,#0b1220)}
.hp-mk-label span{display:block;font-size:8.5px;color:#475467;margin-top:3px}
.hp-mk-label em{display:block;font-style:normal;font-size:6.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink,#0b1220);margin-top:3px}
/* photo */
.hp-mk-photo{width:150px;height:auto;border-radius:12px;display:block;box-shadow:0 12px 28px -16px rgba(17,17,17,.4)}
/* phone with report form */
.hp-mk-phone{width:150px;padding:12px 11px 11px;border-radius:18px;background:#fff;border:3px solid #111827;box-shadow:0 12px 28px -16px rgba(17,17,17,.5)}
.hp-mk-phone-h{font-size:11px;font-weight:800;color:var(--ink,#0b1220)}
.hp-mk-phone-m{font-size:8.5px;color:#475467;margin:2px 0 8px}
.hp-mk-opt{font-size:9px;font-weight:600;color:#344054;border:1px solid #d0d5dd;border-radius:6px;padding:5px 7px;margin-bottom:4px}
.hp-mk-opt.is-on{border-color:var(--kp-g,#2f9e63);background:#eaf6ef;color:#166534}
.hp-mk-photo-btn{font-size:8.5px;font-weight:600;color:#475467;border:1px dashed #c4c9d0;border-radius:6px;padding:5px 7px;margin:6px 0;text-align:center}
.hp-mk-send{font-size:9.5px;font-weight:700;color:#fff;background:var(--kp-g,#2f9e63);border-radius:6px;padding:6px;text-align:center}
/* results table */
.hp-mk-table{width:190px;background:#fff;border:1px solid var(--kp-line,#e4e7ec);border-radius:10px;overflow:hidden;box-shadow:0 10px 24px -16px rgba(17,17,17,.3)}
.hp-mk-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center;padding:7px 10px;border-top:1px solid #f1f3f5;font-size:10px;color:var(--ink,#0b1220)}
.hp-mk-row:first-child{border-top:0}
.hp-mk-head{font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6b7280;background:#f8faf9}
.hp-mk-row span:last-child{display:flex;align-items:center;gap:6px;font-weight:700}
.hp-mk-row span:last-child i{display:block;height:6px;border-radius:3px;background:#bfe3cf;flex:none;max-width:60%}
.hp-mk-row.opp span:last-child i{background:#f0ad4e}
.hp-mk-row.opp span:first-child{font-weight:700;color:#bd8020}
/* request card */
.hp-mk-req{width:190px;background:#fff;border:1px solid var(--kp-line,#e4e7ec);border-radius:10px;padding:10px 11px;box-shadow:0 10px 24px -16px rgba(17,17,17,.3)}
.hp-mk-req-t{font-size:10.5px;font-weight:800;color:var(--ink,#0b1220)}
.hp-mk-req-p{font-size:8.5px;color:#475467;margin:2px 0 8px}
.hp-mk-steps{display:flex;gap:4px}
.hp-mk-steps span{flex:1;font-size:7.5px;font-weight:700;text-align:center;padding:4px 2px;border-radius:5px;background:#f2f4f7;color:#98a2b3}
.hp-mk-steps span.done{background:#eaf6ef;color:#166534}
.hp-mk-steps span.now{background:var(--kp-g,#2f9e63);color:#fff}
.hp-mk-req-f{font-size:8.5px;color:#475467;margin-top:8px;padding-top:7px;border-top:1px solid #f1f3f5}
@media(max-width:900px){.hp-tl-col{grid-template-columns:minmax(0,1fr) 170px;gap:16px}}
@media(max-width:600px){.hp-tl-col{grid-template-columns:1fr}.hp-tl-vis{align-items:flex-start;padding-top:10px}.hp-mk-photo{width:130px}}

/* Step numbers come from a CSS counter: campaigns counts 1-6 (with its poster step), maintenance
   1-6 (with its assign step), the unpicked path 1-5. Headings carry one span per program. */
.hp-tl{counter-reset:hpstep}
.hp-tl-step{counter-increment:hpstep}
.hp-tl-dot span::before{content:counter(hpstep)}
.hp-tl-k::after{content:counter(hpstep)}
.hp-tl-h{display:none}
.hp-tl:not([data-program]) .hp-tl-h[data-program="none"],
.hp-tl[data-program="campaigns"] .hp-tl-h[data-program="campaigns"],
.hp-tl[data-program="maintenance"] .hp-tl-h[data-program="maintenance"]{display:inline}
.hp-tl:not([data-program="campaigns"]) .hp-tl-step[data-only="campaigns"],
.hp-tl:not([data-program="maintenance"]) .hp-tl-step[data-only="maintenance"]{display:none}
/* Nothing picked yet: step 2 carries the one prompt; every later step is greyed out, heading only. */
.hp-tl:not([data-program]) .hp-tl-step:nth-child(n+3){opacity:.45}
.hp-tl:not([data-program]) .hp-tl-step:nth-child(n+3) .hp-tl-dot{background:#98a2b3;box-shadow:0 0 0 6px #fff,0 0 0 7px #e4e7ec}
.hp-tl:not([data-program]) .hp-tl-step:nth-child(n+3) .hp-tl-card{box-shadow:none;background:#fafbfc}
.hp-tl:not([data-program]) .hp-tl-step:nth-child(n+3) .hp-tl-card > *:not(.hp-tl-k):not(h3){display:none}
.hp-tl:not([data-program]) .hp-tl-step:nth-child(n+3) h3{margin-bottom:0;color:#6b7280}
.hp-mk-pick{width:160px;padding:12px 11px 11px;border-radius:12px;background:#fff;border:1px solid var(--kp-line,#e4e7ec);box-shadow:0 12px 28px -16px rgba(17,17,17,.35)}
.hp-mk-pick-f{font-size:8.5px;font-weight:700;color:#166534;background:#eaf6ef;border-radius:6px;padding:5px 7px;margin-top:6px;text-align:center}

/* On pages without home.css the final-step buttons are kp- buttons; undo global button styling. */
.hp-tl-actions button{font:inherit;font-weight:700;text-transform:none;letter-spacing:0;cursor:pointer;margin:0;line-height:1.2}
.hp-tlwrap{margin-top:34px}
/* One-program pages (campaigns, maintenance): the column label would just repeat the page title. */
.hp-tl-single .hp-tl-lbl{display:none}