/* Shared product and brandbook header. */
.site-header{color:var(--swap-ink);font-family:var(--font-sans)}
.site-header button{border-radius:var(--radius);background:transparent;border-color:var(--swap-border)}
.site-header{height:80px;max-width:none;width:100%;margin:0;padding:0 32px;gap:28px;border:0;border-bottom:1px solid var(--swap-border);background:transparent}.header-actions{display:flex;gap:16px;align-items:center}.site-header .connect{background:var(--cta-fill);border-color:transparent;color:#101216;font-weight:var(--weight-semibold);min-width:112px}
@media(max-width:1050px){.site-header{gap:16px;padding:0 24px}.header-actions{gap:10px}.site-header .connect{min-width:96px}}
@media(max-width:850px){.site-header{height:auto;min-height:78px;flex-wrap:wrap;padding:16px 24px;gap:14px}.header-actions{margin-left:auto}}
@media(max-width:560px){.site-header{padding:12px 16px}.header-actions{gap:8px}.site-header .connect{min-width:86px;padding:8px 10px}}
.site-header{border-left:0;border-right:0}
@media(max-width:1050px){.header-actions{gap:8px}.header-actions button{font-size:var(--text-small);padding:8px}}
@media(max-width:850px){}
@media(max-width:600px){.site-header{gap:10px}.header-actions{gap:6px}.header-actions button{font-size:var(--text-small)}}
#wallet-dialog :where(button){border-radius:var(--radius);border-color:var(--swap-border);background:transparent;color:inherit}#wallet-dialog h2{font-size:var(--text-title)}#wallet-dialog{font-family:var(--font-sans)}
/* Midnight wallet selection, shared by all product pages. */
#wallet-dialog{width:420px;max-width:calc(100vw - 32px);padding:28px;background:var(--swap-panel);color:var(--swap-ink);border:1px solid var(--swap-border);border-radius:2px;box-shadow:var(--form-shadow)}
#wallet-dialog::backdrop{background:rgb(0 0 0 / .45);backdrop-filter:blur(4px)}
.wallet-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.wallet-heading h2{margin:0;font-size:var(--text-title)}.wallet-heading form{margin:0}#wallet-dialog .wallet-close{width:44px;height:44px;padding:0;font-size:var(--text-large);border:0}.wallet-heading form{flex-shrink:0}
.wallet-options{display:grid;gap:12px;margin-top:20px}.wallet-options button{display:flex;align-items:center;gap:16px;width:100%;min-height:72px;padding:16px;text-align:left;font-size:var(--text-body);color:inherit}.wallet-options button:hover,.wallet-options button[aria-pressed="true"]{background:var(--swap-field);border-color:var(--swap-gold)}.wallet-logo{display:block;width:32px;height:32px;background:currentColor;mask:url('../assets/icon-wallet-1am.svg') center/contain no-repeat}.wallet-selected{margin-left:auto;visibility:hidden}.wallet-options button[aria-pressed="true"] .wallet-selected{visibility:visible}#disconnect-wallet{width:100%;margin-top:20px;min-height:44px}

/* Preserve the full-width border while constraining the header contents. */
.site-header{padding-inline:max(var(--page-gutter),calc((100% - var(--content-max-width))/2))}

.site-header .theme-toggle{border-radius:50%}

/* Even link spacing and a close underline inside a 44px target. */
.site-header nav{display:flex;gap:var(--header-link-gap);align-items:center;flex-wrap:nowrap;flex:1;justify-content:center}
.site-header nav a{position:relative;display:flex;align-items:center;min-height:44px;padding:0;border:0;font-size:var(--text-small);line-height:1.4;white-space:nowrap}
.site-header nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:transparent}
.site-header nav a[aria-current="page"]{color:inherit;font-weight:var(--weight-semibold)}
.site-header nav a[aria-current="page"]::after{background:var(--accent)}
@media(max-width:850px){.site-header nav{order:3;flex-basis:100%;justify-content:flex-start;overflow-x:auto}}

