/* Token page: original static dioramas, readable type and quiet surfaces.
   Container breakpoints follow available content width, including docked chat. */
#ha-token-page { max-width:1380px; margin-inline:auto; color:var(--txt); --token-muted:#aab7be; }
#ha-token-page svg { width:18px; height:18px; flex-shrink:0; }
#ha-token-page .ha-btn { min-height:46px; font-size:12px; }
#ha-token-page .ha-link { display:inline-flex; align-items:center; gap:9px; min-height:44px; color:var(--gold); font-size:13px; }
#ha-token-page .ha-link:hover { color:var(--txt); }
.token-eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 20px; color:var(--gold); font:600 13px/1.5 var(--font); }
.token-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); align-items:center; gap:28px; padding:20px 8px 40px; margin-bottom:24px; }
.token-hero-copy { position:relative; z-index:1; padding:24px 0; }
#ha-tok-title { margin:0; font:700 clamp(34px,3.65cqi,52px)/1.2 var(--display); letter-spacing:-.025em; }
#ha-tok-title .ha-tok-sym, .token-lime { color:var(--green); }
.token-hero-intro { font-size:16px; font-weight:600; margin:26px 0 12px; line-height:1.6; }
.token-hero-lede { max-width:48ch; margin:0 0 26px; color:var(--token-muted); font-size:14px; line-height:1.8; text-wrap:pretty; }
.token-hero-ctas, .token-actions { display:flex; flex-wrap:wrap; gap:12px; }
.token-hero-ctas .ha-btn { padding:13px 20px; gap:10px; }
.token-hero-freedom { display:flex; align-items:center; gap:8px; margin:22px 0 0; font-size:12px; line-height:1.7; color:var(--token-muted); }
#ha-token-page .token-hero-freedom svg { width:16px; height:16px; color:var(--gold); }
.token-hero-art { position:relative; display:grid; place-items:center; aspect-ratio:1.12; margin:0; }
.token-hero-model { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:block; width:115%; max-width:none; height:auto; pointer-events:none; }
.token-overview { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start; }
.token-flow { min-width:0; border-radius:16px; background:#0e1419; overflow:hidden; }
.token-section-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:28px 28px 0; }
.token-section-heading h2, .token-vault-heading h2, .token-faq h2 { margin:0; font:700 clamp(22px,2.1cqi,28px)/1.35 var(--display); text-wrap:balance; }
.token-fee-seal { display:flex; flex-shrink:0; align-items:center; gap:12px; }
.token-fee-seal > b { font:700 32px/1 var(--num); color:var(--gold); }
.token-fee-seal > b span { font-size:20px; }
.token-fee-seal > span { font-size:12px; line-height:1.6; color:var(--token-muted); }
.token-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; list-style:none; margin:0; padding:20px 28px 28px; }
.token-step { min-width:0; }
.token-step-art { position:relative; aspect-ratio:1.08; }
.token-step-art img { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:121%; max-width:none; height:auto; }
.token-step-copy { position:relative; padding-top:12px; }
.token-step-copy h3 { margin:0 0 10px; font:700 16px/1.5 var(--font); }
.token-step-copy p { margin:0; font-size:13px; line-height:1.8; color:var(--token-muted); }
.token-step-copy em { color:#d0de95; font-style:normal; }
.token-route-section { margin:0 28px; padding:24px; border-radius:12px; background:#080e13; }
.token-route-diagram { display:grid; grid-template-columns:minmax(0,1fr) 185px; gap:24px; align-items:center; }
.token-sources { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; list-style:none; padding:0; margin:0; }
.token-sources > li { display:flex; flex-direction:column; gap:8px; }
.token-source-currency { display:inline-flex; align-items:center; gap:7px; }
.token-source-currency img { width:25px; height:25px; }
.token-source-currency b { font:600 13px var(--num); }
.token-sources small { color:var(--token-muted); font-size:12px; line-height:1.6; }
.token-destination { display:flex; align-items:center; gap:10px; }
.token-destination > img { width:30px; height:30px; }
.token-destination h3 { margin:0 0 6px; color:#d6e2a2; font:600 14px/1.5 var(--font); }
.token-destination p { margin:0; color:var(--token-muted); font-size:12px; line-height:1.6; }
.token-reserves { display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px; margin-top:24px; }
.token-reserves > span { margin-right:auto; font-size:12px; color:var(--token-muted); }
.token-reserves p { display:flex; align-items:center; gap:7px; margin:0; font:500 12px var(--num); color:var(--token-muted); }
.token-reserves img { width:18px; height:18px; }
.token-reserves b { color:var(--txt); }
.token-route-note { margin:16px 0 0; color:var(--token-muted); font-size:12px; line-height:1.8; }
.token-flow-foot { display:flex; justify-content:flex-end; padding:12px 28px 18px; }
.token-wallet { position:relative; min-width:0; padding:28px; border-radius:16px; background:#141c22; }
.token-wallet-title { display:flex; align-items:center; justify-content:space-between; gap:10px; }
#token-rewards-title { margin:0; font:700 23px/1.4 var(--display); scroll-margin-top:110px; }
.token-wallet-title > span { display:flex; align-items:center; gap:6px; font:600 12px var(--num); }
.token-wallet-title img { width:18px; height:18px; }
.token-wallet-art { display:block; width:174px; height:148px; object-fit:cover; margin:8px auto; }
#ha-claims-slot { text-align:center; }
.token-claim-label { margin:0 0 12px; font-size:13px; color:var(--token-muted); }
.token-claim-amount { display:flex; justify-content:center; align-items:baseline; flex-wrap:wrap; gap:9px; font:700 36px/1.25 var(--num); color:var(--green); overflow-wrap:anywhere; }
.token-claim-amount small { font-size:14px; }
.token-claim-note { margin:16px 0 20px; font-size:13px; line-height:1.8; color:var(--token-muted,var(--txt-dim)); }
#ha-claims-slot .ha-btn { width:100%; }
#hood-you { margin:24px 0 0; }
.token-position { display:grid; gap:16px; margin:0; padding:20px 0 0; border-top:1px solid #ffffff0d; }
.token-position > div { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px 14px; }
.token-position dt { font-size:12px; color:var(--token-muted); }
.token-position dd { margin:0 0 0 auto; text-align:right; overflow-wrap:anywhere; font:600 13px/1.6 var(--num); }
.token-position small { font-size:12px; color:var(--token-muted); }
.token-wallet-foot { display:flex; align-items:center; gap:10px; margin:22px 0 0; color:var(--token-muted); font-size:12px; line-height:1.7; }
#ha-token-page .token-wallet-foot svg { width:16px; height:16px; color:#b2bc91; }
.token-vault-section { margin-top:56px; padding:0; }
.token-vault-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; margin-bottom:24px; }
.token-totals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:0; }
.token-totals > div { min-width:0; padding:24px; background:#0e1419; border-radius:12px; }
.token-totals dt { margin-bottom:18px; font-size:14px; line-height:1.6; color:var(--token-muted); }
.token-totals dd { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0; font:700 26px/1.5 var(--num); color:var(--gold); overflow-wrap:anywhere; }
.token-totals dd img { flex-shrink:0; }
.token-totals dd > .ha-tok-sym { font-size:14px; }
.token-totals dd + dd { margin-top:12px; font:400 12px/1.8 var(--font); color:var(--token-muted); }
.token-faq { display:grid; grid-template-columns:1fr 2fr; gap:48px; padding:56px 0 40px; }
.token-faq details + details { border-top:1px solid #ffffff0d; }
.token-faq summary { position:relative; list-style:none; padding:18px 32px 18px 0; cursor:pointer; font-size:14px; font-weight:600; line-height:1.7; }
.token-faq summary::-webkit-details-marker { display:none; }
.token-faq summary::after { content:'+'; position:absolute; right:2px; top:18px; color:var(--gold); font:700 18px var(--num); }
.token-faq details[open] summary::after { content:'−'; }
.token-faq details > p { margin:0; padding:0 32px 22px 0; color:var(--token-muted); font-size:14px; line-height:1.85; }
.token-faq summary:hover { color:var(--gold); }
.token-faq summary:focus-visible, #token-rewards-title:focus-visible { outline:2px solid var(--gold); outline-offset:4px; border-radius:3px; }
.token-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; padding:16px 0; color:var(--token-muted); font:500 12px/1.8 var(--font); }
@container tok (max-width:1120px) {
 .token-hero { gap:18px; padding-inline:0; }
 #ha-tok-title { font-size:38px; }
 .token-overview { grid-template-columns:1fr; }
 .token-wallet { grid-row:1; display:grid; grid-template-columns:1fr 1fr; column-gap:36px; }
 .token-wallet-title { grid-column:1; }
 .token-wallet-art { display:none; }
 #ha-claims-slot { grid-column:2; grid-row:1 / 4; align-self:center; padding-left:24px; }
 #hood-you { margin-top:20px; }
 .token-position { border:0; padding:0; }
 .token-wallet-foot { grid-column:1; }
 .token-step-art { aspect-ratio:1.3; }
 .token-route-diagram { grid-template-columns:minmax(0,1fr) 220px; }
}
@container tok (max-width:740px) {
 .token-hero { grid-template-columns:1fr; gap:0; padding:8px 0 24px; margin-bottom:12px; }
 .token-hero-copy { padding:12px 4px 0; }
 #ha-tok-title { font-size:clamp(32px,6.7cqi,44px); }
 .token-hero-lede { max-width:52ch; }
 .token-hero-art { aspect-ratio:1.5; width:100%; max-width:550px; justify-self:center; margin-top:12px; }
 .token-hero-model { width:100%; }
 .token-section-heading { padding:24px 22px 0; }
 .token-steps { gap:20px; padding-inline:22px; }
 .token-step-copy h3 { font-size:15px; }
 .token-route-section { margin-inline:22px; padding:20px; }
 .token-route-diagram { grid-template-columns:1fr; gap:24px; }
 .token-destination { padding-top:4px; }
 .token-reserves > span { flex-basis:100%; }
 .token-totals { gap:12px; }
 .token-totals > div { padding:20px; }
 .token-totals dd { font-size:22px; }
 .token-faq { grid-template-columns:1fr; gap:12px; }
}
@container tok (max-width:580px) {
 .token-eyebrow { font-size:13px; margin-bottom:16px; }
 .token-hero-intro { font-size:15px; margin-top:22px; }
 .token-hero-freedom { align-items:flex-start; }
 #ha-token-page .token-hero-freedom svg { margin-top:2px; }
 .token-hero-ctas { gap:10px; }
 .token-hero-ctas .ha-btn { padding-inline:16px; }
 .token-wallet { display:flex; flex-direction:column; padding:24px; }
 #ha-claims-slot { align-self:stretch; text-align:left; padding:24px 0 0; }
 .token-claim-amount { justify-content:flex-start; }
 .token-position { border-top:1px solid #ffffff0d; padding-top:20px; }
 .token-section-heading { flex-wrap:wrap; gap:16px; }
 .token-section-heading h2 { font-size:23px; }
 .token-fee-seal { gap:10px; }
 .token-fee-seal > b { font-size:28px; }
 .token-fee-seal > span { font-size:12px; }
 .token-fee-seal br { display:none; }
 .token-fee-seal strong { margin-left:4px; }
 .token-steps { grid-template-columns:1fr; padding:24px 20px; gap:24px; }
 .token-step { display:grid; grid-template-columns:112px minmax(0,1fr); align-items:center; gap:18px; }
 .token-step-art { aspect-ratio:1; }
 .token-step-copy { padding-top:0; }
 .token-step-copy h3 { font-size:16px; margin-bottom:8px; }
 .token-route-section { margin-inline:20px; padding:20px 16px; }
 .token-sources { gap:12px; }
 .token-source-currency { gap:6px; }
 .token-source-currency img { width:22px; height:22px; }
 .token-source-currency b { font-size:12px; }
 .token-flow-foot { padding-inline:20px; }
 .token-vault-section { margin-top:40px; }
 .token-vault-heading { margin-bottom:16px; }
 .token-totals { grid-template-columns:1fr; gap:12px; }
 .token-totals > div { display:grid; grid-template-columns:1fr auto; gap:10px; }
 .token-totals dt { margin:0; align-self:center; font-size:13px; }
 .token-totals dd { font-size:22px; }
 .token-totals dd + dd { grid-column:1 / -1; margin:0; }
 .token-faq { padding:40px 4px 24px; }
 .token-footer { padding-inline:4px; }
}
@container tok (max-width:350px) {
 .token-hero-ctas .ha-btn { padding-inline:12px; }
 .token-wallet { padding:20px; }
 #token-rewards-title { font-size:22px; }
 .token-section-heading { padding-inline:18px; }
 .token-steps { padding-inline:18px; }
 .token-step { grid-template-columns:88px minmax(0,1fr); gap:16px; }
 .token-step-copy h3 { font-size:15px; }
 .token-route-section { margin-inline:14px; padding:18px 14px; }
 .token-totals > div { grid-template-columns:1fr; }
}
.token-dialog-copy { font-size:14px; color:var(--txt-dim); line-height:1.8; }
.token-dialog-copy h3 { margin:24px 0 8px; color:var(--txt); font:700 15px/1.5 var(--font); }
.token-dialog-copy p { margin:0 0 14px; }
.token-dialog-copy dl { display:grid; gap:14px; margin:24px 0; }
.token-dialog-copy dl > div { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px 16px; border-bottom:1px solid var(--line); padding-bottom:14px; }
.token-dialog-copy dd { margin:0; color:var(--gold); text-align:right; }
.token-reward-list { display:grid; gap:10px; max-height:min(56vh,480px); overflow:auto; padding:4px; margin:20px -4px 0; scrollbar-gutter:stable; }
.token-reward-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 16px; align-items:center; background:var(--panel-2); border:1px solid var(--line); padding:16px; border-radius:8px; }
.token-reward-row b { font:700 15px var(--num); color:var(--gold); }
.token-reward-row small { display:block; color:var(--txt-dim); font-size:12px; line-height:1.7; margin-top:8px; overflow-wrap:anywhere; }
.token-reward-row .ha-btn { padding:10px 16px; min-height:44px; }