/* The interactive wallet is a real, keyboard-accessible UI inside the device. */
.wallet-composition { max-width: 390px; justify-self: center; }
.visual-label { margin-bottom: 15px; }
.visual-foot { margin-top: 17px; font-size: 8px; }
#phone-demo { position: relative; width: min(100%, 354px); margin-inline: auto; padding: 4px; border: 3px solid transparent; border-radius: 47px; background: linear-gradient(#060907, #060907) padding-box, linear-gradient(125deg, #c9cac4 0%, #777c75 14%, #d3d4cc 32%, #8b9087 46%, #4c534a 65%, #bfc3b8 86%, #737a70 100%) border-box; box-shadow: 0 0 0 1px #434b42, 0 1px 0 2px #d7dace26, 0 28px 50px -25px #000c; }
#phone-demo::before, #phone-demo::after { content: ''; position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #555d52, #c2c6bc 50%, #727a6e); box-shadow: 0 0 0 1px #151c14; }
#phone-demo::before { height: 62px; top: 151px; left: -6px; box-shadow: 0 -76px 0 -0.5px #a6aea0, 0 0 0 1px #151c14; }
#phone-demo::after { height: 52px; top: 169px; right: -6px; }
.phone-shell { position: relative; height: 690px; display: flex; flex-direction: column; overflow: hidden; border-radius: 40px; background: var(--bg); box-shadow: 0 0 0 1px #010402; font: 12px/1.5 var(--sans); isolation: isolate; }
.phone-shell button, .phone-shell a { -webkit-tap-highlight-color: transparent; }
.phone-shell button { border: 0; }
.phone-shell :focus-visible { outline-offset: -2px; border-radius: 4px; }
.phone-shell svg { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.phone-island { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 94px; height: 25px; background: #020503; border: 1px solid #111b14; border-radius: 20px; z-index: 2; pointer-events: none; }
.phone-island::after { content: ''; position: absolute; right: 9px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: #0b1720; box-shadow: inset 0 0 0 2px #0b1114; }
.phone-statusbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 23px 10px; min-height: 50px; flex: none; font: 600 12px/1 var(--sans); }
.phone-status-icons { display: flex; align-items: center; gap: 5px; }
.phone-status-icons svg { width: 15px; height: 15px; }
.phone-status-icons svg:last-child { width: 21px; }
.phone-header { min-height: 51px; display: flex; align-items: center; gap: 10px; flex: none; padding: 2px 20px 12px; }
.phone-brand { display: block; height: 26px; width: auto; }
.phone-demo-badge { border: 1px solid var(--line); padding: 3px 5px; color: var(--dim); font: 7px/1 var(--mono); letter-spacing: 1px; }
.phone-profile { width: 29px; height: 29px; margin-left: auto; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: var(--bg); font-weight: 500; }
.phone-content { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-light) transparent; scroll-behavior: auto; }
.phone-view { padding: 6px 20px 18px; }
.phone-view:not([hidden]) { opacity: 1; }
@keyframes phone-screen-in { from { opacity: .35; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
.phone-label { color: var(--dim); font: 8px/1.5 var(--mono); letter-spacing: 1px; text-transform: uppercase; }
.phone-view-title { margin: 3px 0 18px; font: 500 9px/1.5 var(--mono); text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); }
.phone-balance { padding: 1px 0 14px; }
.phone-balance-value { display: flex; align-items: baseline; gap: 8px; margin: 9px 0 3px; font-size: 49px; letter-spacing: -2.8px; line-height: 1.1; }
.phone-balance-value > span { color: var(--dim); }
.phone-balance-value small { font: 9px/1 var(--mono); color: var(--lime); letter-spacing: 0; }
.phone-balance p { margin: 8px 0 0; color: var(--dim); font: 8px/1.5 var(--mono); }
.phone-spending { padding: 10px 12px; border: 1px solid var(--line); background: #0b1812; border-radius: 9px; }
.phone-spending > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 6px; font: 8px/1.5 var(--mono); color: var(--muted); }
.phone-spending strong { color: var(--ink); font-weight: 400; }
.phone-progress { height: 3px; background: var(--line); margin-top: 9px; border-radius: 3px; overflow: hidden; }
.phone-progress > span { display: block; height: 100%; background: var(--lime); }
.phone-shortcut { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 0; background: transparent; text-align: left; border-bottom: 1px solid var(--line) !important; }
.phone-shortcut > svg { width: 20px; height: 20px; color: var(--lime); }
.phone-shortcut > span { display: flex; flex-direction: column; gap: 3px; }
.phone-shortcut strong { font-size: 12px; font-weight: 400; }
.phone-shortcut small { color: var(--dim); font: 8px/1.5 var(--mono); }
.phone-shortcut > :last-child { margin-left: auto; color: var(--dim); }
.phone-shortcut:hover strong { color: var(--lime); }
.phone-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 14px 0 5px; }
.phone-section-heading h3 { margin: 0; color: var(--dim); font: 8px/1.5 var(--mono); letter-spacing: 1px; text-transform: uppercase; }
.phone-section-heading button { color: var(--lime); font: 8px/1.5 var(--mono); padding: 5px 0 5px 10px; background: none; }
.phone-agent-list { display: grid; gap: 0; }
.phone-agent-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line) !important; background: none; text-align: left; }
.phone-agent-row[aria-pressed=true] .phone-agent-copy strong { color: var(--lime); }
.phone-agent-row:hover .phone-agent-copy strong { color: var(--lime); }
.phone-agent-icon { width: 31px; height: 33px; display: grid; place-items: center; flex-shrink: 0; color: var(--ink); }
.phone-agent-icon img { display: block; width: 24px; height: 26px; object-fit: contain; filter: brightness(0) invert(1); }
.phone-agent-icon svg { width: 24px; height: 24px; fill: currentColor; }
.phone-agent-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.phone-agent-copy strong { font-size: 11px; font-weight: 500; }
.phone-agent-copy small, .phone-agent-copy > span { font: 8px/1.4 var(--mono); color: var(--dim); }
.phone-agent-status { display: flex; align-items: center; gap: 5px; margin-left: auto; color: var(--lime); font: 7px/1.4 var(--mono); }
.phone-agent-status::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.phone-agent-row[data-paused=true] .phone-agent-status { color: #e4bd75; }
.phone-agent-row[data-paused=true] .phone-agent-icon { opacity: .55; }
.phone-agent-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-block: 10px; }
.phone-agent-controls > p, .phone-agent-controls > span { max-width: 140px; margin: 0; font: 8px/1.6 var(--mono); color: var(--muted); }
.phone-button { min-height: 34px; display: inline-flex; justify-content: center; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--line-light) !important; background: var(--surface); color: var(--ink); font: 8px/1.4 var(--mono); border-radius: 6px; text-align: center; }
.phone-button:hover { border-color: var(--lime) !important; color: var(--lime); }
.phone-button[aria-pressed=true] { color: var(--lime); border-color: var(--lime) !important; }
.phone-button svg { width: 13px; height: 13px; }
.phone-recent { margin: 0; }
.phone-transaction { display: flex; align-items: center; gap: 9px; width: 100%; padding: 11px 0; border-bottom: 1px solid var(--line) !important; background: none; text-align: left; }
.phone-transaction:last-child { border-bottom: none !important; }
.phone-transaction > svg { width: 15px; height: 15px; color: var(--lime); }
.phone-transaction > div { display: flex; flex-direction: column; gap: 3px; }
.phone-transaction strong { font: 400 11px/1.4 var(--sans); }
.phone-transaction small { font: 7px/1.5 var(--mono); color: var(--dim); }
.phone-transaction > strong { margin-left: auto; font: 10px/1.5 var(--mono); white-space: nowrap; }
.phone-transaction:hover > div > strong { color: var(--lime); }
.phone-chips { display: flex; justify-content: center; align-items: center; gap: 8px; }
.phone-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--line-light); border-radius: 20px; font: 8px/1 var(--mono); color: var(--muted); }
.phone-chip svg { width: 17px; height: 17px; }
.phone-qr { padding: 20px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.phone-qr > img { display: block; width: 175px; max-width: 100%; height: auto; aspect-ratio: 1; border: 9px solid var(--paper); border-radius: 8px; margin: 0 auto 17px; background: var(--paper); }
.phone-reference { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.phone-reference > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.phone-reference code { color: var(--ink); font: 10px/1.7 var(--mono); overflow-wrap: anywhere; }
.phone-note { color: var(--dim); font-size: 11px; line-height: 1.75; margin: 15px 0 0; }
.phone-note strong { color: var(--muted); font-weight: 500; }
.phone-card { border: 1px solid var(--line); border-radius: 11px; padding: 14px; margin-top: 14px; background: #0b1812; }
.phone-card h3 { font-size: 12px; font-weight: 500; margin: 0 0 10px; }
.phone-card .phone-section-heading { margin-top: 0; }
.phone-key-values { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 10px; margin: 14px 0; }
.phone-key-values > div { min-width: 0; }
.phone-key-values dt { color: var(--dim); font: 7px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .4px; }
.phone-key-values dd { margin: 5px 0 0; font-size: 11px; overflow-wrap: anywhere; }
.phone-receipt { margin-top: 8px; }
.phone-receipt-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.phone-receipt-status { color: var(--lime); border: 1px solid #405b2f; background: #18251a; padding: 4px 6px; border-radius: 4px; font: 7px/1.5 var(--mono); }
.phone-receipt-amount { font-size: 42px; line-height: 1.2; letter-spacing: -2px; margin: 22px 0 8px; }
.phone-receipt-amount small { font: 9px/1 var(--mono); color: var(--lime); letter-spacing: 0; }
.phone-receipt-merchant { margin: 0; font-size: 13px; }
.phone-receipt-subtitle { margin: 5px 0 14px; color: var(--dim); font: 8px/1.6 var(--mono); }
.phone-explorer { display: inline-flex; align-items: center; gap: 6px; color: var(--lime); font: 9px/1.5 var(--mono); text-decoration: underline; text-underline-offset: 4px; }
.phone-explorer svg { width: 15px; height: 15px; }
.phone-policy-checks { list-style: none; padding: 13px 0 0; margin: 13px 0 0; border-top: 1px solid var(--line); }
.phone-policy-checks li { display: flex; align-items: start; gap: 9px; margin: 9px 0; color: var(--muted); font: 8px/1.6 var(--mono); }
.phone-policy-checks svg { width: 12px; height: 12px; color: var(--lime); }
.phone-ledger-entry { padding: 15px 0; border-bottom: 1px solid var(--line); }
.phone-ledger-entry:first-of-type { padding-top: 4px; }
.phone-ledger-entry > header, .phone-ledger-entry > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.phone-ledger-entry h3 { font-size: 12px; margin: 0; font-weight: 500; }
.phone-ledger-entry > header > strong { font: 10px/1.5 var(--mono); color: var(--lime); }
.phone-ledger-entry[data-kind=debit] > header > strong { color: #e4bd75; }
.phone-ledger-entry .phone-key-values { margin-bottom: 0; }
.phone-ledger-entry code { font: 8px/1.5 var(--mono); color: var(--dim); }
.phone-audit-list { padding: 0; margin: 0; list-style: none; }
.phone-audit-event { position: relative; display: flex; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.phone-audit-event > svg { width: 16px; height: 16px; color: var(--lime); margin-top: 3px; }
.phone-audit-event > div { min-width: 0; }
.phone-audit-event strong { display: block; font-size: 11px; font-weight: 500; }
.phone-audit-event p, .phone-audit-event small { display: block; margin: 5px 0 0; font: 8px/1.7 var(--mono); color: var(--dim); overflow-wrap: anywhere; }
.phone-audit-actor { display: inline-block; font: 7px/1.4 var(--mono); text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 2px 4px; margin-top: 5px; }
.phone-feedback { font: 8px/1.6 var(--mono); color: var(--lime); }
.phone-tabs { flex: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; min-height: 57px; padding: 3px 8px 0; border-top: 1px solid var(--line); background: #0e1b14; }
.phone-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 7px 0 4px; min-width: 0; color: var(--dim); background: transparent; font: 7px/1.3 var(--mono); }
.phone-tab svg { width: 17px; height: 17px; }
.phone-tab[aria-selected=true] { color: var(--lime); }
.phone-tab[aria-selected=true]::before { content: ''; position: absolute; top: -4px; height: 2px; width: 16px; background: var(--lime); border-radius: 2px; }
.phone-tab:hover { color: var(--ink); }
.phone-home-indicator { flex: none; height: 18px; position: relative; background: #0e1b14; }
.phone-home-indicator::after { content: ''; position: absolute; top: 7px; width: 96px; height: 3px; left: calc(50% - 48px); background: #b1b8ae; border-radius: 3px; }
@media (max-width: 950px) and (min-width: 701px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(290px, .9fr); gap: 24px; }
  .phone-view { padding-inline: 15px; }
  .phone-header { padding-inline: 15px; }
  .visual-foot { gap: 7px; font-size: 7px; }
}
@media (max-width: 700px) {
  .wallet-composition { max-width: 374px; }
  .phone-shell { height: 690px; }
}
@media (max-width: 360px) {
  #phone-demo { padding: 4px; border-radius: 42px; }
  .phone-shell { border-radius: 35px; height: 670px; }
  .phone-view { padding-inline: 13px; }
  .phone-header { padding-inline: 13px; }
  .phone-statusbar { padding-inline: 18px; }
  .phone-island { width: 82px; }
  .phone-balance-value { font-size: 45px; }
  .phone-tab { font-size: 6px; }
  .phone-tabs { padding-inline: 5px; }
  .visual-foot { font-size: 7px; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) { .phone-view:not([hidden]) { animation: none; } }
/* Screen-specific details share the page's quiet typography and hairlines. */
.phone-view-heading { margin: 2px 0 18px; }
.phone-view-heading .phone-view-title { margin-bottom: 7px; }
.phone-view-heading > p { margin: 0; font-size: 11px; line-height: 1.6; color: var(--dim); }
.phone-personal { display: flex; align-items: center; gap: 7px; color: var(--lime); margin: 0 0 14px; letter-spacing: .8px; }
.phone-personal i { width: 4px; height: 4px; border-radius: 50%; background: var(--lime); }
.phone-balance-value strong { font-weight: 400; }
.phone-balance-network { color: var(--dim); font: 8px/1.5 var(--mono); }
.phone-progress > i { display: block; height: 100%; background: var(--lime); }
.phone-transaction-arrow { color: var(--lime); font-size: 17px; }
.phone-transaction-copy { display: flex; flex-direction: column; gap: 3px; }
.phone-transaction-copy > span { color: var(--dim); font: 7px/1.5 var(--mono); }
.phone-transaction-amount { display: flex; flex-direction: column; align-items: end; margin-left: auto; font: 10px/1.4 var(--mono); }
.phone-transaction-amount small { font-size: 6px; }
.phone-deposit-title { margin: 0; font-size: 23px; line-height: 1.2; letter-spacing: -.9px; font-weight: 400; max-width: 210px; }
.phone-deposit-title + .phone-note { margin-top: 8px; }
.phone-qr { margin: 17px 0 12px; }
.phone-qr figcaption { text-align: center; color: var(--dim); font: 7px/1.5 var(--mono); }
.phone-reference input { display: block; background: transparent; color: var(--ink); border: 0; width: 100%; padding: 8px 0 12px; font: 11px/1.5 var(--mono); }
.phone-copy-status { color: var(--lime); font: 8px/1.6 var(--mono); margin: 8px 0 0; }
.phone-copy-status:empty { display: none; }
.phone-card-heading { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.phone-pill { font: 7px/1.5 var(--mono); color: var(--lime); border: 1px solid #3b5031; padding: 3px 5px; border-radius: 4px; }
.phone-request-amount { font-size: 36px; line-height: 1.15; letter-spacing: -1.6px; margin: 18px 0 7px; }
.phone-request-amount small { font: 8px/1 var(--mono); letter-spacing: 0; color: var(--dim); }
.phone-request-card h4, .phone-receipt > h4 { margin: 0; font-size: 12px; font-weight: 500; }
.phone-request-card .phone-note { margin: 4px 0 13px; font: 8px/1.5 var(--mono); }
.phone-request-card .phone-button { width: 100%; justify-content: space-between; }
.phone-back { display: inline-flex; align-items: center; gap: 7px; padding: 7px 0; margin: -4px 0 10px; font: 8px/1.5 var(--mono); background: none; color: var(--lime); }
.phone-checks { list-style: none; border-top: 1px solid var(--line); padding: 8px 0 0; margin: 7px 0 0; }
.phone-checks li { display: flex; align-items: center; gap: 7px; color: var(--muted); font: 8px/1.7 var(--mono); padding: 5px 0; }
.phone-checks li > span { color: var(--lime); }
.phone-checks strong { margin-left: auto; font-weight: 400; color: var(--ink); }
.phone-receipt > .phone-note { font: 8px/1.7 var(--mono); margin: 12px 0; }
.phone-explorer { padding: 7px 0; }
.phone-agent-details .phone-section-heading h4 { font-size: 13px; font-weight: 500; margin: 0; }
.phone-agent-details > h4 { margin: 17px 0 0; font-weight: 400; }
.phone-agent-details > .phone-note { margin-top: 7px; }
.phone-agent-details .phone-agent-controls { border-top: 1px solid var(--line); padding-bottom: 0; }
.phone-agent-details[data-paused=true] .phone-pill { color: #e4bd75; border-color: #725e37; }
.phone-ledger-summary { border-block: 1px solid var(--line); padding: 14px 0; display: flex; flex-direction: column; gap: 6px; }
.phone-ledger-summary > span { color: var(--dim); font: 8px/1.5 var(--mono); }
.phone-ledger-summary strong { font-size: 28px; font-weight: 400; letter-spacing: -1px; }
.phone-ledger-summary small { font: 8px/1.5 var(--mono); color: var(--lime); letter-spacing: 0; }
.phone-ledger-entry:first-of-type { padding-top: 15px; }
.phone-ledger-entry h4 { margin: 0; font-size: 11px; font-weight: 400; }
.phone-ledger-entry > div:first-child > strong { font: 10px/1.5 var(--mono); color: var(--lime); }
.phone-ledger-entry[data-kind=debit] > div:first-child > strong { color: var(--ink); }
.phone-ledger-entry > p { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 8px/1.5 var(--mono); color: var(--dim); margin: 7px 0; }
.phone-ledger-balance { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 8px/1.6 var(--mono); color: var(--dim); margin: 10px 0 3px; }
.phone-ledger-balance b { font-weight: 400; color: var(--muted); }
.phone-inline-button { padding: 6px 0; font: 8px/1.5 var(--mono); color: var(--lime); background: none; }
.phone-audit-heading { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.phone-audit-heading > span { font: 7px/1.4 var(--mono); text-transform: uppercase; color: var(--dim); border: 1px solid var(--line); padding: 2px 4px; border-radius: 3px; }
.phone-audit-event > div { flex: 1; }
.phone-audit-mark { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 6px; font: 10px/1 var(--mono); color: var(--lime); }
.phone-audit-event[data-kind=accessPaused] .phone-audit-mark { color: #e4bd75; }
@media (max-width: 360px) { .phone-pill { font-size: 6px; } .phone-card { padding: 11px; } }

/* Keep the overview readable in one screen, with larger detail views scrollable. */
[data-view="overview"] { padding-bottom: 13px; }
[data-view="overview"] .phone-personal { margin-bottom: 8px; }
[data-view="overview"] .phone-balance { padding-bottom: 10px; }
[data-view="overview"] .phone-balance > .phone-label, .phone-balance-network { display: block; }
[data-view="overview"] .phone-balance-value { margin-top: 5px; font-size: 46px; }
[data-view="overview"] .phone-section-heading { margin-top: 7px; margin-bottom: 1px; }
[data-view="overview"] .phone-agent-row { min-height: 44px; padding-block: 5px; }
[data-view="overview"] .phone-agent-controls { padding-block: 5px; }
[data-view="overview"] .phone-transaction { min-height: 40px; padding-block: 5px; }
/* Keyboard order enters the selected panel from the tab list. */
.phone-statusbar { order: 0; }
.phone-header { order: 1; }
.phone-content { order: 2; }
.phone-tabs { order: 3; }
.phone-home-indicator { order: 4; }
.phone-qr { padding-block: 16px; }
.phone-qr > img { width: 165px; }