/* Connected account is a portfolio link, with fixed mock metrics. */
.site-header [data-connect][hidden],.site-header .wallet-portfolio[hidden]{display:none}
.site-header .wallet-portfolio{display:flex;align-items:center;gap:8px;min-height:44px;color:var(--swap-ink);text-decoration:none;background:transparent;border:0;padding:0}
.wallet-portfolio .provider-mark{display:block;width:24px;height:24px;flex-shrink:0;object-fit:contain}
html[data-theme="dark"] .wallet-portfolio[data-provider="1am"] .provider-mark{filter:invert(1)}
.wallet-metrics{position:relative;display:block;width:100px;height:22px;font-size:var(--text-small);line-height:22px;font-variant-numeric:tabular-nums;white-space:nowrap}
.wallet-metrics>span{position:absolute;inset:0;animation:wallet-nlv-cycle 8s infinite}
.wallet-metrics .wallet-performance{animation-name:wallet-performance-cycle}
.wallet-performance[data-performance="positive"]{color:#157347}
.wallet-performance[data-performance="negative"]{color:#bd303b}
.wallet-performance[data-performance="zero"]{color:var(--swap-muted)}
html[data-theme="dark"] .wallet-performance[data-performance="positive"]{color:#69d99a}
html[data-theme="dark"] .wallet-performance[data-performance="negative"]{color:#ff858e}
.wallet-portfolio:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
@keyframes wallet-nlv-cycle{0%,45%,100%{opacity:1;transform:translateY(0)}48%,95%{opacity:0;transform:translateY(-4px)}}
@keyframes wallet-performance-cycle{0%,45%,100%{opacity:0;transform:translateY(4px)}48%,95%{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.wallet-metrics{height:40px;line-height:20px}.wallet-metrics>span{position:static;display:block;animation:none;opacity:1;transform:none}}

/* Neutral connected-wallet pill: wallet · provider · rotating metrics. */
.site-header .wallet-portfolio{gap:8px;padding:6px 12px;border:1px solid var(--swap-border);border-radius:999px;background:var(--swap-panel);min-height:44px;flex-shrink:0}
.wallet-portfolio .portfolio-wallet-icon{width:24px;height:24px;mask-image:url('../assets/icon-wallet.svg')}
.wallet-provider{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.wallet-portfolio .provider-mark{width:16px;height:16px}
.wallet-provider .provider-name{font-size:var(--text-meta);font-weight:var(--weight-regular);line-height:20px}
.wallet-dot{display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-body);line-height:20px;color:var(--swap-muted)}
.wallet-portfolio .wallet-metrics{width:80px}
@media(max-width:560px){.header-actions{max-width:100%;flex-wrap:wrap}.site-header .wallet-portfolio{gap:6px;padding-inline:10px}}
.site-header nav a{font-size:var(--text-body)}
.wallet-portfolio .portfolio-wallet-icon{flex-shrink:0}
.site-header .wallet-portfolio{min-width:0}
.wallet-summary{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-left:0}
.wallet-summary .wallet-metrics{text-align:right}
@media(max-width:560px){.wallet-summary{gap:6px}}
/* Reserve only the compact metric's width, keeping provider and value together. */
.wallet-summary .wallet-metrics{width:6ch}
.wallet-summary{gap:6px}
.site-header .theme-toggle{border:0}
.site-header .wallet-portfolio{background:transparent}
/* Use the shared yellow accent for the header lockup on dark surfaces. */
html[data-theme="dark"] .site-header .brand{position:relative}
html[data-theme="dark"] .site-header .brand-lockup{opacity:0}
html[data-theme="dark"] .site-header .brand::after{content:"";position:absolute;inset:0;background:var(--accent);mask:url('../assets/pulse-lockup.svg') center/contain no-repeat;pointer-events:none}
/* Portfolio uses the same 2px accent as active product underlines. */
.wallet-portfolio:not([aria-current="page"]) .portfolio-wallet-icon{mask-image:url('../assets/icon-wallet-thin.svg')}
.site-header .wallet-portfolio[aria-current="page"]{border:2px solid var(--accent);padding:5px 11px}
@media(max-width:560px){.site-header .wallet-portfolio[aria-current="page"]{padding-inline:9px}}
/* Active header text joins its yellow indicator; gold remains readable in light mode. */
.site-header nav a[aria-current="page"],.site-header .wallet-portfolio[aria-current="page"]{color:var(--gold)}
html[data-theme="light"] .site-header nav a[aria-current="page"],html[data-theme="light"] .site-header .wallet-portfolio[aria-current="page"]{color:var(--swap-ink);font-weight:var(--weight-bold)}
html[data-theme="light"] .site-header .wallet-portfolio{color:var(--swap-ink);font-weight:var(--weight-bold)}
html[data-theme="light"] .wallet-portfolio .wallet-nlv{color:var(--swap-ink);font-weight:var(--weight-bold)}
.wallet-portfolio .wallet-metrics,html[data-theme="light"] .wallet-portfolio .wallet-nlv{font-weight:var(--weight-regular)}