/* hm-walk · home · "How Hawcx works" walkthrough. Every rule is scoped under .hm-walk (sub-prefix hm-wk-).
   Spec, geometry and timeline: asset.html header. Animates only opacity, transform and clip-path. */
.hm-walk{
  --hm-wk-t1:var(--t1,120ms); --hm-wk-t3:var(--t3,320ms); --hm-wk-t4:var(--t4,560ms);
  --hm-wk-ease:var(--ease,cubic-bezier(.25,1,.5,1)); --hm-wk-io:var(--ease-io,cubic-bezier(.65,0,.35,1));
  --hm-wk-rule:rgba(255,255,255,.1); --hm-wk-win:#171717;
  --hm-wk-amb:var(--hold-d,#F2B84B); --hm-wk-blue:var(--blue-lt,#7DB9FF); --hm-wk-grn:var(--ok-d,#8FD19E); --hm-wk-red:var(--deny-d,#F47272);
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(64px,8.9vw,128px);
  grid-template-areas:"copy win" "sub win" "steps win";grid-template-rows:auto auto 1fr;color:#fff
}
.hm-walk .hm-wk-copy{grid-area:copy;min-width:0}
.hm-walk .hm-wk-h{font-size:40px;line-height:44px;font-weight:450;letter-spacing:-.02em;max-width:500px}

/* product switch: a pill tablist; the thumb slides (transform only), each product carries its mark */
.hm-walk .hm-wk-switch{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;margin-top:32px;padding:3px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--hm-wk-rule)}
.hm-walk .hm-wk-thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:rgba(255,255,255,.1);transition:transform var(--hm-wk-t3) var(--hm-wk-ease)}
.hm-walk[data-product="pp"] .hm-wk-thumb{transform:translateX(100%)}
.hm-walk .hm-wk-tab{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:32px;padding:0 18px;border-radius:999px;font-size:14px;line-height:20px;font-weight:450;white-space:nowrap;opacity:.6;transition:opacity var(--hm-wk-t1) var(--hm-wk-ease)}
.hm-walk .hm-wk-tab[aria-selected="true"]{opacity:1}
.hm-walk .hm-wk-tab:focus-visible{outline-offset:2px;border-radius:999px}
@media (hover:hover){.hm-walk .hm-wk-tab:hover{opacity:.85}.hm-walk .hm-wk-tab[aria-selected="true"]:hover{opacity:1}}
.hm-walk .hm-wk-mk{display:block;flex:none;width:7px;height:7px;border-radius:50%}
.hm-walk .hm-wk-mk-ag{background:var(--hm-wk-blue)}
.hm-walk .hm-wk-mk-pp{box-shadow:inset 0 0 0 1.5px #fff}

/* the sub under the switch: both lines share one cell, so switching never moves the steps */
.hm-walk .hm-wk-subs{grid-area:sub;display:grid;margin-top:24px;min-width:0}
.hm-walk .hm-wk-sub{grid-area:1/1;max-width:440px;font-size:17px;line-height:26px;color:var(--w-60,rgba(255,255,255,.6));transition:opacity var(--hm-wk-t3) var(--hm-wk-ease)}
.hm-walk[data-product="ag"] .hm-wk-sub[data-p="pp"],.hm-walk[data-product="pp"] .hm-wk-sub[data-p="ag"]{opacity:0;visibility:hidden}

/* the steps: hairline rows; the active row's line runs on its own bottom border (F74) */
.hm-walk .hm-wk-pans{grid-area:steps;display:grid;align-self:end;margin-top:48px;min-width:0}
.hm-walk .hm-wk-pan{grid-area:1/1}
.hm-walk .hm-wk-steps{box-shadow:inset 0 1px 0 var(--hm-wk-rule)}
.hm-walk .hm-wk-step{position:relative;display:flex;align-items:center;gap:20px;width:100%;height:56px;text-align:left}
.hm-walk .hm-wk-step::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hm-wk-rule)}
.hm-walk .hm-wk-n{flex:none;width:18px;font:500 11px/16px var(--mono);letter-spacing:.02em;opacity:.35;transition:opacity var(--hm-wk-t3) var(--hm-wk-ease)}
.hm-walk .hm-wk-l{font-size:17px;line-height:24px;font-weight:450;opacity:.45;transition:opacity var(--hm-wk-t3) var(--hm-wk-ease)}
.hm-walk .hm-wk-step.is-done .hm-wk-l{opacity:.7}
.hm-walk .hm-wk-step.is-cur .hm-wk-l{opacity:1}
.hm-walk .hm-wk-step.is-cur .hm-wk-n{opacity:.7}
.hm-walk .hm-wk-bar{position:absolute;z-index:1;left:0;right:0;bottom:0;height:1px;background:#fff;transform-origin:0 50%;transform:scaleX(0);opacity:0;transition:opacity var(--hm-wk-t3) var(--hm-wk-ease)}
.hm-walk .hm-wk-step.is-cur .hm-wk-bar{opacity:1;transform:scaleX(1)}
.hm-walk .hm-wk-step:focus-visible{outline-offset:-2px;border-radius:6px}
@media (hover:hover){.hm-walk .hm-wk-step:not(.is-cur):hover .hm-wk-l{opacity:.85}}

/* the window: one calm product surface, flat #171717, 1px ring, no glass, gradient or glow */
.hm-walk .hm-wk-win{grid-area:win;position:relative;display:flex;flex-direction:column;min-width:0;min-height:560px;background:var(--hm-wk-win);border:1px solid var(--hm-wk-rule);border-radius:16px;overflow:hidden}
.hm-walk .hm-wk-hd{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;height:52px;padding:0 20px;box-shadow:inset 0 -1px 0 rgba(255,255,255,.07)}
.hm-walk .hm-wk-hs,.hm-walk .hm-wk-sw{display:grid}
.hm-walk .hm-wk-sts{grid-area:1/1;display:flex;align-items:center;gap:10px;font-size:15px;line-height:22px;font-weight:450;opacity:0;visibility:hidden;transition:opacity var(--hm-wk-t3) var(--hm-wk-io),visibility 0s linear var(--hm-wk-t3)}
.hm-walk .hm-wk-sts.is-shown{opacity:1;visibility:visible;transition:opacity var(--hm-wk-t3) var(--hm-wk-io)}
.hm-walk .hm-wk-sw>*{grid-area:1/1;white-space:nowrap}
.hm-walk .hm-wk-demo{font:400 11px/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--w-35,rgba(255,255,255,.35));white-space:nowrap}
.hm-walk .hm-wk-stage{flex:1;display:grid;min-height:0}
.hm-walk .hm-wk-scene{grid-area:1/1;display:flex;align-items:center;justify-content:center;min-width:0;padding:40px 40px 48px;opacity:0;visibility:hidden;transition:opacity var(--hm-wk-t3) var(--hm-wk-io),visibility 0s linear var(--hm-wk-t3)}
.hm-walk .hm-wk-scene.is-shown{opacity:1;visibility:visible;transition:opacity var(--hm-wk-t3) var(--hm-wk-io)}
.hm-walk.is-out .hm-wk-scene.is-shown,.hm-walk.is-out .hm-wk-sts.is-shown{opacity:0;transition-duration:480ms}

