.sfp{--sfp-cream:var(--e-gv-e561443,#f2f0eb);--sfp-ink:var(--e-gv-35cef91,#0D0D0D);--sfp-accent:var(--e-gv-bdd69cf,#F2B705);--sfp-head:var(--e-gv-663f235,"Chakra Petch");--sfp-body:var(--e-gv-5a42bf5,"Barlow");--sfp-p:0;position:relative;overflow:hidden;background:var(--sfp-cream);color:var(--sfp-ink);-webkit-tap-highlight-color:transparent}
.sfp *,.sfp *::before,.sfp *::after{box-sizing:border-box}
.sfp ::selection{background:rgba(242,183,5,.32);color:var(--sfp-ink)}
.sfp__ribbon{position:relative;overflow:hidden;padding:.5rem 0;border-bottom:1px solid rgba(13,13,13,.12)}
.sfp__ribbon-track{display:flex;align-items:center;gap:1.1rem;width:max-content;animation:sfp-slide 34s linear infinite;will-change:transform}
.sfp__ribbon-word{font-family:var(--sfp-head),sans-serif;font-weight:700;font-style:italic;font-size:clamp(2.4rem,11vw,5.5rem);line-height:1.05;letter-spacing:-.04em;text-transform:uppercase;white-space:nowrap;color:var(--sfp-ink)}
.sfp__ribbon-word.is-out{color:transparent;-webkit-text-stroke:1px rgba(13,13,13,.34)}
.sfp__ribbon-sep{font-family:var(--sfp-head),sans-serif;font-weight:700;font-size:clamp(1.1rem,4vw,2rem);color:var(--sfp-accent)}
@keyframes sfp-slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.sfp__inner{position:relative;z-index:2;display:flex;flex-direction:column;gap:2.25rem;width:100%;max-width:84rem;margin:0 auto;padding:2.75rem 1.15rem 3rem}
.sfp__head{display:flex;flex-direction:column;gap:.7rem;max-width:30rem}
.sfp__eyebrow{display:flex;align-items:center;gap:.6rem;margin:0;font-family:var(--sfp-body),sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(13,13,13,.55)}
.sfp__dot{flex:none;width:.4rem;height:.4rem;border-radius:50%;background:var(--sfp-accent)}
.sfp__title{margin:0;font-family:var(--sfp-head),sans-serif;font-weight:700;font-size:clamp(2.1rem,9vw,2.9rem);line-height:.98;letter-spacing:-.035em;color:var(--sfp-ink)}
.sfp__title em{font-style:italic;color:var(--sfp-ink);background:linear-gradient(transparent 62%,rgba(242,183,5,.85) 62%)}
.sfp__lead{margin:0;font-family:var(--sfp-body),sans-serif;font-size:1rem;line-height:1.65;color:rgba(13,13,13,.66)}
.sfp__steps{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.5rem}
.sfp__line{position:absolute;left:1.15rem;top:.4rem;bottom:.4rem;width:1px;background:rgba(13,13,13,.14)}
.sfp__line-fill{position:absolute;inset:0;background:var(--sfp-accent);transform:scaleY(var(--sfp-p,0));transform-origin:top;transition:transform .25s linear}
.sfp__step{position:relative;display:grid;grid-template-columns:2.3rem 1fr;column-gap:1rem;row-gap:.3rem;align-items:start;transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
/* Dimmed only once script.js is running, which it marks with data-sfp-ready.
   Without the script every step simply shows at full strength. */
.sfp[data-sfp-ready]:not(.sfp--static) .sfp__step:not(.is-on){opacity:.32;transform:translateY(14px)}
.sfp__badge{grid-row:1/3;display:flex;align-items:center;justify-content:center;width:2.3rem;height:2.3rem;border:1px solid rgba(13,13,13,.2);border-radius:50%;background:var(--sfp-cream);font-family:var(--sfp-head),sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:rgba(13,13,13,.5);transition:background-color .5s ease,border-color .5s ease,color .5s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.sfp__step.is-on .sfp__badge{background:var(--sfp-accent);border-color:var(--sfp-accent);color:var(--sfp-ink);transform:scale(1.08)}
.sfp__step-title{grid-column:2;margin:0;font-family:var(--sfp-head),sans-serif;font-weight:700;font-size:clamp(1.25rem,5.6vw,1.6rem);line-height:1.1;letter-spacing:-.02em;color:var(--sfp-ink)}
.sfp__step-desc{grid-column:2;margin:0;max-width:34rem;font-family:var(--sfp-body),sans-serif;font-size:.92rem;line-height:1.6;color:rgba(13,13,13,.64)}

/* ---------- icons in the badges ----------
   The step icon sits inside the circle that lights up, and the number moves
   up beside the heading. The icon is inline, so it reads two custom
   properties from the circle: at rest it keeps its own two tones on cream,
   and once the circle turns yellow every yellow part turns ink, or it would
   vanish into the circle. Nothing is cropped and nothing overlaps the copy.
   A step without an icon takes the same column, so the line still runs
   through the middle of its badge. */
.sfp__steps--ico .sfp__step{grid-template-columns:3.5rem 1fr}
.sfp__steps--ico .sfp__step:not(.sfp__step--ico) .sfp__badge{justify-self:center}
.sfp__step--ico .sfp__badge{width:3.5rem;height:3.5rem;padding:.3rem;--ico-ink:#0d0d0d;--ico-accent:#f2b705}
.sfp__step--ico.is-on .sfp__badge{--ico-accent:#0d0d0d}
.sfp__badge .sf-ico{display:block;width:100%;height:100%}
.sfp__badge .sf-ico *{transition:fill .5s ease}
.sfp__steps--ico .sfp__line{left:1.75rem}
.sfp__step-num{display:inline-block;margin-right:.55em;padding:.08em .16em 0;font-size:.5em;letter-spacing:.06em;line-height:1;vertical-align:.5em;font-variant-numeric:tabular-nums;color:rgba(13,13,13,.45);transition:color .5s ease}
.sfp__step.is-on .sfp__step-num{color:var(--sfp-ink);background:linear-gradient(transparent 55%,rgba(242,183,5,.85) 55%)}

.sfp__foot{display:flex;flex-direction:column;gap:1.1rem;padding-top:1.5rem;border-top:1px solid rgba(13,13,13,.12)}
.sfp__note{margin:0;font-family:var(--sfp-head),sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(13,13,13,.5)}
.sfp__cta{display:inline-flex;align-self:flex-start;align-items:center;gap:.6rem;min-height:3rem;padding:.8rem 1.6rem;background:var(--sfp-ink);color:var(--sfp-cream);text-decoration:none;font-family:var(--sfp-body),sans-serif;font-weight:600;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;transition:background-color .3s ease,color .3s ease,transform .3s ease}
.sfp__cta-icon{width:1.05rem;height:1.05rem;transition:transform .3s ease}
.sfp__cta:hover,.sfp__cta:focus-visible{background:var(--sfp-accent);color:var(--sfp-ink)}
.sfp__cta:hover .sfp__cta-icon{transform:translateX(4px)}
.sfp__cta:active{transform:scale(.98)}
@media (min-width:1025px){
.sfp__ribbon{padding:.8rem 0}
.sfp__inner{display:grid;grid-template-columns:5fr 7fr;grid-template-areas:"head steps" "foot steps";align-items:start;column-gap:clamp(3rem,6vw,6rem);row-gap:3rem;padding:5rem 3rem 5.5rem}
.sfp__head{grid-area:head;max-width:26rem}
.sfp__steps{grid-area:steps;gap:2.25rem}
.sfp__foot{grid-area:foot}
.sfp__title{font-size:clamp(2.9rem,4.4vw,4.4rem)}
.sfp__lead{font-size:1.08rem}
.sfp__step{grid-template-columns:3rem 1fr;column-gap:1.4rem;row-gap:.45rem}
.sfp__badge{width:3rem;height:3rem;font-size:.85rem}
.sfp__line{left:1.5rem}
.sfp__step-title{font-size:clamp(1.6rem,2.2vw,2.1rem)}
.sfp__step-desc{font-size:1rem}
.sfp__steps--ico .sfp__step{grid-template-columns:4.5rem 1fr}
.sfp__step--ico .sfp__badge{width:4.5rem;height:4.5rem;padding:.4rem}
.sfp__steps--ico .sfp__line{left:2.25rem}
}
@media (prefers-reduced-motion:reduce){
.sfp__ribbon-track{animation:none}
.sfp__step{transition:none}
.sfp__line-fill{transform:scaleY(1)}
.sfp__badge .sf-ico *,.sfp__step-num{transition:none}
}
.sfp--static .sfp__line-fill{transform:scaleY(1)}