/* pwx-flow · how it works: a phone and the "What Hawcx receives" inspector over three steps. Prefix pwf-. Base = final frame (k=3). */
.pwf{--pf-ink:#0a0a0a;--pf-60:rgba(10,10,10,.58);--pf-45:rgba(10,10,10,.45);--pf-line:rgba(10,10,10,.07);--pf-ok:#1a7f37;--pf-e:cubic-bezier(.25,1,.5,1);margin-top:56px;color:var(--pf-ink)}
.pwf p{margin:0}
.pwf svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pwf-tray{position:relative;border-radius:24px;background:#f3f2ef;overflow:hidden}
.pwf-stage{position:relative;display:flex;align-items:center;justify-content:center;gap:0;height:560px;padding:48px 48px 0;overflow:hidden;box-shadow:inset 0 -1px 0 rgba(10,10,10,.08)}
/* the phone */
.pwf-ph{position:relative;align-self:flex-end;width:260px;height:500px;margin-bottom:-60px;padding:9px;border-radius:44px;background:#0a0a0a;box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.pwf-scr{position:relative;height:100%;overflow:hidden;border-radius:36px;background:#fbfbfa}
.pwf-sb{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 22px 0 26px;font-size:12px;font-weight:600}
.pwf-isl{position:absolute;left:50%;top:10px;width:76px;height:22px;margin-left:-38px;border-radius:12px;background:#0a0a0a}
.pwf-bat{width:20px;height:10px;border-radius:3px;box-shadow:inset 0 0 0 1.2px var(--pf-ink)}
.pwf-v{position:absolute;left:0;right:0;top:130px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 22px;opacity:0;transform:translateY(8px);transition:opacity 380ms var(--pf-e),transform 380ms var(--pf-e)}
.pwf[data-k="1"] .pwf-v1,.pwf[data-k="2"] .pwf-v2,.pwf[data-k="3"] .pwf-v3{opacity:1;transform:none;transition-delay:170ms}
.pwf-key,.pwf-okc{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#f0efec}
.pwf-key svg{width:26px;height:26px;stroke-width:1.4}
.pwf-okc{background:rgba(26,127,55,.1);color:var(--pf-ok)}.pwf-okc svg{width:26px;height:26px;stroke-width:1.8}
.pwf-t{margin-top:16px!important;font-size:18px;line-height:24px;font-weight:500;letter-spacing:-.01em}
.pwf-s{margin-top:4px!important;font-size:13px;line-height:19px;color:var(--pf-60)}
.pwf-ok{display:inline-flex;align-items:center;gap:5px;margin-top:16px!important;padding:4px 10px;border-radius:999px;background:rgba(26,127,55,.09);font-size:12.5px;font-weight:500;color:var(--pf-ok);opacity:1;transition:opacity 300ms}
.pwf-ok svg{width:12px;height:12px;stroke-width:1.8}
.pwf-ring{position:relative;display:grid;place-items:center;width:64px;height:64px}
.pwf-ring>*{grid-area:1/1}
.pwf-rg{width:64px;height:64px;transform:rotate(-90deg)}
.pwf-rt{stroke:rgba(10,10,10,.1);stroke-width:1.5}
.pwf-ra{stroke:var(--pf-ok);stroke-width:2;stroke-dasharray:1 1;stroke-dashoffset:0}
.pwf-fp{width:30px;height:30px;stroke-width:1.3;color:var(--pf-60)}
/* the wire between them */
.pwf-wire{position:relative;width:96px;height:1px;margin:0 6px;background:repeating-linear-gradient(90deg,rgba(10,10,10,.28) 0 4px,transparent 4px 8px)}
.pwf-pk{position:absolute;left:0;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--pf-ink);opacity:0}
/* the inspector */
.pwf-in{width:460px;padding:16px 20px 18px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(10,10,10,.06),0 24px 50px -30px rgba(0,0,0,.3)}
.pwf-ih{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:12px;box-shadow:inset 0 -1px 0 var(--pf-line)}
.pwf-it{font-size:14px;line-height:20px;font-weight:500}
.pwf-ifrom{font-size:12px;color:var(--pf-45)}
.pwf-ib{display:none}
.pwf[data-k="1"] .pwf-b1,.pwf[data-k="2"] .pwf-b2,.pwf[data-k="3"] .pwf-b3{display:block;animation:pwf-in 380ms var(--pf-e) both}
@keyframes pwf-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.pwf-ir{display:flex;align-items:center;gap:10px;min-height:46px;box-shadow:inset 0 -1px 0 var(--pf-line);font-size:13px;line-height:18px}
.pwf-ir:last-child{box-shadow:none}
.pwf-ik{flex:0 0 104px;color:var(--pf-45)}
.pwf-iv{white-space:nowrap}
.pwf-iv{flex:1;min-width:0}
.pwf-dim .pwf-iv{color:var(--pf-45)}
.pwf-res b{display:inline-flex;align-items:center;gap:5px;font-weight:500;color:var(--pf-ok)}
.pwf-warn .pwf-iv{color:#a1600a;font-weight:500}
.pwf-res b svg{width:13px;height:13px;stroke-width:1.8}
.pwf-tag{display:inline-flex;align-items:center;gap:5px;flex:none;font-style:normal;font-size:12px;color:var(--pf-45)}
.pwf-tag.ok{color:var(--pf-ok);font-weight:500}
.pwf-tag svg{width:12px;height:12px;stroke-width:1.6}
/* captions: three buttons; the active one's line fills on its own top border */
.pwf-caps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0 48px;list-style:none;background:#f3f2ef;position:relative;z-index:1}
.pwf-cap{position:relative;display:flex;gap:12px;width:100%;padding:22px 16px 28px 0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.pwf-bar{position:absolute;left:0;right:16px;top:0;height:1px;background:var(--pf-line)}
.pwf-bar::after{content:"";position:absolute;inset:0;background:var(--pf-ink);transform-origin:left;transform:scaleX(var(--p,0))}
.pwf-n{font:500 11px/20px var(--mono,ui-monospace,monospace);color:var(--pf-45)}
.pwf-ct{display:flex;flex-direction:column;gap:2px}
.pwf-ct b{font-size:15px;line-height:20px;font-weight:500;color:var(--pf-45);transition:color .25s}
.pwf-ct span{font-size:14px;line-height:20px;color:var(--pf-45)}
.pwf-cap[aria-current="step"] .pwf-ct b{color:var(--pf-ink)}
.pwf-cap[aria-current="step"] .pwf-ct span{color:var(--pf-60)}
.pwf-cap[aria-current="step"] .pwf-bar::after{transform:scaleX(var(--p,1))}
.pwf-cap:focus-visible{outline:2px solid var(--blue,#1a56ff);outline-offset:-2px;border-radius:6px}
/* live: within a step, the phone and the wire act */
.pwf.is-live[data-k="1"] .pwf-ok{opacity:0}
.pwf.is-live[data-k="1"].pwf-a .pwf-ok{opacity:1}
.pwf.is-live[data-k="3"] .pwf-ok3{opacity:0}
.pwf.is-live[data-k="3"].pwf-a .pwf-ok3{opacity:1;transition-delay:.9s}
.pwf.is-live[data-k="3"].pwf-a .pwf-ap{transform:scale(.95);transition:transform .14s ease .7s}
.pwf.is-live[data-k="3"].pwf-a .pwf-ra{stroke-dashoffset:0;transition:stroke-dashoffset 1s cubic-bezier(.45,.05,.25,1)}
.pwf.is-live.pwf-a .pwf-pk{animation:pwf-go 900ms cubic-bezier(.65,0,.35,1) both}
@keyframes pwf-go{0%{opacity:0;transform:none}15%{opacity:1}85%{opacity:1;transform:translateX(87px)}100%{opacity:0;transform:translateX(87px)}}
@media (max-width:1100px){ .pwf-in{width:380px} .pwf-wire{width:48px} .pwf-stage{padding:40px 24px 0} .pwf-caps{padding:0 24px} .pwf-ik{flex-basis:104px} }
@media (max-width:900px){
  .pwf-stage{flex-direction:column;align-items:center;height:auto;padding:28px 16px 0;gap:0}
  .pwf-in{order:-1;width:100%;max-width:440px;margin-bottom:20px}
  .pwf-wire{display:none}
  .pwf-ph{align-self:center;height:420px;margin-bottom:-60px}
  .pwf-caps{grid-template-columns:minmax(0,1fr);padding:0 20px}
  .pwf-cap{padding:16px 0 18px}
  .pwf-bar{right:0}
}
@media (max-width:560px){ .pwf-ik{flex-basis:88px} .pwf-iv{white-space:normal} .pwf-ir{gap:8px} .pwf-tag{max-width:96px;text-align:right} .pwf-in{padding:14px 14px 16px} }
@media (prefers-reduced-motion:reduce){ .pwf *{transition:none!important;animation:none!important} }

.pwf-nt{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:6px!important;font-size:12.5px;line-height:17px;color:var(--pf-60)}
.pwf-nt b{font-size:13px;color:var(--pf-ink)}
.pwf-ab{display:flex;gap:8px;width:100%;margin-top:18px!important}
.pwf-ab span{flex:1;display:grid;place-items:center;height:38px;border-radius:10px;font-size:13.5px;font-weight:500}
.pwf-ap{background:var(--pf-ink);color:#fff}.pwf-dn{box-shadow:inset 0 0 0 1px rgba(10,10,10,.15)}
.pwf-ok3{margin-top:12px!important}

/* v2.1 (2026-10-02): step 3 is a Mac sign-in in New York approved on the iPhone; the inspector names the Mac. Approved replaces the buttons.
   The outgoing screen fades first (no text over text). */
.pwf-v{transition:opacity 160ms ease,transform 380ms var(--pf-e)}
.pwf-ifrom .f3,.pwf[data-k="3"] .pwf-ifrom .f12{display:none}.pwf[data-k="3"] .pwf-ifrom .f3{display:inline}
.pwf[data-k="3"] .pwf-ok3{margin-top:-38px!important;height:38px;align-self:stretch;justify-content:center;border-radius:10px}
.pwf[data-k="3"] .pwf-ab{transition:opacity .25s}
.pwf:not(.is-live)[data-k="3"] .pwf-ab,.pwf.is-live[data-k="3"].pwf-a .pwf-ab{opacity:0}
.pwf.is-live[data-k="3"].pwf-a .pwf-ab{transition-delay:.85s}
@media (max-width:900px){ .pwf-in{min-height:236px} }