/* HHW-1 (17 Oct 2026): "What you can expect" (#how-it-works) rebuilt as THE ROUTE + THE LOCKS.
   Finished state is the default; hidden/unlit states live only under .hhw-mo (added by hhw.js when motion is allowed). */
.ox #how-it-works{background:radial-gradient(50% 45% at 100% 0,rgba(224,122,47,.16),transparent 70%),radial-gradient(45% 50% at 0 100%,rgba(63,191,132,.18),transparent 70%),linear-gradient(180deg,#fff,var(--stone))}
.ox #how-it-works .hhw-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:clip}
.ox #how-it-works .hhw-bg::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(11,23,41,.13) 1.2px,transparent 1.4px);background-size:26px 26px;-webkit-mask-image:radial-gradient(70% 60% at 85% 15%,#000,transparent 75%);mask-image:radial-gradient(70% 60% at 85% 15%,#000,transparent 75%)}
.ox #how-it-works .hhw-bg svg{position:absolute;right:-1%;top:3%;width:min(31%,440px);height:auto;overflow:visible}
@media (max-width:999px){.ox #how-it-works .hhw-bg svg{display:none}}
.ox #how-it-works .hhw-bg path{fill:none;stroke:var(--hot);stroke-width:3;stroke-linecap:round;stroke-dasharray:.012 .016;opacity:.5}
.ox #how-it-works .hhw-bg circle{fill:var(--green);opacity:.55}
.ox #how-it-works .hhw-bg .hhw-run{fill:var(--hot);opacity:1;filter:drop-shadow(0 0 6px rgba(224,122,47,.9))}
.ox #how-it-works .ox-head{position:relative}
.ox #how-it-works .ox-chip{position:relative;overflow:clip}
.ox #how-it-works .ox-chip::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);translate:-120% 0;pointer-events:none}

/* ---------- THE ROUTE: the five steps on a lit board ---------- */
.ox #how-it-works .ox-steps{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:46px 0 30px;padding:38px clamp(20px,2.4vw,36px) 34px;border:0;border-radius:30px;color:#fff;background:radial-gradient(60% 90% at 0 0,rgba(224,122,47,.22),transparent 60%),radial-gradient(55% 90% at 100% 100%,rgba(63,191,132,.24),transparent 60%),linear-gradient(160deg,#14233F,#0B1729 60%);box-shadow:0 40px 80px -40px rgba(11,23,41,.75),inset 0 0 0 1px rgba(255,255,255,.07);overflow:clip}
.ox #how-it-works .ox-steps::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%);animation:none;transform:none;scale:none;height:auto;width:auto;left:0;right:0;top:0;bottom:0;border-radius:0}
.ox #how-it-works .ox-steps::after{content:none;animation:none}
.ox #how-it-works .ox-steps li{position:relative;z-index:auto;margin:84px 0 0;padding:26px 18px 22px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 24px 40px -28px rgba(0,0,0,.7);animation:none;opacity:1;translate:none;scale:none;transition:background .5s,box-shadow .5s,translate .5s cubic-bezier(.22,1,.36,1)}
.ox #how-it-works .ox-steps li::before{content:"";position:absolute;left:50%;top:-30px;width:2px;height:30px;margin-left:-1px;background:linear-gradient(var(--hot),rgba(224,122,47,.1))}
.ox #how-it-works .ox-steps li:last-of-type::before{background:linear-gradient(var(--green-hi),rgba(63,191,132,.1))}
.ox #how-it-works .ox-steps li:hover{box-shadow:inset 0 0 0 1px rgba(224,122,47,.55),0 30px 50px -26px rgba(0,0,0,.8)}
.ox #how-it-works .ox-steps__n{position:absolute;left:calc(50% - 31px);top:-114px;z-index:3;display:grid;place-items:center;width:62px;height:62px;border-radius:50%;font:900 22px/1 var(--disp);color:var(--ink);background:var(--hot);box-shadow:0 0 0 6px rgba(224,122,47,.22),0 0 34px rgba(224,122,47,.55);animation:none;opacity:1;scale:1;transition:background .45s,color .45s,box-shadow .45s,scale .55s cubic-bezier(.34,1.56,.64,1)}
.ox #how-it-works .ox-steps li:last-of-type .ox-steps__n{background:var(--green-hi);color:var(--ink);box-shadow:0 0 0 6px rgba(63,191,132,.25),0 0 40px rgba(63,191,132,.7)}
.ox #how-it-works .ox-steps__n::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--hot);opacity:0}
.ox #how-it-works .ox-steps li:last-of-type .ox-steps__n::after{border-color:var(--green-hi)}
.ox #how-it-works .ox-steps__k{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;margin:0 0 10px;font:700 12.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.ox #how-it-works .ox-steps li:last-of-type .ox-steps__k{color:var(--green-hi)}
.ox #how-it-works .ox-steps .ox-h4{color:#fff;margin:0 0 10px;font-size:clamp(19px,1.45vw,23px)}
.ox #how-it-works .ox-steps li p:not(.ox-steps__k){color:var(--on-dk);font-size:15.5px;line-height:1.55;margin:0}
.ox #how-it-works .hhw-ico{position:absolute;right:14px;top:16px;width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:rgba(224,122,47,.14);color:var(--soft)}
.ox #how-it-works .ox-steps li:last-of-type .hhw-ico{background:rgba(63,191,132,.16);color:var(--green-hi)}
.ox #how-it-works .hhw-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ox #how-it-works .hhw-ico path{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .9s cubic-bezier(.65,0,.35,1) .15s}
.ox #how-it-works .ox-steps .ox-h4{padding-right:40px}
.ox #how-it-works .hhw-ok{position:absolute;left:calc(50% + 14px);top:-72px;z-index:4;width:24px;height:24px;border-radius:50%;background:var(--green-hi);box-shadow:0 0 0 3px #0B1729;display:grid;place-items:center;scale:1;transition:scale .45s cubic-bezier(.34,1.56,.64,1) .25s}
.ox #how-it-works .hhw-ok svg{width:14px;height:14px;fill:none;stroke:#0B1729;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ox #how-it-works .hhw-rail{position:absolute;z-index:2;left:0;top:0;height:6px;margin-top:-3px;border-radius:6px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 10px,transparent 10px 20px)}
.ox #how-it-works .hhw-fill{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--hot),#F2B183 55%,var(--green-hi));box-shadow:0 0 18px rgba(224,122,47,.7);transform-origin:0 50%;transform:scaleX(var(--p,1))}
.ox #how-it-works .hhw-tok{position:absolute;left:-25px;top:-22px;z-index:5;width:50px;height:50px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(145deg,#fff,#FCE3CF);color:var(--ink);box-shadow:0 0 0 4px rgba(224,122,47,.35),0 0 36px rgba(224,122,47,.85),0 14px 24px -10px rgba(0,0,0,.6);transform:translate3d(var(--x,0px),var(--y,0px),0);transition:transform .14s linear,background .4s,box-shadow .4s}
.ox #how-it-works .hhw-tok svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ox #how-it-works .hhw-tok::after{content:"";position:absolute;inset:-4px;border-radius:19px;border:2px solid rgba(224,122,47,.8);animation:hhw-ping 1.6s cubic-bezier(.22,1,.36,1) infinite}
.ox #how-it-works .hhw-done .hhw-tok{background:linear-gradient(145deg,#fff,#CFF3E0);box-shadow:0 0 0 4px rgba(63,191,132,.4),0 0 40px rgba(63,191,132,.9),0 14px 24px -10px rgba(0,0,0,.6)}
.ox #how-it-works .hhw-done .hhw-tok::after{border-color:rgba(63,191,132,.9)}
.ox #how-it-works .hhw-spark{position:absolute;z-index:1;top:-2px;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(242,177,131,.9);animation:hhw-run 3.2s linear infinite;opacity:0}
.ox #how-it-works .hhw-spark:nth-child(4){animation-delay:1.05s}
.ox #how-it-works .hhw-spark:nth-child(5){animation-delay:2.1s}

/* ---------- THE LOCKS ---------- */
.ox #how-it-works .ox-locks{gap:18px;margin-top:0}
.ox #how-it-works .ox-locks li{position:relative;isolation:isolate;overflow:clip;padding:28px 24px 26px;border-radius:24px;background:#fff;box-shadow:0 1px 2px rgba(11,23,41,.06),0 26px 50px -30px rgba(11,23,41,.5),inset 0 0 0 1px rgba(11,23,41,.06);animation:none;opacity:1;translate:none;scale:none;transition:translate .5s cubic-bezier(.22,1,.36,1),box-shadow .5s}
.ox #how-it-works .ox-locks li::before{content:none}
.ox #how-it-works .ox-locks li::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 35%,rgba(63,191,132,.16) 50%,transparent 65%);translate:-110% 0;pointer-events:none}
.ox #how-it-works .ox-locks li:hover{translate:0 -6px;box-shadow:0 1px 2px rgba(11,23,41,.06),0 34px 60px -30px rgba(11,23,41,.6),inset 0 0 0 1px rgba(46,125,91,.35)}
.ox #how-it-works .ox-locks .ox-h4{padding-right:70px}
.ox #how-it-works .hhw-lock{position:absolute;right:18px;top:18px;width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(150deg,#3FBF84,#1E5C42);box-shadow:0 12px 24px -12px rgba(30,92,66,.9)}
.ox #how-it-works .hhw-lock::after{content:"";position:absolute;inset:-5px;border-radius:22px;border:2px solid var(--green-hi);opacity:0}
.ox #how-it-works .hhw-lock svg{width:34px;height:34px;overflow:visible}
.ox #how-it-works .hhw-lock .hhw-sh{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;transform-box:view-box;transform-origin:16px 11px;transform:none;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.ox #how-it-works .hhw-lock .hhw-bd{fill:#fff}
.ox #how-it-works .hhw-lock .hhw-kh{fill:#1E5C42}
.ox #how-it-works .ox-locks__x{position:relative;display:inline-flex;align-items:center;gap:10px;margin:0 0 16px}
.ox #how-it-works .ox-locks__x s{position:relative;display:inline-block;padding:9px 12px;border-radius:10px;background:var(--ink);color:var(--on-dk2);font:600 13.5px/1 var(--mono);text-decoration:none;animation:none}
.ox #how-it-works .ox-locks__x s::after{content:"";position:absolute;left:8px;right:8px;top:50%;height:2px;margin-top:-1px;background:var(--hot);box-shadow:0 0 8px rgba(224,122,47,.9);transform-origin:0 50%;transform:none;transition:transform .5s cubic-bezier(.65,0,.35,1) .35s}
.ox #how-it-works .hhw-x{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--hot);box-shadow:0 0 0 4px rgba(224,122,47,.2);scale:1;rotate:0deg;opacity:1;transition:scale .4s cubic-bezier(.34,1.56,.64,1) .8s,rotate .4s cubic-bezier(.34,1.56,.64,1) .8s,opacity .2s .8s}
.ox #how-it-works .hhw-x svg{width:14px;height:14px;fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round}
.ox #how-it-works .ox-locks__k{color:var(--green-dk);letter-spacing:.14em}

/* ---------- motion (only with .hhw-mo) ---------- */
@keyframes hhw-ping{0%{opacity:.9;scale:1}100%{opacity:0;scale:1.55}}
@keyframes hhw-burst{0%{opacity:1;scale:1}100%{opacity:0;scale:1.9}}
@keyframes hhw-shake{0%,100%{rotate:0deg}25%{rotate:-7deg}55%{rotate:5deg}80%{rotate:-2deg}}
@keyframes hhw-sheen{to{translate:110% 0}}
@keyframes hhw-shine{0%,55%{translate:-120% 0}80%,100%{translate:120% 0}}
@keyframes hhw-run{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
@keyframes hhw-board{from{clip-path:inset(10% 6% 0 6% round 30px);translate:0 60px}to{clip-path:inset(0 0 0 0 round 30px);translate:0 0}}
@keyframes hhw-dash{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes hhw-drift{from{translate:0 0}to{translate:-26px 0}}
@keyframes hhw-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media (prefers-reduced-motion:no-preference){
  .ox #how-it-works.hhw-mo .ox-chip::after{animation:hhw-shine 4.5s ease-in-out 1.2s infinite}
  .ox #how-it-works.hhw-mo .hhw-bg path{animation:hhw-dash linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
  .ox #how-it-works.hhw-mo .hhw-bg circle{animation:hhw-float 3s ease-in-out infinite}
  .ox #how-it-works.hhw-mo .ox-steps{animation:hhw-board linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  .ox #how-it-works.hhw-mo .ox-steps li:not(.is-lit){background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
  .ox #how-it-works.hhw-mo .ox-steps li:not(.is-lit) .ox-steps__n{background:#1B2B47;color:var(--on-dk2);box-shadow:0 0 0 6px rgba(255,255,255,.05);scale:.82}
  .ox #how-it-works.hhw-mo .ox-steps li.is-lit .ox-steps__n::after{animation:hhw-burst .9s cubic-bezier(.22,1,.36,1) both}
  .ox #how-it-works.hhw-mo .ox-steps li:not(.is-lit) .hhw-ok{scale:0;transition-delay:0s}
  .ox #how-it-works.hhw-mo .ox-steps li:not(.is-lit) .hhw-ico path{stroke-dashoffset:1;transition-delay:0s}
  .ox #how-it-works.hhw-mo .ox-steps li:not(.is-lit) .hhw-ico{background:rgba(255,255,255,.06);color:var(--on-dk2)}
  .ox #how-it-works.hhw-mo .ox-steps li:not(.is-lit)::before{opacity:.25}
  .ox #how-it-works.hhw-mo .hhw-spark{opacity:1}
  .ox #how-it-works.hhw-mo .ox-locks li:not(.is-in){translate:0 46px}
  .ox #how-it-works.hhw-mo .ox-locks li{transition:translate .8s cubic-bezier(.22,1,.36,1),box-shadow .5s}
  .ox #how-it-works.hhw-mo .ox-locks li:nth-child(2){transition-delay:.12s}
  .ox #how-it-works.hhw-mo .ox-locks li:nth-child(3){transition-delay:.24s}
  .ox #how-it-works.hhw-mo .ox-locks li:not(.is-in) .hhw-sh{transform:translateY(-4px) rotate(-32deg)}
  .ox #how-it-works.hhw-mo .ox-locks li .hhw-sh{transition-delay:.45s}
  .ox #how-it-works.hhw-mo .ox-locks li.is-in .hhw-lock{animation:hhw-shake .5s ease-in-out .78s both}
  .ox #how-it-works.hhw-mo .ox-locks li.is-in .hhw-lock::after{animation:hhw-burst 1s cubic-bezier(.22,1,.36,1) .85s both}
  .ox #how-it-works.hhw-mo .ox-locks li.is-in::after{animation:hhw-sheen 1.1s cubic-bezier(.65,0,.35,1) .95s both}
  .ox #how-it-works.hhw-mo .ox-locks li:not(.is-in) .ox-locks__x s::after{transform:scaleX(0);transition-delay:0s}
  .ox #how-it-works.hhw-mo .ox-locks li:not(.is-in) .hhw-x{scale:2.4;rotate:-90deg;opacity:0;transition-delay:0s}
}
@media (prefers-reduced-motion:reduce){
  .ox #how-it-works *,.ox #how-it-works *::before,.ox #how-it-works *::after{animation:none!important;transition:none!important}
  .ox #how-it-works .hhw-spark{display:none}
}

/* ---------- vertical route: tablet and phone ---------- */
@media (max-width:999px){
  .ox #how-it-works .ox-steps{grid-template-columns:minmax(0,1fr);gap:16px;padding:26px 16px 26px 14px;margin:34px 0 24px;border-radius:26px}
  .ox #how-it-works .ox-steps li{margin:0 0 0 66px;padding:20px 16px 18px}
  .ox #how-it-works .ox-steps li::before{left:-20px;top:30px;width:20px;height:2px;margin:0;background:linear-gradient(90deg,var(--hot),rgba(224,122,47,.2))}
  .ox #how-it-works .ox-steps li:last-of-type::before{background:linear-gradient(90deg,var(--green-hi),rgba(63,191,132,.2))}
  .ox #how-it-works .ox-steps__n{left:-66px;top:8px;width:46px;height:46px;font-size:18px;box-shadow:0 0 0 5px rgba(224,122,47,.22),0 0 24px rgba(224,122,47,.5)}
  .ox #how-it-works .hhw-ok{left:-30px;top:-2px;width:20px;height:20px}
  .ox #how-it-works .hhw-ok svg{width:12px;height:12px}
  .ox #how-it-works .hhw-rail{width:6px;height:0;margin:0 0 0 -3px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.22) 0 10px,transparent 10px 20px)}
  .ox #how-it-works .hhw-fill{transform-origin:50% 0;transform:scaleY(var(--p,1));background:linear-gradient(180deg,var(--hot),#F2B183 55%,var(--green-hi))}
  .ox #how-it-works .hhw-tok{left:-20px;top:-20px;width:40px;height:40px;border-radius:13px}
  .ox #how-it-works .hhw-tok svg{width:21px;height:21px}
  .ox #how-it-works .hhw-spark{display:none}
  .ox #how-it-works .ox-locks{grid-template-columns:minmax(0,1fr);gap:14px}
}
@media (min-width:768px) and (max-width:999px){
  .ox #how-it-works .ox-locks{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ox #how-it-works .ox-locks .ox-h4{padding-right:0;padding-top:58px}
}
@media (max-width:420px){
  .ox #how-it-works .ox-steps .ox-h4{padding-right:44px}
  .ox #how-it-works .ox-locks li{padding:24px 18px 22px}
  .ox #how-it-works .hhw-lock{width:50px;height:50px;border-radius:16px}
  .ox #how-it-works .hhw-lock svg{width:30px;height:30px}
  .ox #how-it-works .ox-locks .ox-h4{padding-right:58px}
}

/* HHW-2 locks: 3 columns at 1000-1024px. ox.css @media (max-width:1024px) stacks .ox-locks in one column; the 3-column rule above stops at 999. 1025px and up already use ox.css's 3 columns. */
@media (min-width:1000px) and (max-width:1024px){
  .ox #how-it-works .ox-locks{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* HHW-3 strike pill: at 768-999px the 3 cards are 210-276px wide. Keep the pill on one line so the strike line crosses one line, and pin the x stamp to the pill's top-right corner so it cannot wrap under it. */
@media (min-width:768px) and (max-width:999px){
  .ox #how-it-works .ox-locks li{padding-left:18px;padding-right:18px}
  .ox #how-it-works .ox-locks__x{display:block;width:max-content;max-width:100%}
  .ox #how-it-works .ox-locks__x s{display:block;white-space:nowrap;padding:9px 10px}
  .ox #how-it-works .ox-locks__x .hhw-x{position:absolute;right:-9px;top:-9px;width:24px;height:24px}
  .ox #how-it-works .ox-locks__x .hhw-x svg{width:12px;height:12px}
}

/* HHW-4 strike pill on very narrow phones (320-359px): the card is 256-279px wide, so pill + x stamp (218px) barely fit and the pill can wrap to two lines (strike line between them). Keep the pill on one line and pin the x stamp to its corner. */
@media (max-width:359px){
  .ox #how-it-works .ox-locks__x{display:block;width:max-content;max-width:100%}
  .ox #how-it-works .ox-locks__x s{display:block;white-space:nowrap}
  .ox #how-it-works .ox-locks__x .hhw-x{position:absolute;right:-9px;top:-9px;width:24px;height:24px}
  .ox #how-it-works .ox-locks__x .hhw-x svg{width:12px;height:12px}
}