/* HHB-1 17 Oct 2026: Help band + How it works made soft and animated. Own file, CSS only; does not touch uploads/pfh-hox/*. Words, photo and links unchanged. Finished state is the default (no scroll-timeline support or reduced motion = everything shown). */
/* ---------- Help band ---------- */
.ox .ox-band,.ox #how-it-works{position:relative;isolation:isolate;margin:clamp(12px,1.6vw,24px);border-radius:var(--r-lg);overflow:clip}
.ox .ox-band{background:radial-gradient(50% 55% at 0 0,rgba(224,122,47,.15),transparent 70%),radial-gradient(45% 50% at 100% 100%,rgba(63,191,132,.17),transparent 70%),var(--stone)}
.ox .ox-band__photo{overflow:clip}
.ox .ox-band__panel{border-radius:var(--r-lg);box-shadow:var(--sh-lg)}
.ox .ox-band__kick span{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:6px 13px 5px}
.ox .ox-band__kick span::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.6)}
.ox .ox-route{position:relative;border-left:0;margin-left:14px}
.ox .ox-route::before,.ox .ox-route::after{content:"";position:absolute;left:-1.5px;top:16px;bottom:16px;width:3px;border-radius:3px}
.ox .ox-route::before{background:rgba(11,23,41,.13)}
.ox .ox-route::after{background:linear-gradient(var(--hot),var(--green-hi));transform-origin:top}
.ox .ox-route li{padding-left:26px}
.ox .ox-route li::before{left:-7px;z-index:1;box-shadow:0 0 0 4px #fff}
.ox .ox-route li:first-child::before{box-shadow:0 0 0 4px #fff,0 0 0 0 rgba(224,122,47,.5)}
.ox .ox-band__act .ox-btn--line{font-size:15px;line-height:1.3;text-transform:none;letter-spacing:.01em;overflow-wrap:normal;padding-block:14px}
.ox .ox-frame__strip{margin-top:16px;padding:22px 26px;border-radius:var(--r-lg);background:linear-gradient(160deg,#14233F,#0B1729);box-shadow:var(--sh-lg)}
.ox .ox-911{display:inline-flex;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.12)}
/* ---------- How it works ---------- */
.ox #how-it-works{background:radial-gradient(45% 40% at 100% 0,rgba(224,122,47,.13),transparent 70%),radial-gradient(40% 45% at 0 100%,rgba(63,191,132,.15),transparent 70%),linear-gradient(180deg,#fff,var(--stone))}
.ox .ox-steps{position:relative;border:0;gap:14px;margin-top:44px}
.ox .ox-steps li{background:#fff;border-radius:20px;box-shadow:var(--sh);padding:40px 20px 22px;transition:translate .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.ox .ox-steps li:hover{translate:0 -5px;box-shadow:var(--sh-lg)}
.ox .ox-steps__n{border-radius:50%;left:18px;top:-19px;box-shadow:0 0 0 5px var(--stone)}
.ox .ox-steps::before,.ox .ox-steps::after{content:"";position:absolute;z-index:0;left:37px;right:calc((100% - 56px)/5 - 37px);top:-2px;height:4px;border-radius:4px}
.ox .ox-steps::before{background:rgba(11,23,41,.13)}
.ox .ox-steps::after{background:linear-gradient(90deg,var(--hot),var(--green-hi));transform-origin:left}
.ox .ox-steps li{z-index:1}
.ox .ox-locks{gap:16px}
.ox .ox-locks li{position:relative;background:#fff;padding:24px 22px 22px}
.ox .ox-locks li::before{content:"";position:absolute;right:18px;top:18px;width:40px;height:40px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M17 9h-1V7a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2zm-7-2a2 2 0 0 1 4 0v2h-4z'/%3E%3C/svg%3E") center/20px no-repeat}
.ox .ox-locks__x s{text-decoration:none;border-radius:8px;background:linear-gradient(var(--hot),var(--hot)) 0 50%/100% 2px no-repeat,var(--ink)}
@media (max-width:1024px){
  .ox .ox-steps{margin-left:0;gap:28px;margin-top:34px}
  .ox .ox-steps::before,.ox .ox-steps::after{left:35px;right:auto;top:0;bottom:0;width:4px;height:auto}
  .ox .ox-steps::after{background:linear-gradient(180deg,var(--hot),var(--green-hi));transform-origin:top}
  .ox .ox-steps__n{top:-19px;left:18px}
  .ox .ox-steps li{padding:30px 18px 18px}
}
@media (max-width:767px){
  .ox .ox-band__panel{border-radius:22px}.ox .ox-frame__strip{padding:20px 18px}
  .ox .ox-band__kick span{font-size:11.5px;letter-spacing:.04em;padding:5px 11px 4px}
  .ox .ox-band__act .ox-btn--line{font-size:14px;padding-inline:14px}
  .ox .ox-steps{gap:24px}
  .ox .ox-steps li{padding:28px 16px 16px}
}
@media (max-width:360px){.ox .ox-band__act .ox-btn--line{font-size:13px;overflow-wrap:anywhere}}
/* ---------- motion ---------- */
@keyframes hhb-grow{from{scale:1 0}to{scale:1 1}}
@keyframes hhb-growx{from{scale:0 1}to{scale:1 1}}
@keyframes hhb-pop{from{opacity:.3;scale:.5}to{opacity:1;scale:1}}
@keyframes hhb-rise{from{opacity:.4;translate:0 40px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
@keyframes hhb-slide{from{opacity:.4;translate:28px 0}to{opacity:1;translate:0 0}}
@keyframes hhb-drift{from{object-position:50% 8%}to{object-position:50% 62%}}
@keyframes hhb-strike{from{background-size:0 2px,auto}to{background-size:100% 2px,auto}}
@keyframes hhb-live{0%{box-shadow:0 0 0 0 rgba(255,255,255,.65)}100%{box-shadow:0 0 0 10px rgba(255,255,255,0)}}
@keyframes hhb-ring{0%{box-shadow:0 0 0 4px #fff,0 0 0 4px rgba(224,122,47,.55)}100%{box-shadow:0 0 0 4px #fff,0 0 0 16px rgba(224,122,47,0)}}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .ox .ox-band__kick span::before{animation:hhb-live 1.8s ease-out infinite}
  .ox .ox-route li:first-child::before{animation:hhb-ring 2.4s ease-out infinite}
  .ox-mo .ox-route{view-timeline:--hhbr block}
  .ox-mo .ox-route::after{animation:hhb-grow linear both;animation-timeline:--hhbr;animation-range:entry 30% cover 40%}
  .ox-mo .ox-route li{animation:hhb-slide linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
  .ox-mo .ox-route li::before{animation:hhb-pop linear both;animation-timeline:view();animation-range:entry 20% entry 90%}
  .ox-mo .ox-band__photo img{animation:hhb-drift linear both;animation-timeline:view();animation-range:cover}
  .ox-mo .ox-frame__strip{animation:hhb-rise linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
  .ox-mo .ox-steps{view-timeline:--hhbs block}
  .ox-mo .ox-steps::after{animation:hhb-growx linear both;animation-timeline:--hhbs;animation-range:entry 20% cover 30%}
  .ox-mo .ox-steps li{animation:hhb-rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  .ox-mo .ox-steps__n{animation:hhb-pop linear both;animation-timeline:view();animation-range:entry 10% entry 80%}
  .ox-mo .ox-locks li{animation:hhb-rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  .ox-mo .ox-locks__x s{animation:hhb-strike linear both;animation-timeline:view();animation-range:entry 40% cover 25%}
}}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference) and (max-width:1024px){
  .ox-mo .ox-steps::after{animation-name:hhb-grow;animation-range:entry 10% exit 60%}
}}
@media (prefers-reduced-motion:reduce){.ox .ox-steps li{transition:none}}