/* p548: steppers as journeys, an inviting drop zone, brand tiles with a logo slot, smoother loading */
.stepper .sp{--c:#00868D;--c2:#4DB6AC;--k:8%;background:#FFFFFF;background:linear-gradient(170deg,color-mix(in srgb,var(--c) var(--k),#FFFFFF),#FFFFFF 70%);border:1px solid #E3EAEC;border-color:color-mix(in srgb,var(--c) 24%,#E3EAEC);border-top:4px solid var(--c);transition:transform .18s ease,box-shadow .18s ease}
.stepper .sp:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(60,64,67,.12);box-shadow:0 8px 22px color-mix(in srgb,var(--c) 22%,transparent)}
.stepper .spn{background:var(--c);background:linear-gradient(135deg,var(--c2),var(--c));box-shadow:0 2px 6px rgba(0,0,0,.18)}
.stepper .spi{background:linear-gradient(145deg,#FFFFFF,color-mix(in srgb,var(--c) 15%,#FFFFFF));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 28%,#FFFFFF)}
.stepper .spi .ic{stroke:var(--c);color:var(--c)}
.stepper .hn-help summary{color:var(--c)}
.stepper .spa{width:26px;height:3px;border-radius:3px;background:#9FD4D1;background:linear-gradient(90deg,var(--a1,#9FD4D1),var(--a2,#4DB6AC))}
.stepper .spa::after{border-left-color:var(--a2,#4DB6AC)}
#zone-assess .stepper > :nth-child(1){--c:#F29900;--c2:#FFC24B;--k:7%}
#zone-assess .stepper > :nth-child(2){--a1:#F29900;--a2:#F57C00}
#zone-assess .stepper > :nth-child(3){--c:#F57C00;--c2:#FFA040;--k:9%}
#zone-assess .stepper > :nth-child(4){--a1:#F57C00;--a2:#E8453C}
#zone-assess .stepper > :nth-child(5){--c:#E8453C;--c2:#FF7A6E;--k:11%}
#zone-assess .stepper > :nth-child(6){--a1:#E8453C;--a2:#C5221F}
#zone-assess .stepper > :nth-child(7){--c:#C5221F;--c2:#E8453C;--k:13%}
#zone-log .stepper > :nth-child(1){--c:#7CB342;--c2:#AED581;--k:7%}
#zone-log .stepper > :nth-child(2){--a1:#7CB342;--a2:#43A047}
#zone-log .stepper > :nth-child(3){--c:#43A047;--c2:#81C784;--k:9%}
#zone-log .stepper > :nth-child(4){--a1:#43A047;--a2:#00897B}
#zone-log .stepper > :nth-child(5){--c:#00897B;--c2:#4DB6AC;--k:11%}
#zone-log .stepper > :nth-child(6){--a1:#00897B;--a2:#00796B}
#zone-log .stepper > :nth-child(7){--c:#00796B;--c2:#26A69A;--k:13%}
#zone-log .stepper > :nth-child(8){--a1:#00796B;--a2:#00695C}
#zone-log .stepper > :nth-child(9){--c:#00695C;--c2:#00897B;--k:15%}
@media (max-width:760px){.stepper .sp{border-top-width:0;border-left:5px solid var(--c)}}
.cocall .cc-path li:nth-child(1)::before{background:#0057FF}.cocall .cc-path li:nth-child(2)::before{background:#13A86B}.cocall .cc-path li:nth-child(3)::before{background:#C98500}
.cocall .cc-path li:nth-child(4)::before{background:#FF4B3E}.cocall .cc-path li:nth-child(5)::before{background:linear-gradient(135deg,#FF4B3E,#A1306A)}
.consent{border-left:4px solid #F29900;transition:border-color .2s,background .2s}
.consent:has(input:checked){border-left-color:#13A86B;background:#F1FAF5}
.drop{position:relative;border:2px dashed #7FB0E6;border-radius:16px;padding:28px 16px 24px;background:#F3F8FF;background:linear-gradient(135deg,#F3F8FF,#EDF8F6);color:#3C4A52;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}
.drop::before{content:"";display:block;width:48px;height:48px;margin:0 auto 10px;border-radius:14px;background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231967D2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4'/%3E%3Cpath d='M7 9l5-5 5 5'/%3E%3Cpath d='M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3'/%3E%3C/svg%3E") center/26px no-repeat;box-shadow:0 2px 10px rgba(25,103,210,.18)}
.drop strong{color:#1967D2;font-size:17px}
.drop:hover{border-color:#1967D2;background:linear-gradient(135deg,#E8F1FE,#E2F4F1);box-shadow:0 0 0 4px rgba(25,103,210,.10)}
.drop:not([aria-disabled="true"]){animation:dz548 2.2s ease-in-out 2}
@keyframes dz548{0%,100%{box-shadow:0 0 0 0 rgba(25,103,210,0)}50%{box-shadow:0 0 0 7px rgba(25,103,210,.18)}}
.drop.over{border-style:solid;border-color:#00868D;background:linear-gradient(135deg,#D9F2EF,#E1ECFE);transform:scale(1.01);box-shadow:0 10px 28px rgba(0,134,141,.24)}
.drop.over strong{color:#00646A}
.drop[aria-disabled="true"]{opacity:1;border-color:#C9D3D8;background:repeating-linear-gradient(135deg,#F7F9FA 0 10px,#F0F3F5 10px 20px);color:#7C8A91}
.drop[aria-disabled="true"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C8A91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");box-shadow:inset 0 0 0 1px #DCE3E6}
.drop[aria-disabled="true"] strong{color:#7C8A91}
.gtiles{gap:10px}
.gt{position:relative;border:1.5px solid #DCE8EA;background:linear-gradient(170deg,#FFFFFF,#F6FAFB);padding:12px 12px 10px}
.gt>.ic{width:40px;height:40px;padding:8px;border-radius:12px;box-sizing:border-box;background:linear-gradient(145deg,#E8F6F5,#D5EEEC);stroke:#00646A;color:#00646A}
.gt[data-guide="strava"]>.ic,.gt[data-guide="huawei"]>.ic,.gt[data-guide="codoon"]>.ic{background:linear-gradient(145deg,#EAF1FE,#D7E5FC);stroke:#1967D2;color:#1967D2}
.gt[data-guide="other"]>.ic{background:linear-gradient(145deg,#F1F3F4,#E3E7EA);stroke:#5F6B73;color:#5F6B73}
.gt:hover,.gt:focus-visible{border-color:#00868D;box-shadow:0 0 0 3px #CFE9E8,0 8px 20px rgba(0,104,110,.14)}
.gt b{font-size:15px;margin-top:4px}
#zone-learn > section{content-visibility:auto;contain-intrinsic-size:auto 1500px}
#zone-learn > #emotion,#zone-learn > #case,#zone-learn > #refs{contain-intrinsic-size:auto 4200px}
#zone-learn > #each,#zone-learn > #agent{contain-intrinsic-size:auto 3000px}
svg.pflow,svg.alay,svg.mpipe{filter:none}
@media print{#zone-learn > section{content-visibility:visible}}
@media (prefers-reduced-motion:reduce){.drop,.stepper .sp,.gt{animation:none!important;transition:none!important}}