.evolved .hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:center;padding-top:36px;padding-bottom:54px}
@media(max-width:1000px) and (min-width:741px){.evolved .hero{gap:32px;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
@media(min-width:741px) and (max-width:1100px){.evolved .hero h1{font-size:clamp(44px,4.8vw,53px)}.evolved .herocopy>p{font-size:16px}}
@media(max-width:740px){.evolved .hero{display:block;padding-top:28px;padding-bottom:36px}}
#dialog button:focus-visible{outline:2px solid #D6F436;outline-offset:4px}
#demo-provider{display:block;appearance:none;-webkit-appearance:none;width:100%;min-height:50px;padding:12px 48px 12px 16px;margin:8px 0 20px;background-color:#18181A;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m5 7.5 5 5 5-5' stroke='%23D1D1CB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:20px 20px;color:#FAF8F3;color-scheme:dark;border:1px solid #79797B;border-radius:8px;font:inherit;cursor:pointer}
#dialog .demo-key{letter-spacing:2px;margin-top:8px}
.demo-provider-picker{position:relative;margin:8px 0 20px}
.demo-provider-picker #demo-provider{margin:0;text-align:left;font-size:16px;font-weight:400;line-height:1.5}
#provider-options{position:absolute;z-index:2;top:calc(100% + 8px);left:0;right:0;padding:6px;border:1px solid #626265;border-radius:10px;background:#242426;box-shadow:0 12px 28px #0006}
#provider-options[hidden]{display:none}
#provider-options [role=option]{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:6px;background:transparent;color:#FAF8F3;font:400 16px/1.5 Manrope,Arial,sans-serif;text-align:left}
#provider-options [role=option][aria-selected=true]{color:#D6F436;background:#303326}
#provider-options [role=option]:hover,#provider-options [role=option]:focus{background:#3A3A3D;outline:2px solid #D6F436;outline-offset:-2px}
#provider-options [role=option]>span{visibility:hidden;color:#D6F436;font-size:16px;font-weight:700}
#provider-options [aria-selected=true]>span{visibility:visible}

/* Choice labels and descriptions need their own spacing and text weight. */
.evolved #dialog .connection-mode{padding:22px 24px;gap:18px;align-items:center;margin-top:14px}
#dialog .connection-mode>span{min-width:0;flex:1}
#dialog .connection-mode img{width:28px;height:28px}
#dialog .connection-mode strong{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;line-height:1.5;font-weight:700}
#dialog .connection-mode strong small{font-size:13px;line-height:1.5;margin:0;font-weight:400}
#dialog .connection-mode span>span{font-size:14px;line-height:1.65;font-weight:400;margin-top:8px}
#provider-options{padding:8px}
#provider-options [role=option]{min-height:52px;padding:14px 16px}
#provider-options [role=option]+[role=option]{margin-top:4px}
@media(max-width:480px){.evolved #dialog .connection-mode{padding:20px;gap:16px}#dialog .connection-mode strong{gap:4px 8px}}

/* App connection illustration. */
.hero-map{width:100%;max-width:410px;margin:0;justify-self:center}
.hero-map-app{border:1px solid #59595B;border-radius:16px;background:#242426;overflow:hidden}
.hero-map-bar{display:flex;align-items:center;gap:10px;padding:18px 24px;border-bottom:1px solid #414144;color:#D5D5CE;font-size:14px}
.hero-map-bar svg{width:22px;height:22px}
.hero-map-button{padding:32px}
.hero-map-button .connect-button{width:100%}
.hero-map-button p,.hero-map figcaption{text-align:center;font-size:12px;color:#B9B9B3;margin-top:12px;line-height:1.6}
.hero-map-stem{width:3px;height:32px;background:#73775B;margin:auto}
.hero-map-accounts{display:flex;justify-content:space-between;gap:8px}
.hero-map-accounts>span{display:grid;place-items:center;width:52px;height:52px;border:1px solid #535356;border-radius:50%;background:#242426}
.hero-map-accounts img{filter:brightness(0) invert(1);width:28px;height:28px;object-fit:contain}
@media(max-width:740px){.hero-map{margin:36px auto 0}.hero-map-button{padding:26px 24px}}
@media(max-width:380px){.hero-map-button{padding:24px 18px}.hero-map-accounts{gap:6px}.hero-map-accounts>span{width:40px;height:40px}.hero-map-accounts img{width:23px;height:23px}}

/* The hero artwork is decorative; the adjacent copy carries its meaning. */
.hero-art{width:100%;margin:0;min-width:0;align-self:center}
.hero-art img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;mask-image:radial-gradient(ellipse 64% 64% at 50% 50%,#000 58%,transparent 79%)}
@media(max-width:740px){.hero-art{max-width:480px;margin:10px auto 0}}