/* Customer pills enter the open box behind its real front layer. */
.ki-order-hero{--ki-order-pin:130px;--ki-order-top-space:64px;padding-block:var(--ki-order-top-space) 80px}
.ki-order-stage{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);grid-template-rows:1fr auto;column-gap:64px;row-gap:40px;align-items:start}
.ki-order-copy{grid-column:2;grid-row:1;padding-top:4px;min-width:0;background:var(--canvas)}
.ki-order-badge{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:9px 14px;border:1px solid #dedede;border-radius:99px;background:#fff;font:500 14px/1.4 var(--font-body);color:#333}
.ki-order-badge>span{width:7px;height:7px;border-radius:50%;background:var(--orange);flex-shrink:0}
.ki-order-copy h1{margin-top:24px;font:700 clamp(42px,3.85vw,56px)/1.08 var(--font-display);letter-spacing:-.045em}
.ki-order-copy .ki-order-promise{display:block;color:#737373}
.ki-order-word{white-space:nowrap}
/* The illustration has no line-box height, so it cannot stretch the text leading. */
.ki-order-type-icon{display:inline-block;position:relative;height:0;vertical-align:baseline}
.ki-order-type-icon--phone{width:1.26em;margin-left:.08em;margin-right:-.17em}
.ki-order-type-icon--phone img{position:absolute;left:0;bottom:-.22em;width:100%;height:auto;max-width:none;filter:grayscale(1);opacity:.9;mix-blend-mode:multiply}
.ki-order-avatars{display:inline-flex;vertical-align:-.1em;margin-left:.16em}
.ki-order-avatars img{width:.98em;height:.98em;max-width:none;object-fit:cover;border:.045em solid var(--canvas);border-radius:50%;margin-left:-.27em}
.ki-order-avatars img:first-child{margin-left:0}
.ki-order-description{max-width:500px;margin-top:25px;font:400 18px/1.55 var(--font-body);color:#555}
.ki-order-description>p{margin:0}
.ki-order-benefits{display:grid;gap:7px;list-style:none;margin:15px 0 0;padding:0}
.ki-order-benefits li{position:relative;padding-left:24px;font:inherit}
.ki-order-benefits li::before{content:'';position:absolute;left:3px;top:.65em;width:5px;height:5px;border-radius:50%;background:currentColor}
.ki-order-actions{grid-column:2;grid-row:2;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-bottom:5px;min-width:0;align-self:end}
/* 60px height minus two borders and two 7px insets leaves a 44px circle. */
.ki-order-actions>.button{--button-height:60px;--button-icon:44px;--button-inset:7px;--button-left:20px;--button-right:65px;flex:1 0 auto;justify-items:start;font-size:16px}
.ki-order-actions>.ki-order-paper{--button-left:18px;--button-right:60px;--button-border:#dedede;--button-fill:var(--canvas);--button-fill-text:var(--ink);flex:0 0 auto}
.ki-order-art-track{grid-column:1;grid-row:1/3;min-width:0;align-self:stretch}
.ki-order-art{position:relative;width:100%;aspect-ratio:520/620;border-radius:32px;background:linear-gradient(150deg,#fff,#f6f6f6 50%,#ebebeb);border:1px solid #e6e6e6;overflow:clip;isolation:isolate;container-type:inline-size}
.ki-order-box{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.ki-order-box-back{z-index:1}.ki-order-box-front{z-index:3}
.ki-order-pills{position:absolute;inset:0;z-index:2}
.ki-customer-pill{position:absolute;left:var(--pill-x);top:var(--pill-y);width:58.077%;height:10.645%;display:flex;align-items:center;gap:13px;padding:7px 21px 7px 8px;border-radius:999px;background:var(--pill-surface);color:var(--pill-ink,#fff);transform:translate3d(var(--pill-dx,0px),var(--pill-dy,0px),0) rotate(var(--pill-turn)) scale(var(--pill-scale,1));transform-origin:50% 50%;border:1px solid #ffffff55;box-shadow:inset 0 3px 2px #ffffff75,inset 0 -5px 5px #00000024,0 11px 13px -8px #00000026;font:500 clamp(18px,4.8cqw,25px)/1 var(--font-display);letter-spacing:-.035em;white-space:nowrap}
.ki-customer-pill--blue{--pill-surface:linear-gradient(165deg,#6e8bff,var(--blue) 55%,#3458d5)}
.ki-customer-pill--berry{--pill-surface:linear-gradient(165deg,#c4497f,var(--berry) 60%,#841347)}
.ki-customer-pill--lime{--pill-surface:linear-gradient(165deg,#f7f674,var(--lemon) 55%,#cece21);--pill-ink:#000}
.ki-customer-pill--white{--pill-surface:linear-gradient(165deg,#fff,#f8f8f8 55%,#e0e0e0);--pill-ink:#000}
.ki-customer-pill>img,.ki-customer-phone{display:block;width:48px;width:9.2cqw;height:48px;height:9.2cqw;flex-shrink:0;object-fit:cover;border:3px solid #ffffffbb;border-radius:50%;box-shadow:0 2px 4px #00000018}
.ki-customer-pill>svg{margin-left:auto;width:20px;height:20px;flex-shrink:0}
.ki-customer-pill svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ki-customer-phone{display:grid;place-items:center;background:var(--orange);color:#000}
.ki-customer-phone svg{width:24px;height:24px}
.ki-order-hero[data-order-mode="desktop"]{min-height:calc(var(--ki-order-stage-height) + var(--ki-order-travel) + var(--ki-order-top-space) + 80px)}
.ki-order-hero[data-order-mode="desktop"] .ki-order-stage{position:sticky;top:var(--ki-order-pin)}
.ki-order-hero[data-order-moving="true"] .ki-customer-pill{will-change:transform}
@media(min-width:761px) and (max-width:1100px){
 .ki-order-stage{column-gap:36px;row-gap:30px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .ki-order-copy h1{font-size:clamp(35px,4.3vw,46px)}
 .ki-order-badge{font-size:12px;padding:8px 11px;gap:7px}
 .ki-order-description{font-size:16px;margin-top:22px}
 .ki-order-actions>.button{font-size:16px}
 .ki-order-art-track{align-self:center}
 .ki-customer-pill{gap:9px;padding-right:16px}
}
@media(max-width:760px){
 .ki-order-hero{--ki-order-top-space:44px;padding-block:var(--ki-order-top-space) 60px}
 .ki-order-stage{display:flex;flex-direction:column;gap:28px}
 .ki-order-copy{padding:0;order:0}
 .ki-order-badge{font-size:13px;padding:8px 11px;gap:8px}
 .ki-order-copy h1{font-size:clamp(32px,8.5vw,44px);line-height:1.1;letter-spacing:-.04em;margin-top:23px;max-width:530px}
 .ki-order-description{font-size:16px;line-height:1.55;margin-top:21px;max-width:470px}
 .ki-order-actions{order:1;align-self:stretch;padding:0;gap:12px}
 .ki-order-actions>.button{font-size:16px}
 .ki-order-art-track{order:2;width:100%;margin-top:6px}
 .ki-order-art{border-radius:28px;max-width:520px;margin-inline:auto}
 .ki-customer-pill{gap:10px;padding:5px 16px 5px 6px;font-size:4.8cqw}
 .ki-customer-pill>svg{width:18px;height:18px}.ki-customer-pill>img,.ki-customer-phone{border-width:2px}
 .ki-customer-phone svg{width:20px;height:20px}
 .ki-order-hero[data-order-mode="mobile"] .ki-order-art-track{height:calc(var(--ki-order-art-height) + var(--ki-order-travel))}
 .ki-order-hero[data-order-mode="mobile"] .ki-order-art{position:sticky;top:var(--ki-order-pin)}
}
@media(min-width:761px) and (max-width:900px){
 .ki-order-avatars img{width:.82em;height:.82em;margin-left:-.26em}
}
@media(max-width:374px){
 .ki-order-copy h1{font-size:30px}.ki-order-badge{font-size:12px;padding-inline:9px;gap:6px}
 .ki-order-avatars img{width:.82em;height:.82em;margin-left:-.26em}
 .ki-order-actions>.button{font-size:16px;--button-left:17px;--button-right:60px}
 .ki-customer-pill{gap:8px;padding-right:13px}.ki-customer-pill>svg{width:16px;height:16px}
}
@media(prefers-reduced-motion:reduce){
 .ki-order-hero{min-height:0!important}.ki-order-stage,.ki-order-art{position:relative!important;top:auto!important}
 .ki-order-art-track{height:auto!important}.ki-customer-pill{transform:rotate(var(--pill-rest-turn,var(--pill-turn)))!important;will-change:auto!important}
}
