#kcsr-pipe-story{--pipe-header-offset:92px;--pipe-navy:#071c34;--pipe-cream:#eee9e2;--pipe-orange:#ff8a32;color:var(--pipe-cream);background:var(--pipe-navy);font-family:Outfit,Arial,Helvetica,sans-serif;position:relative;isolation:isolate;margin:0;width:100%;overflow:clip}
#kcsr-pipe-story *{box-sizing:border-box}
#kcsr-pipe-story .story{position:relative;margin:0;padding:0;background:var(--pipe-navy);color:var(--pipe-cream)}
#kcsr-pipe-story .sticky{position:relative;padding:28px clamp(20px,6vw,90px) 18px;display:flex;flex-direction:column;overflow:hidden}
#kcsr-pipe-story h2{color:var(--pipe-cream);font:600 clamp(24px,3vw,38px)/1.15 Outfit,Arial,sans-serif;letter-spacing:-.8px;text-align:center;margin:0 0 12px;position:relative;z-index:2}
#kcsr-pipe-story .scene{position:relative;min-height:180px;flex:1;z-index:1}
#kcsr-pipe-story .halo{position:absolute;width:75%;height:70%;left:15%;top:15%;background:radial-gradient(ellipse,#16476675,transparent 65%);pointer-events:none}
#kcsr-pipe-story canvas{position:absolute;width:100%;height:100%;display:none;inset:0}
#kcsr-pipe-story .pipe-fallback{position:relative;max-width:600px;margin:40px auto;color:#bac9d5;font-size:16px;line-height:1.6;text-align:center}
#kcsr-pipe-story.pipe-ready canvas{display:block}
#kcsr-pipe-story.pipe-ready .pipe-fallback{display:none}
#kcsr-pipe-story.pipe-ready .story{height:380svh}
#kcsr-pipe-story.pipe-ready .sticky{position:sticky;top:var(--pipe-header-offset);height:calc(100svh - var(--pipe-header-offset));min-height:520px;max-height:1000px}
#kcsr-pipe-story .scene-note{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:space-between;font-size:7px;letter-spacing:1px;color:#90a8bd;gap:10px}
#kcsr-pipe-story .caption{position:relative;z-index:2;display:flex;gap:18px;align-items:flex-start;padding:10px 0 8px;margin:0 auto;max-width:720px;width:100%}
#kcsr-pipe-story .caption>span{font-size:10px;color:var(--pipe-orange);letter-spacing:1px;white-space:nowrap;margin-top:5px}
#kcsr-pipe-story .caption h3{font:600 clamp(18px,2vw,24px)/1.2 Outfit,Arial,sans-serif;letter-spacing:-.4px;color:var(--pipe-cream);margin:0 0 5px}
#kcsr-pipe-story .caption p{font:400 13px/1.45 Outfit,Arial,sans-serif;color:#bac9d5;margin:0;max-width:600px}
#kcsr-pipe-story .steps{position:relative;z-index:2;display:flex;justify-content:space-between;gap:10px;margin:0;padding:0;background:none;width:100%;border:0}
#kcsr-pipe-story .steps button{font:400 12px/1.2 Outfit,Arial,sans-serif;border:0;border-radius:0;box-shadow:none;background:transparent;color:#94aabd;padding:10px 0;min-height:44px;text-align:left;cursor:pointer;transform:none}
#kcsr-pipe-story .steps button span{font-size:9px;margin-right:8px;color:#8096a9}
#kcsr-pipe-story .steps button[aria-current]{color:var(--pipe-cream)}
#kcsr-pipe-story .steps button[aria-current] span{color:var(--pipe-orange)}
#kcsr-pipe-story .track{height:2px;background:#365066;margin:0;z-index:2;flex-shrink:0}
#kcsr-pipe-story .track span{display:block;width:0;height:100%;background:var(--pipe-orange)}
#kcsr-pipe-story .pipe-actions{display:flex;justify-content:center;align-items:center;gap:24px;padding-top:10px;z-index:2}
#kcsr-pipe-story .pipe-actions a{font:600 13px/1.2 Outfit,Arial,sans-serif;color:var(--pipe-cream);text-decoration:none;border:1px solid var(--pipe-orange);border-radius:5px;padding:11px 18px;min-height:40px;background:transparent}
#kcsr-pipe-story .pipe-actions a:hover{background:#ff8a321a}
#kcsr-pipe-story .pipe-actions a span{color:var(--pipe-orange);margin-left:10px}
#kcsr-pipe-story .pipe-actions button{display:none;border:0;background:transparent;color:#bac9d5;font:400 12px/1.2 Outfit,Arial,sans-serif;cursor:pointer;padding:10px;min-height:40px}
#kcsr-pipe-story.pipe-ready .pipe-actions button{display:block}
#kcsr-pipe-story .pipe-note{font:400 10px/1.4 Outfit,Arial,sans-serif;color:#90a8bd;text-align:center;margin:8px 0 0}
#kcsr-pipe-story button:focus-visible,#kcsr-pipe-story a:focus-visible{outline:2px solid var(--pipe-orange);outline-offset:4px}
@media(max-width:600px){#kcsr-pipe-story .sticky{padding:20px 20px 12px}#kcsr-pipe-story h2{font-size:25px;letter-spacing:-.5px}#kcsr-pipe-story .caption{gap:12px}#kcsr-pipe-story .caption p{font-size:12px}#kcsr-pipe-story .steps{gap:5px}#kcsr-pipe-story .steps button{font-size:11px}#kcsr-pipe-story .steps button span{display:block;margin-bottom:4px;font-size:8px}#kcsr-pipe-story .scene-note{font-size:6px}#kcsr-pipe-story.pipe-ready .sticky{min-height:540px}#kcsr-pipe-story .pipe-actions{gap:16px}}
@media(max-height:480px) and (orientation:landscape){#kcsr-pipe-story.pipe-ready .story{height:auto}#kcsr-pipe-story.pipe-ready .sticky{position:relative;top:auto;height:620px;max-height:none}}
@media(prefers-reduced-motion:reduce){#kcsr-pipe-story.pipe-ready .story{height:auto}#kcsr-pipe-story.pipe-ready .sticky{position:relative;top:auto;height:650px;max-height:none}}

/* Clearer section spacing and a scroll-driven portrait mobile layout. */
#kcsr-pipe-story{border-top:32px solid #f0f2f7}
#kcsr-pipe-story .sticky{padding-top:42px}
#kcsr-pipe-story h2{font-size:clamp(38px,4vw,52px);color:#eee9e2!important;margin-bottom:14px}
@media(max-width:600px){
 #kcsr-pipe-story{border-top-width:28px}
 #kcsr-pipe-story .sticky{padding:32px 18px 12px}
 #kcsr-pipe-story h2{font-size:36px;line-height:1.1;color:#eee9e2!important;margin-bottom:10px}
 #kcsr-pipe-story.pipe-ready .sticky{min-height:0;height:calc(100svh - var(--pipe-header-offset) - var(--pipe-bottom-offset,0px))}
 #kcsr-pipe-story .scene{min-height:100px}
 #kcsr-pipe-story .caption{padding:7px 0 5px;gap:10px}
 #kcsr-pipe-story .caption h3{font-size:18px}
 #kcsr-pipe-story .caption p{font-size:11px;line-height:1.35}
 #kcsr-pipe-story .steps button{padding:7px 0;font-size:10px}
 #kcsr-pipe-story .pipe-actions{padding-top:7px;gap:10px}
 #kcsr-pipe-story .pipe-actions a{font-size:12px;padding:9px 13px}
 #kcsr-pipe-story .pipe-note{font-size:9px;margin-top:5px}
}
@media(prefers-reduced-motion:reduce){#kcsr-pipe-story.pipe-ready .sticky{height:620px;min-height:620px}}
@media(max-height:480px) and (orientation:landscape){#kcsr-pipe-story.pipe-ready .sticky{height:620px;min-height:620px}}

@media(min-height:481px), (orientation:portrait){#kcsr-pipe-story.pipe-ready .sticky{height:var(--pipe-panel-height,calc(100svh - var(--pipe-header-offset) - var(--pipe-bottom-offset,0px)));min-height:0}}
@media(prefers-reduced-motion:reduce){#kcsr-pipe-story.pipe-ready .sticky{height:620px;min-height:620px}}

/* Breathing room below the caption and before the blue section ends. */
#kcsr-pipe-story{padding-bottom:36px}
#kcsr-pipe-story .sticky{padding-bottom:30px}
@media(max-width:600px){#kcsr-pipe-story{padding-bottom:32px}#kcsr-pipe-story .sticky{padding-bottom:24px}}

#kcsr-pipe-story h2{transform:translateY(5px)}

/* Balance the controls + disclaimer beneath the progress line without
   changing animation geometry, section height, type, or interaction. */
#kcsr-pipe-story .pipe-actions,
#kcsr-pipe-story .pipe-note{transform:translateY(28px)}
@media(max-width:600px){
 #kcsr-pipe-story .pipe-actions,
 #kcsr-pipe-story .pipe-note{transform:translateY(24px)}
}
/* Desktop emphasis: approximately five CSS inches, never a physical-size promise. */
@media(min-width:901px){
 #kcsr-pipe-story .pipe-actions a{
  width:480px;max-width:calc(100% - 120px);flex:0 1 480px;
  display:flex;align-items:center;justify-content:center;text-align:center;
 }
}
/* Homepage FAQ: heading left, three questions right; natural DOM order on mobile. */
@media(min-width:901px){
 .split:has(>.desktop-faq-heading)>div:first-child{grid-column:1;grid-row:1}
 .split:has(>.desktop-faq-heading)>div:last-child{grid-column:2;grid-row:1}
}
/* Small desktop-only balance adjustment to homepage right-hand hero content. */
@media(min-width:901px){
 .hero-panel>.hero-layout>.hero-summary{transform:translateY(12px)}
}