/* timed elements: rise 6px and fade (the only entrance); past groups relax to .42 */
.hm-walk .hm-wk-e{opacity:0;transform:translateY(6px);transition:opacity var(--hm-wk-t3) var(--hm-wk-ease),transform var(--hm-wk-t4) var(--hm-wk-ease)}
.hm-walk .hm-wk-sw>.hm-wk-e{transform:translateY(4px)}
.hm-walk .hm-wk-e.is-on{opacity:1;transform:none}
.hm-walk .hm-wk-e.is-on.is-dim{opacity:.42}
.hm-walk .hm-wk-card.is-on.is-dim,.hm-walk .hm-wk-held.is-on.is-dim,.hm-walk .hm-wk-in.is-on.is-dim{opacity:.62}   /* the decision stays readable in the final frame */
/* status colour: full strength for 560ms at the event (.is-hot), then relaxed */
.hm-walk .hm-wk-c{opacity:.72;transition:opacity var(--hm-wk-t4) var(--hm-wk-ease)}
.hm-walk .is-hot .hm-wk-c{opacity:1;transition-duration:var(--hm-wk-t1)}
.hm-walk .hm-wk-amb{color:var(--hm-wk-amb)}
.hm-walk .hm-wk-grn{color:var(--hm-wk-grn)}
.hm-walk .hm-wk-red{color:var(--hm-wk-red)}
.hm-walk .hm-wk-g{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hm-walk .hm-wk-snap,.hm-walk .hm-wk-snap *,.hm-walk.is-inst,.hm-walk.is-inst *{transition:none!important}

/* agents scene: one request, decided top to bottom */
.hm-walk .hm-wk-ag{display:flex;flex-direction:column;width:min(100%,420px)}
.hm-walk .hm-wk-from{font-size:13px;line-height:20px;color:var(--w-45,rgba(255,255,255,.45))}
.hm-walk .hm-wk-ask{margin-top:6px;font-size:20px;line-height:28px;font-weight:450;letter-spacing:-.01em}
.hm-walk .hm-wk-checks{margin-top:28px}
.hm-walk .hm-wk-checks li{display:flex;align-items:center;gap:10px;font-size:15px;line-height:22px;color:var(--w-85,rgba(255,255,255,.85))}
.hm-walk .hm-wk-checks li+li{margin-top:10px}
.hm-walk .hm-wk-checks li>.hm-wk-g:not(.hm-wk-c){color:var(--w-60,rgba(255,255,255,.6))}
.hm-walk .hm-wk-card{margin-top:28px;padding:14px 16px 14px 18px;border-radius:12px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.hm-walk .hm-wk-held{font-size:13px;line-height:20px;font-weight:500;color:var(--hm-wk-blue)}
.hm-walk .hm-wk-held .hm-wk-c{display:inline-flex;align-items:center;gap:6px}
.hm-walk .hm-wk-held .hm-wk-g{width:14px;height:14px}
.hm-walk .hm-wk-q{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:32px;margin-top:8px}
.hm-walk .hm-wk-qt{font-size:15px;line-height:22px;color:var(--w-85,rgba(255,255,255,.85))}
.hm-walk .hm-wk-slot{display:grid;justify-items:end;align-items:center}
.hm-walk .hm-wk-slot>*{grid-area:1/1}
.hm-walk .hm-wk-btns{display:flex;gap:6px}
.hm-walk .hm-wk-btn{position:relative;display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:999px;font-size:13px;line-height:18px;font-weight:500;white-space:nowrap;background:rgba(255,255,255,.1);transition:transform var(--hm-wk-t1) var(--hm-wk-ease)}
.hm-walk .hm-wk-btn-ok{background:#fff;color:#141414}
.hm-walk .hm-wk-btn.is-press{transform:scale(.95)}
.hm-walk .hm-wk-by{display:flex;align-items:center;gap:8px;font-size:15px;line-height:22px;white-space:nowrap}
.hm-walk .hm-wk-res{display:flex;align-items:center;gap:20px;margin-top:24px;font-size:15px;line-height:22px}
.hm-walk .hm-wk-res .hm-wk-c{display:inline-flex;align-items:center;gap:8px;font-weight:500}
.hm-walk .hm-wk-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.hm-walk .hm-wk-rc{display:inline-flex;align-items:center;gap:8px;color:var(--w-60,rgba(255,255,255,.6))}

/* people scene: a sign-in screen, then signed in and one lookalike attempt */
.hm-walk .hm-wk-pp{display:grid;place-items:center;width:100%}
.hm-walk .hm-wk-scr,.hm-walk .hm-wk-scr2{grid-area:1/1;display:flex;flex-direction:column;align-items:center;width:min(100%,300px);text-align:center}
.hm-walk .hm-wk-scr2{width:min(100%,320px)}
.hm-walk .hm-wk-ttl{display:flex;align-items:center;justify-content:center;gap:8px;font-size:20px;line-height:28px;font-weight:450;letter-spacing:-.01em}
.hm-walk .hm-wk-fld{display:flex;align-items:center;width:100%;height:44px;margin-top:20px;padding:0 14px;border-radius:10px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--hm-wk-rule);font-size:15px;line-height:22px;color:var(--w-85,rgba(255,255,255,.85));text-align:left}
.hm-walk .hm-wk-type{display:inline-block;white-space:nowrap}
.hm-walk .hm-wk-act{display:grid;align-items:start;width:100%;margin-top:16px}
.hm-walk .hm-wk-act>*{grid-area:1/1}
.hm-walk .hm-wk-cta{position:relative;display:flex;align-items:center;justify-content:center;height:40px;border-radius:999px;background:rgba(255,255,255,.12);font-size:14px;line-height:20px;font-weight:500}
.hm-walk .hm-wk-cta.is-on{transition:opacity var(--hm-wk-t3) var(--hm-wk-ease),transform var(--hm-wk-t1) var(--hm-wk-ease)}
.hm-walk .hm-wk-cta.is-press{transform:scale(.97)}
.hm-walk .hm-wk-line{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;font-size:15px;line-height:22px;color:var(--w-60,rgba(255,255,255,.6))}
.hm-walk .hm-wk-line.hm-wk-hi{color:var(--w-85,rgba(255,255,255,.85))}
.hm-walk .hm-wk-bio{display:flex;flex-direction:column;align-items:center;gap:10px}
.hm-walk .hm-wk-ring{position:relative;width:64px;height:64px}
.hm-walk .hm-wk-ring svg{position:absolute;inset:0;width:64px;height:64px;fill:none;stroke-width:1.5}
.hm-walk .hm-wk-trk{stroke:rgba(255,255,255,.12)}
.hm-walk .hm-wk-arcw{position:absolute;inset:0}
.hm-walk .hm-wk-arcw svg{stroke:var(--w-85,rgba(255,255,255,.85))}
.hm-walk .hm-wk-ring .hm-wk-fp{inset:17px;width:30px;height:30px;stroke:var(--w-60,rgba(255,255,255,.6));stroke-width:1.25;stroke-linecap:round}
.hm-walk .hm-wk-bl{display:grid;font-size:13px;line-height:20px;color:var(--w-60,rgba(255,255,255,.6))}
.hm-walk .hm-wk-bl>*{grid-area:1/1;white-space:nowrap}
.hm-walk .hm-wk-in .hm-wk-g{width:18px;height:18px}
.hm-walk .hm-wk-note{margin-top:4px;font-size:13px;line-height:20px;color:var(--w-45,rgba(255,255,255,.45))}
.hm-walk .hm-wk-fake{width:100%;margin-top:40px;padding:12px 12px 10px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.hm-walk .hm-wk-addr{display:flex;align-items:center;justify-content:space-between;gap:12px;height:32px;padding:0 6px 0 14px;border-radius:999px;background:rgba(255,255,255,.05);font-size:13px;line-height:20px;color:var(--w-60,rgba(255,255,255,.6))}
.hm-walk .hm-wk-tag{padding:0 8px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font-size:11px;line-height:20px;color:var(--w-60,rgba(255,255,255,.6))}
.hm-walk .hm-wk-fake .hm-wk-line{min-height:0;margin-top:12px}
.hm-walk .hm-wk-fake .hm-wk-line+.hm-wk-line{margin-top:2px;font-size:13px;line-height:20px;color:var(--w-45,rgba(255,255,255,.45))}
.hm-walk .hm-wk-fake .hm-wk-c{display:inline-flex}

@media (max-width:1100px){
  .hm-walk{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px}
  .hm-walk .hm-wk-h{font-size:36px;line-height:40px}
  .hm-walk .hm-wk-scene{padding:36px 28px 40px}
}
/* <=900: recomposed into one column: copy, switch, sub, the window, then the steps under it */
@media (max-width:900px){
  .hm-walk{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "sub" "win" "steps";grid-template-rows:auto}
  .hm-walk .hm-wk-h{max-width:560px}
  .hm-walk .hm-wk-subs{margin-top:20px}
  .hm-walk .hm-wk-win{min-height:0;margin-top:32px}
  .hm-walk .hm-wk-stage{min-height:392px}
  .hm-walk .hm-wk-pans{align-self:start;margin-top:8px}
  .hm-walk .hm-wk-steps{box-shadow:none}
  .hm-walk .hm-wk-step{height:48px;gap:16px}
  .hm-walk .hm-wk-l{font-size:16px;line-height:22px}
}
@media (max-width:760px){
  .hm-walk .hm-wk-h{font-size:30px;line-height:34px}
  .hm-walk .hm-wk-switch{margin-top:28px}
  .hm-walk .hm-wk-sub{font-size:16px;line-height:24px}
  .hm-walk .hm-wk-hd{height:48px;padding:0 16px}
  .hm-walk .hm-wk-sts{font-size:14px;line-height:20px}
  .hm-walk .hm-wk-scene{padding:28px 20px 32px}
  .hm-walk .hm-wk-ask{font-size:18px;line-height:26px}
  .hm-walk .hm-wk-checks,.hm-walk .hm-wk-card{margin-top:22px}
}
@media (max-width:560px){
  .hm-walk .hm-wk-q{flex-direction:column;align-items:flex-start;gap:10px}
  .hm-walk .hm-wk-slot{justify-items:start;min-height:30px}
}