/* K9OPRTV Storefront v1.6.1: /app setup flow + service tabs + switching band. Loads only on [k9_app] pages. */
.k9-flow__sub{margin:14px 0 0!important;font-size:17px;color:var(--k9-g500);max-width:640px}
.k9-flow__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:56px;align-items:start;margin-top:8px}
.k9-flow__label{font:700 12px/1 var(--k9-body);letter-spacing:.2em;text-transform:uppercase;color:var(--k9-accent-dk);margin-bottom:18px}

/* steps */
.k9-flow__list{list-style:none;margin:0!important;padding:0!important;counter-reset:none}
.k9-flow__step{position:relative;display:grid;grid-template-columns:52px 1fr;gap:16px;padding:0 0 26px;margin:0}
.k9-flow__step:before{content:"";position:absolute;left:25px;top:52px;bottom:4px;width:2px;background:var(--k9-g300)}
.k9-flow__step:last-child{padding-bottom:0}
.k9-flow__step:last-child:before{display:none}
.k9-flow__n{width:52px;height:52px;border-radius:50%;background:var(--k9-black);color:#fff;display:flex;align-items:center;justify-content:center;font:400 22px/1 var(--k9-display);letter-spacing:.5px;position:relative;z-index:1}
.k9-flow__step:first-child .k9-flow__n{background:var(--k9-red)}
.k9-flow__body{padding-top:4px}
.k9-home .k9-flow__body h3{display:flex;align-items:center;gap:10px;font-size:24px;margin:0 0 6px}
.k9-flow__body h3 .k9-app__ico{width:22px;height:22px;flex:none;fill:none;stroke:var(--k9-red);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.k9-flow__body p{margin:0!important;font-size:15px;line-height:1.55;color:#333}

/* tabs */
.k9-svc{min-width:0;border:1px solid var(--k9-g300);background:#fff;padding:28px 28px 22px}
.k9-svc__tabs{position:relative;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -4px 22px;padding:2px 4px 4px;scroll-snap-type:x proximity}
.k9-svc__tabs::-webkit-scrollbar{display:none}
.k9-svc__tab{flex:none;scroll-snap-align:start;border:1.5px solid var(--k9-black);background:#fff;color:var(--k9-black)!important;padding:11px 18px;border-radius:40px;font:700 12.5px/1 var(--k9-body);letter-spacing:.1em;text-transform:uppercase;text-decoration:none!important;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.k9-svc__tab:hover{background:var(--k9-g100)}
.k9-svc__tab.is-on,.k9-svc__tab[aria-selected="true"]{background:var(--k9-black);color:#fff!important}
.k9-svc__tab:focus-visible{outline:3px solid var(--k9-red);outline-offset:2px}
.k9-svc__panel{padding:0}
.k9-svc__panel+.k9-svc__panel{border-top:1px solid var(--k9-g300);margin-top:24px;padding-top:24px} /* no-JS: stacked */
.k9-svc.is-js .k9-svc__panel+.k9-svc__panel{border-top:0;margin-top:0;padding-top:0}
.k9-svc.is-js .k9-svc__panel[hidden]{display:none}
.k9-svc.is-js .k9-svc__panel:focus-visible{outline:2px solid var(--k9-g300);outline-offset:6px}
.k9-svc__eyebrow{font:700 11.5px/1 var(--k9-body);letter-spacing:.2em;text-transform:uppercase;color:var(--k9-red);margin-bottom:10px}
.k9-home .k9-svc__panel h3{font-size:34px;margin:0 0 10px}
.k9-svc__lead{margin:0 0 18px!important;font-size:15.5px;color:#333}
.k9-svc__list{list-style:none;margin:0!important;padding:0!important}
.k9-svc__list li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;padding:12px 0;border-top:1px solid #ececec;font-size:15px;line-height:1.45;margin:0}
.k9-svc__list svg{width:20px;height:20px;margin-top:1px;fill:none;stroke:var(--k9-red);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.k9-svc__note{margin:14px 0 0!important;font-size:13px;color:var(--k9-g500)}

/* built-in chips */
.k9-flow__all{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;margin-top:48px;padding-top:24px;border-top:1px solid var(--k9-g300)}
.k9-flow__all-t{font:700 12px/1 var(--k9-body);letter-spacing:.2em;text-transform:uppercase}
.k9-flow__all ul{list-style:none;margin:0!important;padding:0!important;display:flex;flex-wrap:wrap;gap:8px}
.k9-flow__all li{margin:0;background:var(--k9-g100);border:1px solid #e3e3e3;padding:7px 12px;border-radius:40px;font:600 12.5px/1.2 var(--k9-body)}

/* switching band */
.k9-switch{background:var(--k9-g100);color:var(--k9-black);padding:72px 0}
.k9-switch__in{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center}
.k9-switch__tag{display:inline-block;background:var(--k9-red);color:#fff;font:700 11px/1 var(--k9-body);letter-spacing:.16em;text-transform:uppercase;padding:7px 10px;border-radius:2px;margin-bottom:16px}
.k9-home .k9-switch h2{font-size:48px}
.k9-switch__copy p{margin:16px 0 0!important;font-size:17px;color:#333;max-width:640px}
.k9-switch__copy .k9-switch__small{font-size:14px;color:var(--k9-g500)}
.k9-switch__copy .k9-switch__offer{color:var(--k9-black);font-weight:700;font-size:16px;border-left:3px solid var(--k9-red);padding-left:12px}
.k9-switch__steps{list-style:none;margin:0!important;padding:0!important;display:grid;gap:12px}
.k9-switch__steps li{display:flex;align-items:center;gap:16px;margin:0;border:1px solid var(--k9-g300);background:#fff;padding:18px 20px;font:700 14px/1.3 var(--k9-body);letter-spacing:.08em;text-transform:uppercase}
.k9-switch__steps span{width:36px;height:36px;flex:none;border-radius:50%;background:var(--k9-black);color:#fff;display:flex;align-items:center;justify-content:center;font:400 18px/1 var(--k9-display)}

@media (max-width:921px){
 .k9-flow__grid{grid-template-columns:minmax(0,1fr);gap:44px}

 .k9-switch__in{grid-template-columns:minmax(0,1fr);gap:30px}
}
@media (max-width:760px){
 .k9-flow__sub{font-size:15.5px}
 .k9-flow__step{grid-template-columns:42px 1fr;gap:14px;padding-bottom:22px}
 .k9-flow__step:before{left:20px;top:42px}
 .k9-flow__n{width:42px;height:42px;font-size:18px}
 .k9-home .k9-flow__body h3{font-size:21px}
 .k9-svc{padding:20px 0 16px;border-left:0;border-right:0;margin:0 -18px;padding-left:18px;padding-right:18px}
 .k9-svc__tabs{margin:0 -18px 18px;padding:2px 18px 4px;scroll-padding:0 18px}
 .k9-home .k9-svc__panel h3{font-size:28px}
 .k9-flow__all{margin-top:36px}
 .k9-home .k9-switch h2{font-size:34px}
 .k9-switch{padding:52px 0}
 .k9-switch__copy p{font-size:15.5px}
}
@media (prefers-reduced-motion:reduce){.k9-svc__tab{transition:none}}
@media (min-width:922px){.k9-svc__tabs{flex-wrap:wrap;overflow:visible;margin:0 0 22px;padding:0}}
.k9-phone picture{display:block;width:100%;height:100%}
/* v1.6.2 per-tab phone screens */
.k9-svc__panel{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:26px;align-items:start}
.k9-svc.is-js .k9-svc__panel[hidden]{display:none}
.k9-svc__phone{margin:0;text-align:center}
.k9-phone.k9-phone--tab{position:static;transform:none;width:190px;margin:0 auto;opacity:1;border-width:6px;border-radius:26px;box-shadow:0 0 0 1px #333,0 16px 34px rgba(0,0,0,.28)}
.k9-svc__phone figcaption{margin-top:10px;font:500 12px/1.35 var(--k9-body);color:var(--k9-g500)}
@media (min-width:922px) and (max-width:1180px){.k9-svc__panel{grid-template-columns:1fr}.k9-svc__phone{max-width:200px;margin:0 auto}}
@media (max-width:921px){.k9-svc__panel{grid-template-columns:1fr;gap:22px}.k9-phone.k9-phone--tab{width:min(200px,56vw)}}
/* v1.6.4 swipe: slide-in, edge bounce, dots hint (phones only) */
@keyframes k9svcInR{from{opacity:.2;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes k9svcInL{from{opacity:.2;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes k9svcEdgeR{0%,100%{transform:none}40%{transform:translateX(-14px)}}
@keyframes k9svcEdgeL{0%,100%{transform:none}40%{transform:translateX(14px)}}
.k9-svc__panels{overflow:hidden;overflow:clip;overflow-clip-margin:10px;touch-action:pan-y pinch-zoom}
.k9-svc__panel.k9-svc-in-r{animation:k9svcInR .26s ease-out}
.k9-svc__panel.k9-svc-in-l{animation:k9svcInL .26s ease-out}
.k9-svc__panel.k9-svc-edge-r{animation:k9svcEdgeR .32s ease-out}
.k9-svc__panel.k9-svc-edge-l{animation:k9svcEdgeL .32s ease-out}
.k9-svc__hint{display:none}
@media (max-width:921px){
 .k9-svc__hint{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:18px}
 .k9-svc__dots{display:flex;gap:7px}
 .k9-svc__dots i{display:block;width:7px;height:7px;border-radius:50%;background:var(--k9-g300);transition:width .2s,background .2s}
 .k9-svc__dots i.is-on{width:20px;border-radius:4px;background:var(--k9-black)}
 .k9-svc__swipe{font:600 11.5px/1 var(--k9-body);letter-spacing:.14em;text-transform:uppercase;color:var(--k9-g500)}
}
@media (prefers-reduced-motion:reduce){.k9-svc__panel{animation:none!important}.k9-svc__dots i{transition:none}}
