/* Paper 499N-0, with fee block removed and paired account CTAs. */
.hero-swap{display:none}
@media(min-width:901px){
 .home-hero{container-type:inline-size}
 .hero-swap{display:flex;flex-direction:column;gap:16px;flex:none;width:calc((100cqw + var(--gap)) * 5 / 12);max-width:100%;margin-top:32px;text-align:left;color:var(--umbra-gray-5);font-weight:400;letter-spacing:-.02em}
 .hero-swap-tabs{display:flex;height:48px;padding:4px;border-radius:16px;background:#f7f7f7;box-shadow:inset 0 0 0 1px #f0f0f0,inset 0 1px 1px #ffffffcc,0 2px 4px -2px #0000000a}
 .hero-swap-tabs span{display:flex;align-items:center;justify-content:center;flex:1;border-radius:12px;font-size:16px;line-height:20px}
 .hero-swap-tabs .is-active{background:linear-gradient(#fff,#fdfdfd);box-shadow:inset 0 0 0 1px #44444405,0 1px 3px #0000000a}
 .hero-swap-body{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:relative;display:flex;flex-direction:column;gap:8px;padding:8px;border-radius:24px;background:#ffffff80;box-shadow:0 0 0 1px #f0f0f080}
 .hero-swap-asset{height:144px;position:relative;flex:none;border-radius:16px;background:color-mix(in srgb,var(--umbra-gray-1) 50%,transparent);box-shadow:inset 0 0 0 1px #f0f0f080}
 .hero-swap-label{position:absolute;top:20px;left:24px;font-size:14px;line-height:20px}
 .hero-swap-amount{position:absolute;top:48px;left:24px;font-size:42px;line-height:48px;font-weight:450;color:var(--umbra-gray-4)}
 .hero-swap-percentages{position:absolute;right:16px;top:16px;display:flex;gap:4px;color:var(--umbra-gray-4);font-size:12px;line-height:16px}
 .hero-swap-percentages span{padding:6px 8px;border-radius:8px;background:#f0f0f080;box-shadow:0 0 0 1px #0100ff0a}
 .hero-swap-token{position:absolute;right:8px;top:52px;display:flex;align-items:center;gap:4px;height:40px;padding:6px 16px 6px 10px;border-radius:20px;background:linear-gradient(#fff,#fafafa 60%,#fff);box-shadow:inset 0 0 0 1px #f0f0f0,inset 0 1px 1px #ffffffe6,0 2px 4px -2px #0000000a;font-size:14px;line-height:20px}
 .hero-swap-token svg{flex:none}
 .hero-swap-balance{position:absolute;left:24px;right:24px;top:108px;display:flex;justify-content:space-between;font-size:12px;line-height:16px;color:var(--umbra-gray-4)}
 .hero-swap-direction{position:absolute;top:134px;left:calc(50% - 22px);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid #f0f0f080;outline:6px solid white;background:#f8f9f9}
 .hero-swap-details{padding:0 24px;border-radius:16px;background:#f7f7f780;box-shadow:inset 0 0 0 1px #f0f0f080}
 .hero-swap-detail{display:flex;align-items:center;justify-content:space-between;height:48px;font-size:14px;line-height:20px}
 .hero-swap-detail>span:last-child{font-size:12px;line-height:16px}
 .hero-swap-slippage{display:flex;align-items:center;gap:8px;padding:2px 8px 2px 2px;height:28px;border-radius:14px;background:#0100ff0a}
 .hero-swap-slippage span{padding:4px 8px;border-radius:12px;background:white;color:var(--umbra-blue-3)}
 .hero-swap-actions{display:flex;gap:8px}
 .hero-swap-actions button{flex:1;height:48px;padding:0 24px;border-radius:999px;border:.5px solid #d8d8d9;background-color:var(--umbra-gray-2);background-image:linear-gradient(#00000005,transparent 60%,#00000001);box-shadow:inset 0 .25px 1px #ffffffcc,inset 0 -1px 1px #ffffffa6,0 3px 6px -2px #0000000a;color:var(--umbra-gray-5);font:450 16px/20px var(--font-family);letter-spacing:-.02em}
 .hero-swap-actions .hero-swap-create{background-color:var(--umbra-blue-3);border-color:#0100db;box-shadow:inset 0 .5px 0 #ffffff59,inset 0 -1px 1px #00008040,0 3px 6px -2px #0100661a;color:#fff;text-shadow:0 1px .75px #ffffff40}
}
@media(min-width:901px){
 .home-hero .home-content.hero-dome{min-height:964px}
 .hero-dome-dots{height:auto;aspect-ratio:4/3}
}

/* Reveal the entire card alongside the subtitle using the same easing. */
@media(min-width:901px){
 .hero-swap{opacity:1;transform:translateY(0);transition:opacity 600ms var(--stagger-ease),transform 600ms var(--stagger-ease)}
 :root[data-hero-load]:not([data-hero-load="4"]):not([data-hero-load="5"]) .hero-swap{opacity:0;transform:translateY(6px)}
 :root[data-hero-load="pending"] .hero-swap,
 :root[data-hero-load="0"] .hero-swap,
 .hero-motion-settled .hero-swap{transition:none}
}
@media(min-width:901px) and (prefers-reduced-motion:reduce){
 .hero-swap{transition:none}
}

/* Dark glass surfaces derived from the existing grayscale palette. */
@media(min-width:901px){
 [data-theme="dark"] .hero-swap{--swap-dark-surface:color-mix(in srgb,var(--umbra-gray-5) 38%,var(--umbra-gray-6));color:var(--umbra-gray-2);font-weight:300}
 [data-theme="dark"] .hero-swap-tabs{background:var(--swap-dark-surface);box-shadow:inset 0 0 0 1px #ffffff0d,inset 0 1px 1px #ffffff08,0 2px 4px -2px #00000040;color:var(--umbra-gray-4)}
 [data-theme="dark"] .hero-swap-tabs .is-active{background:color-mix(in srgb,var(--umbra-gray-5) 70%,var(--umbra-gray-6));color:var(--umbra-gray-0);box-shadow:inset 0 0 0 1px #ffffff0d,0 1px 3px #00000040}
 [data-theme="dark"] .hero-swap-body{background:color-mix(in srgb,var(--swap-dark-surface) 80%,transparent);box-shadow:0 0 0 1px #ffffff0d}
 [data-theme="dark"] .hero-swap-asset{background:color-mix(in srgb,var(--umbra-gray-5) 26%,transparent);box-shadow:inset 0 0 0 1px #ffffff08}
 [data-theme="dark"] .hero-swap-amount{font-weight:400}
 [data-theme="dark"] .hero-swap-percentages span{background:#ffffff05;box-shadow:0 0 0 1px #ffffff08}
 [data-theme="dark"] .hero-swap-token{background:linear-gradient(#ffffff08,transparent),var(--swap-dark-surface);box-shadow:inset 0 0 0 1px #ffffff0d,inset 0 1px 1px #ffffff0a,0 2px 4px -2px #00000040}
 [data-theme="dark"] .hero-swap-direction{background:var(--swap-dark-surface);border-color:#ffffff0d;outline-color:var(--swap-dark-surface)}
 [data-theme="dark"] .hero-swap-details{background:#ffffff03;box-shadow:inset 0 0 0 1px #ffffff08}
 [data-theme="dark"] .hero-swap-slippage{background:#ffffff05}
 [data-theme="dark"] .hero-swap-slippage span{background:var(--swap-dark-surface);color:var(--umbra-blue-1)}
 [data-theme="dark"] .hero-swap-actions button{font-weight:400}
 [data-theme="dark"] .hero-swap-actions button:not(.hero-swap-create){background-color:var(--umbra-gray-5);background-image:linear-gradient(#ffffff05,transparent 60%,#00000008);border-color:#ffffff14;box-shadow:inset 0 .5px 1px #ffffff14,inset 0 -1px 1px #00000020,0 3px 6px -2px #00000040;color:var(--umbra-gray-2)}
 [data-theme="dark"] .hero-swap-actions button:focus-visible{outline-color:var(--umbra-gray-0)}
}

/* Compact desktop controls preserve room for their labels. */
@media(min-width:901px) and (max-width:1100px){
 .hero-swap-actions button{padding-inline:12px}
 .hero-swap-percentages span{padding-inline:4px}
}
/* Paper 419-0: empty swap state, using the shared Book 450 typography. */
@media(min-width:901px){
 .hero-swap{width:min(528px,100%);font-weight:450;letter-spacing:-.01em;color:#636a6b}
 .hero-swap-tabs{background:rgb(241 242 242 / 50%);border:.25px solid rgb(234 235 235 / 50%);box-shadow:none}
 .hero-swap-tabs>span{height:40px;color:#636a6b}
 .hero-swap-tabs .is-active{gap:6px;color:#000829;background:white;border:1px solid white;box-shadow:0 2px 3px 1px #00082909}
 .hero-swap-tabs svg{width:18px;height:18px;flex:none}
 .hero-swap-body{padding:8px 7px;border:1px solid #f1f2f2;box-shadow:none;background:rgb(255 255 255 / 50%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
 .hero-swap-asset{background:rgb(241 242 242 / 50%);box-shadow:inset 0 0 0 1px rgb(234 235 235 / 50%)}
 .hero-swap-amount{display:flex;align-items:center;height:48px;line-height:42px;color:#6c7273bf}
 .hero-swap-token{align-items:center;padding:0 12px 0 16px;border:1px solid white;background:white;box-shadow:0 5px 6px #00082904;color:#000829;font:450 14px/20px var(--font-family);letter-spacing:-.01em;cursor:pointer}
 .hero-swap-token svg{color:#636a6b}
 .hero-swap-token-examples{position:absolute;right:24px;top:20px;display:flex;gap:4px}
 .hero-swap-token-examples img{width:20px;height:20px;border-radius:10px}
 .hero-swap-balance{font-size:14px;color:#6c7273bf}
 .hero-swap-value{display:flex;align-items:center;gap:4px}
 .hero-swap-details{background:rgb(247 247 247 / 50%);box-shadow:inset 0 0 0 1px rgb(234 235 235 / 50%)}
 .hero-swap-placeholder{display:block;width:40px;height:20px;flex:none;border-radius:999px;background:#0008290f}
 .hero-swap-slippage{margin-right:-8px;background:rgb(1 0 255 / 3.9%);color:#6c7273bf}
 .hero-swap-slippage span{color:#5a59ff}
 .hero-swap-slippage i{width:1px;height:14px;background:#0100ff;margin-right:-6px}
 .hero-swap-totals .hero-swap-detail+.hero-swap-detail{border-top:1px solid rgb(234 235 235 / 50%)}
 .hero-swap-fee{display:flex;align-items:center;margin-right:-2px}
 .hero-swap-direction{background:rgb(241 242 242 / 50%);border-color:rgb(234 235 235 / 50%);color:#000829;backdrop-filter:blur(4px)}
 .hero-swap-actions button{background-color:#f1f2f2;color:#636a6b;letter-spacing:-.01em;cursor:pointer}
 .hero-swap :is(button,a):focus-visible{outline:2px solid #0100ff;outline-offset:3px}
}
/* Let the taller reference card determine hero height instead of clipping its action. */
@media(min-width:901px){.home-hero .home-content.hero-dome{aspect-ratio:auto;height:auto}}

/* Paper F1C-0 primary action beneath the two asset panels. */
@media(min-width:901px){
 .hero-swap-actions button{
  background-color:#0100ff;
  background-image:linear-gradient(180deg in oklab,rgb(0 8 41 / 2%) 0%,rgb(0 8 41 / 0%) 60%,rgb(0 8 41 / .4%) 100%);
  border-color:#0100db;color:#fff;
  box-shadow:inset 0 .5px 0 rgb(255 255 255 / 34.9%),inset 0 -1px 1px rgb(13 0 217 / 25%),0 3px 6px -2px rgb(13 0 217 / 10.2%);
  text-shadow:0 1.5px 2px #5a59ff;
 }
}