/* Matches the existing Darkita system font and YELO's quiet original-logo layout. */
.site-header{justify-content:flex-end}
#wallet-dialog{border-radius:12px;border-color:#2b2b2b;box-shadow:0 20px 70px rgba(0,0,0,.45)}
.hero{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr);grid-template-areas:"copy art" "checker art";column-gap:clamp(48px,6vw,88px);row-gap:28px;padding:64px 0 66px;align-items:start}
.hero-copy{grid-area:copy}
.hero-logo{width:320px;max-width:100%;height:auto}
.hero h1{font-size:clamp(44px,4.7vw,64px);line-height:1.08;letter-spacing:-.035em;font-weight:400;max-width:none}
.hero-description{font-size:15px;line-height:1.8;color:#999;margin-top:22px;max-width:350px}
.hero .checker{grid-area:checker;padding:0;border:0;width:100%;max-width:420px}
.hero .checker>.primary{margin:0;font-family:var(--sans);font-size:14px;font-weight:450;border-bottom-color:#777}
.hero .checker>.primary:hover{border-color:var(--yellow)}
.hero .primary span{color:#aaa}
.hero .or{margin:18px 0;font-size:11px}
.hero .or::before,.hero .or::after{display:none}
.hero .address-field{border-color:#333}
.hero .address-field:focus-within{border-color:var(--yellow)}
.hero .address-field input{font-size:16px}
#lookup-help{font-family:var(--sans);font-size:11px;line-height:1.7;margin-top:14px;max-width:370px}
.hero-art{grid-area:art;min-width:0;align-self:center;margin:0}
.hero-mascot-window{position:relative;aspect-ratio:1290/820;overflow:hidden}
/* Only empty black margins are excluded; the full character remains visible. */
.hero-mascot{position:absolute;left:0;top:-28.04878%;width:100%;max-width:none;height:auto}
.steps{border-bottom:1px solid #222}
.steps li,.steps li.active{border-bottom:0;padding:17px 0;color:#888}
.steps li.active{color:#fff}
.steps li.active>span:last-child{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px}
.steps li.active .step-number{color:var(--yellow)}
.release-note{font-size:11px;padding-top:18px}
.benefits{padding:65px 0 60px;margin-top:0}
.benefits h2,.faq h2{font-size:28px;font-weight:400;letter-spacing:-.7px}
.benefits-grid{gap:65px;margin-top:36px}
.collection-logo{height:72px;margin-bottom:22px}
.benefit h3{font-size:20px;font-weight:400;margin:0 0 13px}
.benefit>p:last-child{font-size:13px;line-height:1.8;max-width:290px}
.logo-window{display:block;position:relative;overflow:hidden;flex-shrink:0}
.logo-window img{display:block;position:absolute;max-width:none;max-height:none;height:auto}
.yelo-window{width:106px;aspect-ratio:777/482}
.collection-logo .yelo-window img{width:161.38996%;max-height:none;left:-32.30373%;top:-84.85477%;object-fit:fill}
.faq{padding:64px 0 44px;grid-template-columns:1fr 1.5fr;gap:70px}
.faq h2{margin:0}
.faq-brand-detail{display:block;width:170px;height:280px;object-fit:contain;margin-top:12px}
.faq summary{font-size:13px;font-weight:400}
.universe-grid{display:flex;align-items:flex-end;justify-content:space-between;gap:48px}
.footer-powered{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.footer-label{margin:0;color:#888;font-size:11px;line-height:1.4;letter-spacing:.02em}
.universe-brand{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
.universe-brand:hover{opacity:.8}
.sparkle-brand{gap:14px}
.sparkle-wordmark{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:25px;font-weight:400;line-height:1.15;letter-spacing:-.025em;white-space:nowrap;color:#fff}
.sparkle-window{width:50px;aspect-ratio:408/394}
.sparkle-window img{width:156.86275%;left:-28.43137%;top:-27.66497%}
.trading-window{width:260px;aspect-ratio:449/81}
.trading-window img{width:140.31180%;left:-19.15367%;top:-92.59259%}
.site-footer{display:block;min-height:0;padding:36px 0 26px;border-top:1px solid #222;text-align:left;color:#777;font-size:10px;letter-spacing:.02em}
.site-footer a{margin:0}
.footer-meta{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:34px}
.footer-meta p{margin:0;line-height:1.7}
.footer-return{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:#aaa;font-size:11px;white-space:nowrap}
@media(max-width:1100px){
 .hero{column-gap:40px;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);padding-top:48px}
 .hero h1{font-size:58px}
 .benefits-grid{gap:38px}
}
@media(max-width:850px){
 .hero{column-gap:30px;padding-top:38px}
 .hero h1{font-size:48px}
 .hero-description{font-size:14px}
 .faq{gap:35px}
 .benefit h3{font-size:19px}
}
@media(max-width:620px){
 .hero-logo{width:230px}
 .hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "art" "checker";row-gap:20px;padding:30px 0 36px}
 .hero h1{font-size:clamp(40px,10.5vw,52px)}
 .hero-description{margin-top:17px;max-width:310px;font-size:14px;line-height:1.7}
 .hero-art{width:100%;max-width:346px;justify-self:center}

 .hero .checker{max-width:none;padding:0;border:0}
 .hero .checker>.primary{font-size:14px}
 .hero .or{margin:14px 0}
 #lookup-help{font-size:10px}
 .steps li,.steps li.active{padding:14px 5px 16px 0}
 .steps li.active>span:last-child{text-underline-offset:6px}
 .release-note{padding-top:16px}
 .benefits{padding:44px 0 42px}
 .benefits h2,.faq h2{font-size:26px}
 .benefits-grid{grid-template-columns:1fr;gap:30px;margin-top:30px}
 .benefit{padding-left:108px}
 .benefit h3{font-size:18px;margin:0 0 9px}
 .benefit>p:last-child{font-size:12px;max-width:none}
 .collection-logo{height:60px;margin:0}
 .yelo-window{width:74px}
 .faq{grid-template-columns:1fr;gap:15px;padding:38px 0 34px}
 .faq-intro{display:flex;align-items:center;justify-content:space-between;gap:20px}
 .faq-intro h2{max-width:205px}
 .faq-brand-detail{width:76px;height:126px;margin:0;flex-shrink:0}
 .faq summary{font-size:12px}
 .universe-grid{gap:32px;flex-direction:column;align-items:center}
 .footer-powered{align-items:center;gap:10px}
 .footer-meta{flex-direction:column;gap:5px;margin-top:25px;text-align:center}
 .sparkle-wordmark{font-size:24px}
 .sparkle-window{width:42px}
 .trading-window{width:220px}
 .site-footer{padding:30px 0 max(20px,env(safe-area-inset-bottom));font-size:10px}
}
@media(max-width:360px){
 .hero-logo{width:210px}
 .hero h1{font-size:40px}
 .hero-description{font-size:13px}
 .benefit{padding-left:91px}
 .yelo-window{width:65px}
 .universe-grid{gap:28px}
 .sparkle-wordmark{font-size:22px}
 .sparkle-window{width:38px}
 .trading-window{width:195px}
 .faq-intro h2{font-size:24px}
}