/* How It Works preview - animated steps 01-03 (template-parts/how-it-works/steps.php). Approved concept Oct 2026.
   Visual stage is a 600x500 design grid scaled with container units (--u = 1 design px).
   Hidden reveal states only apply under html.hs-js (set by js/hiw-steps.js), so nothing is hidden without JS. */
.hs-steps { --navy2:#0d1758; --mut2:#5b6175; --expo:cubic-bezier(.16,1,.3,1); }
.hs-step { position:relative; overflow:clip; background:#fff; }
.hs-s1 { --ac:#3649A8; --tint:#eef1fd; }
.hs-s2 { --ac:#17A673; --tint:#eaf8f2; }
.hs-s3 { --ac:#1fb6d9; --tint:#e9f9fc; }
.hs-grid { position:relative; display:flex; align-items:center; gap:clamp(36px,5vw,88px); padding-left:72px; }
.hs-rev .hs-grid { flex-direction:row-reverse; justify-content:flex-end; }
.hs-txt { flex:1 1 0; min-width:0; max-width:560px; }
.hs-txt .hiw-h2 { margin:18px 0 18px; }
.hs-txt .hiw-h2 em { color:var(--c); }
.hs-txt p + p { margin-top:20px; }
.hs-txt .hiw-pill { background:var(--c8); }
/* visual panel: width limited by column and by the screen height below the header */
.hs-vis { --vh:calc(100svh - var(--hdr,84px) - 64px);
  flex:none; width:min(600px, 52%, var(--vh) * 1.2); aspect-ratio:6/5; position:relative; container-type:inline-size;
  border-radius:28px; overflow:hidden; border:1px solid #eceff7; box-shadow:0 30px 60px -40px rgba(13,23,88,.35);
  background:radial-gradient(70% 60% at 58% 48%, var(--tint), #f6f8fd 75%); }
.hs-vis * { box-sizing:border-box; }
.hs-vis, .hs-vis > * { --u:calc(100cqw / 600); }
.hs-stage { position:absolute; inset:0; --u:calc(100cqw / 600); }
/* rail (desktop) */
.hs-rail { position:absolute; left:17px; top:-100vh; bottom:-100vh; width:2px; background:#e6e9f3; border-radius:2px; }
.hs-s1 .hs-rail { top:50%; }
.hs-s3 .hs-rail { bottom:50%; }
.hs-rail__fill { position:absolute; left:0; top:0; width:100%; height:calc(var(--p,0) * 100%); border-radius:2px; background:var(--ac); }
.hs-node { position:absolute; z-index:1; left:0; top:50%; width:36px; height:36px; margin-top:-18px; border-radius:50%; display:grid; place-items:center;
  font:800 13px/1 'Plus Jakarta Sans',sans-serif; border:2px solid var(--ac); background:var(--ac); color:#fff; box-shadow:0 0 0 7px var(--tint); transition:all .6s var(--expo); }
.hs-js .hs-node { background:#fff; border-color:#e1e5f0; color:#9aa1b5; box-shadow:none; }
.hs-js .hs-act .hs-node { background:var(--ac); border-color:var(--ac); color:#fff; box-shadow:0 0 0 7px var(--tint); }

/* reveal (JS only). Hidden states apply instantly (no transition) until the step is revealed. */
.hs-js .hs-step:not(.on) *, .hs-js .hs-step:not(.on) *::after { transition:none !important; }
.hs-js .hs-step:not(.on) .hs-node { transition:all .6s var(--expo) !important; }
.hs-js .hs-rv { opacity:0; transform:translateY(12px); filter:blur(6px); transition:opacity .8s var(--expo), transform .8s var(--expo), filter .8s var(--expo); transition-delay:var(--d,0s); }
.hs-js .on .hs-rv { opacity:1; transform:none; filter:blur(0); }

/* ---- step 01 ---- */
.hs-bld { position:absolute; left:calc(52 * var(--u)); top:calc(86 * var(--u)); width:calc(540 * var(--u)); height:auto; max-width:none; mix-blend-mode:multiply; }
.hs-stage picture { display:contents; }
.hs-ov { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.hs-ln { fill:none; stroke-width:1.5; stroke-linecap:round; opacity:.55; vector-effect:non-scaling-stroke; }
.hs-ln--gw { opacity:.45; }
.hs-js .hs-ln { stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.1s var(--expo) var(--d,0s); }
.hs-js .on .hs-ln { stroke-dashoffset:0; }
.hs-mk { position:absolute; width:calc(32 * var(--u)); height:calc(32 * var(--u)); transform:translate(-50%,-50%); border-radius:50%; background:#fff;
  box-shadow:0 0 0 1px rgba(13,23,88,.06),0 8px 18px -8px rgba(13,23,88,.45); }
.hs-mk img { width:88%; height:88%; margin:6%; display:block; }
.hs-mk::after { content:""; position:absolute; inset:-5px; border-radius:50%; border:1.5px solid var(--c); opacity:0; }
.hs-js .hs-mk { opacity:0; filter:blur(6px); transform:translate(-50%,-50%) scale(.85); transition:opacity .7s var(--expo) var(--d), filter .7s var(--expo) var(--d), transform .7s var(--expo) var(--d); }
.hs-js .on .hs-mk { opacity:1; filter:blur(0); transform:translate(-50%,-50%); }
.hs-js .on .hs-mk::after { animation:hs-ring 3s ease-out calc(var(--d) + .6s) infinite; }
.hs-nd { position:absolute; width:9px; height:9px; transform:translate(-50%,-50%); border-radius:50%; background:var(--navy2); box-shadow:0 0 0 4px rgba(13,23,88,.12); }
.hs-js .hs-nd { opacity:0; transition:opacity .6s var(--expo) var(--d); }
.hs-js .on .hs-nd { opacity:1; }
.hs-hub { position:absolute; display:flex; align-items:center; gap:8px; padding:7px 12px 7px 9px; border-radius:99px; font:700 max(10.5px, calc(12 * var(--u)))/1.2 'Plus Jakarta Sans',sans-serif; white-space:nowrap; }
.hs-js .hs-hub { opacity:0; filter:blur(6px); transform:translateY(6px); transition:opacity .7s var(--expo) var(--d), filter .7s var(--expo) var(--d), transform .7s var(--expo) var(--d); }
.hs-js .on .hs-hub { opacity:1; filter:blur(0); transform:none; }
.hs-hub--pm { left:40%; top:70.8%; background:var(--navy2); color:#fff; box-shadow:0 12px 26px -10px rgba(13,23,88,.6); }
.hs-hub--gw { right:3%; top:5.2%; background:#fff; color:var(--navy2); border:1px solid #e6e9f2; box-shadow:0 12px 26px -14px rgba(13,23,88,.45); }
.hs-pd { width:8px; height:8px; border-radius:50%; flex:none; }
.hs-hub--pm .hs-pd { background:#7aa2ff; box-shadow:0 0 0 4px rgba(122,162,255,.25); }
.hs-hub--gw .hs-pd { background:#3BCDEE; box-shadow:0 0 0 4px rgba(59,205,238,.22); }
/* cards */
.hs-card { position:absolute; background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:1px solid #e6e9f2; border-radius:16px;
  box-shadow:0 16px 34px -18px rgba(13,23,88,.4); font-family:'Plus Jakarta Sans',sans-serif; color:var(--navy2); line-height:1.3; }
.hs-sig { left:calc(16 * var(--u)); top:calc(16 * var(--u)); width:max(198px, calc(200 * var(--u))); padding:10px 12px 9px; font-variant-numeric:tabular-nums; }
.hs-lbl { white-space:nowrap; font-size:10px; font-weight:700; letter-spacing:.1em; color:var(--mut2); text-transform:uppercase; display:flex; align-items:center; gap:7px; }
.hs-rt { margin-left:auto; letter-spacing:.02em; text-transform:none; font-weight:600; color:#8a90a3; }
.hs-val { font-size:max(19px, calc(23 * var(--u))); font-weight:800; margin-top:3px; letter-spacing:-.01em; }
.hs-val small { font-size:11px; color:var(--mut2); font-weight:600; letter-spacing:0; }
.hs-stk { display:flex; gap:2px; height:5px; margin:6px 0 8px; border-radius:4px; overflow:hidden; }
.hs-stk i { display:block; height:100%; background:var(--c); transition:flex-grow .6s var(--expo); }
.hs-leg { display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; }
.hs-lg { display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:600; color:var(--mut2); white-space:nowrap; }
.hs-lg i { width:7px; height:7px; border-radius:50%; background:var(--c); flex:none; }
.hs-lg b { margin-left:auto; color:var(--navy2); font-weight:800; }
.hs-live { width:8px; height:8px; border-radius:50%; background:#17A673; flex:none; }
.hs-js .on .hs-live { animation:hs-pulse 1.8s ease-out infinite; }
@keyframes hs-pulse { 0% { box-shadow:0 0 0 0 rgba(23,166,115,.55); } 100% { box-shadow:0 0 0 9px rgba(23,166,115,0); } }
@keyframes hs-ring { 0% { opacity:.6; transform:scale(.6); } 100% { opacity:0; transform:scale(1.8); } }

/* ---- step 02 ---- */
.hs-dash { left:calc(96 * var(--u)); right:calc(34 * var(--u)); top:50%; transform:translateY(-50%); padding:calc(16 * var(--u)) calc(20 * var(--u)); }
.hs-js .hs-dash.hs-rv { transform:translateY(calc(-50% + 12px)); }
.hs-js .on .hs-dash.hs-rv { transform:translateY(-50%); }
.hs-dh { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.hs-card h3 { font:800 max(12px, calc(15 * var(--u)))/1.25 'Plus Jakarta Sans',sans-serif; color:var(--navy2); margin:0; }
.hs-dh p { font-size:max(10px, calc(12 * var(--u))); color:var(--mut2); margin:2px 0 0; line-height:1.3; }
.hs-lv { display:inline-flex; align-items:center; gap:7px; font-size:max(10px, calc(12 * var(--u))); font-weight:700; color:#17A673; background:#eaf8f2; padding:5px 10px; border-radius:99px; }
.hs-lv--an { color:#1592b3; background:#e9f9fc; }
.hs-kp { display:flex; gap:calc(22 * var(--u)); margin:calc(10 * var(--u)) 0 2px; }
.hs-kp div { font-size:max(10px, calc(11 * var(--u))); color:var(--mut2); font-weight:600; }
.hs-kp b { display:block; font-size:max(14px, calc(18 * var(--u))); color:var(--navy2); font-weight:800; }
.hs-chartbox { position:relative; }
.hs-chartbox--2 { aspect-ratio:430/120; margin:2px 0; }
.hs-chartbox--3 { margin-top:calc(14 * var(--u)); }
.hs-plot { position:relative; aspect-ratio:480/230; }
.hs-chart { position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible; }
.hs-js .hs-draw { stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.6s var(--expo) .4s; }
.hs-js .on .hs-draw { stroke-dashoffset:0; }
.hs-row { display:grid; grid-template-columns:calc(26 * var(--u)) auto 1fr auto; align-items:center; gap:10px; padding:calc(6 * var(--u)) 0; border-top:1px solid #f0f2f7;
  font-size:max(10.5px, calc(13 * var(--u))); font-weight:700; }
.hs-row > span:first-of-type { min-width:calc(104 * var(--u)); }
.hs-row img { width:100%; height:auto; display:block; }
.hs-tr { height:7px; border-radius:9px; background:#eff1f6; overflow:hidden; }
.hs-br { display:block; height:100%; width:var(--w); border-radius:9px; background:var(--c); }
.hs-js .hs-br { width:0; transition:width 1.2s var(--expo) var(--d); }
.hs-js .on .hs-br { width:var(--w); }
.hs-row em { font-style:normal; text-align:right; color:var(--mut2); font-size:max(10px, calc(12 * var(--u))); min-width:3ch; }
.hs-parts { position:absolute; inset:0; }
.hs-pt { position:absolute; width:7px; height:7px; border-radius:50%; background:var(--c); opacity:0; }
.hs-js .on .hs-pt { animation:hs-flow 2.4s cubic-bezier(.45,0,.2,1) var(--d) infinite; }
@keyframes hs-flow { 0% { opacity:0; transform:translateX(0); } 20% { opacity:.9; } 80% { opacity:.9; } 100% { opacity:0; transform:translateX(calc(86 * var(--u))); } }

/* ---- step 03 ---- */
.hs-an { left:calc(40 * var(--u)); right:calc(40 * var(--u)); top:calc(46 * var(--u)); padding:calc(18 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u)); }
.hs-sweep { opacity:0; }
.hs-js .on .hs-sweep { animation:hs-sweep 2.2s cubic-bezier(.65,0,.35,1) .9s both; }
@keyframes hs-sweep { 0% { opacity:0; transform:translateX(-120px); } 15% { opacity:1; } 85% { opacity:1; } 100% { opacity:0; transform:translateX(520px); } }
.hs-chips { list-style:none; margin:0; padding:0; }
.hs-chip { position:absolute; display:flex; align-items:center; gap:calc(7 * var(--u)); padding:calc(7 * var(--u)) calc(11 * var(--u)) calc(7 * var(--u)) calc(8 * var(--u)); background:#fff; border:1px solid #e6e9f2; border-radius:12px;
  box-shadow:0 14px 28px -16px rgba(13,23,88,.45); font-size:max(9.5px, calc(13 * var(--u))); font-weight:700; color:var(--navy2); white-space:nowrap; }
.hs-chip i { width:max(16px, calc(22 * var(--u))); height:max(16px, calc(22 * var(--u))); border-radius:50%; display:grid; place-items:center; background:var(--bg); flex:none; }
.hs-tag { font-size:max(8px, calc(10 * var(--u))); font-weight:800; letter-spacing:.06em; color:#c46a14; background:#fdf0e3; border-radius:6px; padding:3px calc(6 * var(--u)); margin-left:2px; }
.hs-pin { position:absolute; width:12px; height:12px; transform:translate(-50%,-50%); border-radius:50%; background:#fff; border:3px solid var(--c); }
.hs-js .hs-pin { opacity:0; transform:translate(-50%,-50%) scale(.4); transition:all .6s var(--expo) var(--d); }
.hs-js .on .hs-pin { opacity:1; transform:translate(-50%,-50%); }
.hs-js .on .hs-pin::after { content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--c); opacity:0; animation:hs-ring 2.8s ease-out calc(var(--d) + 1s) infinite; }
.hs-stem { position:absolute; width:1.5px; background:var(--c); opacity:.45; }
.hs-js .hs-stem { opacity:0; transition:opacity .6s var(--expo) var(--d); }
.hs-js .on .hs-stem { opacity:.45; }
.hs-foot { position:absolute; left:calc(40 * var(--u)); right:calc(40 * var(--u)); bottom:calc(30 * var(--u)); display:flex; align-items:center; gap:10px; margin:0;
  font:600 max(11px, calc(13 * var(--u)))/1.3 'Plus Jakarta Sans',sans-serif; color:var(--mut2); }
.hs-foot svg { flex:none; }

/* 1920: larger stage */
@media (min-width:1600px) { .hs-vis { width:min(680px, 50%, var(--vh) * 1.2); } }
/* compact heights: tighter text */
@media (min-width:992px) and (max-height:700px) {
	.hs-txt .hiw-h2 { margin:12px 0 12px; }
	.hs-txt p { font-size:15px; line-height:1.6; }
	.hs-txt p + p { margin-top:12px; }
	.hs-txt .hiw-callout { padding:8px 14px; }
	.hs-vis { --vh:calc(100svh - var(--hdr,84px) - 40px); }
}
@media (min-width:992px) and (max-width:1199px) { .hs-grid { padding-left:56px; gap:32px; } .hs-txt p { font-size:15px; line-height:1.55; } }

/* tablet / phone: simplified stack, text first then visual */
@media (max-width:991px) {
	.hs-rail, .hs-node { display:none; }
	.hs-grid, .hs-rev .hs-grid { flex-direction:column; align-items:stretch; padding-left:0; gap:24px; }
	.hs-txt { max-width:none; order:-1; }
	.hs-vis { width:100%; max-width:600px; aspect-ratio:auto; margin-inline:auto; padding:14px; display:flex; flex-direction:column; gap:12px; }
	.hs-stage { position:relative; inset:auto; aspect-ratio:6/5; margin:-14px -14px 0; }
	.hs-card, .hs-foot { position:relative; left:auto; right:auto; top:auto; bottom:auto; width:auto; transform:none !important; }
	.hs-sig { width:auto; }
	.hs-parts { display:none; }
	.hs-dash, .hs-an { padding:14px; }
	.hs-row > span:first-of-type { min-width:0; }
	.hs-chartbox--3 { margin-top:10px; }
	.hs-chips { position:relative; display:flex; flex-direction:column; gap:8px; margin-top:12px; }
	.hs-chip { position:relative; left:auto !important; top:auto !important; white-space:normal; padding:8px 10px; gap:8px; font-size:13px; }
	.hs-chip i { width:22px; height:22px; }
	.hs-stem { display:none; }
}
@media (prefers-reduced-motion:reduce) {
	.hs-steps *, .hs-steps *::before, .hs-steps *::after { transition:none !important; animation:none !important; }
	.hs-sweep, .hs-dots { display:none; }
}