/* Tactile artwork with restrained layout and surfaces. */
.navigation-art.balanced-art{display:block;background-image:url('assets/navigation-art.png');background-size:300% 300%;background-position:var(--tile-x) var(--tile-y);background-repeat:no-repeat;mask-image:radial-gradient(ellipse,#000 35%,transparent 76%);border:0;box-shadow:none;border-radius:0}
.category.premium-category{padding:10px 8px 19px;border-color:#303b4c;background:linear-gradient(145deg,#141b27,#0b111a);box-shadow:inset 0 1px 0 #ffffff07;border-radius:14px}
.premium-category>.balanced-art{width:104px;margin:0 auto 4px;filter:saturate(.83)}
.category.premium-category strong{font-size:12px;line-height:1.6;font-weight:600}
.category.premium-category:hover,.category.premium-category.active{background:linear-gradient(145deg,#192332,#0c131e);box-shadow:inset 0 1px 0 #ffffff0b;border-color:var(--accent)}
.mega-grid .balanced-art{width:62px;margin:0 7px 0 0;filter:saturate(.83)}
#menu-panel .mega-grid button{padding:8px 23px 8px 6px;gap:7px;border:1px solid #ffffff08;background:#ffffff02}
.premium-steps article{grid-template-columns:1fr 96px;padding:23px;gap:0;background:linear-gradient(140deg,#141c29,#0c121b);border-color:#303b4d;box-shadow:inset 0 1px 0 #ffffff06}
.step-top{min-height:80px}.step-art.balanced-art{position:static;width:96px;margin:-8px 0 -8px;filter:saturate(.8)}
.step-copy{padding-top:17px}.premium-steps h3{font-size:18px}.step-number{font-size:27px;font-weight:500;color:#f0526e}
@media(max-width:1100px){.premium-category>.balanced-art{width:87px}.category.premium-category strong{font-size:11px}.premium-steps article{grid-template-columns:1fr 82px;padding:20px}.step-art.balanced-art{width:82px}.premium-steps h3{font-size:17px}}
@media(max-width:760px){.category.premium-category{padding:8px 5px 14px}.premium-category>.balanced-art{width:78px;margin-bottom:3px}.category.premium-category strong{font-size:10px}.mega-grid .balanced-art{width:48px;margin-right:3px}.premium-steps article{grid-template-columns:30px 1fr 73px;gap:12px;padding:18px}.step-top{min-height:0}.step-art.balanced-art{width:73px;grid-column:3;grid-row:1;margin:0}.step-copy{padding:0;grid-column:2;grid-row:1}.step-number{font-size:22px}.premium-steps h3{font-size:15px}}
@media(max-width:380px){.premium-category>.balanced-art{width:67px}.category.premium-category strong{font-size:9px}.mega-grid .balanced-art{width:40px}.premium-steps article{grid-template-columns:25px 1fr 58px;gap:8px;padding:16px}.step-art.balanced-art{width:58px}.premium-steps h3{font-size:14px}}

.navigation-art.balanced-art{background-image:url("assets/navigation-soft.png")}.premium-category>.balanced-art,.mega-grid .balanced-art,.step-art.balanced-art{filter:none}.provider-logo{display:block;width:26px;height:26px;object-fit:contain;flex-shrink:0;margin-right:7px}.login-providers button{border-radius:12px;min-height:54px}.login-providers button>span:last-child{margin-left:auto}#login-title{font-weight:600}

/* Gently darken the soft illustration family without affecting brand login icons. */
.premium-category>.balanced-art,.mega-grid .balanced-art,.step-art.balanced-art{filter:brightness(.82) saturate(.72)}

/* Dark reference materials with gently rounded silhouettes. */
.navigation-art.balanced-art{background-image:url("assets/navigation-rounded-dark.png")}
.premium-category>.balanced-art,.mega-grid .balanced-art,.step-art.balanced-art{filter:saturate(.9) brightness(.95)}

/* Give the secondary hero action a little more breathing room. */
.hero-buttons{gap:26px}
@media(max-width:760px){.hero-buttons{gap:16px}}
@media(max-width:380px){.hero-buttons{gap:12px}}

.payment-method{margin:20px 0;border:1px solid #3e3c37;border-radius:12px;background:#151a20;padding:15px}.payment-method-heading{display:flex;align-items:center;gap:10px}.wallet-mark{display:grid;place-items:center;width:35px;height:35px;background:#f58a24;border-radius:10px;color:white;font-size:19px;font-weight:bold}.payment-method-heading>div{display:flex;flex-direction:column;gap:2px}.payment-method strong{font-size:14px}.payment-method small{font-size:10px;color:#a2afc3}.payment-pending{margin-left:auto;font-size:10px;border:1px solid #63503c;border-radius:20px;padding:4px 8px;color:#d5b084}.payment-method p{font-size:11px!important;color:#97a6bd;margin:12px 0 0;line-height:1.8}
