/* 对齐 storeSafe / twoStepVerification：24px 分区标题、18px 功能标题、16px 辅助说明。
   沿用核心功能页 1280px 布局及 37px / 34px / 57px 分区间距，样式仅作用于当前页面。 */
.passkey-html { font-size: calc(100vw / 19.2) !important; }
.passkey-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.passkey-page { display: flex; width: 1280px; margin: 0 auto; color: #333333; line-height: 1; }
.passkey-sidebar { flex: 0 0 288px; min-width: 0; }
.passkey-sidebar > div { width: 100% !important; height: 100%; }
.passkey-content { flex: 0 0 992px; width: 992px; min-width: 0; padding: 0 0 144px; font-size: 18px; }
.passkey-content *, .passkey-lightbox * { box-sizing: border-box; }
.passkey-content h1, .passkey-content h2, .passkey-content h3, .passkey-content p,
.passkey-content ul, .passkey-content figure { margin: 0; padding: 0; }
.passkey-content img { display: block; max-width: 100%; height: auto; }
.passkey-content button, .passkey-lightbox button { font: inherit; }
.passkey-content button { cursor: zoom-in; }
.passkey-content svg, .passkey-lightbox svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.passkey-content a { color: #0088fa; text-decoration: none; }
.passkey-content a:hover { text-decoration: underline; }
.passkey-content button:focus-visible, .passkey-content a:focus-visible,
.passkey-lightbox button:focus-visible { outline: 3px solid #66afff; outline-offset: 4px; }

.passkey-hero { display: grid; grid-template-columns: 440px 1fr; align-items: center; gap: 16px; height: 280px; padding: 0 44px; margin-bottom: 37px; background: url('/static_browser/home/image/storeSafe/banner_1.png') no-repeat; background-size: contain; }
.passkey-hero-pair { position: relative; width: 440px; height: 260px; isolation: isolate; }
.passkey-hero-pair-shot { position: absolute; display: block; padding: 0; border: 0; background: #fff; line-height: 0; overflow: hidden; border-radius: 6px; box-shadow: 0 7px 20px #23496e14; }
.passkey-hero-pair-shot img { width: 100%; }
.passkey-hero-pair-back { width: 205px; left: 42px; top: 37px; z-index: 1; }
.passkey-hero-pair-front { width: 191px; left: 168px; top: 109px; z-index: 2; }
.passkey-hero-copy { align-self: start; margin-top: 82px; }
.passkey-hero h1 { margin-bottom: 18px; font-size: 24px; font-weight: 600; line-height: 24px; color: #333333; }
.passkey-hero ul { display: grid; gap: 12px; list-style: none; font-size: 16px; line-height: 19px; }
.passkey-hero li { display: flex; align-items: flex-start; gap: 6px; }
.passkey-hero .passkey-hero-check { flex: 0 0 14px; width: 14px; height: 14px; margin-top: 2px; }

.passkey-before-editorial { margin-bottom: 57px; }
.passkey-before-editorial > h2, .passkey-after-editorial > h2 { position: relative; isolation: isolate; margin-bottom: 34px; font-size: 24px; font-weight: 600; line-height: 24px; color: #333333; }
.passkey-before-editorial > h2::after, .passkey-after-editorial > h2::after { position: absolute; left: 0; bottom: 0; z-index: -1; width: 72px; height: 8px; background: #dce7f6; content: ''; }
.passkey-before-shots, .passkey-after-simple-shots { display: grid; grid-template-columns: 370px 64px 370px; justify-content: center; align-items: start; gap: 12px; margin-bottom: 32px; }
.passkey-before-shots > figure:first-child { grid-column: 1; }
.passkey-before-shots > figure:nth-child(2) { grid-column: 3; }
.passkey-before-shots figure, .passkey-after-simple-shots figure { width: 370px; min-width: 0; }
.passkey-shot { display: block; position: relative; width: 100%; padding: 0; line-height: 0; background: #fff; border: 1px solid #edeef2; border-radius: 4px; overflow: hidden; box-shadow: 0 0 10px rgba(220, 231, 246, .45); }
.passkey-shot img { width: 100%; height: auto; object-fit: contain; }
.passkey-preview-window-bar { display: flex; align-items: center; gap: 7px; width: 100%; height: 32px; padding: 0 11px; background: #f5f7fc; border-bottom: 1px solid #e0e7f0; }
.passkey-preview-window-bar i { display: block; flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; background: #ff6059; }
.passkey-preview-window-bar i:nth-child(2) { background: #ffbd2e; }
.passkey-preview-window-bar i:nth-child(3) { background: #28c840; }
.passkey-content .passkey-pain-inline { display: grid; grid-template-columns: 370px 370px; column-gap: 88px; row-gap: 32px; width: 828px; margin: 0 auto; list-style: none; }
.passkey-pain-inline li { display: flex; align-items: center; gap: 14px; font-size: 18px; font-weight: 400; line-height: 21px; }
.passkey-pain-inline li > svg { flex: 0 0 18px; width: 18px; height: 18px; color: #0088fa; }

.passkey-after-simple { margin-bottom: 64px; }
.passkey-after-simple-shots { align-items: stretch; margin-bottom: 32px; }
.passkey-after-simple-shots figcaption { display: flex; align-items: center; justify-content: center; min-height: 21px; margin: 0 0 14px; font-size: 18px; font-weight: 400; line-height: 21px; text-align: center; color: #333333; }
.passkey-after-simple-shots img { aspect-ratio: auto; }
.passkey-after-flow-arrow { display: flex; align-items: center; justify-content: center; padding-top: 35px; color: #0088fa; }
.passkey-after-flow-arrow svg { width: 46px; height: 32px; stroke-width: 2.6; }
.passkey-after-benefit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.passkey-after-benefit-card { min-height: 116px; padding: 24px; background: #fff; border-radius: 4px; box-shadow: 0 0 10px rgba(220, 231, 246, .45); }
.passkey-benefit-card-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.passkey-benefit-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 18px; width: 18px; height: 18px; }
.passkey-benefit-icon svg { width: 18px; height: 18px; stroke: none; flex-shrink: 0; }
.passkey-after-benefit-card h3 { font-size: 18px; line-height: 21px; font-weight: 400; color: #333333; }
.passkey-after-benefit-card p { font-size: 16px; line-height: 19px; font-weight: 400; color: #858586; overflow-wrap: anywhere; }
.passkey-portal { color: #333333; }
.passkey-portal h2 { margin-bottom: 14px; font-size: 22px; font-weight: 500; line-height: 26px; }
.passkey-portal a { display: inline-flex; align-items: center; gap: 10px; margin-right: 32px; font-size: 18px; font-weight: 400; line-height: 21px; }
.passkey-portal a img { width: 16px; height: 16px; }

.passkey-preview-open { overflow: hidden; }
.passkey-lightbox { position: fixed; inset: 0; width: max-content; max-width: calc(100vw - 48px); max-height: calc(100vh - 48px); margin: auto; padding: 0; border: 0; border-radius: 12px; background: #fff; color: #263345; box-shadow: 0 20px 80px #0004; }
.passkey-lightbox::backdrop { background: rgba(16, 30, 50, .7); }
.passkey-modal-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px 16px; font-size: 16px; line-height: 1.5; border-bottom: 1px solid #e1eaf5; }
.passkey-modal-close { display: flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; border: 0; border-radius: 6px; background: #edf4fc; color: #263345; cursor: pointer; }
.passkey-modal-close:hover { background: #dcecff; }
.passkey-modal-body { padding: 16px; }
.passkey-modal-body img { display: block; width: auto; height: auto; max-width: min(1100px, calc(100vw - 80px)); max-height: calc(100vh - 142px); margin: 0 auto; object-fit: contain; }