@font-face{font-family:Inter;src:url(/assets/inter.woff2) format('woff2');font-weight:100 900;font-display:swap}
:root{--blue:#0500FF;--blue-press:#0400D6;--bg:#0B0B0F;--surface:#111116;--surface-2:#17171E;
--border:#1F1F28;--text:#fff;--muted:#8A8A9A;--faint:#66667A;--danger:#FF4D4D;
--r-card:16px;--r-btn:14px;--r-in:10px;--ease-sheet:cubic-bezier(.32,.72,0,1);
--ease-out:cubic-bezier(.16,1,.3,1);--d-press:120ms}
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);overflow:hidden;
font:400 15px/1.45 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
#stack{position:fixed;inset:0;overflow:hidden}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;
padding:calc(env(safe-area-inset-top) + 8px) 20px calc(env(safe-area-inset-bottom) + 20px);
will-change:transform,opacity}
.screen[hidden]{display:none}
.screen.is-out{pointer-events:none}
.bar{display:flex;align-items:center;gap:10px;height:52px;flex:0 0 auto}
.bar .mark{width:22px;height:25px;flex:0 0 auto}
.bar .name{font-weight:600;font-size:16px;letter-spacing:-.3px}
.bar .back{width:36px;height:36px;margin-left:-8px;border:0;background:none;color:var(--text);
display:grid;place-items:center;border-radius:50%;cursor:pointer;transition:background var(--d-press) linear}
.bar .back:active{background:var(--surface-2)}
.h1{font-size:26px;line-height:1.18;font-weight:700;letter-spacing:-.8px;margin:0 0 10px}
.h2{font-size:21px;line-height:1.22;font-weight:700;letter-spacing:-.5px;margin:0 0 7px}
.sub{font-size:13.5px;line-height:1.52;color:var(--muted);margin:0 0 22px;max-width:36ch}
.body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.btn{width:100%;border:0;border-radius:var(--r-btn);padding:17px;color:#fff;background:var(--blue);
font:600 15.5px/1 Inter,-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:-.1px;cursor:pointer;transform:translateZ(0);
transition:transform var(--d-press) var(--ease-out),background var(--d-press) linear}
.btn:active{transform:scale(.97);background:var(--blue-press)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.quiet{background:none;color:var(--muted);font-weight:500}
.btn.quiet:active{color:var(--text)}
.dock{flex:0 0 auto;padding-top:14px;border-top:1px solid var(--border);margin-top:auto}
.opt{display:flex;align-items:center;gap:14px;width:100%;padding:15px 16px;margin-bottom:10px;text-align:left;
background:#111116;border:1px solid #1F1F28;border-radius:var(--r-card);color:var(--text);
cursor:pointer;transition:transform var(--d-press) var(--ease-out),border-color var(--d-press) linear}
.opt:active{transform:scale(.985);border-color:var(--blue)}
.opt .ico{width:38px;height:38px;border-radius:11px;background:var(--surface-2);display:grid;place-items:center;flex:0 0 auto}
.opt .txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.opt .t{display:block;font-weight:600;font-size:15px;letter-spacing:-.2px;line-height:1.25}
.opt .d{display:block;font-size:12.5px;color:var(--muted);line-height:1.3}
.opt .chev{color:var(--faint);flex:0 0 auto}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.cell{display:flex;flex-direction:column;justify-content:center;height:50px;padding:0 10px;
background:#16181D;border:1px solid #212429;border-radius:10px;will-change:transform,opacity;
transition:border-color 140ms linear,background 140ms linear}
.cell i{color:#5F6670;font:500 9.5px/1 Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-style:normal;
letter-spacing:.04em;pointer-events:none;margin-bottom:3px}
.cell input{width:100%;min-width:0;height:18px;padding:0;border:0;background:none;
color:#fff;font:500 14px/18px Inter,-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:-.1px;outline:none}
.cell input::placeholder{color:#5F6670}
.cell:focus-within{border-color:#0500FF;background:#20242A}
.cell:focus-within i{color:#8A93A0}
.cell.err{border-color:#FF4D4D}
.cell.err i{color:#FF4D4D}
.cell.picked{background:#262A31;border-color:#2E343C}
/* suggestion bar: one shared strip under the grid so boxes stay readable */
#sug{display:contents}
.sugbar{display:none;flex-direction:column;overflow:hidden;margin:-12px 0 16px;
background:#1A1D22;border:1px solid #2A3038;border-radius:11px}
.sugbar.on{display:flex;animation:sugIn 130ms var(--ease-out) both}
@keyframes sugIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.sugopt{width:100%;text-align:left;border:0;border-bottom:1px solid #242A31;
background:none;color:#fff;padding:12px 13px;
font:500 14px/1 Inter,-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:-.1px;
cursor:pointer;transition:background 100ms linear,color 100ms linear}
.sugopt:last-child{border-bottom:0}
.sugopt:hover,.sugopt.on{background:#0500FF;color:#fff;border-bottom-color:#0500FF}
.err{display:none;font-size:13px;line-height:1.45;color:var(--danger);margin:0 0 14px;will-change:transform}
.err.on{display:block}
#ov{position:fixed;inset:0;z-index:40;display:none;align-items:flex-end;
background:rgba(8,8,13,.94);backdrop-filter:blur(6px)}
#ov.on{display:flex}
.sheet{width:100%;background:var(--surface);border-radius:22px 22px 0 0;
padding:26px 20px calc(env(safe-area-inset-bottom) + 26px);will-change:transform}
.sheet .grab{width:36px;height:4px;border-radius:2px;background:var(--border);margin:0 auto 20px}
.sheet .row{display:flex;align-items:center;gap:14px}
.sheet .row>div:last-child{flex:1 1 auto;min-width:0}
.sheet .t{display:block;font-weight:600;font-size:15px;letter-spacing:-.2px;line-height:1.3}
.sheet .d{display:block;font-size:13px;color:var(--muted);margin-top:3px;line-height:1.4}
.sheet .mono{font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--faint);
margin-top:12px;word-break:break-all}
.spin{width:26px;height:26px;flex:0 0 auto;border-radius:50%;border:2.5px solid var(--border);
border-top-color:var(--blue);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tick{width:26px;height:26px;flex:0 0 auto;border-radius:50%;background:var(--blue);display:grid;place-items:center}
.qr{width:100%;max-width:200px;margin:0 auto 18px;display:block;border-radius:12px;background:#fff;padding:10px}
.foot{font-size:12px;color:var(--faint);text-align:center;line-height:1.5}
/* wide screens: keep a phone-width column instead of stretching cards */
@media (min-width:560px){
#stack{left:50%;right:auto;width:480px;margin-left:-240px}
.sheet{width:480px;margin:0 auto}}
/* narrow phones: 2 columns so 12 words stay readable */
@media (max-width:359px){
.screen{padding-left:14px;padding-right:14px}
.h1{font-size:22px}.h2{font-size:18px}
.grid{grid-template-columns:repeat(2,1fr);gap:6px}
.opt{padding:14px;gap:11px}
.opt .d{font-size:12px}}
.stepbar{display:flex;align-items:center;justify-content:space-between;margin:2px 0 12px;
font:600 10px/1 Inter,-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.055em;text-transform:uppercase;color:#5F6670}
.stepbar-b{color:var(--blue)}
/* --- Trust Card enrollment --- */
.art{position:relative;overflow:hidden;border-radius:18px;padding:18px 18px 15px;margin:4px 0 22px;
aspect-ratio:1.6;display:flex;flex-direction:column;justify-content:space-between;
background:linear-gradient(155deg,#2A38E8 0%,#1209C9 38%,#0500FF 62%,#080470 100%);
box-shadow:0 14px 34px -14px rgba(5,0,255,.8),inset 0 1px 0 rgba(255,255,255,.14);
will-change:transform}
.art::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
background:radial-gradient(120% 90% at 88% -10%,rgba(255,255,255,.3),transparent 58%),
radial-gradient(80% 70% at 6% 108%,rgba(255,255,255,.12),transparent 60%)}
.art::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.2;
background:repeating-linear-gradient(102deg,transparent 0 9px,rgba(255,255,255,.05) 9px 10px)}
.art-top{display:flex;align-items:flex-start;justify-content:space-between;position:relative}
.art-brand{font-weight:600;font-size:16px;letter-spacing:-.3px;color:#fff;opacity:.96}
.art-mid{position:relative;display:flex;flex-direction:column;gap:11px}
.art-num{font:600 16.5px/1 Inter,-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:2.2px;color:#fff;opacity:.94;
font-variant-numeric:tabular-nums}
.art-bot{position:relative;display:flex;justify-content:space-between;align-items:flex-end;
font:600 8px/1 Inter,-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.16em;color:#fff;opacity:.66}
.art-scheme{font:700 9px/1 Inter,-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.1em;opacity:.85}
.perks{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:10px}
.perks li{display:flex;align-items:center;gap:10px;font-size:13px;color:#B9BBC6}
.perks .dot{width:5px;height:5px;border-radius:50%;background:var(--blue);flex:0 0 auto}
.slider{position:relative;height:58px;border-radius:99px;overflow:hidden;
background:#16181D;border:1px solid #24272D;margin:0 0 12px;outline:none;
cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
transition:border-color 160ms linear}
.slider:focus-visible{border-color:var(--blue)}
.slider-fill{position:absolute;inset:0 auto 0 0;width:58px;border-radius:99px;
background:linear-gradient(90deg,#0500FF,#2A38E8);opacity:.92}
.slider-label{position:absolute;inset:0;display:grid;place-items:center;
font:600 14px/1 Inter,-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:-.2px;color:#B9BBC6;pointer-events:none;
transition:opacity 140ms linear}
.slider.drag .slider-label,.slider.done .slider-label{opacity:0}
.slider-thumb{position:absolute;top:5px;left:5px;width:46px;height:46px;border-radius:50%;
display:grid;place-items:center;background:#fff;color:#0500FF;
box-shadow:0 2px 8px rgba(0,0,0,.5);pointer-events:none}
.slider.done{cursor:default;border-color:var(--blue)}
.slider.done .slider-thumb{background:#0500FF;color:#fff}
.slider .shimmer{position:absolute;inset:0;border-radius:99px;pointer-events:none;
background:linear-gradient(100deg,transparent 20%,rgba(5,0,255,.28) 48%,transparent 74%);
background-size:220% 100%;animation:shim 2.1s linear infinite}
@keyframes shim{from{background-position:180% 0}to{background-position:-60% 0}}
.fine{font-size:11.5px;line-height:1.45;color:var(--faint);margin:0 0 16px}
.qr-wrap{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
/* post-sign busy work */
.prog{height:3px;background:#1A1D22;flex:0 0 auto;margin:2px -20px 0}
.prog span{display:block;height:100%;width:0;background:var(--blue);
transition:width 480ms var(--ease-out)}
.pill{margin-left:auto;font:600 10.5px/1 Inter,-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.04em;
color:var(--blue);background:rgba(5,0,255,.13);border:1px solid rgba(5,0,255,.3);
padding:5px 9px;border-radius:99px}
.tick.big{width:46px;height:46px;margin:0 auto 16px}
.tick.big svg{width:auto;height:17px}
#s-done .h2{font-size:24px;letter-spacing:-.6px;margin:0 0 9px}
#s-done .sub{font-size:13px;margin-bottom:0}
#s-done .foot{font-size:11.5px}
#s-done .body{padding-bottom:26px}
.tick.pop{animation:pop 380ms var(--ease-out) both}
@keyframes pop{0%{opacity:0;transform:scale(.6)}60%{transform:scale(1.08)}100%{opacity:1;transform:none}}
.req{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin:0 0 14px}
.req-dot{width:6px;height:6px;border-radius:50%;background:#F5A524;flex:0 0 auto}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.step{display:flex;align-items:center;gap:11px;padding:13px 14px;border-radius:12px;
background:#111116;border:1px solid #1F1F28;transition:border-color 200ms linear,background 200ms linear}
.step-t{flex:1 1 auto;min-width:0;font-size:13px;line-height:1.35;color:#B9BBC6;letter-spacing:-.1px}
.step-s{font-size:11.5px;color:var(--faint);display:block;margin-top:2px;line-height:1.35}
.step-ico{width:20px;height:20px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
background:#20242B;color:#5F6670}
.step-ico svg{width:10px;height:10px}
.step.on{border-color:rgba(5,0,255,.5);background:#171A26}
.step.on .step-ico{background:var(--blue);color:#fff}
.step.ok{border-color:#22322A;background:#141A16}
.step.ok .step-ico{background:#1E9E63;color:#fff}
.step.ok .step-t{color:#fff}
@keyframes fadeUp{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.step.in{animation:fadeUp 300ms var(--ease-out) both}
@media (prefers-reduced-motion: reduce){
.spin,.slider .shimmer,.tick.pop,.step.in{animation:none}
.btn,.opt,.bar .back,.cell input,.prog span{transition-duration:0s}}