/* pwx-feat · /passwordless features bento. Spec: asset.html header. Prefix pfb-. Twelve columns: 7+5 / 4+4+4 / 5+7.
   Light cards on the white band, one dark painted card (the keys). Base = the final frame; .is-live arms the moments, .is-go on a card plays its own. */
.pfb{--pfb-ink:#121418;--pfb-60:#5d616b;--pfb-45:#878b94;--pfb-line:#e7e5e0;--pfb-card:#f4f3f0;--pfb-ok:#18794e;--pfb-blue:#3d6df2;--pfb-e:cubic-bezier(.25,1,.5,1);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;margin-top:56px;color:var(--pfb-ink)}
:where(.pfb) :where(p,ul,dl,dd,h3){margin:0;padding:0}
:where(.pfb) ul{list-style:none}
.pfb em{font-style:normal}
.pfb svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pfb-c{position:relative;display:flex;flex-direction:column;min-width:0;min-height:400px;padding:28px 28px 0;border-radius:20px;background:var(--pfb-card);overflow:hidden;color:inherit;text-decoration:none;isolation:isolate}
.pfb-key{grid-column:span 7;min-height:460px}.pfb-auto{grid-column:span 5;min-height:460px}
.pfb-mfa,.pfb-dev,.pfb-step{grid-column:span 4}
.pfb-sdk{grid-column:span 5;min-height:340px}.pfb-sso{grid-column:span 7;min-height:340px}
.pfb-tx{max-width:520px}
.pfb-tx h3{display:flex;align-items:center;gap:10px;font-size:19px;line-height:26px;font-weight:500;letter-spacing:-.01em}
.pfb-tx p{margin-top:6px;font-size:15px;line-height:23px;color:var(--pfb-60)}
.pfb-go{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--pfb-line);transition:transform .25s var(--pfb-e)}
.pfb-go svg{width:12px;height:12px;stroke-width:1.6}
a.pfb-c:hover .pfb-go{transform:translateX(3px)}
a.pfb-c:focus-visible{outline:2px solid var(--pfb-ink);outline-offset:3px}
.pfb-vis{position:relative;flex:1;display:flex;align-items:flex-end;justify-content:center;margin-top:28px}
/* a small product window, bleeding off the card's bottom edge */
.pfb-win{width:100%;max-width:380px;padding:16px 18px 18px;border-radius:14px 14px 0 0;background:#fff;box-shadow:0 0 0 1px rgba(18,20,24,.06),0 18px 40px -24px rgba(18,20,24,.3)}
.pfb-wh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px!important;font-size:13.5px;line-height:20px}
.pfb-wh b{font-weight:600}.pfb-wh span{font-size:12px;color:var(--pfb-45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfb-mi{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:8px;background:var(--pfb-card);color:var(--pfb-ink)}
.pfb-mi svg{width:14px;height:14px;stroke-width:1.4}

/* 1 · keys: the dark painted card and its key inspector */
.pfb-key{background:#07090c var(--pfb-bg) 50% 50%/cover no-repeat;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.pfb-key .pfb-tx p{color:rgba(255,255,255,.66)}
.pfb-key .pfb-vis{justify-content:flex-start}
.pfb-kp{width:100%;max-width:560px;padding:18px 20px 8px;border-radius:14px 14px 0 0;background:rgba(14,16,20,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 30px 60px -30px rgba(0,0,0,.8)}
.pfb-kh{display:flex;align-items:center;gap:10px;padding-bottom:14px!important;font-size:13.5px;line-height:20px}
.pfb-kh b{font-weight:600}
.pfb-kh span{color:rgba(255,255,255,.55)}
.pfb-kh>em{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;background:rgba(76,195,138,.14);color:#6fd4a4;font-size:12px;font-weight:500}
.pfb-kh>em i{width:6px;height:6px;border-radius:50%;background:currentColor}
.pfb-kd{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.08);color:#fff}
.pfb-kd svg{width:14px;height:14px;stroke-width:1.4}
.pfb-kr div{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07);font-size:13.5px;line-height:20px}
.pfb-kr dt{color:rgba(255,255,255,.55)}
.pfb-kr dd{display:flex;align-items:center;gap:8px;text-align:right}
.pfb-kr dd svg{width:13px;height:13px;stroke-width:1.6;color:#9db8ff}
.pfb-hx{font-family:var(--mono);font-size:12.5px;color:rgba(255,255,255,.82)}
.pfb-hx span{display:inline-block;min-width:6ch;transition:opacity .25s}
.pfb-ok{display:inline-flex;align-items:center;gap:5px;color:#6fd4a4;font-size:12.5px;font-weight:500}
.pfb-ok svg{width:12px!important;height:12px!important;stroke-width:2!important;color:currentColor!important}
.pfb-ph dd{color:rgba(255,255,255,.55)}
.pfb.is-live .pfb-hx.is-roll span{opacity:.15}

/* 2 · automatic sign-in: the history fills in, newest first */
.pfb-hist li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;align-items:center;gap:10px;min-height:44px;box-shadow:inset 0 1px 0 #f0eee9;font-size:13px;line-height:18px}
.pfb-t{color:var(--pfb-60)}
.pfb-d{color:var(--pfb-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfb-hist em{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap}
.pfb-hist em svg{width:11px;height:11px;stroke-width:2.2}
.pfb-hist em.a{background:#e7f4ec;color:var(--pfb-ok)}
.pfb-hist em.m{background:#fff3e2;color:#8a4a06}
.pfb.is-live .pfb-hist li{opacity:0;transform:translateY(-6px);transition:opacity .35s,transform .45s var(--pfb-e)}
.pfb.is-live .pfb-auto.is-go .pfb-hist li{opacity:1;transform:none}
.pfb.is-live .is-go .pfb-h4{transition-delay:.05s}.pfb.is-live .is-go .pfb-h3{transition-delay:.3s}.pfb.is-live .is-go .pfb-h2{transition-delay:.55s}.pfb.is-live .is-go .pfb-h1{transition-delay:.8s}

/* 3 · MFA: the pick moves down the list, then rests on push */
.pfb-m{display:flex;align-items:center;gap:12px;height:46px;padding:0 12px;margin-top:6px!important;border-radius:10px;font-size:13.5px;box-shadow:inset 0 0 0 1px var(--pfb-line);transition:box-shadow .25s,background .25s}
.pfb-r{margin-left:auto;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #cfccc5;transition:box-shadow .25s}
.pfb-m.is-on{background:#f6f8ff;box-shadow:inset 0 0 0 1.5px var(--pfb-blue)}
.pfb-m.is-on .pfb-r{box-shadow:inset 0 0 0 5px var(--pfb-blue)}

/* 4 · devices: the lost phone gets revoked */
.pfb-dv{display:flex;align-items:center;gap:12px;min-height:52px;box-shadow:inset 0 1px 0 #f0eee9;font-size:13.5px;line-height:18px}
.pfb-dv>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column}
.pfb-dv b{font-weight:500}.pfb-dv em{font-size:12px;color:var(--pfb-45)}
.pfb-st{display:inline-grid;height:24px;padding:0 9px;border-radius:999px;font-size:12px;line-height:24px;font-weight:500}
.pfb-st.ok{background:#e7f4ec;color:var(--pfb-ok)}
.pfb-st.no{background:#fbe9e6;color:#b23a26}
.pfb-st.no span{grid-area:1/1;transition:opacity .25s}
.pfb-st.no .a{opacity:0}
.pfb-lost b{text-decoration:line-through;text-decoration-color:rgba(18,20,24,.35)}
.pfb.is-live .pfb-st.no{background:#fff;box-shadow:inset 0 0 0 1px var(--pfb-line);color:var(--pfb-ink);transition:background .3s .9s,color .3s .9s,box-shadow .3s .9s}
.pfb.is-live .pfb-st.no .a{opacity:1}.pfb.is-live .pfb-st.no .b{opacity:0}
.pfb.is-live .pfb-st.no span{transition-delay:.9s}
.pfb.is-live .pfb-lost b{text-decoration-color:transparent;transition:text-decoration-color .3s .9s}
.pfb.is-live .pfb-dev.is-go .pfb-st.no{background:#fbe9e6;color:#b23a26;box-shadow:none}
.pfb.is-live .pfb-dev.is-go .pfb-st.no .a{opacity:0}.pfb.is-live .pfb-dev.is-go .pfb-st.no .b{opacity:1}
.pfb.is-live .pfb-dev.is-go .pfb-lost b{text-decoration-color:rgba(18,20,24,.35)}

/* 5 · step-up: Change asks for a fresh check */
.pfb-set{position:relative;padding-bottom:96px}
.pfb-sr{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;box-shadow:inset 0 1px 0 #f0eee9;font-size:13.5px;line-height:19px}
.pfb-sr>span:first-child{display:flex;flex-direction:column;min-width:0}
.pfb-sr em{font-size:12px;color:var(--pfb-45)}
.pfb-btn{height:30px;padding:0 12px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--pfb-line);font-size:12.5px;line-height:30px;font-weight:500}
.pfb-sheet{position:absolute;left:10px;right:10px;bottom:10px;padding:12px 14px;border-radius:12px;background:var(--pfb-ink);color:#fff;box-shadow:0 18px 30px -14px rgba(18,20,24,.6)}
.pfb-sh{display:flex;align-items:center;gap:9px;font-size:13.5px;line-height:19px}
.pfb-sh b{font-weight:600}
.pfb-ss{margin-top:2px!important;padding-left:23px!important;font-size:12.5px;line-height:18px;color:rgba(255,255,255,.62)}
.pfb-spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.2);border-top-color:#fff}
.pfb.is-live .pfb-spin{animation:pfb-spin .8s linear infinite}
@keyframes pfb-spin{to{transform:rotate(360deg)}}
.pfb.is-live .pfb-sheet{opacity:0;transform:translateY(14px);transition:opacity .35s,transform .5s var(--pfb-e)}
.pfb.is-live .pfb-sr:first-of-type .pfb-btn{transition:background .2s .6s,color .2s .6s}
.pfb.is-live .pfb-step.is-go .pfb-sr:first-of-type .pfb-btn{background:var(--pfb-ink);color:#fff}
.pfb.is-live .pfb-step.is-go .pfb-sheet{opacity:1;transform:none;transition-delay:.9s}

/* 6 · SDKs */
.pfb-sdk .pfb-vis{flex-direction:column;align-items:stretch;justify-content:flex-end;padding-bottom:28px}
.pfb-term{display:flex;align-items:center;gap:10px;height:48px;padding:0 16px;border-radius:12px;background:#121418;color:#e6e7ea;font-family:var(--mono);font-size:13.5px}
.pfb-pr{color:#7c8089}
.pfb-cur{width:7px;height:16px;margin-left:-6px;background:#9db8ff}
.pfb.is-live .pfb-cur{animation:pfb-blink 1.1s steps(1) infinite}
@keyframes pfb-blink{50%{opacity:0}}
.pfb-plats{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px!important}
.pfb-plats li{height:30px;padding:0 12px;border-radius:8px;background:#fff;box-shadow:0 0 0 1px var(--pfb-line);font-size:13px;line-height:30px}
.pfb-plats li.be{background:transparent;color:var(--pfb-60)}

/* 7 · SSO: work apps, one opening */
.pfb-apps{max-width:520px}
.pfb-apps ul{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:10px!important}
.pfb-apps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 0 10px;border-radius:12px;font-size:12px;line-height:16px;color:var(--pfb-60);box-shadow:inset 0 0 0 1px #f0eee9}
.pfb-apps li i{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--c);color:#fff;font-style:normal;font-size:14px;font-weight:600}
.pfb-apps li em{position:absolute;right:6px;top:6px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--pfb-ok);color:#fff}
.pfb-apps li em svg{width:9px;height:9px;stroke-width:2.6}
.pfb-open{background:#f6f8ff;box-shadow:inset 0 0 0 1.5px var(--pfb-blue)!important;color:var(--pfb-ink)!important}
.pfb.is-live .pfb-open{background:transparent;box-shadow:inset 0 0 0 1px #f0eee9!important;color:var(--pfb-60)!important;transition:background .3s .6s,box-shadow .3s .6s,color .3s .6s}
.pfb.is-live .pfb-open em{opacity:0;transform:scale(.6);transition:opacity .25s,transform .35s var(--pfb-e)}
.pfb.is-live .pfb-sso.is-go .pfb-open{background:#f6f8ff;box-shadow:inset 0 0 0 1.5px var(--pfb-blue)!important;color:var(--pfb-ink)!important}
.pfb.is-live .pfb-sso.is-go .pfb-open em{opacity:1;transform:none;transition-delay:1s}

@media (max-width:1100px){
  .pfb-key,.pfb-auto{grid-column:span 6}
  .pfb-mfa,.pfb-dev{grid-column:span 6}.pfb-step{grid-column:span 12}
  .pfb-step .pfb-vis{justify-content:flex-start}
  .pfb-sdk,.pfb-sso{grid-column:span 6}
  .pfb-apps ul{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .pfb{gap:10px;margin-top:36px}
  .pfb-c,.pfb-key,.pfb-auto{grid-column:1/-1;min-height:0;padding:22px 20px 0;border-radius:18px}
  .pfb-tx h3{font-size:18px;line-height:24px}.pfb-tx p{font-size:14.5px;line-height:22px}
  .pfb-vis{margin-top:22px}
  .pfb-kp{padding:14px 14px 4px}
  .pfb-kr div{font-size:12.5px;gap:10px}
  .pfb-kh span{display:none}
  .pfb-sdk .pfb-vis{padding-bottom:22px}
  .pfb-term{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){ .pfb *{transition:none!important;animation:none!important} }