/* hm-what v4 · home "What Hawcx does" + enterprise. Spec: asset.html header.
   What Hawcx does: the definition as one large statement with three live product tokens set inside the sentence (our own device;
   SpaceXAI's large plain statements and V7's two-tone type set the craft). Enterprise: a centred head, one pill, a three-point track.
   Only transform, opacity and stroke-dashoffset animate; everything pauses out of view; reduced motion shows the stills. */
.hm-ent-sec{padding-top:0!important}
.hm-st,.hm-en{color:#0a0a0a}
.hm-st :where(p,h2,h3,ul,ol,li),.hm-en :where(p,h3,ul,ol,li){margin:0;padding:0;list-style:none}

/* ---------- What Hawcx does: one statement ---------- */
.hm-st{max-width:none}
.hm-st .stk-g{white-space:nowrap}
.hm-st-k{font-size:14px;line-height:20px;font-weight:500;letter-spacing:0;color:rgba(0,0,0,.55)}
.hm-st-s{margin-top:28px!important;max-width:1232px;font-size:44px;line-height:66px;font-weight:450;letter-spacing:-.022em;text-wrap:pretty}
.hm-st-d{margin-top:18px!important;font-size:44px;line-height:56px;font-weight:450;letter-spacing:-.022em;color:rgba(0,0,0,.34);text-wrap:balance}
.hm-st-l{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:48px!important}

/* the tokens: small live product moments that sit on the line like words */
.hm-st .stk{position:relative;top:-6px;display:inline-flex;align-items:center;gap:10px;height:48px;margin:0 4px;padding:0 16px 0 6px;border-radius:999px;vertical-align:middle;
  background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 10px 24px -16px rgba(0,0,0,.35);font-size:15px;line-height:20px;font-weight:450;letter-spacing:0;white-space:nowrap}
.hm-st .stk svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.hm-st .stk .stk-tx{display:grid}
.hm-st .stk .stk-tx>*{grid-area:1/1}
/* 1 · a biometric sign-in: the ring closes, "Confirm it's you" becomes "Signed in" (6 s) */
.hm-st .stk1 .stk-bi{position:relative;display:grid;place-items:center;width:36px;height:36px}
.hm-st .stk1 .stk-rg{position:absolute;inset:0;width:36px;height:36px;transform:rotate(-90deg)}
.hm-st .stk1 .stk-tr{stroke:rgba(0,0,0,.1);stroke-width:1.5}
.hm-st .stk1 .stk-ar{stroke:#1f8a4c;stroke-width:1.75;stroke-dasharray:1 1;stroke-dashoffset:0}
.hm-st .stk1 .stk-fp{width:18px;height:18px;stroke:#0a0a0a;stroke-width:1.4}
.hm-st .stk1 .stk-a{color:rgba(0,0,0,.5);opacity:0}
.hm-st .stk1 .stk-b{color:#0a0a0a}
.hm-st.is-in .stk1 .stk-ar{animation:st-ring 6s cubic-bezier(.45,.05,.25,1) infinite}
.hm-st.is-in .stk1 .stk-a{animation:st-a 6s infinite}
.hm-st.is-in .stk1 .stk-b{animation:st-b 6s infinite}
@keyframes st-ring{0%,8%{stroke-dashoffset:1}36%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes st-a{0%,36%{opacity:1}42%,92%{opacity:0}98%,100%{opacity:1}}
@keyframes st-b{0%,38%{opacity:0;transform:translateY(3px)}44%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
/* 2 · an agent rooted in its person: Dana, a line, her Billing agent (a pulse rides the root) */
.hm-st .stk2{padding-left:8px;gap:0}
.hm-st .stk2 .stk-av{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#efe7dc;color:#6b4b1f;font-style:normal;font-size:13px;font-weight:600}
.hm-st .stk2 .stk-ln{position:relative;width:22px;height:1.5px;margin:0 4px;background:rgba(0,0,0,.2)}
.hm-st .stk2 .stk-pu{position:absolute;left:0;top:-2px;width:5px;height:5px;border-radius:50%;background:#0a3cb0;opacity:0}
.hm-st .stk2 .stk-bt{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:rgba(10,60,176,.09);color:#0a3cb0}
.hm-st .stk2 .stk-bt svg{width:18px;height:18px;stroke-width:1.4}
.hm-st .stk2 .stk-bt .stk-fl{fill:currentColor;stroke:none}
.hm-st .stk2 .stk-tx{display:flex;align-items:baseline;gap:6px;margin-left:10px}
.hm-st .stk2 .stk-tx b{font-weight:500}
.hm-st .stk2 .stk-f{color:rgba(0,0,0,.5)}
.hm-st.is-in .stk2 .stk-pu{animation:st-pulse 2.4s cubic-bezier(.45,0,.55,1) infinite}
@keyframes st-pulse{0%{opacity:0;transform:none}15%{opacity:1}75%{opacity:1;transform:translateX(17px)}90%,100%{opacity:0;transform:translateX(17px)}}
/* 3 · a call being decided: allowed, held for Dana, rejected (9 s; each call travels with its verdict) */
.hm-st .stk3{padding-left:16px}
.hm-st .stk3 .stk-ps{display:grid}
.hm-st .stk3 .stk-p{grid-area:1/1;justify-self:center;display:inline-flex;align-items:center;gap:12px}
.hm-st .stk3 code{font:500 14px/20px var(--mono,ui-monospace,monospace);color:#0a0a0a}
.hm-st .stk3 b{display:inline-flex;align-items:center;gap:5px;font-weight:500;font-size:14px}
.hm-st .stk3 b svg{width:14px;height:14px;stroke-width:1.8}
.hm-st .stk3 .stk-ok{color:#1f8a4c}.hm-st .stk3 .stk-hold{color:#a66a00}.hm-st .stk3 .stk-no{color:#d93636}
.hm-st .stk3 .stk-p2,.hm-st .stk3 .stk-p3{opacity:0}
.hm-st.is-in .stk3 .stk-p1{animation:st-cyc 9s infinite}.hm-st.is-in .stk3 .stk-p2{animation:st-cyc 9s -6s infinite}.hm-st.is-in .stk3 .stk-p3{animation:st-cyc 9s -3s infinite}
.hm-st.is-in .stk3 .stk-p1 b{animation:st-cycv 9s infinite}.hm-st.is-in .stk3 .stk-p2 b{animation:st-cycv 9s -6s infinite}.hm-st.is-in .stk3 .stk-p3 b{animation:st-cycv 9s -3s infinite}
@keyframes st-cyc{0%{opacity:0;transform:translateY(5px)}3%,31%{opacity:1;transform:none}33.3%,100%{opacity:0;transform:translateY(-5px)}}
@keyframes st-cycv{0%,9%{opacity:0;transform:translateX(-4px)}13%,100%{opacity:1;transform:none}}
.hm-st:not(.is-in) .stk *{animation-play-state:paused}

/* ---------- enterprise: centred head, one pill, a three-point track ---------- */
.hm-en{text-align:center}
.hm-en .h2{margin:16px auto 0}
.hm-en-p{margin:16px auto 0!important;max-width:560px;font-size:17px;line-height:27px;color:rgba(0,0,0,.55)}
.hm-en>.btn{margin-top:28px}
.hm-en-track{position:relative;margin-top:88px;text-align:left}
.hm-en-track .bar{position:absolute;left:0;right:0;top:0;height:10px;border-radius:5px;background:#f2f1ee;overflow:hidden}
.hm-en-track .fill{position:absolute;inset:0;background:#e2e0da;transform-origin:left}
.hm-en-track .dot{position:absolute;top:-1px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#0a0a0a}
.hm-en-track .d1{left:6px}.hm-en-track .d2{left:50%}.hm-en-track .d3{left:calc(100% - 6px)}
.hm-en-track ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding-top:120px!important}
.hm-en-track li{position:relative;max-width:380px}
.hm-en-track li::before{content:"";position:absolute;top:-104px;height:84px;border-left:1.5px dotted rgba(0,0,0,.28);transform-origin:top}
.hm-en-track li:nth-child(1){justify-self:start}.hm-en-track li:nth-child(1)::before{left:5px}
.hm-en-track li:nth-child(2){justify-self:center;text-align:center}.hm-en-track li:nth-child(2)::before{left:50%}
.hm-en-track li:nth-child(3){justify-self:end;text-align:right}.hm-en-track li:nth-child(3)::before{right:5px}
.hm-en-track h3{font-size:20px;line-height:28px;font-weight:450;letter-spacing:-.01em}
.hm-en-track p{margin-top:8px!important;font-size:15.5px;line-height:24px;color:rgba(0,0,0,.52)}
/* drawn once in view: the bar fills, the dots land, the dotted leads drop */
.hm-en.is-armed .fill{transform:scaleX(0)}
.hm-en.is-armed .dot{opacity:0;transform:scale(.4)}
.hm-en.is-armed li::before{transform:scaleY(0)}
.hm-en.is-armed li h3,.hm-en.is-armed li p{opacity:0;transform:translateY(6px)}
.hm-en.is-drawn .fill{transform:none;transition:transform 1.4s cubic-bezier(.45,.05,.25,1)}
.hm-en.is-drawn .dot{opacity:1;transform:none;transition:opacity .3s ease,transform .45s cubic-bezier(.25,1,.5,1)}
.hm-en.is-drawn .d2{transition-delay:.6s}.hm-en.is-drawn .d3{transition-delay:1.2s}
.hm-en.is-drawn li::before{transform:none;transition:transform .5s cubic-bezier(.25,1,.5,1)}
.hm-en.is-drawn li h3,.hm-en.is-drawn li p{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.25,1,.5,1)}
.hm-en.is-drawn li:nth-child(1)::before,.hm-en.is-drawn li:nth-child(1) h3,.hm-en.is-drawn li:nth-child(1) p{transition-delay:.15s}
.hm-en.is-drawn li:nth-child(2)::before,.hm-en.is-drawn li:nth-child(2) h3,.hm-en.is-drawn li:nth-child(2) p{transition-delay:.75s}
.hm-en.is-drawn li:nth-child(3)::before,.hm-en.is-drawn li:nth-child(3) h3,.hm-en.is-drawn li:nth-child(3) p{transition-delay:1.35s}

@media (max-width:900px){
  .hm-en-track{margin-top:56px;padding-left:32px}
  .hm-en-track .bar{left:0;right:auto;top:0;bottom:0;width:10px;height:auto}
  .hm-en-track .fill{transform-origin:top}
  .hm-en.is-armed .fill{transform:scaleY(0)}
  .hm-en-track .dot{left:-1px!important;margin-left:0}
  .hm-en-track .d1{top:4px}.hm-en-track .d2{top:50%}.hm-en-track .d3{top:auto;bottom:4px}
  .hm-en-track ol{grid-template-columns:minmax(0,1fr);row-gap:40px;padding-top:0!important}
  .hm-en-track li,.hm-en-track li:nth-child(n){justify-self:start;text-align:left;max-width:none}
  .hm-en-track li::before{display:none}
}

@media (max-width:1100px){
  .hm-st-s,.hm-st-d{font-size:38px;line-height:56px}
  .hm-st-d{line-height:50px}
}
@media (max-width:760px){
  .hm-st .stk-g{white-space:normal}
  .hm-st-s{font-size:28px;line-height:46px}
  .hm-st-d{font-size:28px;line-height:36px}
  .hm-st .stk{top:-3px;height:38px;gap:8px;padding:0 12px 0 5px;font-size:13px}
  .hm-st .stk1 .stk-bi,.hm-st .stk1 .stk-rg{width:28px;height:28px}
  .hm-st .stk1 .stk-fp{width:15px;height:15px}
  .hm-st .stk2 .stk-av,.hm-st .stk2 .stk-bt{width:24px;height:24px}
  .hm-st .stk2 .stk-av{font-size:11px}
  .hm-st .stk2 .stk-bt svg{width:15px;height:15px}
  .hm-st .stk3 code,.hm-st .stk3 b{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){ .hm-st *,.hm-en *,.hm-en *::before{animation:none!important;transition:none!important} }